354 lines
8.3 KiB
JavaScript
354 lines
8.3 KiB
JavaScript
import ngModule from '../module';
|
|
import Section from 'salix/components/section';
|
|
import './style.scss';
|
|
|
|
class Controller extends Section {
|
|
constructor($element, $) {
|
|
super($element, $);
|
|
this.itemTypes = [];
|
|
this._tags = [];
|
|
|
|
// Static autocomplete data
|
|
this.orderWays = [
|
|
{way: 'ASC', name: 'Ascendant'},
|
|
{way: 'DESC', name: 'Descendant'},
|
|
];
|
|
this.defaultOrderFields = [
|
|
{field: 'relevancy DESC, name', name: 'Relevancy'},
|
|
{field: 'showOrder, price', name: 'Color and price'},
|
|
{field: 'name', name: 'Name'},
|
|
{field: 'price', name: 'Price'}
|
|
];
|
|
this.orderFields = [].concat(this.defaultOrderFields);
|
|
this._orderWay = this.orderWays[0].way;
|
|
this.orderField = this.orderFields[0].field;
|
|
}
|
|
|
|
$onChanges() {
|
|
if (this.order && this.order.isConfirmed)
|
|
this.$state.go('order.card.line');
|
|
}
|
|
|
|
/**
|
|
* Fills order autocomplete with tags
|
|
* obtained from last filtered
|
|
*/
|
|
get order() {
|
|
return this._order;
|
|
}
|
|
|
|
/**
|
|
* Sets filter values from state params
|
|
*
|
|
* @param {Object} value - Order data
|
|
*/
|
|
set order(value) {
|
|
this._order = value;
|
|
|
|
if (!value) return;
|
|
|
|
this.$.$applyAsync(() => {
|
|
if (this.$params.categoryId)
|
|
this.categoryId = parseInt(this.$params.categoryId);
|
|
|
|
if (this.$params.typeId)
|
|
this.typeId = parseInt(this.$params.typeId);
|
|
|
|
if (this.$params.tags)
|
|
this.tags = JSON.parse(this.$params.tags);
|
|
});
|
|
}
|
|
|
|
get items() {
|
|
return this._items;
|
|
}
|
|
|
|
set items(value) {
|
|
this._items = value;
|
|
|
|
if (!value) return;
|
|
|
|
this.buildTagsFilter(value);
|
|
this.buildOrderFilter(value);
|
|
}
|
|
|
|
get categoryId() {
|
|
return this._categoryId;
|
|
}
|
|
|
|
set categoryId(value = null) {
|
|
this._categoryId = value;
|
|
this.itemTypes = [];
|
|
this.typeId = null;
|
|
|
|
this.updateStateParams();
|
|
|
|
if (this.tags.length > 0)
|
|
this.applyFilters();
|
|
|
|
if (value)
|
|
this.updateItemTypes();
|
|
}
|
|
|
|
changeCategory(id) {
|
|
if (this._categoryId == id) id = null;
|
|
this.categoryId = id;
|
|
}
|
|
|
|
get typeId() {
|
|
return this._typeId;
|
|
}
|
|
|
|
set typeId(value) {
|
|
this._typeId = value;
|
|
|
|
this.updateStateParams();
|
|
|
|
if (value || this.tags.length > 0)
|
|
this.applyFilters();
|
|
}
|
|
|
|
get tags() {
|
|
return this._tags;
|
|
}
|
|
|
|
set tags(value) {
|
|
this._tags = value;
|
|
|
|
this.updateStateParams();
|
|
|
|
if (value.length)
|
|
this.applyFilters();
|
|
}
|
|
|
|
/**
|
|
* Get order way ASC/DESC
|
|
*/
|
|
get orderWay() {
|
|
return this._orderWay;
|
|
}
|
|
|
|
set orderWay(value) {
|
|
this._orderWay = value;
|
|
if (value) this.applyOrder();
|
|
}
|
|
|
|
/**
|
|
* Returns the order way selection
|
|
*/
|
|
get orderSelection() {
|
|
return this._orderSelection;
|
|
}
|
|
|
|
set orderSelection(value) {
|
|
this._orderSelection = value;
|
|
|
|
if (value) this.applyOrder();
|
|
}
|
|
|
|
/**
|
|
* Apply order to model
|
|
*/
|
|
applyOrder() {
|
|
if (this.typeId || this.tags.length > 0)
|
|
this.$.model.addFilter(null, {orderBy: this.getOrderBy()});
|
|
}
|
|
|
|
/**
|
|
* Returns order param
|
|
*
|
|
* @return {Object} - Order param
|
|
*/
|
|
getOrderBy() {
|
|
const isTag = !!(this.orderSelection && this.orderSelection.isTag);
|
|
return {
|
|
field: this.orderField,
|
|
way: this.orderWay,
|
|
isTag: isTag
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Refreshes item type dropdown data
|
|
*/
|
|
updateItemTypes() {
|
|
let params = {
|
|
itemCategoryId: this.categoryId
|
|
};
|
|
|
|
const query = `Orders/${this.order.id}/getItemTypeAvailable`;
|
|
this.$http.get(query, {params}).then(res =>
|
|
this.itemTypes = res.data);
|
|
}
|
|
|
|
/**
|
|
* Search by tag value
|
|
* @param {object} event
|
|
*/
|
|
onSearchByTag(event) {
|
|
const value = this.$.search.value;
|
|
if (event.key !== 'Enter' || !value) return;
|
|
this.tags.push({
|
|
value: value,
|
|
});
|
|
this.$.search.value = null;
|
|
this.updateStateParams();
|
|
this.applyFilters();
|
|
}
|
|
|
|
remove(index) {
|
|
this.tags.splice(index, 1);
|
|
this.updateStateParams();
|
|
|
|
if (this.tags.length >= 0 || this.itemId || this.typeId)
|
|
this.applyFilters();
|
|
}
|
|
|
|
removeItemId() {
|
|
this.itemId = null;
|
|
this.$.searchbar.doSearch({}, 'bar');
|
|
}
|
|
|
|
removeItemName() {
|
|
this.itemName = null;
|
|
this.applyFilters();
|
|
}
|
|
|
|
applyFilters(filter = {}) {
|
|
let newParams = {};
|
|
let newFilter = Object.assign({}, filter);
|
|
const model = this.$.model;
|
|
|
|
if (this.categoryId)
|
|
newFilter.categoryFk = this.categoryId;
|
|
|
|
if (this.typeId)
|
|
newFilter.typeFk = this.typeId;
|
|
|
|
newParams = {
|
|
orderFk: this.$params.id,
|
|
orderBy: this.getOrderBy(),
|
|
tags: this.tags,
|
|
};
|
|
|
|
return model.applyFilter({where: newFilter}, newParams);
|
|
}
|
|
|
|
openPanel(event) {
|
|
if (event.defaultPrevented) return;
|
|
event.preventDefault();
|
|
|
|
this.panelFilter = {};
|
|
this.$.popover.show(this.$.search.element);
|
|
}
|
|
|
|
onPanelSubmit(filter) {
|
|
this.$.popover.hide();
|
|
this.tags.push(filter);
|
|
this.updateStateParams();
|
|
this.applyFilters();
|
|
}
|
|
|
|
/**
|
|
* Updates url state params from filter values
|
|
*/
|
|
updateStateParams() {
|
|
const params = {};
|
|
|
|
params.categoryId = undefined;
|
|
if (this.categoryId)
|
|
params.categoryId = this.categoryId;
|
|
|
|
params.typeId = undefined;
|
|
if (this.typeId)
|
|
params.typeId = this.typeId;
|
|
|
|
params.tags = undefined;
|
|
if (this.tags.length) {
|
|
const tags = [];
|
|
for (let tag of this.tags) {
|
|
const tagParam = {value: tag.value};
|
|
|
|
if (tag.tagSelection) {
|
|
tagParam.tagFk = tag.tagFk;
|
|
tagParam.tagSelection = {
|
|
name: tag.tagSelection.name
|
|
};
|
|
}
|
|
|
|
tags.push(tagParam);
|
|
}
|
|
|
|
params.tags = JSON.stringify(tags);
|
|
}
|
|
|
|
this.$state.go(this.$state.current.name, params);
|
|
}
|
|
|
|
buildTagsFilter(items) {
|
|
const tagValues = [];
|
|
items.forEach(item => {
|
|
item.tags.forEach(itemTag => {
|
|
const alreadyAdded = tagValues.findIndex(tag => {
|
|
return tag.value == itemTag.value;
|
|
});
|
|
|
|
if (alreadyAdded == -1)
|
|
tagValues.push(itemTag);
|
|
});
|
|
});
|
|
this.tagValues = tagValues;
|
|
}
|
|
|
|
buildOrderFilter(items) {
|
|
const tags = [];
|
|
items.forEach(item => {
|
|
item.tags.forEach(itemTag => {
|
|
const alreadyAdded = tags.findIndex(tag => {
|
|
return tag.field == itemTag.tagFk;
|
|
});
|
|
|
|
if (alreadyAdded == -1) {
|
|
tags.push({
|
|
name: itemTag.name,
|
|
field: itemTag.tagFk,
|
|
isTag: true
|
|
});
|
|
}
|
|
});
|
|
});
|
|
let newFilterList = [].concat(this.defaultOrderFields);
|
|
newFilterList = newFilterList.concat(tags);
|
|
this.orderFields = newFilterList;
|
|
}
|
|
|
|
onSearch(params) {
|
|
if (!params) return;
|
|
|
|
this.itemId = null;
|
|
this.itemName = null;
|
|
|
|
if (params.search) {
|
|
if (/^\d+$/.test(params.search)) {
|
|
this.itemId = params.search;
|
|
return this.applyFilters({
|
|
'i.id': params.search
|
|
});
|
|
} else {
|
|
this.itemName = params.search;
|
|
return this.applyFilters({
|
|
'i.name': {like: `%${params.search}%`}
|
|
});
|
|
}
|
|
} else return this.applyFilters();
|
|
}
|
|
}
|
|
|
|
ngModule.vnComponent('vnOrderCatalog', {
|
|
template: require('./index.html'),
|
|
controller: Controller,
|
|
bindings: {
|
|
order: '<'
|
|
}
|
|
});
|