[backend] Rapports : possibilité de sélectionner / déselectionner un mois entier en un seul clic

backend/views/report/index.php

@@ -87,14 +87,17 @@ $this->addBreadcrumb('Rapports') ;
                         </select>
                     </div>
                     <div class="content-max-height">
-                        <div class="distribution-month" v-for="distributionsMonth in distributionsByMonthArray" v-if="distributionsMonth.year == distributionYear && distributionsMonth.distributions.length > 0">
-                            <a class="btn btn-default link-month-distribution" @click="distributionsMonth.display = !distributionsMonth.display">{{ distributionsMonth.month }} <span class="glyphicon glyphicon-menu-down"></span></a>
-                            <ul v-if="distributionsMonth.display">
-                                <li v-for="distribution in distributionsMonth.distributions">
-                                    <input type="checkbox" :id="'distribution_'+distribution.id" v-model="distribution.checked" @change="reportChange" />
-                                    <label :for="'distribution_'+distribution.id">{{ distribution.date }}</label>
-                                </li>
-                            </ul>
+                        <div class="distribution-month" v-for="(distributionsMonth, month) in distributionsByMonthArray" v-if="distributionsMonth.year == distributionYear && distributionsMonth.distributions.length > 0">
+                            <a class="btn btn-default link-month-distribution" @click="distributionsMonth.display = !distributionsMonth.display">{{ distributionsMonth.month }} <span class="label label-success" v-if="countDistributionsByMonth(month)">{{ countDistributionsByMonth(month) }}</span> <span class="glyphicon glyphicon-menu-down"></span></a>
+                            <div class="the-distributions" v-if="distributionsMonth.display">
+                                <a @click="selectDistributions(month)" class="btn btn-default btn-xs btn-select"><span class="glyphicon glyphicon-check"></span> Tout <span v-if="countDistributionsByMonth(month)">déselectionner</span><span v-else>sélectionner</span></a> 
+                                <ul>
+                                    <li v-for="distribution in distributionsMonth.distributions">
+                                        <input type="checkbox" :id="'distribution_'+distribution.id" v-model="distribution.checked" @change="reportChange" />
+                                        <label :for="'distribution_'+distribution.id">{{ distribution.date }}</label>
+                                    </li>
+                                </ul>
+                            </div>
                         </div>
                     </div>
                 </div>

backend/web/css/screen.css

@@ -2147,18 +2147,22 @@ termes.
 .report-index #parameters #section-distributions .distribution-month .link-month-distribution .glyphicon {
   float: right;
 }
-/* line 114, ../sass/report/_index.scss */
+/* line 109, ../sass/report/_index.scss */
+.report-index #parameters #section-distributions .distribution-month .the-distributions {
+  margin-top: 8px;
+}
+/* line 121, ../sass/report/_index.scss */
 .report-index #report .section {
   margin-bottom: 15px;
 }
-/* line 117, ../sass/report/_index.scss */
+/* line 124, ../sass/report/_index.scss */
 .report-index #report .section h3 {
   margin: 0px;
   padding: 0px;
   font-size: 16px;
   text-transform: uppercase;
 }
-/* line 123, ../sass/report/_index.scss */
+/* line 130, ../sass/report/_index.scss */
 .report-index #report .section .comma:last-child {
   display: none;
 }

backend/web/js/vuejs/report-index.js

@@ -81,6 +81,21 @@ var app = new Vue({
             }
             return count ;
         },
+        countDistributionsByMonth: function(month) {
+            var count = 0 ;
+            for(var j = 0; j < this.distributionsByMonthArray[month].distributions.length; j++) {
+                if(this.distributionsByMonthArray[month].distributions[j].checked) {
+                    count ++ ;
+                }
+            }
+            return count ;
+        },
+        selectDistributions: function(month) {
+            var countDistributions = this.countDistributionsByMonth(month) ;
+            for(var j = 0; j < this.distributionsByMonthArray[month].distributions.length; j++) {
+                Vue.set(this.distributionsByMonthArray[month].distributions[j], 'checked', countDistributions ? false : true);
+            }
+        },
         generateReport: function() {
             var app = this ;
             app.showLoading = true ;

backend/web/sass/report/_index.scss

@@ -105,6 +105,13 @@ termes.
                         float: right ;
                     }
                 }
+                
+                .the-distributions {
+                    margin-top: 8px ;
+                    .btn-select {
+                        
+                    }
+                }
             }
         }
     }