Affichage des points de vente sous forme de table + gestion de la validation du code d'accès

common/models/PointSale.php

         }
         return $str ;
     }
-
 }

producer/controllers/OrderController.php

                 ':date' => $dateMini
             ]
         ]);
-        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()
-            ]) ; 
+        if(is_array($ordersUserArray) && count($ordersUserArray)) {
+            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;
         }
-        $json['orders'] = $ordersUserArray;
         
         // User
         $userProducer = UserProducer::searchOne([
                     ],
                     'userPointSale' => ($pointSale->userPointSale ? $pointSale->userPointSale[0] : '') 
                 ]) ;
+                if($pointSale['code'] && strlen($pointSale['code'])) {
+                    $pointSale['code'] = '***' ;
+                }
             }
             
             $json['points_sale'] = $pointsSaleArray;

producer/controllers/SubscriptionController.php

         $params['products'] = $productsArray ;
         
         $pointsSaleArray = PointSale::searchAll() ;
+        foreach($pointsSaleArray as &$pointSale) {
+            $pointSale = array_merge($pointSale->getAttributes(),[
+                'userPointSale' => ($pointSale->userPointSale ? $pointSale->userPointSale[0] : '') 
+            ]) ;
+            if($pointSale['code'] && strlen($pointSale['code'])) {
+                $pointSale['code'] = '***' ;
+            }
+        }
+        
         $params['points_sale'] = $pointsSaleArray ;
         
         if($idSubscription > 0) {
         
         return $params ;
     }
+    
+    /**
+     * Vérifie le code saisi pour un point de vente.
+     * 
+     * @param integer $idPointSale
+     * @param string $code
+     * @return boolean
+     */
+    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 1;
+            }
+        }
+        return 0;
+    }
 }

producer/views/subscription/_form.php

             </li>
         </ul>
     </div>
-    <div class="form-group field-subscriptionform-id_point_sale required">
+    <div class="points-sale">
         <h3><span>Point de vente</span></h3>
-        <div class="points-sale" v-for="pointSale in pointsSale" v-if="pointSale.delivery_monday || pointSale.delivery_tuesday || pointSale.delivery_wednesday || pointSale.delivery_thursday || pointSale.delivery_friday || pointSale.delivery_saturday || pointSale.delivery_sunday">
-            <input type="radio" :id="'point-sale-'+pointSale.id" name="SubscriptionForm[id_point_sale]" :value="pointSale.id" v-model="idPointSaleActive" @change="pointSaleChange()" />
-            <label :for="'point-sale-'+pointSale.id">{{ pointSale.name }} <span v-if="pointSale.locality.length > 0" class="locality">/ {{ pointSale.locality }}</span></label>
-        </div>
-        <div class="help-block"></div>
+        
+        <table class="table table-bordered table-hovered" v-if="pointsSale.length">
+            <thead>
+                <tr>
+                    <th>Nom</th>
+                    <th>Localité</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="pointSale in pointsSale" v-if="pointSale" :class="(pointSaleActive && pointSale.id == pointSaleActive.id) ? 'selected' : ''">
+                    <td class="name">
+                        <span class="the-name">{{ pointSale.name }}</span>
+                        <div class="comment" v-if="pointSale.userPointSale">
+                            {{ pointSale.userPointSale.comment }}
+                        </div>
+                    </td>
+                    <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 && 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.prevent="pointSaleClick" :data-code="pointSale.code && pointSale.code.length > 0" :data-id-point-sale="pointSale.id">
+                            <span class="glyphicon glyphicon-map-marker"></span>
+                            Choisir 
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
     
-    <h3><span>Dates</span></h3>
+    <h3 id="step-date"><span>Dates</span></h3>
     <div class="col-md-4">
         <div class="form-group">
             <label>Date de début</label>
     <?php endif; ?>
     
     <div class="days" v-if="pointSaleActive">
-        <h3><span>Jours</span></h3>
+        <h3 id="step-days"><span>Jours</span></h3>
         <div v-if="pointSaleActive.delivery_monday == true">
             <div class="form-group field-subscriptionform-monday">
-                <label><input type="checkbox" id="subscriptionform-monday" v-model="monday"> Lundi</label> 
+                <label><input type="checkbox" id="subscriptionform-monday" v-model="monday" @change="dayChange"> Lundi</label> 
             </div>
         </div>
         <div v-if="pointSaleActive.delivery_tuesday == true">
             <div class="form-group field-subscriptionform-monday">
-                <label><input type="checkbox" id="subscriptionform-tuesday" v-model="tuesday"> Mardi</label> 
+                <label><input type="checkbox" id="subscriptionform-tuesday" v-model="tuesday" @change="dayChange"> Mardi</label> 
             </div>
         </div>
         <div v-if="pointSaleActive.delivery_wednesday == true">
             <div class="form-group field-subscriptionform-wednesday">
-                <label><input type="checkbox" id="subscriptionform-wednesday" v-model="wednesday"> Mercredi</label> 
+                <label><input type="checkbox" id="subscriptionform-wednesday" v-model="wednesday" @change="dayChange"> Mercredi</label> 
             </div>
         </div>
         <div v-if="pointSaleActive.delivery_thursday == true">
             <div class="form-group field-subscriptionform-thursday">
-                <label><input type="checkbox" id="subscriptionform-thursday" v-model="thursday"> Jeudi</label> 
+                <label><input type="checkbox" id="subscriptionform-thursday" v-model="thursday" @change="dayChange"> Jeudi</label> 
             </div>
         </div>
         <div v-if="pointSaleActive.delivery_friday == true">
             <div class="form-group field-subscriptionform-friday">
-                <label><input type="checkbox" id="subscriptionform-friday" v-model="friday"> Vendredi</label> 
+                <label><input type="checkbox" id="subscriptionform-friday" v-model="friday" @change="dayChange"> Vendredi</label> 
             </div>
         </div>
         <div v-if="pointSaleActive.delivery_saturday == true">
             <div class="form-group field-subscriptionform-saturday">
-                <label><input type="checkbox" id="subscriptionform-saturday" v-model="saturday"> Samedi</label> 
+                <label><input type="checkbox" id="subscriptionform-saturday" v-model="saturday" @change="dayChange"> Samedi</label> 
             </div>
         </div>
         <div v-if="pointSaleActive.delivery_sunday == true">
             <div class="form-group field-subscriptionform-sunday">
-                <label><input type="checkbox" id="subscriptionform-sunday" v-model="sunday"> Dimanche</label> 
+                <label><input type="checkbox" id="subscriptionform-sunday" v-model="sunday" @change="dayChange"> Dimanche</label> 
             </div>
         </div>
 

producer/web/css/screen.css

   float: left;
   margin-right: 15px;
 }
-/* line 23, ../sass/subscription/_form.scss */
+/* line 26, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .points-sale table tr.selected td,
+.subscription-update .subscription-form .points-sale table tr.selected td {
+  background-color: #F8F1DD;
+}
+/* line 31, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .points-sale table .block-code,
+.subscription-update .subscription-form .points-sale table .block-code {
+  width: 150px;
+}
+/* line 35, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .points-sale table .actions,
+.subscription-update .subscription-form .points-sale table .actions {
+  width: 150px;
+}
+/* line 38, ../sass/subscription/_form.scss */
+.subscription-create .subscription-form .points-sale table .actions button,
+.subscription-update .subscription-form .points-sale table .actions button {
+  width: 100%;
+  display: block;
+}
+/* line 47, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .monday, .subscription-create .subscription-form .products .tuesday, .subscription-create .subscription-form .products .wednesday, .subscription-create .subscription-form .products .thursday,
 .subscription-create .subscription-form .products .friday, .subscription-create .subscription-form .products .saturday, .subscription-create .subscription-form .products .sunday, .subscription-create .subscription-form .products .no-day,
 .subscription-update .subscription-form .products .monday,
 .subscription-update .subscription-form .products .no-day {
   display: none;
 }
-/* line 28, ../sass/subscription/_form.scss */
+/* line 52, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .monday-active .monday,
 .subscription-create .subscription-form .products .tuesday-active .tuesday,
 .subscription-create .subscription-form .products .wednesday-active .wednesday,
 .subscription-update .subscription-form .products .sunday-active .sunday {
   display: block;
 }
-/* line 38, ../sass/subscription/_form.scss */
+/* line 62, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products td.quantity,
 .subscription-update .subscription-form .products td.quantity {
   width: 150px;
 }
-/* line 41, ../sass/subscription/_form.scss */
+/* line 65, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products td.quantity input,
 .subscription-update .subscription-form .products td.quantity input {
   text-align: center;
 }
-/* line 44, ../sass/subscription/_form.scss */
+/* line 68, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products td.quantity input.has-quantity,
 .subscription-update .subscription-form .products td.quantity input.has-quantity {
   font-weight: bold;
 }
-/* line 50, ../sass/subscription/_form.scss */
+/* line 74, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .name,
 .subscription-update .subscription-form .products .name {
   font-family: "comfortaalight";
   text-transform: uppercase;
   font-size: 18px;
 }
-/* line 57, ../sass/subscription/_form.scss */
+/* line 81, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .description,
 .subscription-update .subscription-form .products .description {
   font-style: italic;
 }
-/* line 61, ../sass/subscription/_form.scss */
+/* line 85, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .recipe,
 .subscription-update .subscription-form .products .recipe {
   font-size: 12px;
 }
-/* line 65, ../sass/subscription/_form.scss */
+/* line 89, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products .price-unit, .subscription-create .subscription-form .products .price-total,
 .subscription-update .subscription-form .products .price-unit,
 .subscription-update .subscription-form .products .price-total {
   text-align: center;
   width: 150px;
 }
-/* line 70, ../sass/subscription/_form.scss */
+/* line 94, ../sass/subscription/_form.scss */
 .subscription-create .subscription-form .products tr.total .price-total,
 .subscription-update .subscription-form .products tr.total .price-total {
   text-align: center;

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

                             }) ;
                         }
                     }  
+                    var orders = [] ;
+                    if(response.data.orders) {
+                        orders = response.data.orders ;
+                    }
                     
-                    var orders = response.data.orders ;
                     if(orders.length) {
                         for(var i= 0; i < orders.length; i++) {
                             this.calendar.attrs.push({

producer/web/js/vuejs/subscription-form.js

         pointsSale: [],
         idPointSaleActive: 0,
         pointSaleActive: null,
+        pointsSaleCodes: [],
         dateBegin: null,
         dateEnd: null,
         weekFrequency: 1,
         products: [],
         errors: [],
         disableSubmitButton: false,
+        lastCountDays: 0,
     },
     mounted: function() {
         this.init();
                     this.pointsSale = response.data.points_sale ;
                     
                     if(this.idSubscription > 0) {
-                        this.idPointSaleActive = response.data.id_point_sale ;
-                        this.pointSaleChange() ;
+                        this.validatePointSale(response.data.id_point_sale) ;
                         this.weekFrequency = response.data.week_frequency ;
                         this.autoPayment = response.data.auto_payment ;
                         var arrayDateBegin = response.data.date_begin.split('-') ;
             }
             return false ;
         },
-        pointSaleChange: function() {
-            for(key in this.pointsSale) {
-                if(this.pointsSale[key].id == this.idPointSaleActive) {
-                    this.pointSaleActive = this.pointsSale[key] ;
-                    
-                    this.monday = false ;
-                    this.tuesday = false ;
-                    this.wednesday = false ;
-                    this.thursday = false ;
-                    this.friday = false ;
-                    this.saturday = false ;
-                    this.sunday = false ;
+        pointSaleClick: function(event) {
+            
+            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.getPointSale(idPointSale).invalid_code = false ;
+                        this.validatePointSale(idPointSale) ;
+                    }
+                    else {
+                        this.getPointSale(idPointSale).invalid_code = true ;
+                        Vue.set(this.pointsSaleCodes, idPointSale, '');
+                    }
+                }) ;
+            }
+            else {
+                this.validatePointSale(idPointSale) ;
+            }
+        },
+        validatePointSale: function(idPointSale) {
+            if(this.idPointSaleActive != idPointSale) {
+                this.monday = false ;
+                this.tuesday = false ;
+                this.wednesday = false ;
+                this.thursday = false ;
+                this.friday = false ;
+                this.saturday = false ;
+                this.sunday = false ;
+            }
+            
+            this.pointSaleActive = this.getPointSale(idPointSale) ;
+            this.idPointSaleActive = idPointSale ;
+            boulange_scroll('step-date') ;
+        },
+        getPointSale: function(idPointSale) {
+            for(var key in this.pointsSale) {
+                if(this.pointsSale[key].id == idPointSale) {
+                    return this.pointsSale[key] ;
                 }
             }
         },
+        dayChange: function() {
+            console.log(this.monday+' '+this.tuesday+' '+this.wednesday+' '+
+                    this.thursday+' '+this.friday+' '+this.saturday+' '+this.sunday) ;
+            
+            var count = Number(this.monday) + Number(this.tuesday) + Number(this.wednesday)
+                + Number(this.thursday) + Number(this.friday) + Number(this.saturday) 
+                + Number(this.sunday) ;
+            
+            if(count == 1 && this.lastCountDays == 0) {
+                this.lastCountDays = count ;
+                boulange_scroll('step-days') ;  
+            }
+        },
         checkProductAvailable: function(product) {
             var available = product.active &&
                     (!this.monday || (this.monday && product.monday)) && 
             if(!this.idPointSaleActive) {
                 this.errors.push('Veuillez sélectionner un point de vente') ;
             }
+            else {
+                if(this.pointSaleActive.code && this.pointSaleActive.code.length > 0) {
+                    axios.get('ajax-validate-code-point-sale',{params: {
+                        idPointSale: this.idPointSaleActive,    
+                        code: this.pointSaleActive.code
+                    }}).then(response => {
+                        if(response.data) {
+                            this.pointsSale[idPointSale].invalid_code = false ;
+                        }
+                        else {
+                            this.pointsSale[idPointSale].invalid_code = true ;
+                            Vue.set(this.pointsSaleCodes, idPointSale, '');
+                        }
+                    }) ;
+                }
+            }
             
             var regexDate = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/;
    
                 this.errors.push('Veuillez choisir au moins un produit') ;
             }
             
+            
             if(this.errors.length) {
                 window.scroll(0, $('#page-title').position().top - 25) ;
             }

producer/web/sass/subscription/_form.scss

             }
         }
         
+        .points-sale {
+            table {
+                
+                tr.selected {
+                    td {
+                        background-color: $color2 ;
+                    }
+                }
+                
+                .block-code {
+                    width: 150px ;
+                }
+                
+                .actions {
+                    width: 150px ;
+                    
+                    button {
+                        width: 100% ;
+                        display: block ;
+                    }
+                }
+            }
+        }
+        
         .products {
             .monday, .tuesday, .wednesday, .thursday, 
             .friday, .saturday, .sunday, .no-day {