2729 - Prices popover refactor
This commit is contained in:
parent
dac95805e8
commit
bf976a3e8f
|
|
@ -13,7 +13,8 @@
|
|||
on-error-src/>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h3>
|
||||
<h3 class="link"
|
||||
ng-click="itemDescriptor.show($event, item.id)">
|
||||
{{::item.name}}
|
||||
</h3>
|
||||
<h4 class="ellipsize">
|
||||
|
|
@ -65,3 +66,6 @@
|
|||
vn-id="pricesPopover"
|
||||
order="$ctrl.order">
|
||||
</vn-order-prices-popover>
|
||||
<vn-item-descriptor-popover
|
||||
vn-id="itemDescriptor">
|
||||
</vn-item-descriptor-popover>
|
||||
|
|
@ -1,75 +1,52 @@
|
|||
<default>
|
||||
<vn-descriptor-content
|
||||
module="item"
|
||||
description="$ctrl.item.name"
|
||||
descriptor="$ctrl"
|
||||
class="vn-order-prices-popover">
|
||||
<slot-body>
|
||||
<div class="attributes">
|
||||
<vn-label-value
|
||||
label="Buyer"
|
||||
value="{{$ctrl.item.firstName}} {{$ctrl.item.lastName}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
ng-repeat="tag in $ctrl.tags"
|
||||
label="{{::tag.tag.name}}"
|
||||
value="{{::tag.value}}">
|
||||
</vn-label-value>
|
||||
</div>
|
||||
<div class="quicklinks">
|
||||
<vn-quick-link
|
||||
tooltip="Diary"
|
||||
state="['item.card.diary', {id: $ctrl.id}]"
|
||||
icon="icon-transaction">
|
||||
</vn-quick-link>
|
||||
</div>
|
||||
</slot-body>
|
||||
<slot-after>
|
||||
<form name="form" class="prices">
|
||||
<vn-table>
|
||||
<vn-tbody>
|
||||
<vn-tr ng-repeat="price in $ctrl.prices">
|
||||
<vn-td shrink class="warehouse">
|
||||
<span
|
||||
class="ellipsize text"
|
||||
title="{{::price.warehouse}}">
|
||||
{{::price.warehouse}}
|
||||
</span>
|
||||
</vn-td>
|
||||
<vn-td number expand>
|
||||
<div>
|
||||
<span
|
||||
ng-click="$ctrl.addQuantity(price)"
|
||||
class="link unselectable">{{::price.grouping}}</span>
|
||||
<span> x {{::price.price | currency: 'EUR': 2}}</span>
|
||||
</div>
|
||||
<div class="price-kg" ng-show="::price.priceKg">
|
||||
{{price.priceKg | currency: 'EUR'}}/Kg
|
||||
</div>
|
||||
</vn-td>
|
||||
<vn-td shrink>
|
||||
<vn-input-number
|
||||
min="0"
|
||||
name="quantity"
|
||||
ng-model="price.quantity"
|
||||
step="price.grouping"
|
||||
on-change="$ctrl.validate()"
|
||||
class="dense">
|
||||
</vn-input-number>
|
||||
</vn-td>
|
||||
</vn-tr>
|
||||
</vn-tbody>
|
||||
</vn-table>
|
||||
<div class="footer vn-pa-md">
|
||||
<div class="error">
|
||||
<span translate>Wrong quantity</span>
|
||||
<form name="form" class="prices">
|
||||
<vn-table>
|
||||
<vn-tbody>
|
||||
<vn-tr ng-repeat="price in $ctrl.prices">
|
||||
<vn-td class="warehouse" expand>
|
||||
<span
|
||||
class="text"
|
||||
title="{{::price.warehouse}}">
|
||||
{{::price.warehouse}}
|
||||
</span>
|
||||
</vn-td>
|
||||
<vn-td number expand>
|
||||
<div>
|
||||
<span
|
||||
ng-click="$ctrl.addQuantity(price)"
|
||||
class="link unselectable">{{::price.grouping}}</span>
|
||||
<span> x {{::price.price | currency: 'EUR': 2}}</span>
|
||||
</div>
|
||||
<vn-submit
|
||||
label="Save"
|
||||
ng-click="$ctrl.submit()">
|
||||
</vn-submit>
|
||||
</div>
|
||||
</form>
|
||||
</slot-after>
|
||||
</vn-descriptor-content>
|
||||
<div class="price-kg" ng-show="::price.priceKg">
|
||||
{{::price.priceKg | currency: 'EUR'}}/Kg
|
||||
</div>
|
||||
</vn-td>
|
||||
<vn-td shrink>
|
||||
<!-- Focus first element -->
|
||||
<vn-input-number ng-if="$index === 0"
|
||||
min="0"
|
||||
name="quantity"
|
||||
ng-model="price.quantity"
|
||||
step="price.grouping"
|
||||
class="dense"
|
||||
vn-focus>
|
||||
</vn-input-number>
|
||||
<vn-input-number ng-if="$index > 0"
|
||||
min="0"
|
||||
name="quantity"
|
||||
ng-model="price.quantity"
|
||||
step="price.grouping"
|
||||
class="dense">
|
||||
</vn-input-number>
|
||||
</vn-td>
|
||||
</vn-tr>
|
||||
</vn-tbody>
|
||||
</vn-table>
|
||||
<div class="footer vn-pa-md">
|
||||
<vn-submit
|
||||
label="Add"
|
||||
ng-click="$ctrl.submit()">
|
||||
</vn-submit>
|
||||
</div>
|
||||
</form>
|
||||
</default>
|
||||
|
|
|
|||
|
|
@ -11,34 +11,18 @@ class Controller extends Popover {
|
|||
set prices(value) {
|
||||
this._prices = value;
|
||||
if (value && value[0].grouping)
|
||||
this.calculateTotal();
|
||||
this.getTotalQuantity();
|
||||
}
|
||||
|
||||
get prices() {
|
||||
return this._prices;
|
||||
}
|
||||
|
||||
getTags() {
|
||||
const filter = {
|
||||
where: {
|
||||
itemFk: this.id,
|
||||
priority: {gte: 4}
|
||||
},
|
||||
order: 'priority ASC',
|
||||
include: {relation: 'tag'}
|
||||
};
|
||||
this.$http.get(`ItemTags`, {filter})
|
||||
.then(res => {
|
||||
this.tags = res.data;
|
||||
this.$.$applyAsync(() => this.relocate());
|
||||
});
|
||||
}
|
||||
|
||||
show(parent, item) {
|
||||
this.item = JSON.parse(JSON.stringify(item));
|
||||
this.id = item.id;
|
||||
this.prices = this.item.prices;
|
||||
this.getTags();
|
||||
|
||||
super.show(parent);
|
||||
}
|
||||
|
||||
|
|
@ -47,67 +31,74 @@ class Controller extends Popover {
|
|||
this.item = {};
|
||||
this.tags = {};
|
||||
this._prices = {};
|
||||
this.total = 0;
|
||||
this.totalQuantity = 0;
|
||||
super.onClose();
|
||||
}
|
||||
|
||||
calculateMax() {
|
||||
this.max = this.item.available - this.total;
|
||||
}
|
||||
|
||||
calculateTotal() {
|
||||
this.total = 0;
|
||||
|
||||
this.prices.forEach(price => {
|
||||
getTotalQuantity() {
|
||||
let total = 0;
|
||||
for (let price of this.prices) {
|
||||
if (!price.quantity) price.quantity = 0;
|
||||
this.total += price.quantity;
|
||||
});
|
||||
this.calculateMax();
|
||||
total += price.quantity;
|
||||
}
|
||||
|
||||
this.totalQuantity = total;
|
||||
this.maxQuantity = this.item.available - total;
|
||||
}
|
||||
|
||||
addQuantity(price) {
|
||||
if (this.total + price.grouping <= this.max)
|
||||
this.getTotalQuantity();
|
||||
const quantity = this.totalQuantity + price.grouping;
|
||||
if (quantity <= this.maxQuantity)
|
||||
price.quantity += price.grouping;
|
||||
}
|
||||
|
||||
getFilledLines() {
|
||||
const filledLines = [];
|
||||
let match;
|
||||
this.prices.forEach(price => {
|
||||
getGroupings() {
|
||||
const filledRows = [];
|
||||
for (let price of this.prices) {
|
||||
if (price.quantity && price.quantity > 0) {
|
||||
match = filledLines.find(element => {
|
||||
return element.warehouseFk == price.warehouseFk;
|
||||
const priceMatch = filledRows.find(row => {
|
||||
return row.warehouseFk == price.warehouseFk;
|
||||
});
|
||||
|
||||
if (!match) {
|
||||
filledLines.push(Object.assign({}, price));
|
||||
return;
|
||||
}
|
||||
match.quantity += price.quantity;
|
||||
if (!priceMatch)
|
||||
filledRows.push(Object.assign({}, price));
|
||||
else priceMatch.quantity += price.quantity;
|
||||
}
|
||||
});
|
||||
return filledLines;
|
||||
}
|
||||
|
||||
return filledRows;
|
||||
}
|
||||
|
||||
submit() {
|
||||
this.calculateTotal();
|
||||
const filledLines = this.getFilledLines();
|
||||
const filledRows = this.getGroupings();
|
||||
|
||||
if (filledLines.length <= 0) {
|
||||
this.vnApp.showError(this.$t('First you must add some quantity'));
|
||||
return;
|
||||
try {
|
||||
const hasValidGropings = filledRows.some(row =>
|
||||
row.quantity % row.grouping == 0
|
||||
);
|
||||
|
||||
if (filledRows.length <= 0)
|
||||
throw new Error('First you must add some quantity');
|
||||
|
||||
if (!hasValidGropings)
|
||||
throw new Error(`The amounts doesn't match with the grouping`);
|
||||
|
||||
const params = {
|
||||
orderFk: this.order.id,
|
||||
items: filledRows
|
||||
};
|
||||
this.$http.post(`OrderRows/addToOrder`, params)
|
||||
.then(() => {
|
||||
this.vnApp.showSuccess(this.$t('Data saved!'));
|
||||
this.hide();
|
||||
if (this.card) this.card.reload();
|
||||
});
|
||||
} catch (e) {
|
||||
this.vnApp.showError(this.$t(e.message));
|
||||
return false;
|
||||
}
|
||||
|
||||
const params = {
|
||||
orderFk: this.order.id,
|
||||
items: filledLines
|
||||
};
|
||||
this.$http.post(`OrderRows/addToOrder`, params)
|
||||
.then(() => {
|
||||
this.vnApp.showSuccess(this.$t('Data saved!'));
|
||||
this.hide();
|
||||
if (this.card) this.card.reload();
|
||||
});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
Last entries: Últimas entradas
|
||||
Qty.: Cant.
|
||||
Wrong quantity: Cantidad errónea
|
||||
First you must add some quantity: Primero debes agregar alguna cantidad
|
||||
First you must add some quantity: Primero debes agregar alguna cantidad
|
||||
The amounts doesn't match with the grouping: Las cantidades no coinciden con el grouping
|
||||
|
|
@ -1,25 +1,8 @@
|
|||
@import "variables";
|
||||
|
||||
.vn-order-prices-popover .content {
|
||||
max-width: 350px;
|
||||
|
||||
.header > a:first-child {
|
||||
visibility: hidden;
|
||||
}
|
||||
img[ng-src] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
vn-vertical.data {
|
||||
padding-right: 16px;
|
||||
border-right: 1px solid $color-main;
|
||||
}
|
||||
.prices {
|
||||
vn-table {
|
||||
.warehouse {
|
||||
width: 48px;
|
||||
max-width: 48px;
|
||||
}
|
||||
.price-kg {
|
||||
color: $color-font-secondary;
|
||||
font-size: .75rem
|
||||
|
|
@ -30,18 +13,6 @@
|
|||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
|
||||
.error {
|
||||
display: none;
|
||||
}
|
||||
&.invalid {
|
||||
.error {
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
color: $color-alert;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
<vn-item
|
||||
ng-click="addTurn.show()"
|
||||
vn-acl="buyer"
|
||||
ng-show="$ctrl.isEditable"
|
||||
vn-acl-action="remove"
|
||||
name="addTurn"
|
||||
translate>
|
||||
|
|
|
|||
Loading…
Reference in New Issue