Amélioration de l'étape Date

Intégration des commandes existantes dans le calendrier.
Mise en place d'un double calendrier pour une meilleure visibilité.
Empêcher la sélection des jours où il n'y a pas de distribution de prévue.

producer/controllers/OrderController.php

@@ -41,6 +41,7 @@ namespace producer\controllers;
 use common\models\ProductDistribution ;
 use common\models\User ;
 use common\models\Producer ;
+use common\models\Order ;
 use DateTime;
 
 class OrderController extends ProducerBaseController 
@@ -610,6 +611,26 @@ class OrderController extends ProducerBaseController
         ]) ;
         $json['distributions'] = $distributionsArray ;
         
+        // Commandes de l'utilisateur
+        $ordersUserArray = Order::searchAll([
+            'id_user' => User::getCurrentId()
+        ], [
+            'conditions' => [
+                'distribution.date >= :date'
+            ],
+            'params' => [
+                ':date' => date('Y-m-d')
+            ]
+        ]);
+        foreach($ordersUserArray as &$order) {
+            $order = array_merge($order->getAttributes(), [
+                'amount_total' => $order->getAmount(Order::AMOUNT_TOTAL),
+                'date_distribution' => $order->distribution->date,
+                'pointSale' => $order->pointSale->getAttributes()
+            ]) ; 
+        }
+        $json['orders'] = $ordersUserArray;
+        
         // Producteur
         $producer = Producer::searchOne([
             'id' => $this->getProducer()->id
@@ -658,7 +679,7 @@ class OrderController extends ProducerBaseController
             
             $json['points_sale'] = $pointsSaleArray;
             
-            // Commandes
+            // Commandes totales
             $ordersArray = Order::searchAll([
                 'distribution.date' => $date,
             ]);
@@ -684,7 +705,7 @@ class OrderController extends ProducerBaseController
                 $product['quantity_form'] = 0 ;    
                 $product['index'] = $indexProduct ++ ;    
             }
-                
+            
             $json['products'] = $productsArray;
         }
         

producer/views/order/order.php

@@ -84,17 +84,23 @@ $this->setTitle('Commander') ;
             </div>
             <div class="content">
                 <div id="content-step-date" v-if="step == 'date'">
+                    <div id="legend">
+                        <span id="distribution-date-color"></span> Prochains jours de distribution
+                        <span id="order-date-color"></span> Vos commandes déjà enregistrées
+                    </div>
                     <div id="calendar">
-                        <v-date-picker
+                        <v-calendar
                             is-inline
+                            is-double-paned
                             is-expanded
                             v-model="date"
                             mode="single"
                             :formats="calendar.formats"
                             :theme-styles="calendar.themeStyles"
                             :attributes="calendar.attrs"
+                            :available-dates="calendar.availableDates"
                             @dayclick='dayClick'>
-                        ></v-date-picker> 
+                        ></v-calendar> 
                     </div>
                 </div>
                 <div id="content-step-point-sale" v-if="step == 'point-sale'">

producer/web/css/screen.css

@@ -1263,66 +1263,90 @@ termes.
 .order-order #app-order-order #steps ul li .btn-primary {
   color: white;
 }
-/* line 103, ../sass/order/_order.scss */
+/* line 105, ../sass/order/_order.scss */
+.order-order #app-order-order #legend #order-date-color,
+.order-order #app-order-order #legend #distribution-date-color {
+  width: 13px;
+  height: 13px;
+  display: inline-block;
+}
+/* line 112, ../sass/order/_order.scss */
+.order-order #app-order-order #legend #order-date-color {
+  margin-left: 15px;
+  background-color: #018548;
+}
+/* line 116, ../sass/order/_order.scss */
+.order-order #app-order-order #legend #distribution-date-color {
+  background-color: #00A65A;
+}
+/* line 121, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar {
   margin-bottom: 15px;
 }
-/* line 105, ../sass/order/_order.scss */
+/* line 123, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
   font-size: 2rem;
 }
-/* line 108, ../sass/order/_order.scss */
+/* line 126, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day-background {
   padding: 20px;
 }
-/* line 111, ../sass/order/_order.scss */
+/* line 131, ../sass/order/_order.scss */
+.order-order #app-order-order #calendar .c-day:hover .c-day-background {
+  background-color: #F39C12 !important;
+}
+/* line 136, ../sass/order/_order.scss */
 .order-order #app-order-order #calendar .c-day-popover-content {
   font-size: 1.3rem;
 }
-/* line 116, ../sass/order/_order.scss */
+/* line 141, ../sass/order/_order.scss */
 .order-order #app-order-order .block-actions {
   text-align: right;
   margin-top: 20px;
 }
-/* line 123, ../sass/order/_order.scss */
+/* line 148, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .name {
   text-transform: uppercase;
   font-family: "myriadpro-regular";
   color: black;
   font-size: 16px;
 }
-/* line 129, ../sass/order/_order.scss */
+/* line 154, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .other {
   font-size: 14px;
   color: #333;
 }
-/* line 133, ../sass/order/_order.scss */
+/* line 158, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .recipe {
   color: gray;
 }
-/* line 137, ../sass/order/_order.scss */
+/* line 162, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .price-unit, .order-order #app-order-order table#products .price-total {
   width: 100px;
   text-align: center;
 }
-/* line 141, ../sass/order/_order.scss */
+/* line 166, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity {
   width: 150px;
 }
-/* line 143, ../sass/order/_order.scss */
+/* line 168, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
 }
-/* line 150, ../sass/order/_order.scss */
+/* line 175, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit {
   margin-top: 20px;
 }
-/* line 153, ../sass/order/_order.scss */
+/* line 178, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
-/* line 161, ../sass/order/_order.scss */
+/* line 185, ../sass/order/_order.scss */
+.order-order #app-order-order #infos {
+  margin-top: 30px;
+}
+/* line 187, ../sass/order/_order.scss */
 .order-order #app-order-order #infos .panel-body {
   padding-top: 0px;
   white-space: pre-line;

producer/web/js/vuejs/order-order.js

@@ -15,10 +15,10 @@ var app = new Vue({
         creditCheckbox: false,
         credit: 0,
         orderSuccess: false,
-        
         calendar: {
             mode: 'single',
             attrs: [],
+            availableDates: [],
             themeStyles: {
                 wrapper: {
                     background: '#BB8757',
@@ -42,14 +42,9 @@ var app = new Vue({
                 },
                 dayContent: function(object) {
                     var style = {
-                        fontSize: '2rem',
+                        fontSize: '1.5rem',
                         padding: '20px',
                     };
-                    
-                    if(object.isHovered || object.isFocus) {
-                        style.backgroundColor = '#F39C12' ;
-                    }
-                    
                     return style ;
                 },
             },
@@ -100,18 +95,43 @@ var app = new Vue({
                     this.credit = response.data.credit ;
                     
                     this.calendar.attrs = [] ;
+                    this.calendar.availableDates = [] ;
                     var distributions = response.data.distributions ;
                     if(distributions.length) {
+                        var arrayDate ;
                         for(var i= 0; i < distributions.length; i++) {
-                             this.calendar.attrs.push({
+                            this.calendar.attrs.push({
                                 highlight: {
-                                    backgroundColor: '#00A65A',
+                                    backgroundColor: '#00A65A'
                                 },
                                 dates: distributions[i].date,
                             }) ;
+                            
+                            arrayDate = distributions[i].date.split('-') ;
+                            this.calendar.availableDates.push({
+                                start: new Date(arrayDate[0], arrayDate[1] - 1, arrayDate[2]),
+                                end: new Date(arrayDate[0], arrayDate[1] - 1, arrayDate[2])
+                            }) ;
                         }
                     }  
                     
+                    var orders = response.data.orders ;
+                    if(orders.length) {
+                        for(var i= 0; i < orders.length; i++) {
+                            this.calendar.attrs.push({
+                                highlight: {
+                                    backgroundColor: '#018548',
+                                },
+                                popover: {
+                                    label: orders[i].pointSale.name + ' / '+this.formatPrice(orders[i].amount_total),
+                                    hideIndicator: true
+                                },
+                                dates: orders[i].date_distribution,
+                            }) ;
+                            //console.log(orders[i].pointSale.name + ' / '+this.formatPrice(orders[i].amount_total)) ;
+                        }
+                    }
+                    
                     if(response.data.distribution) {
                         this.distribution = response.data.distribution ;
                     }
@@ -132,12 +152,22 @@ var app = new Vue({
             }
         },
         dayClick: function(day) {
-            this.date = day.date ;
-            this.dateFormat = ('0' + this.date.getDate()).slice(-2)+ '/'
-                    + ('0' + (this.date.getMonth() +1)).slice(-2) + '/'
-                    + this.date.getFullYear() ;
-            this.init() ;
-            this.changeStep('point-sale') ;
+            if(this.isAvailableDate(day.date)) {
+                this.date = day.date ;
+                this.dateFormat = ('0' + this.date.getDate()).slice(-2)+ '/'
+                        + ('0' + (this.date.getMonth() +1)).slice(-2) + '/'
+                        + this.date.getFullYear() ;
+                this.init() ;
+                this.changeStep('point-sale') ;
+            }
+        },
+        isAvailableDate: function(date) {
+            for(var key in this.calendar.availableDates) {
+                if(date.getTime() == this.calendar.availableDates[key].start.getTime()) {
+                    return true ;
+                }
+            }
+            return false ;
         },
         pointSaleClick: function(event) {
             this.pointSaleActive = this.getPointSale(event.currentTarget.getAttribute('data-id-point-sale')) ;

producer/web/sass/order/_order.scss

@@ -100,6 +100,24 @@
                 }
             }
         }
+        
+        #legend {
+            #order-date-color, 
+            #distribution-date-color {
+                width: 13px ;
+                height: 13px ;
+                display: inline-block ;
+            }
+            
+            #order-date-color {
+                margin-left: 15px ;
+                background-color: #018548 ;
+            }
+            #distribution-date-color {
+                background-color: #00A65A ;
+            }
+        }
+        
         #calendar {
             margin-bottom: 15px ;
             .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
@@ -108,6 +126,13 @@
             .c-day-background {
                 padding: 20px ;
             }
+            
+            .c-day:hover {
+                .c-day-background {
+                    background-color: #F39C12 !important ; 
+                }
+            }
+            
             .c-day-popover-content {
                 font-size: 1.3rem ;
             }
@@ -158,6 +183,7 @@
         }
         
         #infos {
+            margin-top: 30px ;
             .panel-body {
                 padding-top: 0px ;
                 white-space: pre-line ;