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 name="reino_id" target="t"/>
			<sql-value id="realm-value"/>
		</sql-filter-item>
		<sql-filter-item type="EQUAL" id="op-type">
			<sql-field name="tipo_id" target="a"/>
			<sql-value id="type-value"/>
		</sql-filter-item>
		<sql-filter-item type="LIKE" id="op-name">
			<sql-field name="Article"/>
			<sql-search-tags param="search"/>
		</sql-filter-item>
		<sql-filter-item type="EQUAL" id="op-color">
			<sql-field name="Color"/>
			<sql-value param="color"/>
		</sql-filter-item>
		<sql-filter-item type="EQUAL" id="op-origin">
			<sql-field name="id_origen"/>
			<sql-value param="origin"/>
		</sql-filter-item>
		<sql-filter-item type="EQUAL" id="op-category">
			<sql-field name="Categoria"/>
			<sql-value param="category"/>
		</sql-filter-item>
		<sql-filter-item type="EQUAL" id="op-producer">
			<sql-field name="producer_id"/>
			<sql-value param="producer"/>
		</sql-filter-item>
	</sql-filter>
	<db-form id="basket" on-ready="onBasketReady">
		<db-model property="model">
			<custom>
				SELECT o.id, o.date_send, ag.description agency, v.code method
					FROM basket o
						JOIN vn2008.Agencias ag ON ag.Id_Agencia = o.agency_id
						JOIN vn2008.Vistas v ON v.vista_id = o.delivery_method_id
			</custom>
		</db-model>
	</db-form>
	<db-query id="basket-lines">
		<custom>
			SELECT item_id, warehouse_id, SUM(amount) amount
				FROM basket_item
				GROUP BY warehouse_id
		</custom>
	</db-query>
	<db-model
		id="items-model"
		result-index="2"
		on-status-changed="onItemsChange">
		<custom>
			CREATE TEMPORARY TABLE tmp.bionic_calc
			(INDEX (item_id))
			ENGINE=MEMORY
			SELECT a.Id_Article item_id FROM vn2008.Articles a
				JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
				WHERE #filter;
			CALL bionic_calc ();
			SELECT a.Id_Article item_id, a.description, b.available, b.price,
			b.producer, a.Foto, a.Article, a.Categoria, a.Medida,
			IF(a.Tallos > 1, a.Tallos, NULL) Tallos, c.str color
				FROM tmp.bionic_item b
					JOIN vn2008.Articles a ON a.Id_Article = b.item_id
		    		LEFT JOIN vn2008.producer p ON p.producer_id = a.producer_id
					LEFT JOIN vn_locale.color_view c ON c.color_id = a.Color
					LEFT JOIN vn_locale.origin_view o ON o.origin_id = a.id_origen
				WHERE b.available > 0
				ORDER BY a.Article, a.Medida
				LIMIT 400;
		</custom>
		<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>
	<db-form id="card-extend">
		<db-model
			property="model"
			batch="card-batch"
			on-status-changed-after="onStatusChange">
			<custom>
				SELECT a.description, o.str origin
					FROM vn2008.Articles a
						LEFT JOIN vn_locale.origin_view o ON o.origin_id = a.id_origen
					WHERE a.Id_Article = #item
			</custom>
		</db-model>
	</db-form>
	<db-model
		id="item-lots"
		result-index="1"
		on-status-changed-after="onStatusChange"
		batch="card-batch">
		<custom>
			CALL bionic_from_item (#item);
			SELECT p.warehouse_id, w.name warehouse, p.grouping, p.price, p.rate, l.available
				FROM tmp.bionic_lot l
					JOIN tmp.bionic_price p ON p.warehouse_id = l.warehouse_id
					JOIN vn2008.warehouse w ON w.id = p.warehouse_id
				ORDER BY warehouse_id, grouping;
		</custom>
	</db-model>
</vn-group>
<h1 id="title">
	<t>Catalog</t>
</h1>
<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">
		<custom>
		<div class="card item-box">
			<htk-image
				directory="catalog"
				subdir="200x200"
				form="item"
				column="Foto"
				full-dir="900x900"/>
			<div class="item-info">
				<htk-button
					form="item"
					column="id"
					tip="_AddToBasket"
					icon="add"
					on-click="onAddItemClick"
					class="add-button"/>
				<h2>
					<htk-text form="item" column="Article"/>
				</h2>
				<p class="producer">
					<htk-text form="item" column="producer"/>
				</p>
				<p>
					<t>Size</t> <htk-text form="item" column="Medida"/>, 
					<t>Category</t> <htk-text form="item" column="Categoria"/>
				</p>
				<p class="color">
					<t>Color</t> <htk-text form="item" column="color"/>
					<htk-text form="item" column="Tallos" format="_, %.0d Units"/>
				</p>
				<div class="aval-price">
					<htk-text form="item" column="available"/> 
					<span class="from">
						<t>from</t>
					</span> 
					<span class="price">
						<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="date_send" 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">
						<custom>
							SELECT r.id, l.str name, r.color
								FROM vn2008.reinos r
									LEFT JOIN vn_locale.realm_view l ON l.realm_id = r.id
								WHERE r.display != FALSE
								ORDER BY name
						</custom>
					</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">
					<custom>
						CALL item_available ();
						SELECT DISTINCT t.tipo_id, l.str name
							FROM vn2008.Tipos t
								JOIN vn2008.Articles a ON a.tipo_id = t.tipo_id
								LEFT JOIN vn_locale.family_view l ON l.family_id = t.tipo_id
								JOIN tmp.item_available i ON i.item_id = a.Id_Article
							WHERE #filter
							ORDER BY name
					</custom>
				</db-model>
				<sql-filter property="filter" type="AND">
					<sql-filter-item type="EQUAL">
						<sql-field name="reino_id" 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">
					<custom>
						CALL item_available ();
						SELECT DISTINCT c.Id_Tinta, l.str name
							FROM vn2008.Tintas c
								JOIN vn2008.Articles a ON a.Color = c.Id_Tinta
								JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
								LEFT JOIN vn_locale.color_view l ON l.color_id = c.Id_Tinta
								JOIN tmp.item_available i ON i.item_id = a.Id_Article
							WHERE #filter
							ORDER BY name
					</custom>
				</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">
					<custom>
						CALL item_available ();
						SELECT DISTINCT p.producer_id, p.name
							FROM vn2008.producer p
								JOIN vn2008.Articles a ON a.producer_id = p.producer_id
								JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
								JOIN tmp.item_available i ON i.item_id = a.Id_Article
							WHERE #filter
							ORDER BY name
					</custom>
				</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">
					<custom>
						CALL item_available ();
						SELECT DISTINCT o.id, l.str name, o.Abreviatura
							FROM vn2008.Origen o
								JOIN vn2008.Articles a ON a.id_origen = o.id
								JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
								LEFT JOIN vn_locale.origin_view l ON l.origin_id = o.id
								JOIN tmp.item_available i ON i.item_id = a.Id_Article
							WHERE #filter
							ORDER BY name
					</custom>
				</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">
					<custom>
						CALL item_available ();
						SELECT DISTINCT a.Categoria, a.Categoria category
							FROM vn2008.Articles a
								JOIN vn2008.Tipos t ON t.tipo_id = a.tipo_id
								JOIN tmp.item_available i ON i.item_id = a.Id_Article
							WHERE #filter
							ORDER BY a.Categoria
					</custom>
				</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="A|Article" selected="true">
					<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|Medida">
					<t>Lower size</t>
				</option>
				<option value="D|Medida">
					<t>Higher size</t>
				</option>
				<option value="A|color">
					<t>Color</t>
				</option>
				<option value="A|producer">
					<t>Producer</t>
				</option>
				<option value="A|Abreviatura">
					<t>Origin</t>
				</option>
				<option value="A|Categoria">
					<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">
		<div class="top">
			<htk-image
				directory="catalog"
				subdir="200x200"
				form="card"
				column="Foto"
				full-dir="900x900"
				conn="conn"
				editable="true"/>
			<div class="item-info">
				<h2>
					<htk-text form="card" column="Article"/>
				</h2>
				<p class="producer">
					<htk-text form="card" column="producer"/>
				</p>
				<p>
					<t>Size</t> <htk-text form="card" column="Medida"/>, 
					<t>Category</t> <htk-text form="card" column="Categoria"/>
				</p>
				<p class="color">
					<t>Color</t> <htk-text form="card" column="color"/>
					<htk-text form="card" column="Tallos" format="_, %.0d Units"/>
				</p>
				<p>
					<t>Origin</t> <htk-text form="card-extend" column="origin"/>
				</p>
			</div>
			<p class="desc">
				<htk-text form="card-extend" column="description" id="desc"/>
			</p>
		</div>
		<htk-grid class="lots-grid" model="item-lots" show-header="false">
			<htk-column-text title="_Store" column="warehouse"/>
			<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"
				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>