hedera-web/web/forms/ecomerce/catalog/catalog.js

614 lines
12 KiB
JavaScript
Executable File

Vn.Catalog = new Class
({
Extends: Vn.Form
,_menuShown: false
,open: function ()
{
this.close ();
this.isOpen = true;
if (!Vn.Cookie.check ('hedera_guest'))
{
Vn.BasketChecker.check (this.conn,
this.onBasketCheck.bind (this));
}
else
{
var query = 'CALL basket_configure_for_guest ()';
this.conn.execQuery (query, this.loadUi.bind (this));
}
}
,onBasketCheck: function (isOk)
{
if (isOk)
this.loadUi ();
}
,activate: function ()
{
document.body.appendChild (this.$('right-panel'));
this.popup = new Htk.Popup ();
this.popup.setChildNode (this.$('lots-popup'));
this.$('items-model').setInfo ('a', 'Articles', 'vn2008', ['item_id']);
if (Vn.Cookie.check ('hedera_view'))
this.setView (Vn.Cookie.getInt ('hedera_view'));
else
this.setView (Vn.Catalog.View.GRID);
}
,deactivate: function ()
{
this.hideMenu ();
this.gui.$('top-bar').style.backgroundColor = '';
Vn.Node.remove (this.$('right-panel'));
}
,onSwitchViewClick: function ()
{
this.setView (this.view === Vn.Catalog.View.LIST ?
Vn.Catalog.View.GRID : Vn.Catalog.View.LIST);
}
,setView: function (view)
{
if (this.viewNode)
{
Vn.Node.remove (this.viewNode);
this.viewHolder.model = null;
}
if (view === Vn.Catalog.View.GRID)
{
this.view = Vn.Catalog.View.GRID;
this.viewNode = this.$('grid-view').getNode ();
this.viewHolder = this.$('grid-view');
}
else
{
this.view = Vn.Catalog.View.LIST;
this.viewNode = this.$('list-view');
this.viewHolder = this.$('items-grid');
}
this.$('main').appendChild (this.viewNode);
this.viewHolder.model = this.$('items-model');
Vn.Cookie.set ('hedera_view', this.view)
}
,onBasketReady: function (form)
{
if (form.get ('method') != 'PICKUP')
Vn.Node.setText (this.$('method'), _('Agency'));
else
Vn.Node.setText (this.$('method'), _('Warehouse'));
}
,typeRenderer: function (builder, form)
{
var link = builder.$('link');
link.href = this.hash.make ({'type': form.get ('tipo_id')}, true);
}
,realmRenderer: function (builder, form)
{
var link = builder.$('link');
link.href = this.hash.make ({
'form': this.hash.get ('form'),
'realm': form.get ('id')
});
var img = builder.$('image');
img.src = 'image/family/'+ form.get ('id') +'.svg';
img.title = form.get ('reino');
img.alt = img.title;
}
,onTypeChange: function ()
{
if (this.$('type').value)
this.hideMenu ();
this.refreshTitle ();
}
,refreshTitleColor: function ()
{
var realms = this.$('realms-model');
if (!realms.ready)
return;
var color = null;
var realm = this.$('realm').value;
if (realm)
{
var row = realms.search ('id', realm);
if (row != -1)
color = '#'+ realms.get (row, 'color');
}
this.gui.$('top-bar').style.backgroundColor = color;
}
,refreshTitle: function ()
{
var types = this.$('types-model');
if (!types.ready)
return;
var title = _('Catalog');
var type = this.$('type').value;
if (type)
{
var row = types.search ('tipo_id', type);
if (row != -1)
title = types.get (row, 'name');
}
Vn.Node.setText (this.$('title-text'), title);
}
,onRightPanelClick: function (event)
{
event.stopPropagation ();
}
,onShowMenuClick: function (event)
{
this._menuShown = true;
event.stopPropagation ();
this.gui.showBackground ();
Vn.Node.addClass (this.$('right-panel'), '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.$('right-panel'), 'show');
document.removeEventListener ('click', this.hideMenuCallback);
this.hideMenuCallback = null;
}
,onBasketClick: function ()
{
if (!Vn.Cookie.check ('hedera_guest'))
this.hash.set ({'form': 'ecomerce/basket'});
else
Htk.Toast.showError (_('YouMustBeLoggedIn'));
}
,onConfigureClick: function ()
{
if (!Vn.Cookie.check ('hedera_guest'))
this.hash.set ({'form': 'ecomerce/checkout'});
else
Htk.Toast.showError (_('YouMustBeLoggedIn'));
}
,nameRenderer: function (renderer, form)
{
renderer.subtitle = form.get ('producer');
}
,amountRender: function (renderer, form)
{
var amount = form.get ('amount');
var grouping = form.get ('grouping');
if (amount && grouping)
renderer.value = amount / grouping;
else
renderer.value = null;
}
,amountChanged: function (renderer, row, newValue)
{
var model = this.$('items-model');
model.set (row, 'amount', newValue * model.get (row, 'grouping'));
}
,catRenderer: function (column, form)
{
switch (form.get ('Categoria'))
{
case 'A2':
column.td.className = 'second-category';
break;
case 'B1':
column.td.className = 'third-category';
break;
default:
column.td.className = '';
}
}
,onInfoClick: function (button, form)
{
var descNode = this.$('desc-popup');
Vn.Node.removeChilds (descNode);
var desc = this.$('items-model').get (form.row, 'description');
if (!desc)
desc = _('No info available');
descNode.appendChild (document.createTextNode (desc));
var popup = new Htk.Popup ();
popup.setChildNode (descNode);
popup.show (button.getNode ());
}
,onGridAddItemClick: function (button, form)
{
this.showAmountPopup (button.getNode (), form.row);
}
,onAddItemClick: function (column, value, row, button)
{
this.showAmountPopup (button, row);
}
,showAmountPopup: function (button, row)
{
if (Vn.Cookie.check ('hedera_guest'))
{
Htk.Toast.showError (_('YouMustBeLoggedIn'));
return;
}
var itemId = this.$('items-model').get (row, 'item_id')
this.$('lots-batch').addValue ('item', itemId);
this.itemRow = row;
this.onEraseClick ();
this.popup.show (button);
}
,onAddLotClick: function (column, value, row, button)
{
var model = this.$('item-lots');
var grouping = model.get (row, 'grouping');
var warehouse = model.get (row, 'warehouse_id');
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'));
}
,onEraseClick: function ()
{
this.$('amount').value = 0;
this.items = {};
}
,onConfirmClick: function ()
{
var model = this.$('items-model');
var sql = '';
var batch = new Sql.Batch ();
var query = new Sql.String ({query: 'CALL basket_item_add (#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', model.get (this.itemRow, 'item_id'));
batch.addValue ('amount', amount);
sql += query.render (batch);
}
if (amountSum > 0)
{
this.conn.execQuery (sql);
var itemName = model.get (this.itemRow, 'Article');
Htk.Toast.showMessage (
sprintf (_('Added%dOf%s'), amountSum, itemName));
}
this.popup.hide ();
}
,onStatusChange: function (model)
{
if (this.popup)
this.popup.reset ();
}
,onOrderChange: function (e)
{
var sortField = e.target.value;
if (sortField)
this.$('items-model').sortByName (sortField);
}
,onRemoveFiltersClick: function ()
{
var batch = this.$('filter-batch');
batch.block ();
this.$('search').value = undefined;
this.$('realm').value = undefined;
this.$('type').value = undefined;
this.$('color').value = undefined;
this.$('origin').value = undefined;
this.$('category').value = undefined;
this.$('producer').value = undefined;
batch.unblock ();
batch.changed ();
}
,gridRenderer: function (res, form)
{
if (!form.get ('description'))
{
var button = res.$('info-button').getNode ();
button.style.display = 'none';
}
}
});
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;
}
},
column:
{
type: String
,set: function (x)
{
this._column = x;
}
,get: function ()
{
return this._column;
}
},
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)
{
this.createElement ('div');
this.node.className = 'vn-filter';
this._select = new Htk.Select ();
this._select.on ('mousedown', this._onClick, this);
this._select.on ('changed', this._onChange, this);
this._select.on ('ready', this._onReady, this);
this.node.appendChild (this._select.getNode ());
this._ul = document.createElement ('ul');
this.node.appendChild (this._ul);
this._batch = new Sql.Batch ();
this.parent (props);
}
,_onClick: function (e)
{
if (this._model && this._model.status === Db.Model.Status.CLEAN)
this._model.refresh ();
}
,_onCloseClick: function (li)
{
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._onClick ();
this._realSetValue (value);
}
,_realSetValue: function (value)
{
this._removeSelectionNode ();
if (value === null || value === undefined)
return;
var li = this._lastLi = document.createElement ('li');
this._ul.appendChild (li);
var button = document.createElement ('button');
button.addEventListener ('click',
this._onCloseClick.bind (this, li));
li.appendChild (button);
var img = document.createElement ('img');
img.src = 'image/close.svg';
button.appendChild (img);
var text = this._label = document.createTextNode ('');
li.appendChild (text);
setTimeout (this._onTimeout.bind (this));
this._changeValue (value);
this._refreshLabel ();
}
,_refreshLabel: function ()
{
if (!this._label)
return;
var row = -1;
if (this._model.ready)
row = this._model.searchByIndex (this._valueColumnIndex, this._value);
if (row != -1)
{
var label = this._model.getByIndex (row, this._showColumnIndex);
this._label.nodeValue = label;
this._emptyLabel = false;
}
else
{
this._emptyLabel = true;
this._label.nodeValue = _('Loading...');
}
}
})
Vn.Catalog.extend
({
View: {
LIST: 0,
GRID: 1
}
});
Vn.ColumnItem = new Class
({
Extends: Htk.Column
,Tag: 'vn-column-item'
,render: function (tr)
{
var td = this.parent (tr);
td.style.textAlign = 'left';
if (this.value)
{
var node = document.createTextNode (
Vn.Value.format (this.value, this._format));
td.appendChild (node);
}
if (this.subtitle)
{
td.appendChild (document.createElement ('br'));
td.appendChild (document.createTextNode (this.subtitle));
}
return td;
}
})