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

<vn>
<vn-group>
	<vn-lot-query id="params" on-change="onParamsChange">
		<vn-spec name="search" type="String"/>
		<vn-spec name="itemId" type="Number"/>
		<vn-spec name="category" type="Number"/>
		<vn-spec name="type" type="Number"/>
	</vn-lot-query>
	<sql-filter type="AND" id="filter">
		<sql-filter-item type="EQUAL"
			target="i" field="typeFk"
			param="type"/>
		<sql-filter type="OR">
			<sql-filter-item type="LIKE"
				target="i" field="name"
				param="search"/>
			<sql-filter-item type="EQUAL"
				target="i" field="id"
				param="search"/>
			<sql-filter-item type="EQUAL"
				target="i" field="id"
				param="itemId"/>
		</sql-filter>
	</sql-filter>
	<sql-string id="pre-query">
		DROP TEMPORARY TABLE IF EXISTS tItems;
		CREATE TEMPORARY TABLE tItems
			(INDEX (id))
			ENGINE = MEMORY
			SELECT i.id
				FROM #joins
				WHERE #filter
	</sql-string>
	<sql-string id="post-query">
		DROP TEMPORARY TABLE tItems
	</sql-string>
	<db-model
		id="items"
		result-index="2"
		auto-load="false">
	</db-model>
	<db-form id="basket" on-ready="onBasketReady">
		<db-model property="model">
			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
		</db-model>
	</db-form>
	<db-query id="basket-lines">
		SELECT item_id, warehouse_id, SUM(amount) amount
			FROM basket_item
			GROUP BY warehouse_id
	</db-query>
	<db-query id="tags" on-ready="onTagsReady">
		SELECT it.tagFk, SUM(it.priority) priority
			FROM vn.itemTag it
				JOIN vn.item i ON i.id = it.itemFk
			WHERE #filter
			GROUP BY tagFk
			ORDER BY priority DESC
			LIMIT 6
	</db-query>
	<db-form id="card-extend">
		<db-model
			property="model"
			lot="card-lot">
			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>
	<db-model
		id="item-lots"
		result-index="1"
		lot="card-lot">
		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;
	</db-model>
	<vn-lot id="card-lot"/>
	<vn-param lot="params" name="category" on-changed="onCategoryChange"/>
</vn-group>
<h1 id="title">
	_Catalog
</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
		lot="params"
		name="search"/>
</div>
<div id="main" class="catalog">
	<htk-repeater
		id="grid-view"
		empty-message="_Choose filter from right menu"
		form-id="item"
		model="items">
		<custom>
		<div class="card item-box">
			<htk-image
				directory="catalog"
				subdir="200x200"
				lot="item"
				name="image"
				full-dir="900x900"/>
			<div class="item-info">
				<htk-button
					lot="item"
					value="{{item.id}}"
					tip="_AddToBasket"
					icon="add"
					on-click="onAddItemClick"
					class="add-button"/>
				<h2>{{item.name}}</h2>
				<p class="producer">
					{{item.producer}}
				</p>
				<p>
					@{{item.id}}
				</p>
				<p>
					<span>_Size</span> {{item.size}}
					<span>_Category</span> {{item.category}}
				</p>
				<p class="color">
					<span>_Color</span> {{item.inkFk}}
					<htk-text lot="item" name="stems" format="_, %.0d Units"/>
				</p>
				<div class="aval-price">
					{{item.available}} 
					<span class="from">_from</span> 
					<span class="price">
						<htk-text lot="item" name="price" format="%.2d€"/>
					</span>
				</div>
			</div>
		</div>
		</custom>
	</htk-repeater>
</div>
<div id="right-panel" class="right-panel" on-click="onRightPanelClick">
	<div class="basket-info">
		<p>
			<htk-text lot="basket" name="date_send" format="%D"/>
		</p>
		<p>
			<span id="method"/> 
			<htk-text lot="basket" name="agency"/>
		</p>
		<button class="thin" on-click="onConfigureClick">
			_Change
		</button>
	</div>
	<div class="filter">
		<div class="categories">
			<div class="categories">
				<htk-repeater
					class="categories-box">
					<db-model
						id="categories"
						property="model"
						on-status-changed="refreshTitleColor">
						SELECT c.id, l.name, c.color
							FROM vn.itemCategory c
								JOIN vn.itemCategoryL10n l ON l.id = c.id
							WHERE c.display > 0
							ORDER BY l.name
					</db-model>
					<custom>
						<a class="clickable" href="#!form={{hash.form}}&amp;category={{id}}">
							<img
								src="image/family/light/{{id}}.svg"
								title="{{name}}"
								alt="{{name}}"/>
						</a>
					</custom>
				</htk-repeater>
				<div class="clear"/>
			</div>
		</div>
		<div id="category-msg" class="category-msg">
			<h1>_Choose a category</h1>
		</div>
		<div id="filters" class="filters">
			<div>
				<label>_Order by</label>
				<htk-combo
					id="order-by"
					on-change="onOrderChange"
					value="relevancy"
					not-null="true"/>
				<label>_Family</label>
				<htk-combo
					id="type"
					name="type"
					on-change="refreshTitle"
					lot="params">
					<db-model
						id="types"
						property="model"
						lot="params"
						result-index="1">
						CALL itemGetAvailable;
						SELECT DISTINCT t.id, l.name
							FROM vn.itemType t
								JOIN vn.item i ON i.typeFk = t.id
								JOIN tmp.itemAvailable a ON a.id = i.id
								JOIN vn.itemTypeL10n l ON l.id = t.id
							WHERE t.categoryFk = #category
							ORDER BY name
					</db-model>
				</htk-combo>
			</div>
			<div id="current-filters"/>
			<div id="suggested-filters"/>
			<button on-click="onRemoveFiltersClick" class="thin">
				_Remove filters
			</button>
		</div>
	</div>
</div>
<htk-popup id="desc-popup">
	<div
		property="child-node"
		class="desc-popup"
		id="description"/>
</htk-popup>
<htk-popup
	id="card-popup"
	modal="true"
	on-closed="onPopupClose">
	<db-form id="card" model="items"/>
	<div property="child-node" class="item-card">
		<div class="top">
			<htk-image
				directory="catalog"
				subdir="200x200"
				lot="card"
				name="image"
				full-dir="900x900"
				conn="conn"
				editable="true"/>
			<div class="item-info">
				<h2>
					{{card.name}}
				</h2>
				<p class="producer">
					{{card.producer}}
				</p>
				<p>
					<span>_Size</span> {{card.size}}, 
					<span>_Category</span> {{card.category}}
				</p>
				<p class="color">
					<span>_Color</span> {{card.inkFk}}
					<htk-text lot="card" name="Tallos" format="_, %.0d Units"/>
				</p>
				<p>
					<span>_Origin</span> {{card.origin}}
				</p>
			</div>
			<p class="desc">
				{{cardExtend.description}}
			</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>