[backend] Rapports : résumé dynamique des paramètres choisis par le producteur

backend/controllers/ReportController.php

                     'distributions' => []
                 ] ;
             }
-            $distribution->date = strftime('%A %d %B', strtotime($distribution->date)) ;
+            $distribution->date = strftime('%A %d %B %Y', strtotime($distribution->date)) ;
             $distributionsByMonthArray[$month]['distributions'][] = $distribution ;
         }
         

backend/views/report/index.php

 
 ?>
 <div id="app-report-index">
-    <div class="col-md-6">
+    <div id="parameters" class="col-md-6">
         <div id="nav-sections-report">
             <a v-for="section in sections" :class="'btn-section btn '+(currentSection == section.id ? 'btn-primary' : 'btn-default')" @click="changeSection(section)">{{ section.name }}<span v-if="currentSection == section.id"> <span class="glyphicon glyphicon-triangle-bottom"></span></span></a>
         </div>
                 <div class="content-max-height">
                     <ul id="list-users">
                         <li v-for="user in usersArray" v-if="!termSearchUser.length || (termSearchUser.length && (user.lastname.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 || user.name.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 ))">
-                            <input type="checkbox" :id="'user_'+user.user_id" /> 
+                            <input type="checkbox" :id="'user_'+user.user_id" v-model="user.checked" /> 
                             <label :for="'user_'+user.user_id" v-html="user.lastname+' '+user.name"></label>
                         </li>
                     </ul>
                 <div class="content-max-height">
                     <ul class="list" id="list-points-sale">
                         <li v-for="pointSale in pointsSaleArray">
-                            <input type="checkbox" :id="'pointsale_'+pointSale.id" /> 
+                            <input type="checkbox" :id="'pointsale_'+pointSale.id" v-model="pointSale.checked" /> 
                             <label :for="'pointsale_'+pointSale.id" v-html="pointSale.name"></label>
                         </li>
                     </ul>
                         <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" />
+                                <input type="checkbox" :id="'distribution_'+distribution.id" v-model="distribution.checked" />
                                 <label :for="'distribution_'+distribution.id">{{ distribution.date }}</label>
                             </li>
                         </ul>
     <div class="col-md-6">
         <div id="report" class="panel panel-default">
             <div class="panel-heading">
-                Rapport
+                <h2 class="panel-title">Rapport</h2>
             </div>
             <div class="panel-body">
                 <div id="summary">
-                    Résumé
+                    <div class="alert alert-info" v-if="!countUsers() && !countPointsSale() && !countDistributions()">
+                        Veuillez sélectionner un utilisateur et/ou un point de vente et/ou une distribution.
+                    </div>
+                    <div class="section" v-if="countUsers() > 0">
+                        <h3>{{ countUsers() }} Utilisateurs</h3>
+                        <template v-for="user in usersArray" v-if="user.checked">
+                            <span v-html="user.name+' '+user.lastname"></span><span class="comma">, </span>
+                        </template>
+                    </div>
+                    <div class="section" v-if="countPointsSale() > 0">
+                        <h3>{{ countPointsSale() }} Points de vente</h3>
+                        <template v-for="pointSale in pointsSaleArray" v-if="pointSale.checked">
+                            <span v-html="pointSale.name"></span><span class="comma">, </span>
+                        </template>
+                    </div>
+                    <div class="section" v-if="countDistributions() > 0">
+                        <h3>{{ countDistributions() }} Distributions</h3>
+                        <template v-for="distributionsMonth in distributionsByMonthArray">
+                            <template v-for="distribution in distributionsMonth.distributions" v-if="distribution.checked">
+                                <span v-html="distribution.date"></span><span class="comma">, </span>
+                            </template>
+                        </template>
+                    </div>
                 </div>
-                <div id="report">
+                <div id="report" v-if="countUsers() || countPointsSale() || countDistributions()">
                     <a href="#" class="btn btn-primary">Générer</a>
                 </div>
             </div>

backend/web/css/screen.css

 pris connaissance de la licence CeCILL, et que vous en avez accepté les
 termes.
 */
-/* line 40, ../sass/report/_index.scss */
-.report-index #nav-sections-report .btn-section {
+/* line 41, ../sass/report/_index.scss */
+.report-index #parameters #nav-sections-report .btn-section {
   margin-right: 5px;
 }
-/* line 45, ../sass/report/_index.scss */
-.report-index .section {
+/* line 46, ../sass/report/_index.scss */
+.report-index #parameters .section {
   margin-top: 10px;
 }
-/* line 47, ../sass/report/_index.scss */
-.report-index .section .content-max-height {
+/* line 48, ../sass/report/_index.scss */
+.report-index #parameters .section .content-max-height {
   max-height: 400px;
   overflow-y: scroll;
 }
-/* line 51, ../sass/report/_index.scss */
-.report-index .section .content-max-height ul {
+/* line 52, ../sass/report/_index.scss */
+.report-index #parameters .section .content-max-height ul {
   list-style-type: none;
   margin-left: 0px;
   padding-left: 5px;
 }
-/* line 57, ../sass/report/_index.scss */
-.report-index .section .content-max-height ul li input {
+/* line 58, ../sass/report/_index.scss */
+.report-index #parameters .section .content-max-height ul li input {
   position: relative;
   top: 2px;
 }
-/* line 61, ../sass/report/_index.scss */
-.report-index .section .content-max-height ul li label {
+/* line 62, ../sass/report/_index.scss */
+.report-index #parameters .section .content-max-height ul li label {
   font-weight: normal;
   margin-bottom: 0px;
 }
-/* line 70, ../sass/report/_index.scss */
-.report-index #section-users #wrapper-search-user {
+/* line 71, ../sass/report/_index.scss */
+.report-index #parameters #section-users #wrapper-search-user {
   margin-bottom: 10px;
   position: relative;
 }
-/* line 73, ../sass/report/_index.scss */
-.report-index #section-users #wrapper-search-user .glyphicon-search {
+/* line 74, ../sass/report/_index.scss */
+.report-index #parameters #section-users #wrapper-search-user .glyphicon-search {
   position: absolute;
   top: 10px;
   right: 16px;
   color: gray;
 }
-/* line 85, ../sass/report/_index.scss */
-.report-index #section-distributions #wrapper-select-year {
+/* line 86, ../sass/report/_index.scss */
+.report-index #parameters #section-distributions #wrapper-select-year {
   margin-bottom: 10px;
 }
-/* line 89, ../sass/report/_index.scss */
-.report-index #section-distributions .distribution-month {
+/* line 90, ../sass/report/_index.scss */
+.report-index #parameters #section-distributions .distribution-month {
   margin-bottom: 10px;
 }
-/* line 91, ../sass/report/_index.scss */
-.report-index #section-distributions .distribution-month .link-month-distribution {
+/* line 92, ../sass/report/_index.scss */
+.report-index #parameters #section-distributions .distribution-month .link-month-distribution {
   display: block;
   text-transform: capitalize;
   text-align: left;
 }
-/* line 96, ../sass/report/_index.scss */
-.report-index #section-distributions .distribution-month .link-month-distribution .glyphicon {
+/* line 97, ../sass/report/_index.scss */
+.report-index #parameters #section-distributions .distribution-month .link-month-distribution .glyphicon {
   float: right;
 }
 /* line 105, ../sass/report/_index.scss */
 .report-index #report {
   margin-top: 43px;
 }
+/* line 107, ../sass/report/_index.scss */
+.report-index #report .section {
+  margin-bottom: 15px;
+}
+/* line 110, ../sass/report/_index.scss */
+.report-index #report .section h3 {
+  margin: 0px;
+  padding: 0px;
+  font-size: 16px;
+  text-transform: uppercase;
+}
+/* line 116, ../sass/report/_index.scss */
+.report-index #report .section .comma:last-child {
+  display: none;
+}

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

         },
         changeSection: function(section) {
             this.currentSection = section.id ;
-        }
+        }, 
+        countUsers: function() {
+            var count = 0 ;
+            for(var i = 0; i < this.usersArray.length; i++) {
+                if(this.usersArray[i].checked) {
+                    count ++ ;
+                }
+            }
+            return count ;
+        },
+        countPointsSale: function() {
+            var count = 0 ;
+            for(var i = 0; i < this.pointsSaleArray.length; i++) {
+                if(this.pointsSaleArray[i].checked) {
+                    count ++ ;
+                }
+            }
+            return count ;
+        },
+        countDistributions: function() {
+            var count = 0 ;
+            for(var i in this.distributionsByMonthArray) {
+                for(var j = 0; j < this.distributionsByMonthArray[i].distributions.length; j++) {
+                    if(this.distributionsByMonthArray[i].distributions[j].checked) {
+                        count ++ ;
+                    }
+                }
+            }
+            return count ;
+        },
     }
 });
 

backend/web/sass/report/_index.scss

 
 .report-index {
     
-    #nav-sections-report {
-        .btn-section {
-            margin-right: 5px ;
+    #parameters {
+        #nav-sections-report {
+            .btn-section {
+                margin-right: 5px ;
+            }
         }
-    }
-    
-    .section {
-        margin-top: 10px ;
-        .content-max-height {
-            max-height: 400px ;
-            overflow-y: scroll ;
-            
-            ul {
-                list-style-type: none ;
-                margin-left: 0px ;
-                padding-left: 5px ;
 
-                li {
-                    input {
-                        position: relative ;
-                        top: 2px ;
-                    }
-                    label {
-                        font-weight: normal;
-                        margin-bottom: 0px ;
+        .section {
+            margin-top: 10px ;
+            .content-max-height {
+                max-height: 400px ;
+                overflow-y: scroll ;
+
+                ul {
+                    list-style-type: none ;
+                    margin-left: 0px ;
+                    padding-left: 5px ;
+
+                    li {
+                        input {
+                            position: relative ;
+                            top: 2px ;
+                        }
+                        label {
+                            font-weight: normal;
+                            margin-bottom: 0px ;
+                        }
                     }
                 }
             }
         }
-    }
-    #section-users {
-        #wrapper-search-user {
-            margin-bottom: 10px ;
-            position: relative ;
-            .glyphicon-search {
-                position: absolute ;
-                top: 10px ;
-                right: 16px ;
-                color: gray ;
+        #section-users {
+            #wrapper-search-user {
+                margin-bottom: 10px ;
+                position: relative ;
+                .glyphicon-search {
+                    position: absolute ;
+                    top: 10px ;
+                    right: 16px ;
+                    color: gray ;
+                }
             }
         }
-    }
-    #section-points-sale {
+        #section-points-sale {
 
-    }
-    #section-distributions {
-        #wrapper-select-year {
-            margin-bottom: 10px ;
         }
-        
-        .distribution-month {
-            margin-bottom: 10px ;
-            .link-month-distribution {
-                display: block ;
-                text-transform: capitalize ;
-                text-align: left ;
-                
-                .glyphicon {
-                    float: right ;
+        #section-distributions {
+            #wrapper-select-year {
+                margin-bottom: 10px ;
+            }
+
+            .distribution-month {
+                margin-bottom: 10px ;
+                .link-month-distribution {
+                    display: block ;
+                    text-transform: capitalize ;
+                    text-align: left ;
+
+                    .glyphicon {
+                        float: right ;
+                    }
                 }
             }
         }
-        
-        
     }
     
     #report {
         margin-top: 43px ;
+        .section {
+            margin-bottom: 15px ;
+            
+            h3 {
+                margin: 0px ;
+                padding: 0px ;
+                font-size: 16px ;
+                text-transform: uppercase ;
+            }
+            .comma:last-child {
+                display: none ;
+            }
+        }
+        
     }
 }