[producer] Amélioration système catégories

producer/controllers/OrderController.php

@@ -736,7 +736,14 @@ class OrderController extends ProducerBaseController
 
                         // Catégories
                         $categoriesArray = ProductCategory::searchAll([], ['orderby' => 'product_category.position ASC', 'as_array' => true]) ;
-                        array_unshift($categoriesArray, ['id' => null, 'name' => 'Catégorie par défaut']) ;
+                        $countProductsWithoutCategories = Product::searchCount([
+                                'id_producer' => $this->getProducer()->id,
+                                'product.active' => 1,
+                                'product.id_product_category' => null
+                        ]);
+                        if($countProductsWithoutCategories) {
+                                array_unshift($categoriesArray, ['id' => null, 'name' => 'Catégorie par défaut']) ;
+                        }
                         $json['categories'] = $categoriesArray ;
 
                         // Produits

producer/views/order/order.php

@@ -229,28 +229,35 @@ $producer = GlobalParam::getCurrentProducer() ;
                                 <tbody>
                                     <template v-for="category in categories">
                                         <tr v-if="category.id && countProductsByCategory(category)">
-                                            <td class="category-name" colspan="5">{{ category.name }}</td>
-                                        </tr>
-                                        <tr v-for="product in products" v-if="product.id_product_category == category.id && product.productDistribution && product.productDistribution[0] && 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 class="category-name" colspan="5" @click="setCategoryCurrent(category)">
+                                                <span v-if="categoryCurrent && categoryCurrent.id == category.id" class="glyphicon glyphicon-triangle-bottom"></span>
+                                                <span v-else class="glyphicon glyphicon-triangle-right"></span>
+                                                {{ category.name }}
+                                                <span class="label label-default">{{ countProductsByCategory(category) }} produit<template v-if="countProductsByCategory(category) > 1">s</template></span>
+                                                <span v-if="countSelectedProductsByCategory(category) > 0" class="label label-success">{{ countSelectedProductsByCategory(category) }} produit<template v-if="countSelectedProductsByCategory(category) > 1">s</template> sélectionné<template v-if="countSelectedProductsByCategory(category) > 1">s</template></span>
                                             </td>
-                                            <td class="name">
-                                                <span class="name">{{ product.name }}</span>
-                                                <span class="other">
+                                        </tr>
+                                        <template v-if="(categoryCurrent && categoryCurrent.id == category.id) || category.id == null">
+                                            <tr v-for="product in products" v-if="product.id_product_category == category.id && product.productDistribution && product.productDistribution[0] && 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">
                                                     <span v-if="product.description.length">/</span>
                                                     <span class="description">{{ product.description }}</span>
                                                     <span v-if="product.weight">({{ product.weight }}&nbsp;g)</span>
                                                 </span>
-                                                <span v-if="product.quantity_max > 0 && ((product.quantity_form / product.coefficient_unit == product.quantity_remaining) || ((product.quantity_remaining * product.coefficient_unit) - product.quantity_form) < product.step)" class="label label-danger">
+                                                    <span v-if="product.quantity_max > 0 && ((product.quantity_form / product.coefficient_unit == product.quantity_remaining) || ((product.quantity_remaining * product.coefficient_unit) - product.quantity_form) < product.step)" class="label label-danger">
                                                     Épuisé
                                                 </span>
-                                                <div class="recipe" v-if="product.recipe.length">{{ product.recipe }}</div>
-                                            </td>
-                                            <td class="price-unit">
+                                                    <div class="recipe" v-if="product.recipe.length">{{ product.recipe }}</div>
+                                                </td>
+                                                <td class="price-unit">
                                                     <template v-if="product.price_with_tax > 0">{{ formatPrice(product.price_with_tax) }}<br /><span class="unit">{{ product.wording_unit }}</span></template>
-                                            </td>
-                                            <td class="td-quantity">
+                                                </td>
+                                                <td class="td-quantity">
                                                     <template v-if="product.price_with_tax > 0">
                                                         <div class="input-group">
                                                             <span class="input-group-btn">
@@ -263,16 +270,31 @@ $producer = GlobalParam::getCurrentProducer() ;
                                                             </span>
                                                         </div>
                                                     </template>
-                                            </td>
-                                            <td class="price-total">
+                                                </td>
+                                                <td class="price-total">
                                                     <template v-if="product.price_with_tax > 0 && product.quantity_form > 0">
-                                                            {{ formatPrice(product.price_with_tax * (product.quantity_form / product.coefficient_unit )) }}
+                                                        {{ formatPrice(product.price_with_tax * (product.quantity_form / product.coefficient_unit )) }}
                                                     </template>
-                                            </td>
-                                        </tr>
+                                                </td>
+                                            </tr>
+                                        </template>
                                     </template>
                                     <tr class="total">
-                                        <td colspan="4"></td>
+                                        <td class="summary" colspan="4">
+                                            <template v-if="priceTotal() > 0">
+                                                <h3>&gt; Résumé</h3>
+                                                <ul>
+                                                    <li v-for="product in products" v-if="product.quantity_form > 0">
+                                                        <span class="quantity">{{ product.quantity_form }} x</span>
+                                                        <span class="name">{{ product.name }}</span>
+                                                        <span class="other">
+                                                        <span v-if="product.description.length">/</span>
+                                                        <span class="description">{{ product.description }}</span>
+                                                        <span v-if="product.weight">({{ product.weight }}&nbsp;g)</span>
+                                                    </li>
+                                                </ul>
+                                            </template>
+                                        </td>
                                         <td class="price-total">{{ priceTotal(true) }}</td>
                                     </tr>
                                 </tbody>

producer/web/css/screen.css

@@ -1503,46 +1503,65 @@ termes.
   text-transform: uppercase;
   padding-top: 13px;
 }
-/* line 233, ../sass/order/_order.scss */
+/* line 230, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products td.category-name .glyphicon-triangle-bottom,
+.order-order #main #app-order-order table#products td.category-name .glyphicon-triangle-right {
+  font-size: 15px;
+}
+/* line 235, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products td.category-name span.label {
+  font-family: "Arial";
+  font-weight: normal;
+  float: right;
+  text-transform: none;
+  margin-left: 15px;
+}
+/* line 244, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products td.category-name:hover {
+  cursor: pointer;
+  background-color: #FF7F00;
+  color: white;
+}
+/* line 252, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.photo img {
   width: 100px;
 }
-/* line 239, ../sass/order/_order.scss */
+/* line 258, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.name .name {
   font-family: "capsuularegular";
   color: black;
   font-size: 20px;
   line-height: 25px;
 }
-/* line 245, ../sass/order/_order.scss */
+/* line 264, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.name .other {
   font-size: 14px;
   color: #333;
 }
-/* line 249, ../sass/order/_order.scss */
+/* line 268, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.name .recipe {
   color: gray;
 }
-/* line 253, ../sass/order/_order.scss */
+/* line 272, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit, .order-order #main #app-order-order table#products .price-total {
   width: 100px;
   text-align: center;
 }
-/* line 257, ../sass/order/_order.scss */
+/* line 276, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .unit, .order-order #main #app-order-order table#products .price-total .unit {
   color: gray;
   font-size: 13px;
 }
-/* line 262, ../sass/order/_order.scss */
+/* line 281, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity {
   width: 175px;
 }
-/* line 264, ../sass/order/_order.scss */
+/* line 283, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
   border-right: 0px none;
 }
-/* line 268, ../sass/order/_order.scss */
+/* line 287, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity .input-group-addon {
   padding: 5px;
   padding-left: 0px;
@@ -1550,30 +1569,57 @@ termes.
   border-left: 0px none;
   border-right: 0px none;
 }
-/* line 278, ../sass/order/_order.scss */
+/* line 298, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products tr.total .summary h3 {
+  margin-top: 0px;
+  font-family: "capsuularegular";
+  text-transform: none;
+  margin-bottom: 5px;
+}
+/* line 305, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products tr.total .summary ul {
+  margin-bottom: 15px;
+  padding-left: 20px;
+  font-size: 23px;
+}
+/* line 312, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products tr.total .summary ul li .quantity {
+  font-size: 18px;
+}
+/* line 316, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products tr.total .summary ul li .name {
+  font-family: "capsuularegular";
+  font-size: 24px;
+}
+/* line 320, ../sass/order/_order.scss */
+.order-order #main #app-order-order table#products tr.total .summary ul li .other {
+  font-family: "arial";
+  font-size: 14px;
+}
+/* line 327, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .price-total {
   font-size: 23px;
 }
-/* line 286, ../sass/order/_order.scss */
+/* line 335, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
-/* line 292, ../sass/order/_order.scss */
+/* line 341, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .comment {
   margin-bottom: 20px;
 }
-/* line 303, ../sass/order/_order.scss */
+/* line 352, ../sass/order/_order.scss */
 .order-order #main #app-order-order #infos {
   margin-top: 30px;
 }
-/* line 305, ../sass/order/_order.scss */
+/* line 354, ../sass/order/_order.scss */
 .order-order #main #app-order-order #infos .panel-body {
   padding-top: 0px;
   white-space: pre-line;
 }
 
-/* line 315, ../sass/order/_order.scss */
+/* line 364, ../sass/order/_order.scss */
 #main #content .panel h3 {
   font-family: "highvoltageregular";
   margin: 0px;

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

@@ -16,6 +16,7 @@ var app = new Vue({
         pointsSaleCodes: [],
         products: [],
         categories: [],
+        categoryCurrent: null,
         comment: '',
         creditCheckbox: false,
         useCredit: false,
@@ -120,6 +121,7 @@ var app = new Vue({
                         app.calendar.attrs = [];
                         app.calendar.availableDates = [];
                         var distributions = response.data.distributions;
+
                         if (distributions.length) {
                             app.distributions = distributions;
                             var arrayDate;
@@ -192,6 +194,8 @@ var app = new Vue({
 
                     if(response.data.categories) {
                         app.categories = response.data.categories ;
+                        console.log(response.data.categories[0]) ;
+                        app.setCategoryCurrent(response.data.categories[0]) ;
                     }
 
                     if(!updateOnlyProducts) {
@@ -401,6 +405,24 @@ var app = new Vue({
                 }
             }
             return count ;
+        },
+        countSelectedProductsByCategory: function(category) {
+            var count = 0 ;
+            for(var key in this.products) {
+                if(this.products[key].quantity_form > 0 && this.products[key].id_product_category == category.id) {
+                    count ++ ;
+                }
+            }
+
+            return count ;
+        },
+        setCategoryCurrent: function(category) {
+            if(this.categoryCurrent && this.categoryCurrent.id == category.id) {
+                this.categoryCurrent = null ;
+            }
+            else {
+                this.categoryCurrent = category ;
+            }
         }
     },
     computed : {

producer/web/sass/order/_order.scss

@@ -221,12 +221,31 @@
         table#products {
 
             td.category-name {
-                //font-family: "capsuularegular" ;
                 font-family: "highvoltageregular" ;
                 font-size: 22px ;
                 line-height: 30px;
                 text-transform: uppercase;
                 padding-top: 13px ;
+
+                .glyphicon-triangle-bottom,
+                .glyphicon-triangle-right {
+                    font-size: 15px ;
+                }
+
+                span.label {
+                    //font-family: 'capsuularegular' ;
+                    font-family: 'Arial' ;
+                    font-weight: normal ;
+                    float: right ;
+                    text-transform: none ;
+                    margin-left: 15px ;
+                }
+
+                &:hover {
+                    cursor: pointer ;
+                    background-color: $color1 ;
+                    color: white ;
+                }
             }
 
             td.photo {
@@ -275,6 +294,36 @@
             }
             
             tr.total {
+                .summary {
+                    h3 {
+                        margin-top: 0px ;
+                        font-family: 'capsuularegular' ;
+                        text-transform: none ;
+                        margin-bottom: 5px ;
+                    }
+
+                    ul {
+                        margin-bottom: 15px ;
+                        padding-left: 20px ;
+                        font-size: 23px ;
+
+
+                        li {
+                            .quantity {
+                                font-size: 18px ;
+                            }
+
+                            .name {
+                                font-family: 'capsuularegular' ;
+                                font-size: 24px ;
+                            }
+                            .other {
+                                font-family: 'arial' ;
+                                font-size: 14px ;
+                            }
+                        }
+                    }
+                }
                 .price-total {
                     font-size: 23px ;
                 }