Browse Source

Merge branch 'feature/categories_front' into dev

refactoring
Guillaume 3 years ago
parent
commit
ddf0662ac2
5 changed files with 183 additions and 37 deletions
  1. +8
    -1
      producer/controllers/OrderController.php
  2. +42
    -20
      producer/views/order/order.php
  3. +61
    -15
      producer/web/css/screen.css
  4. +22
    -0
      producer/web/js/vuejs/order-order.js
  5. +50
    -1
      producer/web/sass/order/_order.scss

+ 8
- 1
producer/controllers/OrderController.php View File

@@ -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

+ 42
- 20
producer/views/order/order.php View File

@@ -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>

+ 61
- 15
producer/web/css/screen.css View File

@@ -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;

+ 22
- 0
producer/web/js/vuejs/order-order.js View File

@@ -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 : {

+ 50
- 1
producer/web/sass/order/_order.scss View File

@@ -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 ;
}

Loading…
Cancel
Save