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

<vn>
<vn-group>
	<vn-param id="realm" on-changed="onTypeChange">
		<vn-hash-param key="realm"/>
	</vn-param>
	<vn-param id="type" on-changed="onTypeChange">
		<vn-hash-param key="type"/>
	</vn-param>
	<vn-param id="search"/>
	<sql-filter type="AND" id="filter">
		<sql-filter-item type="EQUAL" id="sql-type">
			<sql-field name="tipo_id"/>
			<sql-value param="type"/>
		</sql-filter-item>
		<sql-filter-item type="LIKE">
			<sql-field name="Article"/>
			<sql-search-tags param="search"/>
		</sql-filter-item>
	</sql-filter>
	<db-query id="basket-lines">
		SELECT item_id, warehouse_id, SUM(amount) amount
			FROM basket_item
			GROUP BY warehouse_id
	</db-query>
	<db-model result-index="2" id="items-model">
		CREATE TEMPORARY TABLE tmp.bionic_calc
		(INDEX (item_id))
		ENGINE=MEMORY
		SELECT Id_Article item_id FROM vn2008.Articles
			WHERE #filter;
		CALL bionic_calc ();
		SELECT t.item_id, t.available, t.price, t.producer, 
		a.Foto, a.Article, a.Categoria, a.Medida, a.Tallos, a.Color, o.Abreviatura
			FROM tmp.bionic_item t
				JOIN vn2008.Articles a ON a.Id_Article = t.item_id
				LEFT JOIN vn2008.Origen o ON a.id_origen = o.id
			WHERE t.available > 0
			ORDER BY a.Article, a.Medida
			LIMIT 400;
		<sql-batch property="batch" id="batch">
			<item name="filter" object="filter"/>
		</sql-batch>
	</db-model>
	<db-model id="item-lots" result-index="1" on-status-changed-after="onStatusChange">
		CALL bionic_from_item (#item);
		SELECT p.warehouse_id, p.grouping, p.price, p.rate,
			t.amount, l.available - IFNULL(t.amount, 0) available
			FROM tmp.bionic_lot l
				JOIN tmp.bionic_price p
					ON p.warehouse_id = l.warehouse_id
				LEFT JOIN (
					SELECT warehouse_id, SUM(amount) amount
						FROM basket_item
						WHERE item_id = #item
						GROUP BY warehouse_id
				) t
					ON t.warehouse_id = l.warehouse_id
			ORDER BY warehouse_id, grouping;
		<sql-batch property="batch" id="lots-batch"/>
	</db-model>
</vn-group>
<div id="title">
	<h1 id="title-text"><t>Catalog</t></h1>
</div>
<div id="actions" class="catalog-actions">
	<div class="search">
		<img src="image/search.svg" alt="_Search" class="icon"/>
		<input type="text" id="search-entry" on-change="onSearch"/>
	</div>
	<htk-button
		image="image/dark/view.svg"
		tip="_Switch view"
		on-click="onSwitchViewClick"
		showText="true"/>
	<htk-button
		id="a"
		image="image/dark/basket.svg"
		tip="_ShoppingBasket"
		on-click="onBasketClick"
		showText="true"/>
	<button class="menu" on-click="onShowMenuClick">
		<img src="image/dark/menu.svg" alt="_Menu"/>
	</button>
</div>
<div id="form" class="catalog">
	<div class="center">
		<div id="main" class="main"/>
	</div>
</div>
<div id="list-view" class="list-view">
	<div class="box">
		<htk-grid id="items-grid" class="items" empty-message="_SelectSubtype" show-header="false">
			<htk-column-image
				title="*"
				class="icon"
				column="Foto"
				directory="catalog"
				subdir="200x200"
				show-full="true"
				full-dir="900x900"
				editable="true"/>
			<vn-column-item title="_Name" column="Article" renderer="nameRenderer"/>
			<htk-column-text title="_Cat" renderer="featuresRender"/>
			<htk-column-spin title="_Aval" column="available"/>
			<htk-column-text
				title="_Price"
				column="price"
				format="_from %.2d€"
				class="price"/>
			<htk-column-button
				column="id"
				image="image/add.svg"
				tip="_AddToBasket"
				on-clicked="onAddItemClick"/>
		</htk-grid>
		<p class="footer-message">
			<t>IndicativePhotos</t>
		</p>
	</div>
</div>
<htk-repeater id="grid-view" class="grid-view" empty-message="_SelectSubtype" form-id="item">
	<template>
	<div class="box item-box">
		<div class="image">
			<htk-image
				directory="catalog"
				subdir="200x200"
				form="item"
				column="Foto"
				show-full="true"
				full-dir="900x900"/>
		</div>
		<h2>
			<htk-text form="item" column="Article"/>
		</h2>
		<p>
			<htk-text form="item" column="producer"/>
		</p>
		<p>
			<htk-text form="item" column="Medida"/> 
			<htk-text form="item" column="Categoria"/> 
			<htk-text form="item" column="Color"/> 
			<htk-text form="item" column="Tallos"/> 
			<htk-text form="item" column="Abreviatura"/>
		</p>
		<div class="aval-price">
			<htk-text form="item" column="available"/>
			<t>from</t>
			<span class="price">
				<htk-text form="item" column="price" format="%.2d€"/>
			</span>
		</div>
		<htk-button
			form="item"
			column="id"
			tip="_AddToBasket"
			image="image/add.svg"
			on-click="onGridAddItemClick"
			class="add-button"/>
		<div class="clear"/>
	</div>
	</template>
</htk-repeater>
<div id="right-panel" class="right-panel" on-click="onRightPanelClick">
	<htk-repeater
		model="realms-model"
		form-id="realm-form"
		renderer="realmRenderer"
		class="realms-box">
		<db-model id="realms-model" on-status-changed="onTypeChange">
			SELECT id, reino, color FROM vn2008.reinos
				WHERE display != FALSE ORDER BY reino
		</db-model>
		<template>
			<a id="link">
				<img id="image"/>
			</a>
		</template>
	</htk-repeater>
	<htk-repeater
		model="types-model"
		form-id="type-form"
		renderer="typeRenderer"
		empty-message="_SelectFamily"
		class="types-box">
		<db-model id="types-model" on-status-changed="refreshTitle">
			CALL type_list (#realm)
			<sql-batch property="batch">
				<item name="realm" param="realm"/>
			</sql-batch>
		</db-model>
		<template>
			<a id="link">
				<htk-text form="type-form" column="Tipo"/>
			</a>
		</template>
	</htk-repeater>
</div>
<div id="lots-popup" class="lots-popup">
	<htk-grid class="lots-grid" model="item-lots" show-header="false">
		<htk-column-spin title="_Price" column="price" unit="€" digits="2"/>
		<htk-column-text title="_Pack" column="grouping" format="x%.0d"/>
		<htk-column-button
			column="id"
			image="image/add.svg"
			tip="_Add"
			on-clicked="onAddLotClick"/>
	</htk-grid>
	<div class="amount">
		<button on-click="onEraseClick" title="_Erase" class="erase">
			<img
				src="image/dark/delete.svg"
				alt="_Erase"/>
		</button>
		<htk-text id="amount"/>
		<button on-click="onConfirmClick" title="_Confirm" class="confirm">
			<img
				src="image/dark/ok.svg"
				alt="_Confirm"/>
		</button>
		<div class="clear"/>
	</div>
</div>
</vn>