hedera-web/forms/ecomerce/catalog/ui.xml

486 lines
13 KiB
XML

<vn>
<vn-group>
<vn-param id="card-item"/>
<vn-param id="realm" on-changed="onRealmChange"/>
<vn-param id="type" on-changed="onTypeChange"/>
<vn-param id="search" on-changed="onFilterChange"/>
<vn-param id="color" on-changed="onFilterChange"/>
<vn-param id="origin" on-changed="onFilterChange"/>
<vn-param id="category" on-changed="onFilterChange"/>
<vn-param id="producer" on-changed="onFilterChange"/>
<vn-hash-param key="realm" param="realm"/>
<vn-hash-param key="type" param="type"/>
<sql-filter type="AND" id="filter">
<sql-filter-item type="EQUAL" primary="false" id="op-realm">
<sql-field target="t" name="categoryFk"/>
<sql-value id="realm-value"/>
</sql-filter-item>
<sql-filter-item type="EQUAL" id="op-type">
<sql-field target="i" name="typeFk"/>
<sql-value id="type-value"/>
</sql-filter-item>
<sql-filter-item type="LIKE" id="op-name">
<sql-field target="i" name="longName"/>
<sql-search-tags param="search"/>
</sql-filter-item>
<sql-filter-item type="EQUAL" id="op-color">
<sql-field target="i" name="inkFk"/>
<sql-value param="color"/>
</sql-filter-item>
<sql-filter-item type="EQUAL" id="op-origin">
<sql-field target="i" name="originFk"/>
<sql-value param="origin"/>
</sql-filter-item>
<sql-filter-item type="EQUAL" id="op-category">
<sql-field target="i" name="category"/>
<sql-value param="category"/>
</sql-filter-item>
<sql-filter-item type="EQUAL" id="op-producer">
<sql-field target="i" name="producerFk"/>
<sql-value param="producer"/>
</sql-filter-item>
</sql-filter>
<db-form id="basket" on-ready="onBasketReady">
<db-model property="model">
SELECT b.id, b.sent, a.description agency, m.code method
FROM myBasket b
JOIN vn.agencyMode a ON a.id = b.agencyModeFk
JOIN vn.deliveryMethod m ON m.id = b.deliveryMethodFk
</db-model>
</db-form>
<db-model
id="items-model"
result-index="2"
on-status-changed="onItemsChange">
CREATE TEMPORARY TABLE tmp.item
(INDEX (itemFk))
ENGINE = MEMORY
SELECT i.id itemFk
FROM vn.item i
JOIN vn.itemType t ON t.id = i.typeFk
WHERE #filter;
CALL myBasket_calcCatalogFull;
SELECT i.id, i.description, i.longName item, i.subName,
i.tag5, i.value5, i.tag6, i.value6, i.tag7, i.value7,
i.relevancy, i.size, i.category,
k.name ink, p.name producer, o.name origin,
b.available, b.price, b.`grouping`,
i.image, im.updated
FROM tmp.ticketCalculateItem b
JOIN vn.item i ON i.id = b.itemFk
LEFT JOIN vn.ink k ON k.id = i.inkFk
LEFT JOIN vn.producer p ON p.id = i.producerFk
LEFT JOIN vn.origin o ON o.id = i.originFk
LEFT JOIN image im
ON im.collectionFk = 'catalog'
AND im.name = i.image
WHERE b.available > 0
ORDER BY i.relevancy DESC, i.name, i.size
LIMIT 5000;
<sql-batch property="batch" id="filter-batch">
<custom>
<item name="filter" object="filter"/>
</custom>
</sql-batch>
</db-model>
<db-form id="card" model="items-model"/>
<sql-batch id="card-batch">
<custom>
<item name="item" param="card-item"/>
</custom>
</sql-batch>
</vn-group>
<div id="title">
<h1 id="title-text"><t>Catalog</t></h1>
</div>
<div id="actions" class="catalog-actions">
<htk-search-entry
param="search"/>
<htk-bar-button
id="view-button"
tip="_Switch view"
icon="format_list_bulleted"
on-click="onSwitchViewClick"/>
<htk-bar-button
icon="shopping_cart_checkout"
tip="_ShoppingBasket"
on-click="onBasketClick"/>
<button class="menu" on-click="onShowMenuClick">
<img src="image/icon/dark/menu.svg" alt="_Menu"/>
</button>
</div>
<div id="form" class="catalog">
<div id="main" class="main">
<htk-repeater
id="grid-view"
empty-message="_Choose filter from right menu"
form-id="item"
model="items-model"
renderer="repeaterFunc">
<custom>
<div
id="item-box"
class="box item-box"
title="{{_('AddToBasket')}}">
<htk-image
directory="catalog"
subdir="200x200"
form="item"
column="image"
stamp-column="updated"
full-dir="1600x900"/>
<div class="item-info">
<h2>
{{item.item}}
</h2>
<p class="sub-name">
{{item.subName}}
</p>
<table class="tags">
<tr>
<td>{{item.tag5}}</td>
<td>{{item.value5}}</td>
</tr>
<tr>
<td>{{item.tag6}}</td>
<td>{{item.value6}}</td>
</tr>
<tr>
<td>{{item.tag7}}</td>
<td>{{item.value7}}</td>
</tr>
</table>
<div class="available-price">
<span class="grouping" title="_MinimalGrouping">
{{Vn.Value.format(item.grouping, 'x%.0d')}}
</span>
<span class="available" title="_Available">
{{item.available}}
</span>
<span class="price" title="_GroupingPrice">
{{Vn.Value.format(item.price, 'x%.0d')}}
</span>
</div>
</div>
</div>
</custom>
</htk-repeater>
</div>
</div>
<div id="right-panel" class="right-panel" on-click="onRightPanelClick">
<div class="basket-info">
<p>
<htk-text form="basket" column="sent" format="%D"/>
</p>
<p>
<span id="method"/>
<htk-text form="basket" column="agency"/>
</p>
<button class="thin" on-click="onConfigureClick">
<t>Modify</t>
</button>
</div>
<div class="filter">
<div class="categories">
<div class="realms">
<htk-repeater
model="realms-model"
form-id="form"
renderer="realmRenderer"
class="realms-box">
<db-model
id="realms-model"
property="model">
SELECT c.id, l.name, c.color, c.code
FROM vn.itemCategory c
JOIN vn.itemCategoryL10n l ON l.id = c.id
WHERE c.display
ORDER BY display
</db-model>
<custom>
<a id="link">
<img
id="image"
src="{{`image/family/black/${form.code}.svg`}}"
title="{{form.name}}"
alt="{{form.name}}"/>
</a>
</custom>
</htk-repeater>
<div class="clear"/>
</div>
</div>
<div id="realm-msg" class="realm-msg">
<h1><t>Choose a realm</t></h1>
</div>
<div id="filters" class="filters">
<h2><t>Filter by</t></h2>
<vn-filter
placeholder="_Family"
param="type">
<db-model
id="types-model"
property="model"
conn="conn"
result-index="1"
on-status-changed="refreshTitle">
CALL myBasket_getAvailable;
SELECT DISTINCT t.id, l.name
FROM vn.item i
JOIN vn.itemType t ON t.id = i.typeFk
JOIN tmp.itemAvailable a ON a.id = i.id
JOIN vn.itemTypeL10n l ON l.id = t.id
WHERE t.`order` >= 0 AND #filter
ORDER BY t.`order`, l.name
</db-model>
<sql-filter property="filter" type="AND">
<sql-filter-item type="EQUAL">
<sql-field name="categoryFk" target="t"/>
<sql-value param="realm"/>
</sql-filter-item>
</sql-filter>
</vn-filter>
<vn-filter
placeholder="_Color"
param="color">
<db-model property="model" auto-load="false" result-index="1">
CALL myBasket_getAvailable;
SELECT DISTINCT l.id, l.name
FROM vn.item i
JOIN vn.itemType t ON t.id = i.typeFk
JOIN tmp.itemAvailable a ON a.id = i.id
JOIN vn.inkL10n l ON l.id = i.inkFk
WHERE #filter
ORDER BY name
</db-model>
<sql-filter property="filter" always-ready="true" type="AND">
<pointer object="op-realm"/>
<pointer object="op-type"/>
<pointer object="op-name"/>
<pointer object="op-origin"/>
<pointer object="op-category"/>
<pointer object="op-producer"/>
</sql-filter>
</vn-filter>
<vn-filter
placeholder="_Producer"
param="producer">
<db-model property="model" auto-load="false" result-index="1">
CALL myBasket_getAvailable;
SELECT DISTINCT p.id, p.name
FROM vn.item i
JOIN vn.itemType t ON t.id = i.typeFk
JOIN tmp.itemAvailable a ON a.id = i.id
JOIN vn.producer p ON p.id = i.producerFk
WHERE #filter
ORDER BY name
</db-model>
<sql-filter property="filter" always-ready="true" type="AND">
<pointer object="op-realm"/>
<pointer object="op-type"/>
<pointer object="op-name"/>
<pointer object="op-origin"/>
<pointer object="op-color"/>
<pointer object="op-category"/>
</sql-filter>
</vn-filter>
<vn-filter
placeholder="_Origin"
param="origin">
<db-model property="model" auto-load="false" result-index="1">
CALL myBasket_getAvailable;
SELECT DISTINCT o.id, l.name, o.code
FROM vn.item i
JOIN vn.itemType t ON t.id = i.typeFk
JOIN tmp.itemAvailable a ON a.id = i.id
JOIN vn.origin o ON o.id = i.originFk
JOIN vn.originL10n l ON l.id = o.id
WHERE #filter
ORDER BY name
</db-model>
<sql-filter property="filter" always-ready="true" type="AND">
<pointer object="op-realm"/>
<pointer object="op-type"/>
<pointer object="op-name"/>
<pointer object="op-color"/>
<pointer object="op-category"/>
<pointer object="op-producer"/>
</sql-filter>
</vn-filter>
<vn-filter
placeholder="_Category"
param="category">
<db-model property="model" auto-load="false" result-index="1">
CALL myBasket_getAvailable;
SELECT DISTINCT i.category, i.category
FROM vn.item i
JOIN vn.itemType t ON t.id = i.typeFk
JOIN tmp.itemAvailable a ON a.id = i.id
WHERE #filter
ORDER BY category
</db-model>
<sql-filter property="filter" always-ready="true" type="AND">
<pointer object="op-realm"/>
<pointer object="op-type"/>
<pointer object="op-name"/>
<pointer object="op-color"/>
<pointer object="op-origin"/>
<pointer object="op-producer"/>
</sql-filter>
</vn-filter>
</div>
<div id="order" class="order">
<h2><t>Order by</t></h2>
<select on-change="onOrderChange">
<option value="D|relevancy" selected="true">
<t>Relevancy</t>
</option>
<option value="A|item">
<t>Name</t>
</option>
<option value="A|price">
<t>Lower price</t>
</option>
<option value="D|price">
<t>Higher price</t>
</option>
<option value="A|available">
<t>Available</t>
</option>
<option value="A|size">
<t>Lower size</t>
</option>
<option value="D|size">
<t>Higher size</t>
</option>
<option value="A|ink">
<t>Color</t>
</option>
<option value="A|producer">
<t>Producer</t>
</option>
<option value="A|origin">
<t>Origin</t>
</option>
<option value="A|category">
<t>Category</t>
</option>
</select>
</div>
</div>
</div>
<htk-popup id="desc-popup">
<div
property="child-node"
class="desc-popup"
id="description"/>
</htk-popup>
<htk-popup
id="card-popup"
class="card-popup"
modal="true"
on-closed="onPopupClose">
<div property="child-node" class="item-card">
<db-form id="card-extend">
<db-model
property="model"
batch="card-batch"
on-status-changed-after="onCardLoad">
SELECT i.description, o.name origin
FROM vn.item i
LEFT JOIN vn.originL10n o ON o.id = i.originFk
WHERE i.id = #item
</db-model>
</db-form>
<div class="top">
<htk-image
directory="catalog"
subdir="200x200"
form="card"
column="image"
stamp-column="updated"
full-dir="1600x900"
conn="conn"
editable="true"/>
<div class="item-info">
<h2>
<htk-text form="card" column="item"/>
</h2>
<p class="sub-name">
<htk-text form="card" column="subName"/>
</p>
<p>
#<htk-text form="card" column="id"/>
</p>
<p>
<htk-text form="card" column="stems" format="_%.0d Units"/>
</p>
</div>
<p class="desc">
<htk-text form="card-extend" column="description" id="desc"/>
</p>
<htk-repeater show-status="false" form-id="tag" class="tags">
<db-model
property="model"
batch="card-batch"
on-status-changed-after="onCardLoad">
SELECT l.name, it.value
FROM vn.itemTag it
JOIN vn.tag t ON t.id = it.tagFk
JOIN vn.tagL10n l ON l.id = t.id
WHERE it.itemFk = #item
AND priority >= 0
ORDER BY it.priority
</db-model>
<custom>
<tr>
<td><htk-text form="tag" column="name"/></td>
<td><htk-text form="tag" column="value"/></td>
</tr>
</custom>
</htk-repeater>
</div>
<htk-grid class="lots-grid" show-header="false">
<db-model
id="item-lots"
property="model"
result-index="1"
on-status-changed-after="onCardLoad"
batch="card-batch">
CALL myBasket_calcCatalogFromItem(#item);
SELECT l.warehouseFk, w.name warehouse, p.`grouping`,
p.price, p.priceKg, p.rate, l.available
FROM tmp.ticketLot l
JOIN tmp.ticketComponentPrice p ON p.warehouseFk = l.warehouseFk
JOIN vn.warehouse w ON w.id = p.warehouseFk
ORDER BY warehouseFk, `grouping`;
</db-model>
<htk-column-spin column="price" unit="€" digits="2"/>
<htk-column-spin column="priceKg" unit="€/kg" digits="3" class="price-kg"/>
<htk-column-text column="grouping" format="x%.0d"/>
<htk-column-button
column="id"
icon="add"
tip="_Add"
on-clicked="onAddLotClick"/>
</htk-grid>
<div class="footer">
<button on-click="onEraseClick" title="_Erase" class="erase">
<htk-icon
name="delete"
theme="dark"
alt="_Erase"/>
</button>
<htk-text id="amount"/>
<button on-click="onConfirmClick" title="_Confirm" class="confirm">
<htk-icon
name="done"
theme="dark"
alt="_Confirm"/>
</button>
<div class="clear"/>
</div>
</div>
</htk-popup>
</vn>