Page Commander

- Ajout photo produits
- Page de confirmation de commande indépendante pour assurer le rechargement de la page et des infos du menu (mes commandes et le crédit)
- Gestion du cas où aucune distribution n'est programmée
- Gestion erreur aucun produit

common/models/Order.php

         return false ;
     }
     
+    /**
+     * Retourne le nombre de produits commandés
+     * 
+     * @return integer
+     */
+    public function countProducts() 
+    {
+        $count = 0 ;
+        if($this->productOrder && is_array($this->productOrder)) {
+            foreach($this->productOrder as $productOrder) {
+                $count += $productOrder->quantity ;
+            }
+        }
+        return $count ;
+    }
+    
 }

producer/controllers/OrderController.php

             } 
         }
 
-        return ['status' => 'success'] ;
+        return ['status' => 'success', 'idOrder' => $order->id] ;
     }
 
     /**
         return $json ;
     }
 
+    public function actionConfirm($idOrder) 
+    {
+        $order = Order::searchOne(['id' => $idOrder]) ;
+        
+        if(!$order || $order->id_user != User::getCurrentId()) {
+            throw new \yii\base\UserException('Commande introuvable.') ;
+        }
+        
+        return $this->render('confirm',[
+            'order' => $order
+        ]) ;
+    }
+    
 }
         

producer/views/order/confirm.php

+<?php
+
+/** 
+Copyright distrib (2018) 
+
+contact@opendistrib.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/
+
+use common\models\Order ;
+
+$this->setPageTitle('Confirmation de commande') ;
+
+?>
+
+<div id="order-success">
+    <div class="alert alert-success">
+        <span class="glyphicon glyphicon-ok glyphicon-big"></span>             
+        <div class="content">
+            <h3>Votre commande a bien été prise en compte</h3>
+            <a href="<?= Yii::$app->urlManagerProducer->createUrl(['order/history']) ?>" class="btn btn-default">
+                <span class="glyphicon glyphicon-chevron-right"></span>
+                Voir toutes mes commandes
+            </a>
+        </div>
+        <div class="clr"></div>
+    </div>
+    <div class="alert alert-info">
+        <span class="glyphicon glyphicon-list-alt glyphicon-big"></span>             
+        <div class="content">
+            <h3>Récapitulatif de votre commande</h3>
+            <ul>
+                <li><span class="glyphicon glyphicon-time"></span><?= date('d/m/Y',strtotime($order->distribution->date)) ?></li>
+                <li><span class="glyphicon glyphicon-map-marker"></span><?=  Html::encode($order->pointSale->name) ?><?php if(strlen($order->pointSale->name)): ?> <span class="locality">à <?= Html::encode($order->pointSale->locality) ?></span><?php endif; ?></li>
+                <li><span class="glyphicon glyphicon-th-list"></span><?= $order->countProducts(); ?> produit<?php if($order->countProducts() > 1): ?>s<?php endif; ?></li>
+                <li><span class="glyphicon glyphicon-chevron-right"></span><?= $order->getAmount(Order::AMOUNT_TOTAL, true); ?></li>
+            </ul>                
+        </div>
+        <div class="clr"></div>
+    </div>        
+</div>

producer/views/order/order.php

     <?php if(isset($order)): ?>
         <span id="order-distribution-date"><?= $order->distribution->date; ?></span> 
     <?php endif; ?>
-    <div v-if="orderSuccess" id="order-success">
-        <div class="alert alert-success">
-            <span class="glyphicon glyphicon-ok glyphicon-big"></span>             
-            <div class="content">
-                <h3>Votre commande a bien été prise en compte</h3>
-                <a href="<?= Yii::$app->urlManagerProducer->createUrl(['order/history']) ?>" class="btn btn-default">
-                    <span class="glyphicon glyphicon-chevron-right"></span>
-                    Voir toutes mes commandes
-                </a>
-            </div>
-            <div class="clr"></div>
-        </div>
-        <div class="alert alert-info">
-            <span class="glyphicon glyphicon-list-alt glyphicon-big"></span>             
-            <div class="content">
-                <h3>Récapitulatif de votre commande</h3>
-                <ul>
-                    <li><span class="glyphicon glyphicon-time"></span> {{ dateFormat }}</li>
-                    <li><span class="glyphicon glyphicon-map-marker"></span> {{ pointSaleActive.name }} <span class="locality" v-if="pointSaleActive.locality.length > 0">à {{ pointSaleActive.locality }}</span></li>
-                    <li><span class="glyphicon glyphicon-th-list"></span> {{ countProductOrdered() }} produits</li>
-                    <li><span class="glyphicon glyphicon-chevron-right"></span> {{ priceTotal(true) }}</li>
-                </ul>                
-            </div>
-            <div class="clr"></div>
-        </div>        
+    <div v-if="loadingInit && distributions.length == 0" class="alert alert-warning">
+        Aucune distribution n'est prévue chez ce producteur.
     </div>
     <div v-else>
         <div :class="(producer != null && producer.order_infos.length) ? 'col-md-9' : 'col-md-12'">
                 <div class="clr"></div>
             </div>
             <div class="content">
+                <div v-if="errors.length" class="alert alert-danger">
+                    <ul>
+                        <li v-for="error in errors">
+                            {{ error }}
+                        </li>
+                    </ul>
+                </div>
                 <transition name="slide">
                     <div id="content-step-date" v-if="step == 'date'">
                             <div id="legend">
                             <table id="products" class="table table-bordered" >
                                 <thead>
                                     <tr>
+                                        <th>Photo</th>
                                         <th>Nom</th>
                                         <th>Prix unitaire</th>
                                         <th>Quantité</th>
                                 </thead>
                                 <tbody>
                                     <tr v-for="product in products" v-if="product.productDistribution[0].active == 1">
+                                        <td class="photo">
+                                            <img v-if="product.photo.length" class="photo-product" :src="'<?php echo Yii::$app->urlManager->getBaseUrl(); ?>/uploads/'+product.photo" />
+                                        </td>
                                         <td class="name">
                                             <span class="name">{{ product.name }}</span> 
                                             <span class="other">
                             </div>
                         </div>
                         <div class="block-actions">
-                            <button class="btn btn-primary" @click="confirmClick">Je confirme ma commande</button>
+                            <button class="btn btn-primary" disabled="disabled" v-if="disableConfirmButton">Je confirme ma commande</button>
+                            <button class="btn btn-primary" v-else @click="confirmClick">Je confirme ma commande</button>
                         </div>
                     </div>
                 </transition>

producer/web/css/screen.css

 }
 /* line 171, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale td.name .the-name {
-  text-transform: uppercase;
   font-family: "capsuularegular";
   color: black;
   font-size: 20px;
   line-height: 25px;
 }
-/* line 180, ../sass/order/_order.scss */
+/* line 179, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale td.actions {
   width: 150px;
 }
-/* line 182, ../sass/order/_order.scss */
+/* line 181, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale td.actions button {
   width: 100%;
 }
-/* line 188, ../sass/order/_order.scss */
+/* line 187, ../sass/order/_order.scss */
 .order-order #app-order-order table#points-sale tr.selected td {
   background-color: white;
 }
-/* line 196, ../sass/order/_order.scss */
+/* line 195, ../sass/order/_order.scss */
+.order-order #app-order-order table#products td.photo img {
+  width: 100px;
+}
+/* line 201, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .name {
-  text-transform: uppercase;
   font-family: "capsuularegular";
   color: black;
   font-size: 20px;
   line-height: 25px;
 }
-/* line 203, ../sass/order/_order.scss */
+/* line 207, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .other {
   font-size: 14px;
   color: #333;
 }
-/* line 207, ../sass/order/_order.scss */
+/* line 211, ../sass/order/_order.scss */
 .order-order #app-order-order table#products td.name .recipe {
   color: gray;
 }
-/* line 211, ../sass/order/_order.scss */
+/* line 215, ../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 215, ../sass/order/_order.scss */
+/* line 219, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity {
   width: 150px;
 }
-/* line 217, ../sass/order/_order.scss */
+/* line 221, ../sass/order/_order.scss */
 .order-order #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
 }
-/* line 223, ../sass/order/_order.scss */
+/* line 227, ../sass/order/_order.scss */
 .order-order #app-order-order table#products tr.total .price-total {
   font-size: 23px;
 }
-/* line 230, ../sass/order/_order.scss */
+/* line 234, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit {
   margin-top: 20px;
 }
-/* line 233, ../sass/order/_order.scss */
+/* line 237, ../sass/order/_order.scss */
 .order-order #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
-/* line 240, ../sass/order/_order.scss */
+/* line 244, ../sass/order/_order.scss */
 .order-order #app-order-order #infos {
   margin-top: 30px;
 }
-/* line 242, ../sass/order/_order.scss */
+/* line 246, ../sass/order/_order.scss */
 .order-order #app-order-order #infos .panel-body {
   padding-top: 0px;
   white-space: pre-line;
 }
-/* line 250, ../sass/order/_order.scss */
-.order-order #app-order-order #order-success .alert.alert-success .glyphicon-big {
+
+/* line 5, ../sass/order/_confirm.scss */
+.order-confirm #main #order-success .alert.alert-success .glyphicon-big {
   background-color: #00A65A;
 }
-/* line 256, ../sass/order/_order.scss */
-.order-order #app-order-order #order-success .alert.alert-info .glyphicon-big {
+/* line 11, ../sass/order/_confirm.scss */
+.order-confirm #main #order-success .alert.alert-info .glyphicon-big {
   background-color: #0097BC;
   padding: 55px 30px;
 }
-/* line 262, ../sass/order/_order.scss */
-.order-order #app-order-order #order-success .alert {
+/* line 17, ../sass/order/_confirm.scss */
+.order-confirm #main #order-success .alert.alert-info .content .glyphicon {
+  margin-right: 5px;
+}
+/* line 23, ../sass/order/_confirm.scss */
+.order-confirm #main #order-success .alert {
   padding: 0px;
 }
-/* line 264, ../sass/order/_order.scss */
-.order-order #app-order-order #order-success .alert .glyphicon-big {
+/* line 25, ../sass/order/_confirm.scss */
+.order-confirm #main #order-success .alert .glyphicon-big {
   font-size: 90px;
   color: white;
   padding: 30px;
   float: left;
 }
-/* line 271, ../sass/order/_order.scss */
-.order-order #app-order-order #order-success .alert div.content {
+/* line 32, ../sass/order/_confirm.scss */
+.order-confirm #main #order-success .alert div.content {
   color: #333;
   padding: 20px;
   margin-left: 151px;
 }
-/* line 276, ../sass/order/_order.scss */
-.order-order #app-order-order #order-success .alert div.content h3 {
+/* line 37, ../sass/order/_confirm.scss */
+.order-confirm #main #order-success .alert div.content h3 {
   font-family: "capsuularegular";
   font-size: 30px;
   color: #333;
   line-height: 35px;
   text-transform: none;
 }
-/* line 289, ../sass/order/_order.scss */
-.order-order #app-order-order #order-success .alert div.content .locality {
+/* line 50, ../sass/order/_confirm.scss */
+.order-confirm #main #order-success .alert div.content .locality {
   color: gray;
 }
 

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

         producer: null,
         date: null,
         dateFormat: null,
+        distributions: [],
         distribution: null,
         pointsSale: [],
         pointSaleActive: null,
         comment: '',
         creditCheckbox: false,
         credit: 0,
-        orderSuccess: false,
+        errors: [],
+        disableConfirmButton: false,
         calendar: {
             mode: 'single',
             attrs: [],
                     this.calendar.availableDates = [] ;
                     var distributions = response.data.distributions ;
                     if(distributions.length) {
+                        this.distributions = distributions ;
                         var arrayDate ;
                         for(var i= 0; i < distributions.length; i++) {
                             this.calendar.attrs.push({
                 });  
         },
         changeStep: function(step) {
+            this.errors = [] ;
             var oldStep = this.step ;
-            this.step = step ;
-            window.scroll(0, $('#page-title').position().top - 25) ;
-            if(oldStep == 'date' && step == 'point-sale') {
-                this.init() ;
+            
+            if(oldStep == 'products' && step == 'payment') {
+                this.checkProducts() ;
+            }
+            if(!this.errors.length) {
+                this.step = step ;
+                window.scroll(0, $('#page-title').position().top - 25) ;
+                if(oldStep == 'date' && step == 'point-sale') {
+                    this.init() ;
+                }
             }
+            
         },
         dayClick: function(day) {
             if(this.isAvailableDate(day.date)) {
             }
         },
         confirmClick: function() {
+            this.disableConfirmButton = true ;
+            
             var productsArray = {} ;
             for(var key in this.products) {
                 if( this.products[key].quantity_form != null && 
                 products: productsArray
             }).then(response => {
                 if(response.data.status == 'success') {
-                    this.orderSuccess = true ;
+                    window.location.href = chat_base_url(true)+'order/confirm?idOrder='+response.data.idOrder ;
                 }
             });
+        },
+        checkProducts: function() {
+            if(!this.oneProductOrdered()) {
+                this.errors.push('Veuillez sélectionner au moins un produit.') ;
+            }
         }
     }
 });

producer/web/sass/order/_confirm.scss

+
+.order-confirm #main {
+    #order-success {
+        .alert.alert-success {
+            .glyphicon-big {
+                background-color: #00A65A ;
+            }
+        }
+
+        .alert.alert-info {
+            .glyphicon-big {
+                background-color: #0097BC ;
+                padding: 55px 30px ;
+            }
+            
+            .content {
+                .glyphicon {
+                    margin-right: 5px ;
+                }
+            }
+        }
+
+        .alert {
+            padding: 0px ;
+            .glyphicon-big {
+                font-size: 90px ;
+                color: white ;
+                padding: 30px ;
+                float: left ;
+            }
+
+            div.content {
+                color: #333 ;
+                padding: 20px ;
+                margin-left: 151px ;
+
+                h3 {
+                    font-family: 'capsuularegular' ;
+                    font-size: 30px ;
+                    color: #333 ;
+                    margin-bottom: 20px ;
+                    margin-top: 0px ;
+                    margin-left: 0px ;
+                    text-align: left ;
+                    padding-left: 0px ;
+                    line-height: 35px ;
+                    text-transform: none ;
+                }
+
+                .locality {
+                    color: gray ;
+                }
+            }
+        }
+    }
+    
+}

producer/web/sass/order/_order.scss

         table#points-sale {
             td.name {
                 .the-name {
-                    text-transform: uppercase ;
                     font-family: 'capsuularegular' ;
                     color: black ;
                     font-size: 20px ;
         }
         
         table#products {
+            td.photo {
+                img {
+                    width: 100px ;
+                }
+            }
+            
             td.name {
                 .name {
-                    text-transform: uppercase ;
                     font-family: 'capsuularegular' ;
                     color: black ;
                     font-size: 20px ;
                 white-space: pre-line ;
             }
         }
-        
-        #order-success {
-            .alert.alert-success {
-                .glyphicon-big {
-                    background-color: #00A65A ;
-                }
-            }
-            
-            .alert.alert-info {
-                .glyphicon-big {
-                    background-color: #0097BC ;
-                    padding: 55px 30px ;
-                }
-            }
-            
-            .alert {
-                padding: 0px ;
-                .glyphicon-big {
-                    font-size: 90px ;
-                    color: white ;
-                    padding: 30px ;
-                    float: left ;
-                }
-
-                div.content {
-                    color: #333 ;
-                    padding: 20px ;
-                    margin-left: 151px ;
-                    
-                    h3 {
-                        font-family: 'capsuularegular' ;
-                        font-size: 30px ;
-                        color: #333 ;
-                        margin-bottom: 20px ;
-                        margin-top: 0px ;
-                        margin-left: 0px ;
-                        text-align: left ;
-                        padding-left: 0px ;
-                        line-height: 35px ;
-                        text-transform: none ;
-                    }
-                    
-                    .locality {
-                        color: gray ;
-                    }
-                }
-            }
-        }
     }
     
     

producer/web/sass/screen.scss

 @import "order/_form.scss";
 @import "order/_history.scss";
 @import "order/_order.scss";
+@import "order/_confirm.scss";
 @import "credit/_add.scss";
 @import "subscription/_form.scss";
 @import "_responsive.scss";