hedera-web/forms/ecomerce/catalog/ui.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">
	<button class="menu" on-click="onShowMenuClick">
		<img src="image/icon/dark/menu.svg" alt="_Menu"/>
	</button>
	<htk-bar-button
		icon="basket"
		tip="_ShoppingBasket"
		on-click="onBasketClick"/>
	<htk-bar-button
		id="view-button"
		tip="_Switch view"
		on-click="onSwitchViewClick"/>
	<htk-search-entry
		param="search"/>
</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>
					<htk-text form="item" column="item"/>
				</h2>
				<p class="sub-name">
					<htk-text form="item" column="subName"/>
				</p>
				<table class="tags">
					<tr>
						<td><htk-text form="item" column="tag5"/></td>
						<td><htk-text form="item" column="value5"/></td>
					</tr>
					<tr>
						<td><htk-text form="item" column="tag6"/></td>
						<td><htk-text form="item" column="value6"/></td>
					</tr>
					<tr>
						<td><htk-text form="item" column="tag7"/></td>
						<td><htk-text form="item" column="value7"/></td>
					</tr>
				</table>
				<div class="available-price">
					<span class="grouping" title="_MinimalGrouping">
						<htk-text form="item" column="grouping" format="x%.0d"/>
					</span> 
					<span class="available" title="_Available">
						<htk-text form="item" column="available"/>
					</span> 
					<span class="price" title="_GroupingPrice">
						<htk-text form="item" column="price" format="%.2d€"/>
					</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>Change</t>
		</button>
	</div>
	<div class="filter">
		<div class="categories">
			<div class="realms">
				<htk-repeater
					model="realms-model"
					form-id="realm-form"
					renderer="realmRenderer"
					class="realms-box">
					<db-model
						id="realms-model"
						property="model"
						on-status-changed="refreshTitleColor">
						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"/>
						</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
					icon="delete"
					theme="dark"
					alt="_Erase"/>
			</button>
			<htk-text id="amount"/>
			<button on-click="onConfirmClick" title="_Confirm" class="confirm">
				<htk-icon
					icon="ok"
					theme="dark"
					alt="_Confirm"/>
			</button>
			<div class="clear"/>
		</div>
	</div>
</htk-popup>
</vn>