forked from verdnatura/hedera-web
448 lines
9.5 KiB
JavaScript
448 lines
9.5 KiB
JavaScript
|
|
Hedera.Catalog = new Class({
|
|
Extends: Hedera.Form
|
|
|
|
,_menuShown: false
|
|
|
|
,open: function() {
|
|
this.close();
|
|
this.isOpen = true;
|
|
|
|
if (!localStorage.getItem('hederaGuest')) {
|
|
Hedera.BasketChecker.check(this.conn,
|
|
this.onBasketCheck.bind(this));
|
|
} else {
|
|
var query = 'CALL mybasket_configureForGuest';
|
|
this.conn.execQuery(query, this.loadUi.bind(this));
|
|
}
|
|
}
|
|
|
|
,onBasketCheck: function(isOk) {
|
|
if (isOk)
|
|
this.loadUi();
|
|
}
|
|
|
|
,activate: function() {
|
|
document.body.appendChild(this.$.rightPanel);
|
|
|
|
this.$.itemsModel.setInfo('i', 'item', 'vn', ['id']);
|
|
|
|
if (localStorage.getItem('hederaView'))
|
|
this.setView(parseInt(localStorage.getItem('hederaView')));
|
|
else
|
|
this.setView(Hedera.Catalog.View.GRID);
|
|
}
|
|
|
|
,deactivate: function() {
|
|
this.hideMenu();
|
|
this.gui.$.topBar.style.backgroundColor = '';
|
|
Vn.Node.remove(this.$.rightPanel);
|
|
}
|
|
|
|
,setView: function(view) {
|
|
if (view === Hedera.Catalog.View.GRID) {
|
|
this.$.viewButton.setProperties({
|
|
icon: 'view_list',
|
|
tip: _('List view')
|
|
});
|
|
this.view = Hedera.Catalog.View.GRID;
|
|
var className = 'grid-view';
|
|
} else {
|
|
this.$.viewButton.setProperties({
|
|
icon: 'grid_on',
|
|
tip: _('Grid view')
|
|
});
|
|
this.view = Hedera.Catalog.View.LIST;
|
|
var className = 'list-view';
|
|
}
|
|
|
|
var node = this.$.gridView.node;
|
|
node.className = className;
|
|
localStorage.setItem('hederaView', this.view);
|
|
}
|
|
|
|
,onSwitchViewClick: function() {
|
|
this.setView(this.view === Hedera.Catalog.View.LIST ?
|
|
Hedera.Catalog.View.GRID : Hedera.Catalog.View.LIST);
|
|
}
|
|
|
|
,onBasketReady: function(form) {
|
|
if (form.get('method') != 'PICKUP')
|
|
Vn.Node.setText(this.$.method, _('Agency'));
|
|
else
|
|
Vn.Node.setText(this.$.method, _('Warehouse'));
|
|
}
|
|
|
|
,onItemsChange: function(model, status) {
|
|
if (status !== Db.Model.Status.CLEAN)
|
|
this.$.order.style.display = 'block';
|
|
else
|
|
this.$.order.style.display = 'none';
|
|
}
|
|
|
|
,onOrderChange: function(e) {
|
|
var value = e.target.value;
|
|
var sortField = value.substr(2);
|
|
var sortWay = value.charAt(0) === 'A' ?
|
|
Db.Model.SortWay.ASC : Db.Model.SortWay.DESC;
|
|
|
|
if (sortField)
|
|
this.$.itemsModel.sortByName(sortField, sortWay);
|
|
|
|
this.hideMenu();
|
|
}
|
|
|
|
,onFilterChange: function(param, newValue) {
|
|
if (newValue)
|
|
this.hideMenu();
|
|
}
|
|
|
|
,realmRenderer: function(builder, form) {
|
|
var link = builder.$.link;
|
|
link.href = this.hash.make({
|
|
form: this.hash.get('form'),
|
|
realm: form.get('id')
|
|
});
|
|
}
|
|
|
|
,onRealmChange: function(param, newValue) {
|
|
if (newValue) {
|
|
this.$.filters.style.display = 'block';
|
|
this.$.realmMsg.style.display = 'none';
|
|
} else {
|
|
this.$.filters.style.display = 'none';
|
|
this.$.realmMsg.style.display = 'block';
|
|
}
|
|
|
|
this.refreshFilter(newValue, undefined);
|
|
}
|
|
|
|
,onTypeChange: function(param, newValue) {
|
|
this.onFilterChange(param, newValue);
|
|
this.refreshTitle();
|
|
this.refreshFilter(undefined, newValue);
|
|
}
|
|
|
|
,refreshFilter: function(realm, type) {
|
|
var batch = this.$.filterBatch;
|
|
batch.block();
|
|
this.$.realmValue.value = realm;
|
|
this.$.typeValue.value = type;
|
|
this.$.search.value = undefined;
|
|
this.$.color.value = undefined;
|
|
this.$.origin.value = undefined;
|
|
this.$.category.value = undefined;
|
|
this.$.producer.value = undefined;
|
|
batch.unblock();
|
|
batch.changed();
|
|
}
|
|
|
|
,refreshTitle: function() {
|
|
var types = this.$.typesModel;
|
|
|
|
if (!types.ready)
|
|
return;
|
|
|
|
var title = _('Catalog');
|
|
var type = this.$.type.value;
|
|
|
|
if (type) {
|
|
var row = types.search('id', type);
|
|
|
|
if (row != -1)
|
|
title = types.get(row, 'name');
|
|
}
|
|
|
|
Vn.Node.setText(this.$.titleText, title);
|
|
}
|
|
|
|
,onRightPanelClick: function(event) {
|
|
event.stopPropagation();
|
|
}
|
|
|
|
,onShowMenuClick: function(event) {
|
|
this._menuShown = true;
|
|
event.stopPropagation();
|
|
this.gui.showBackground();
|
|
Vn.Node.addClass(this.$.rightPanel, 'show');
|
|
this.hideMenuCallback = this.hideMenu.bind(this);
|
|
document.addEventListener('click', this.hideMenuCallback);
|
|
}
|
|
|
|
,hideMenu: function() {
|
|
if (!this._menuShown)
|
|
return;
|
|
|
|
this.gui.hideBackground();
|
|
Vn.Node.removeClass(this.$.rightPanel, 'show');
|
|
document.removeEventListener('click', this.hideMenuCallback);
|
|
this.hideMenuCallback = null;
|
|
}
|
|
|
|
,isGuest: function() {
|
|
if (localStorage.getItem('hederaGuest')) {
|
|
Htk.Toast.showError(_('YouMustBeLoggedIn'));
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
,onBasketClick: function() {
|
|
if (this.isGuest())
|
|
return;
|
|
|
|
this.hash.set({form: 'ecomerce/basket'});
|
|
}
|
|
|
|
,onConfigureClick: function() {
|
|
if (this.isGuest())
|
|
return;
|
|
|
|
this.hash.set({form: 'ecomerce/checkout'});
|
|
}
|
|
|
|
,onAddItemClick: function(event, form) {
|
|
if (event.defaultPrevented) return;
|
|
event.preventDefault();
|
|
if (this.isGuest()) return;
|
|
|
|
this.onEraseClick();
|
|
this.$.card.row = form.row;
|
|
this.$.cardItem.value = form.get('id');
|
|
this.$.cardPopup.show(event.currentTarget);
|
|
}
|
|
|
|
,onAddLotClick: function(column, value, row) {
|
|
var model = this.$.itemLots;
|
|
var grouping = model.get(row, 'grouping');
|
|
var warehouse = model.get(row, 'warehouseFk');
|
|
var available = model.get(row, 'available');
|
|
|
|
var lotAmount = this.items[warehouse];
|
|
|
|
if (lotAmount === undefined)
|
|
lotAmount = 0;
|
|
|
|
if (lotAmount < available) {
|
|
var newAmount = lotAmount + grouping;
|
|
|
|
if (newAmount > available)
|
|
newAmount = available;
|
|
|
|
this.items[warehouse] = newAmount;
|
|
this.$.amount.value += newAmount - lotAmount;
|
|
} else
|
|
Htk.Toast.showError(_('NoMoreAmountAvailable'));
|
|
}
|
|
|
|
,onConfirmClick: function() {
|
|
var sql = '';
|
|
var batch = new Sql.Batch();
|
|
var query = new Sql.String({query: 'CALL myBasket_addItem(#warehouse, #item, #amount);'});
|
|
var amountSum = 0;
|
|
|
|
for (var warehouse in this.items) {
|
|
var amount = this.items[warehouse];
|
|
amountSum += amount;
|
|
|
|
batch.addValue('warehouse', warehouse);
|
|
batch.addValue('item', this.$.cardItem.value);
|
|
batch.addValue('amount', amount);
|
|
sql += query.render(batch);
|
|
}
|
|
|
|
if (amountSum > 0) {
|
|
this.conn.execQuery(sql);
|
|
|
|
var itemName = this.$.card.get('item');
|
|
Htk.Toast.showMessage(
|
|
sprintf(_('Added%dOf%s'), amountSum, itemName));
|
|
}
|
|
|
|
this.$.cardPopup.hide();
|
|
}
|
|
|
|
,onEraseClick: function() {
|
|
this.$.amount.value = 0;
|
|
this.items = {};
|
|
}
|
|
|
|
,onPopupClose: function() {
|
|
this.onEraseClick();
|
|
this.$.card.row = -1;
|
|
this.$.cardItem.value = undefined;
|
|
}
|
|
|
|
,onCardLoad: function() {
|
|
this.$.cardPopup.reset();
|
|
}
|
|
});
|
|
|
|
Hedera.Catalog.extend({
|
|
View: {
|
|
LIST: 0,
|
|
GRID: 1
|
|
}
|
|
});
|
|
|
|
Vn.Filter = new Class({
|
|
Extends: Htk.Field
|
|
,Tag: 'vn-filter'
|
|
,Child: 'model'
|
|
,Properties: {
|
|
model: {
|
|
type: Db.Model
|
|
,set: function(x) {
|
|
x.batch = this._batch;
|
|
this._model = x;
|
|
this._select.model = x;
|
|
}
|
|
,get: function() {
|
|
return this._model;
|
|
}
|
|
},
|
|
placeholder: {
|
|
type: String
|
|
,set: function(x) {
|
|
this._select.placeholder = x;
|
|
this._placeholder = x;
|
|
}
|
|
,get: function() {
|
|
return this._placeholder;
|
|
}
|
|
},
|
|
filter: {
|
|
type: Sql.Filter
|
|
,set: function(x) {
|
|
this._filter = x;
|
|
this._batch.addObject('filter', x);
|
|
}
|
|
,get: function() {
|
|
return this._filter;
|
|
}
|
|
}
|
|
}
|
|
|
|
,_valueColumnIndex: 0
|
|
,_showColumnIndex: 1
|
|
|
|
,initialize: function(props) {
|
|
var node = this.createRoot('div');
|
|
node.className = 'vn-filter';
|
|
|
|
this._select = new Htk.Select();
|
|
this._select.on('mousedown', this._onMouseDown, this);
|
|
this._select.on('changed', this._onChange, this);
|
|
this._select.on('ready', this._onReady, this);
|
|
this.node.appendChild(this._select.node);
|
|
|
|
this._ul = this.createElement('ul');
|
|
this.node.appendChild(this._ul);
|
|
|
|
this._batch = new Sql.Batch();
|
|
this.parent(props);
|
|
}
|
|
|
|
,_onMouseDown: function() {
|
|
if (this._model && this._model.status === Db.Model.Status.CLEAN)
|
|
this._model.refresh();
|
|
}
|
|
|
|
,_onCloseClick: function() {
|
|
this._removeSelectionNode();
|
|
this._changeValue(undefined);
|
|
}
|
|
|
|
,_removeSelectionNode: function() {
|
|
if (this._lastLi) {
|
|
Vn.Node.remove(this._lastLi);
|
|
this._lastLi = null;
|
|
this._label = null;
|
|
}
|
|
}
|
|
|
|
,_onChange: function() {
|
|
if (this._select.value === null
|
|
|| this._select.value === undefined)
|
|
return;
|
|
|
|
this._realSetValue(this._select.value);
|
|
}
|
|
|
|
,_onReady: function() {
|
|
if (this._emptyLabel)
|
|
this._refreshLabel();
|
|
}
|
|
|
|
,_changeValue: function(newValue) {
|
|
this._batch.block();
|
|
this.value = newValue;
|
|
this._batch.unblock();
|
|
}
|
|
|
|
,_onTimeout: function() {
|
|
this._select.value = null;
|
|
}
|
|
|
|
,putValue: function(value) {
|
|
this._onMouseDown();
|
|
this._realSetValue(value);
|
|
}
|
|
|
|
,_realSetValue: function(value) {
|
|
this._removeSelectionNode();
|
|
|
|
if (value === null || value === undefined)
|
|
return;
|
|
|
|
var li = this._lastLi = this.createElement('li');
|
|
this._ul.appendChild(li);
|
|
|
|
var button = this.createElement('button');
|
|
button.addEventListener('click',
|
|
this._onCloseClick.bind(this, li));
|
|
li.appendChild(button);
|
|
|
|
var icon = new Htk.Icon({
|
|
name: 'close',
|
|
alt: _('Close')
|
|
});
|
|
button.appendChild(icon.node);
|
|
|
|
var text = this._label = this.createTextNode('');
|
|
li.appendChild(text);
|
|
|
|
setTimeout(this._onTimeout.bind(this));
|
|
|
|
this._changeValue(value);
|
|
this._refreshLabel();
|
|
}
|
|
|
|
,_refreshLabel: function() {
|
|
if (!this._label)
|
|
return;
|
|
|
|
let row = -1;
|
|
const model = this._model;
|
|
|
|
if (model) {
|
|
if (this._model.ready)
|
|
row = model.searchByIndex(this._valueColumnIndex, this._value);
|
|
|
|
if (row != -1) {
|
|
var label = model.getByIndex(row, this._showColumnIndex);
|
|
this._label.nodeValue = label;
|
|
this._emptyLabel = false;
|
|
} else {
|
|
this._emptyLabel = true;
|
|
this._label.nodeValue = _('Loading...');
|
|
}
|
|
} else {
|
|
this._emptyLabel = true;
|
|
this._label.nodeValue = '';
|
|
}
|
|
}
|
|
});
|
|
|