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

<vn>
<div id="title">
	<h1 id="title-text"><t>Catalog</t></h1>
	<div id="subtitle"></div>
</div>
<div id="actions" class="catalog-actions">
	<htk-search-entry form="params" column="search"/>
	<htk-bar-button
		id="view-button"
		tip="_Switch view"
		icon="view_list"
		on-click="this.onSwitchViewClick()"/>
	<htk-bar-button
		icon="shopping_cart_checkout"
		tip="_ShoppingBasket"
		on-click="this.onBasketClick()"/>
	<button
		class="menu"
		on-click="onShowMenuClick">
		<htk-icon name="menu" alt="_Menu"/>
	</button>
</div>
<vn-group>
	<vn-lot-query id="params" on-change="this.onFilterChange()">
		<vn-spec name="search" type="String"/>
		<vn-spec name="realm" type="Number"/>
		<vn-spec name="type" type="Number"/>
		<vn-spec name="color" type="String"/>
		<vn-spec name="origin" type="Number"/>
		<vn-spec name="category" type="String"/>
		<vn-spec name="producer" type="Number"/>
	</vn-lot-query>
	<vn-lot id="filter-lot"/>
</vn-group>
<vn-group>
	<sql-filter-item
		id="id-op"
		type="EQUAL"
		target="i"
		field="id"
		param="search"/>
	<sql-operation
		id="search-op"
		type="OR">
		<sql-filter-item
			type="LIKE"
			target="i"
			field="longName"
			param="search"/>
		<sql-filter-item
			type="LIKE"
			target="i"
			field="subname"
			param="search"/>
	</sql-operation>
	<sql-filter-item
		id="realm-op"
		type="EQUAL"
		target="t"
		field="categoryFk"
		param="realm"/>
	<sql-filter-item
		id="type-op"
		type="EQUAL"
		target="i"
		field="typeFk"
		param="type"/>
	<sql-filter-item
		id="color-op"
		type="EQUAL"
		target="i"
		field="inkFk"
		param="color"/>
	<sql-filter-item
		type="EQUAL"
		id="origin-op"
		target="i"
		field="originFk"
		param="origin"/>
	<sql-filter-item
		type="EQUAL"
		id="category-op"
		target="i"
		field="category"
		param="category"/>
	<sql-filter-item
		id="producer-op"
		type="EQUAL"
		target="i"
		field="producerFk"
		param="producer"/>
</vn-group>
<vn-group>
	<vn-lot id="order-lot"/>
	<db-form v-model="basket">
		<db-model property="model" lot="order-lot">
			SELECT o.id, o.sent, ad.nickname
				FROM myOrder o
					LEFT JOIN myAddress ad ON ad.id = o.addressFk
				WHERE o.id = #orderId
		</db-model>
	</db-form>
	<db-model
		id="items"
		auto-load="false"
		result-index="3"
		on-status-changed="onItemsChange">
		DROP TEMPORARY TABLE IF EXISTS tmp.item;
		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 myOrder_calcCatalogFull(#orderId);
		SELECT i.id, i.longName item, i.subName,
				i.tag5, i.value5, i.tag6, i.value6,
				i.tag7, i.value7, i.tag8, i.value8,
				i.relevancy, i.size, i.category, i.minQuantity,
				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;
		DROP TEMPORARY TABLE
			tmp.item,
			tmp.ticketCalculateItem,
			tmp.ticketComponentPrice,
			tmp.ticketComponent,
			tmp.ticketLot,
			tmp.zoneGetShipped;
	</db-model>
	<db-form id="$card" v-model="card" model="items"/>
	<vn-lot id="card-lot"/>
</vn-group>
<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"
		renderer="itemRenderer">
		<custom>
		<div
			id="item-box"
			class="item-box clickable"
			title="{{_('AddToBasket')}}"
			on-click="this.onAddItemClick($event, $iter)">
			<htk-image
				directory="catalog"
				subdir="200x200"
				form="$iter"
				column="image"
				stamp-column="updated"
				full-dir="1600x900"
				title="_Zoom image"/>
			<div class="item-info">
				<h2>
					{{item.item}}
				</h2>
				<p class="sub-name">
					<span class="item-id">
						#{{item.id}}
					</span>
					{{item.subName}}
				</p>
				<table class="item-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>
					<tr>
						<td>{{item.tag8}}</td>
						<td>{{item.value8}}</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, '%.02d€')}}
					</span>
				</div>
				<div id="min-quantity" class="min-quantity" title="_MinimalQuantity">
					<span class="htk-icon material-symbols-rounded">
						production_quantity_limits
					</span> 
					{{item.minQuantity}}
				</div>
			</div>
		</div>
		</custom>
	</htk-repeater>
	</div>
</div>
<div id="right-panel" class="catalog-panel right-panel side-panel" on-click="onRightPanelClick">
	<div class="basket-info">
		<p>{{basket.nickname}}</p>
		<p>{{Vn.Value.format(basket.sent, '%D')}}</p>
		<button class="thin" on-click="this.onConfigureClick()">
			<t>Modify</t>
		</button>
	</div>
	<div class="filter">
		<div class="categories">
			<div class="realms">
				<htk-repeater
					form-id="form"
					renderer="realmRenderer"
					class="realms-box">
					<db-model
						id="realms"
						property="model"
						on-status-changed="refreshTitle">
						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">
			<h5><t>Choose a realm</t></h5>
		</div>
		<div id="filters" class="filters">
			<h2><t>Filter by</t></h2>
			<htk-combo
				placeholder="_Family"
				form="params"
				column="type"
				id="type-filter">
				<db-model
					id="types"
					property="model"
					conn="conn"
					lot="params"
					result-index="1"
					on-status-changed="refreshTitle">
					CALL myOrder_getAvailable(#orderId);
					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 t.categoryFk = #realm
						ORDER BY t.`order`, l.name;
					DROP TEMPORARY TABLE tmp.itemAvailable;
				</db-model>
			</htk-combo>
			<htk-combo
				placeholder="_Color"
				form="params"
				column="color"
				on-mousedown="colors.lazyRefresh()">
				<db-model
					id="colors"
					property="model"
					auto-load="false"
					result-index="1">
					CALL myOrder_getAvailable(#orderId);
					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;
					DROP TEMPORARY TABLE tmp.itemAvailable;
				</db-model>
			</htk-combo>
			<htk-combo
				placeholder="_Producer"
				form="params"
				column="producer"
				on-mousedown="producers.lazyRefresh()">
				<db-model
					id="producers"
					property="model"
					auto-load="false"
					result-index="1">
					CALL myOrder_getAvailable(#orderId);
					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;
					DROP TEMPORARY TABLE tmp.itemAvailable;
				</db-model>
			</htk-combo>
			<htk-combo
				placeholder="_Origin"
				form="params"
				column="origin"
				on-mousedown="origins.lazyRefresh()">
				<db-model
					id="origins"
					property="model"
					auto-load="false"
					result-index="1">
					CALL myOrder_getAvailable(#orderId);
					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;
					DROP TEMPORARY TABLE tmp.itemAvailable;
				</db-model>
			</htk-combo>
			<htk-combo
				placeholder="_Category"
				form="params"
				column="category"
				on-mousedown="categorys.lazyRefresh()">
				<db-model
					id="categorys"
					property="model"
					auto-load="false"
					result-index="1">
					CALL myOrder_getAvailable(#orderId);
					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;
					DROP TEMPORARY TABLE tmp.itemAvailable;
				</db-model>
			</htk-combo>
		</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 vModel="extendedCard">
			<db-model
				property="model"
				lot="card-lot"
				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>{{card.item}}</h2>
				<p class="sub-name">{{card.subName}}</p>
				<p class="item-id">#{{card.id}}</p>
				<p>{{Vn.Value.format(card.stems, _('%.0d Units'))}}</p>
			</div>
			<p class="desc">{{extendedCard.description}}</p>
			<htk-repeater show-status="false" form-id="tag" class="item-tags">
				<db-model
					property="model"
					lot="card-lot"
					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>{{tag.name}}</td>
						<td>{{tag.value}}</td>
					</tr>
				</custom>
			</htk-repeater>
			<div id="card-min-quantity" class="min-quantity" title="_MinimalQuantity">
				<span class="htk-icon material-symbols-rounded">
					production_quantity_limits
				</span> 
				{{card.minQuantity}}
			</div>
		</div>
		<htk-grid class="lots-grid" show-header="false">
			<db-model
				id="item-lots"
				property="model"
				result-index="1"
				on-status-changed-after="onCardLoad"
				lot="card-lot">
				CALL myOrder_calcCatalogFromItem(#orderId, #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`;
				DROP TEMPORARY TABLE
					tmp.ticketCalculateItem,
					tmp.ticketComponentPrice,
					tmp.ticketComponent,
					tmp.ticketLot,
					tmp.zoneGetShipped;
			</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
				title="_Erase"
				on-click="this.onEraseClick()"
				class="erase">
				<htk-icon
					name="delete"
					theme="dark"
					alt="_Erase"/>
			</button>
			<htk-text id="amount"/>
			<button
				title="_Confirm"
				on-click="this.onConfirmClick()"
				class="confirm">
				<htk-icon
					name="done"
					theme="dark"
					alt="_Confirm"/>
			</button>
		</div>
	</div>
</htk-popup>
</vn>