Amélioration étape Point de vente

Gestion de la validation du code d'accès au point de vente.
Amélioration du style.

producer/controllers/OrderController.php

      * @param string $code
      * @return boolean
      */
-    public function actionValidateCodePointSale($idPointSale, $code) 
+    public function actionAjaxValidateCodePointSale($idPointSale, $code) 
     {
+        \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
+        
         $pointSale = PointSale::findOne($idPointSale);
         if ($pointSale) {
             if ($pointSale->validateCode($code)) {
-                return true;
+                return 1;
             }
         }
-        return false;
+        return 0;
     }
     
     public function actionAjaxInfos($date = '') 
 
             foreach($pointsSaleArray as &$pointSale) {
                 $pointSale = array_merge($pointSale->getAttributes(),[
+                    'code_form' => '',
                     'pointSaleDistribution' => [
                         'id_distribution' => $pointSale->pointSaleDistribution[0]->id_distribution,
                         'id_point_sale' => $pointSale->pointSaleDistribution[0]->id_point_sale,

producer/views/order/order.php

                     </div>
                 </div>
                 <div id="content-step-point-sale" v-if="step == 'point-sale'">
-                    <table class="table table-bordered" v-if="pointsSale.length">
+                    <table id="points-sale" class="table table-bordered" v-if="pointsSale.length">
                         <thead>
                             <tr>
                                 <th>Nom</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="pointSale in pointsSale" v-if="pointSale.pointSaleDistribution.delivery">
+                            <tr v-for="pointSale in pointsSale" v-if="pointSale && pointSale.pointSaleDistribution.delivery">
                                 <td class="name">
-                                    <span class="glyphicon glyphicon-lock" v-if="pointSale.code.length > 0"></span> {{ pointSale.name }}
+                                    <span class="the-name">{{ pointSale.name }}</span>
                                     <div class="comment" v-if="pointSale.userPointSale">
                                         {{ pointSale.userPointSale.comment }}
                                     </div>
                                 </td>
-                                <td>{{ pointSale.locality }}</td>
-                                <td>
-                                    <input v-if="pointSale.code.length > 0" v-model="codePointSale" type="password" placeholder="Code" class="form-control input-code" />
-                                    <button class="btn btn-default" @click="pointSaleClick" :data-id-point-sale="pointSale.id">
+                                <td class="locality">{{ pointSale.locality }}</td>
+                                <td class="actions">
+                                    <div :class="'form-group' + (pointSale.invalid_code ? ' has-error' : '')">
+                                        <div class="input-group" v-if="pointSale.code.length > 0">
+                                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
+                                            <input v-model="pointsSaleCodes[pointSale.id]" type="password" placeholder="Code" class="form-control input-code" />
+                                        </div>
+                                    </div>
+                                    <button class="btn btn-primary" @click="pointSaleClick" :data-code="pointSale.code.length > 0" :data-id-point-sale="pointSale.id">
                                         <span class="glyphicon glyphicon-map-marker"></span>
-                                        Choisir
+                                        Choisir 
                                     </button>
                                 </td>
                             </tr>

producer/web/css/screen.css

   margin-top: 20px;
 }
 /* line 148, ../sass/order/_order.scss */
+.order-order #app-order-order table#points-sale td.name .the-name {
+  text-transform: uppercase;
+  font-family: "myriadpro-regular";
+  color: black;
+  font-size: 16px;
+}
+/* line 156, ../sass/order/_order.scss */
+.order-order #app-order-order table#points-sale td.actions {
+  width: 150px;
+}
+/* line 158, ../sass/order/_order.scss */
+.order-order #app-order-order table#points-sale td.actions button {
+  width: 100%;
+}
+/* line 166, ../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 154, ../sass/order/_order.scss */
+/* line 172, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .other {
   font-size: 14px;
   color: #333;
 }
-/* line 158, ../sass/order/_order.scss */
+/* line 176, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .recipe {
   color: gray;
 }
-/* line 162, ../sass/order/_order.scss */
+/* line 180, ../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 166, ../sass/order/_order.scss */
+/* line 184, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity {
   width: 150px;
 }
-/* line 168, ../sass/order/_order.scss */
+/* line 186, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
 }
-/* line 175, ../sass/order/_order.scss */
+/* line 193, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit {
   margin-top: 20px;
 }
-/* line 178, ../sass/order/_order.scss */
+/* line 196, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
-/* line 185, ../sass/order/_order.scss */
+/* line 203, ../sass/order/_order.scss */
 .order-order #app-order-order #infos {
   margin-top: 30px;
 }
-/* line 187, ../sass/order/_order.scss */
+/* line 205, ../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

         distribution: null,
         pointsSale: [],
         pointSaleActive: null,
-        codePointSale: '',
+        pointsSaleCodes: [],
         products: [],
         comment: '',
         creditCheckbox: false,
                                 },
                                 dates: orders[i].date_distribution,
                             }) ;
-                            //console.log(orders[i].pointSale.name + ' / '+this.formatPrice(orders[i].amount_total)) ;
                         }
                     }
                     
                     }
                     
                     if(response.data.points_sale) {
-                        this.pointsSale = response.data.points_sale ;
+                        this.pointsSale = [] ; 
+                        for(var key in response.data.points_sale) {
+                            this.pointsSale[response.data.points_sale[key].id] = response.data.points_sale[key] ;
+                            this.pointsSaleCodes[response.data.points_sale[key].id] = '' ;
+                            
+                            Vue.set(this.pointsSaleCodes, response.data.points_sale[key].id, '');
+                            
+                        }
                     }
                     
                     if(response.data.products) {
             });
         },
         changeStep: function(step) {
+            var oldStep = this.step ;
             this.step = step ;
-            if(step == 'point-sale') {
+            if(oldStep == 'date' && step == 'point-sale') {
                 this.init() ;
             }
         },
             return false ;
         },
         pointSaleClick: function(event) {
-            this.pointSaleActive = this.getPointSale(event.currentTarget.getAttribute('data-id-point-sale')) ;
+            var idPointSale = event.currentTarget.getAttribute('data-id-point-sale') ;
+            var hasCode = event.currentTarget.getAttribute('data-code') ;
+        
+            if(hasCode) {
+                axios.get('ajax-validate-code-point-sale',{params: {
+                    idPointSale: idPointSale,    
+                    code: this.pointsSaleCodes[idPointSale]
+                }}).then(response => {
+                    if(response.data) {
+                        this.pointsSale[idPointSale].invalid_code = false ;
+                        this.validatePointSale(idPointSale) ;
+                    }
+                    else {
+                        this.pointsSale[idPointSale].invalid_code = true ;
+                        Vue.set(this.pointsSaleCodes, idPointSale, '');
+                    }
+                }) ;
+            }
+            else {
+                this.validatePointSale(idPointSale) ;
+            }
+        },
+
+        validatePointSale: function(idPointSale) {
+            this.pointSaleActive = this.getPointSale(idPointSale) ;
             this.changeStep('products') ;
         },
         productQuantityClick: function(product, quantity) {
                     id_point_sale: this.pointSaleActive.id,
                     comment: this.comment
                 },
-                code_point_sale: this.codePointSale,
+                code_point_sale: this.codePointsSale[this.pointSaleActive.id],
                 products: productsArray,
                 use_credit: this.creditCheckbox
             }).then(response => {

producer/web/sass/order/_order.scss

             margin-top: 20px ;
         }
      
+        table#points-sale {
+            td.name {
+                .the-name {
+                    text-transform: uppercase ;
+                    font-family: 'myriadpro-regular' ;
+                    color: black ;
+                    font-size: 16px ;
+                }
+            }
+            
+            td.actions {
+                width: 150px ;
+                button {
+                    width: 100% ;
+                }
+            }
+        }
+        
         table#products {
             td.name {
                 .name {