[Administration et Espace producteur] Calendrier pour le choix du jour de distribution : lundi en premier #166

backend/views/distribution/index.php

@@ -67,18 +67,18 @@ $this->setPageTitle('Distributions') ;
     <div id="wrapper-app-distribution-index" :class="'wrapper-app-vuejs '+(loading ? '' : 'loaded')">
         <div class="col-md-4">
             <div id="calendar">
-                <v-date-picker
+                <v-calendar
                     is-inline
                     is-expanded
                     v-model="date"
                     popover-visibility="hidden"
-                    firstDayOfWeek="1"
+                    color="green"
                     :mode="calendar.mode"
                     :formats="calendar.formats"
                     :theme-styles="calendar.themeStyles"
                     :attributes="calendar.attrs"
                     @dayclick='dayClicked'>
-                ></v-date-picker>
+                ></v-calendar>
             </div>
             <div class="clr"></div>
         </div>

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

@@ -206,12 +206,7 @@ var app = new Vue({
                     if(distributions.length) {
                         for(var i= 0; i < distributions.length; i++) {
                             app.calendar.attrs.push({
-                                highlight: {
-                                    backgroundColor: '#5cb85c',
-                                },
-                                contentStyle: {
-                                    color: 'white',
-                                },
+                                highlight: true,
                                 dates: distributions[i].date
                             }) ;
                         }

common/assets/CommonAsset.php

@@ -69,7 +69,10 @@ class CommonAsset extends \common\components\MyAssetBundle
         $this->addAsset('js','js/promise-polyfill/promise.min.js');
         $this->addAsset('js','js/axios/axios.min.js');
         $this->addAsset('js','js/vuejs/vue.js');
-        $this->addAsset('js','js/vuejs/vcalendar/vcalendar.min.js') ;
+
+        // Documentation : https://vcalendar.io/
+        $this->addAsset('js','js/vuejs/vcalendar/v-calendar.umd.min.js') ;
+
         $this->addAsset('js','js/utils.js') ;
     }
 }

producer/controllers/OrderController.php

@@ -752,6 +752,7 @@ class OrderController extends ProducerBaseController
 
         if (is_array($ordersUserArray) && count($ordersUserArray)) {
             foreach ($ordersUserArray as &$order) {
+                $orderManager->initOrder($order);
                 $order = array_merge($order->getAttributes(), [
                     'amount_total' => $orderManager->getOrderAmountWithTax($order, Order::AMOUNT_TOTAL),
                     'date_distribution' => $order->distribution->date,
@@ -1016,6 +1017,10 @@ class OrderController extends ProducerBaseController
             }
         }
 
+        if($orderUser) {
+            $orderManager->initOrder($orderUser);
+        }
+
         return $orderUser;
     }
 }

producer/views/order/order.php

@@ -150,13 +150,11 @@ $this->setTitle('Commander') ;
                             <div id="calendar">
                                 <v-calendar
                                         is-inline
-                                        is-double-paned
                                         is-expanded
                                         v-model="date"
                                         mode="single"
-                                        locale="fr"
-                                        :locale="{ id: 'fr', firstDayOfWeek: 1, masks: { weekdays: 'WW' } }"
-                                        :first-day-of-week="1"
+                                        columns="2"
+                                        color="green"
                                         :formats="calendar.formats"
                                         :theme-styles="calendar.themeStyles"
                                         :attributes="calendar.attrs"
@@ -231,9 +229,7 @@ $this->setTitle('Commander') ;
                                             <div class="comment" v-if="pointSale.userPointSale">
                                                 {{ pointSale.userPointSale.comment }}
                                             </div>
-                                            <div class="comment" v-if="pointSale.infos && pointSale.infos.length > 0">
-                                                {{ pointSale.infos }}
-                                            </div>
+                                            <div class="comment" v-if="pointSale.infos && pointSale.infos.length > 0" v-html="pointSale.infos"></div>
                                         </td>
                                         <td class="locality">{{ pointSale.locality }}</td>
                                         <td class="actions">

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

@@ -150,13 +150,8 @@ var app = new Vue({
                         var arrayDate;
                         for (var i = 0; i < distributions.length; i++) {
                             app.calendar.attrs.push({
-                                highlight: {
-                                    backgroundColor: '#5cb85c',
-                                },
-                                contentStyle: {
-                                    color: 'white',
-                                },
-                                dates: distributions[i].date,
+                                highlight: true,
+                                dates: distributions[i].date
                             });
 
                             arrayDate = distributions[i].date.split('-');
@@ -185,7 +180,15 @@ var app = new Vue({
                             if (app.isAvailableDate(dateOrder)) {
 
                                 app.calendar.attrs.push({
-                                    highlight: {
+                                    highlight: true,
+                                    popover: {
+                                        label: orders[i].pointSale.name + ' / ' + app.formatPrice(orders[i].amount_total),
+                                        hideIndicator: true
+                                    },
+                                    dates: orders[i].date_distribution
+
+
+                                    /*highlight: {
                                         backgroundColor: '#FF7F00'
                                     },
                                     contentStyle: {
@@ -195,7 +198,7 @@ var app = new Vue({
                                         label: orders[i].pointSale.name + ' / ' + app.formatPrice(orders[i].amount_total),
                                         hideIndicator: true
                                     },
-                                    dates: orders[i].date_distribution,
+                                    dates: orders[i].date_distribution,*/
                                 });
                             }
                         }