Step date

producer/controllers/OrderController.php

 namespace producer\controllers;
 
 use common\models\ProductDistribution ;
+use DateTime;
 
 class OrderController extends ProducerBaseController 
 {
         }
         return false;
     }
+    
+    public function actionAjaxInfos($date = '') 
+    {
+        \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
+        
+        $json = [
+            'distribution' => [],
+            'products' => []
+        ] ;
+        
+        $format = 'Y-m-d' ;
+        $dateObject = DateTime::createFromFormat($format, $date);
+        
+        $distributionsArray = Distribution::searchAll([
+            'active' => 1
+        ], [
+            'conditions' => ['date > :date_begin','date < :date_end'],
+            'params' => [':date_begin' => date('Y-m-d', strtotime('-1 month')), ':date_end' => date('Y-m-d', strtotime('+3 month')), ],
+        ]) ;
+        $json['distributions'] = $distributionsArray ;
+        
+        return $json ;
+    }
 
 }
         

producer/views/order/order.php

 ?>
 
 <div id="app-order-order">
-    <div class="col-md-4">
+    <div class="col-md-8">
+        <div id="steps">
+            <ul>
+                <li id="step-date" :class="'col-md-3 '+((step == 'date') ? 'active' : '')">
+                    <a v-if="date" @click="changeStep('date')" href="javascript:void(0);">Date</a>
+                    <span v-else>Date</span> 
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                </li>
+                <li id="step-point-sale" :class="'col-md-3 '+((step == 'point-sale') ? 'active' : '')">
+                    Point de vente 
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                </li>
+                <li id="step-products" :class="'col-md-3 '+((step == 'products') ? 'active' : '')">
+                    Produits
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                </li>
+                <li id="step-payment" :class="'col-md-3 '+((step == 'payment') ? 'active' : '')">
+                    Paiement
+                </li>
+            </ul>
+            <div class="clr"></div>
+        </div>
+        <div class="content">
+            <div id="content-step-date" v-if="step == 'date'">
+                <div id="calendar">
+                    <v-date-picker
+                        is-inline
+                        is-expanded
+                        v-model="date"
+                        mode="single"
+                        :formats="calendar.formats"
+                        :theme-styles="calendar.themeStyles"
+                        :attributes="calendar.attrs"
+                        @dayclick='dayClick'>
+                    ></v-date-picker> 
+                </div>
+            </div>
+            <div id="content-step-point-sale" v-if="step == 'point-sale'">
+                Points de vente
+            </div>
+            <div id="content-step-products" v-if="step == 'products'">
+                Produits
+            </div>
+            <div id="content-step-payment" v-if="step == 'payment'">
+                Paiement
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4" v-if="date">
         <div class="panel panel-default">
             <div class="panel-heading">
-                Récapitulatif
+                Résumé
             </div>
             <div class="panel-body">
-                {{ date }}
+                <span class="glyphicon glyphicon-time"></span> {{ dateFormat }}
+                
             </div>
         </div>
-        
-    </div>
-    <div class="col-md-8">
-        <v-date-picker
-            is-inline
-            is-expanded
-            v-model="date"
-            mode="single"
-            :formats="calendar.formats"
-            :theme-styles="calendar.themeStyles"
-            :attributes="calendar.attrs"
-            @dayclick='dayClick'>
-        ></v-date-picker> 
     </div>
 </div>

producer/web/css/screen.css

   display: none;
 }
 
+/* line 4, ../sass/order/_order.scss */
+.order-order #app-order-order #steps {
+  margin-bottom: 20px;
+}
+/* line 7, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li {
+  text-align: center;
+  text-transform: uppercase;
+}
+/* line 11, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li.active, .order-order #app-order-order #steps ul li.active a {
+  color: #BB8757;
+}
+/* line 15, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li .glyphicon, .order-order #app-order-order #steps ul li.active .glyphicon {
+  float: right;
+  color: #333;
+}
+/* line 20, ../sass/order/_order.scss */
+.order-order #app-order-order #steps ul li a {
+  color: #333;
+}
+/* line 26, ../sass/order/_order.scss */
+.order-order #app-order-order #calendar {
+  margin-bottom: 15px;
+}
+/* line 28, ../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 31, ../sass/order/_order.scss */
+.order-order #app-order-order #calendar .c-day-background {
+  padding: 20px;
+}
+/* line 34, ../sass/order/_order.scss */
+.order-order #app-order-order #calendar .c-day-popover-content {
+  font-size: 1.3rem;
+}
+
 /** 
 Copyright La boîte à pain (2018) 
 

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

 var app = new Vue({
     el: '#app-order-order',
     data: {
+        step: 'date',
         date: null,
+        dateFormat: null,
         calendar: {
             mode: 'single',
             attrs: [],
                 dayContent: function(object) {
                     var style = {
                         fontSize: '2rem',
-                        padding: '16px',
+                        //padding: '16px',
+                        padding: '20px',
                     };
                     
                     if(object.isHovered || object.isFocus) {
             }
         },
     },
-    methods: {
-        dayClick: function() {
-            
+    mounted: function() {
+        if($('#distribution-date').size()) {
+            this.date = new Date($('#distribution-date').html()) ;
+            this.dateFormat = ('0' + this.date.getDate()).slice(-2)+ '/'
+            + ('0' + (this.date.getMonth() +1)).slice(-2) + '/'
+            + this.date.getFullYear() ;
         }
+        this.init() ;
+    },
+    methods: {
+        getDate: function() {
+            return this.formatDate(this.date) ;
+        },
+        formatDate: function(date) {
+            if(date) {
+                return date.getFullYear() + '-'
+                    + ('0' + (date.getMonth() +1)).slice(-2) + '-'
+                    + ('0' + date.getDate()).slice(-2) ;
+            }
+            return false ;
+        },
+        init: function() {
+            axios.get("ajax-infos",{params: {date : this.getDate()}})
+                .then(response => {
+                    this.calendar.attrs = [] ;
+                    var distributions = response.data.distributions ;
+                    if(distributions.length) {
+                        for(var i= 0; i < distributions.length; i++) {
+                             this.calendar.attrs.push({
+                                highlight: {
+                                    backgroundColor: '#00A65A',
+                                },
+                                dates: distributions[i].date,
+                            }) ;
+                        }
+                    }  
+            });
+        },
+        changeStep: function(step) {
+            this.step = step ;
+        },
+        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') ;
+        },
     }
 });

producer/web/sass/order/_order.scss

+
+.order-order {
+    #app-order-order {
+        #steps {
+            margin-bottom: 20px ;
+            ul {
+                li {
+                    text-align: center ;
+                    text-transform: uppercase ;
+                    
+                    &.active, &.active a {
+                        color: $color1 ;
+                    }
+                    
+                    .glyphicon, &.active .glyphicon {
+                        float: right ;
+                        color: #333 ;
+                    }
+                    
+                    a {
+                        color: #333 ;
+                    }
+                }
+            }
+        }
+        #calendar {
+            margin-bottom: 15px ;
+            .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
+                font-size: 2rem ;
+            } 
+            .c-day-background {
+                padding: 20px ;
+            }
+            .c-day-popover-content {
+                font-size: 1.3rem ;
+            }
+        }
+    }
+}

producer/web/sass/screen.scss

 @import "site/_credit_history.scss";
 @import "order/_form.scss";
 @import "order/_history.scss";
+@import "order/_order.scss";
 @import "_responsive.scss";