Tags alpha, bugs combo

forms/ecomerce/catalog/catalog.js

@@ -132,7 +132,7 @@ Hedera.Catalog = new Class
 		var shouldRefresh = params.search ||
 			params.category && params.type;
 			
-		Vn.Node.removeChilds (this.$.tagFilters);
+		Vn.Node.removeChilds (this.$.suggestedFilters);
 
 		if (shouldRefresh)
 		{
@@ -163,14 +163,9 @@ Hedera.Catalog = new Class
 		this.tagFilter = {};
 	}
 
-	,tagFilter: {}
+	,filters: {}
 	
-	,onTagFilterAdd: function ()
+	,buildQuery: function (query, params, excludeTag)
-	{
-		tagFilter[tag.id] = tag.value;
-	}
-	
-	,buildQuery: function (query, params)
 	{
 		var query = new Sql.MultiStmt ({
 			stmts: [
@@ -180,7 +175,7 @@ Hedera.Catalog = new Class
 			]
 		});
 		var qParams = {
-			joins: this.buildTagFilter (),
+			joins: this.buildTagFilter (excludeTag),
 			filter: this.buildMainFilter ()
 		};
 		Object.assign (qParams, params);
@@ -228,11 +223,12 @@ Hedera.Catalog = new Class
 
 		var i = -1;
 
-		for (var tagId in this.tagFilter)
+		for (var tagId in this.filters)
 		{
-			var tagValue = this.tagFilter[tagId];
+			var tagId = parseInt (tagId);
+			var tagValue = this.filters[tagId].field.value;
 
-			if (tagId == excludeTag)
+			if (tagId === excludeTag)
 				continue;
 	
 			i++;
@@ -296,35 +292,73 @@ Hedera.Catalog = new Class
 	
 	,onTagsReady: function (resultSet)
 	{
-		var filters = this.$.tagFilters;
 		var tags = resultSet.results[2].data;
 
 		tags.forEach (function (tag) {
+			if (this.filters[tag.id] !== undefined)
+				return;
+
 			var query = this.buildQuery (
-				'CALL catalogGetTagValues (#tag)', {tag: tag.id});
+				'CALL catalogGetTagValues (#tag)', {tag: tag.id}, tag.id);
+
+			var filter = this.createElement ('div');
+			this.$.suggestedFilters.appendChild (filter);
 
 			var label = this.createElement ('label');
 			label.appendChild (this.createTextNode (tag.name));
-			filters.appendChild (label);
+			filter.appendChild (label);
 
 			var combo = new Htk.Combo ({
 				valueField: 'value',
-				showField: 'value',
+				showField: 'value'
-				model: new Db.Model ({
-					autoLoad: true,
-					resultIndex: 2,
-					query: query,
-					conn: this.conn
-				})
 			});
-			combo.on ('changed', this.onComboChange, this);
+			filter.appendChild (combo.node);
-			filters.appendChild (combo.node);
+
+			var model = new Db.Model ({
+				autoLoad: false,
+				resultIndex: 2,
+				query: query,
+				conn: this.conn
+			});
+			combo.model = model;
+
+			var filterData = {
+				filter: filter,
+				tagId: tag.id,
+				field: combo,
+				model: model
+			};
+			combo.on ('changed',
+				this.onComboChange.bind (this, filterData), this);
 		}, this);
 	}
 
-	,onComboChange: function (combo)
+	,onComboChange: function (filterData, _, value)
 	{
-		console.log (combo.value);
+		var filter = filterData.filter;
+		var tagId = filterData.tagId;
+
+		if (value == null)
+		{
+			this.$.currentFilters.removeChild (filter);
+			delete this.filters[tagId];
+		}
+		else if (this.filters[tagId] === undefined)
+		{
+			this.filters[tagId] = filterData;
+			this.$.suggestedFilters.removeChild (filter);
+			this.$.currentFilters.appendChild (filter);
+		}
+
+		for (var tid in this.filters)
+		if (parseInt (tid) !== tagId)
+		{
+			var query = this.buildQuery (
+				'CALL catalogGetTagValues (#tag)', {tag: tid}, tid);
+			this.filters[tid].model.query = query;
+		}
+
+		this.onParamsChange ();
 	}
 
 	,onCategoryChange: function ()

forms/ecomerce/catalog/style.css

@@ -101,32 +101,6 @@
 	width: 90%;
 	display: block;
 }
-.vn-filter > ul
-{
-	margin: 0;
-	list-style-type: none;
-	text-align: left;
-	color: #666;
-	padding-left: .8em;
-}
-.vn-filter li
-{
-	margin: 0;
-	margin-top: .3em;
-	line-height: 2em;
-	max-width: 90%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-.vn-filter li > button
-{
-	vertical-align: middle;
-	text-align: center;
-	padding: .2em;
-	margin: 0;
-	margin-right: .2em;
-}
 .right-panel .filters > button
 {
 	display: block;

forms/ecomerce/catalog/ui.xml

@@ -227,7 +227,9 @@
 						ORDER BY name
 				</db-model>
 			</htk-combo>
-			<div id="tag-filters">
+			<div id="current-filters">
+			</div>
+			<div id="suggested-filters">
 			</div>
 			<button on-click="onRemoveFiltersClick" class="thin">
 				_Remove filters

js/htk/field/combo.js

@@ -146,6 +146,7 @@ module.exports = new Class
 	,_row: -1
 	,_model: null
 	,_notNull: false
+	,_selected: false
 
 	,render: function ()
 	{
@@ -191,13 +192,6 @@ module.exports = new Class
 		event.preventDefault ();
 	}
 	
-	,_setRow: function (row)
-	{
-		this._row = row;
-		this._refreshShowText ();
-		this.rowChanged ();
-	}
-	
 	,_onMouseDown: function (e)
 	{
 		if (e.defaultPrevented)
@@ -211,6 +205,9 @@ module.exports = new Class
 	
 		var model = this._model;
 		
+		if (model.status === Db.Model.Status.CLEAN)
+			model.refresh ();
+
 		var menu = this.createElement ('div');
 		menu.className = 'htk-combo-menu';
 		
@@ -255,7 +252,9 @@ module.exports = new Class
 		this._popup.hide ();
 
 		var changed = this._putValue (value);
-		this._setRow (row);
+		
+		this._selected = false;
+		this._setRow (row, true);
 
 		if (changed)
 		{
@@ -272,12 +271,58 @@ module.exports = new Class
 		this.emit ('menu-hide');
 	}
 	
+	,_setRow: function (row)
+	{
+		this._row = row;
+
+		if (!this._selected)
+		{
+			if (row != -1)
+				this._selected = true;
+	
+			this.rowChanged ();
+			this._refreshShowText ();
+		}
+	}
+
+	,_onModelChange: function ()
+	{
+		var model = this._model;
+		this.emit ('status-changed');
+		
+		if (this._popup)
+			this._popup.reset ();
+
+		this._selectOption ();
+
+		if (model && model.ready)
+			this.emit ('ready');
+	}
+
+	,_selectOption: function ()
+	{
+		var row;
+	
+		if (this._model && this._model.ready)
+			row = this._model.search (this.valueField, this._value);
+		else
+			row = -1;
+
+		this._setRow (row);
+	}
+
+	,_putFieldValue: function ()
+	{
+		this._selected = false;
+		this._selectOption ();
+	}
+
 	,_refreshShowText: function ()
 	{
 		var model = this._model;
 	
-		if (this._row !== -1)
+		if (this._value != null)
-			var showText = model.get (this._row, this.showField);
+			var showText = this.$[this.showField];
 		else if (model && model.status === Db.Model.Status.LOADING)
 			var showText = _('Loading...');
 		else if (this._placeholder)
@@ -299,40 +344,6 @@ module.exports = new Class
 		}
 	}
 	
-	,_onModelChange: function ()
-	{
-		var model = this._model;
-		this.emit ('status-changed');
-		
-		if (this._popup)
-			this._popup.reset ();
-
-		if (model && model.ready)
-		{
-			this._selectOption ();
-			this.emit ('ready');
-		}
-		else
-			this._setRow (-1);
-	}
-
-	,_selectOption: function ()
-	{
-		var row;
-	
-		if (this._model && this._model.ready)
-			row = this._model.search (this.valueField, this._value);
-		else
-			row = -1;
-
-		this._setRow (row);
-	}
-
-	,_putFieldValue: function ()
-	{
-		this._selectOption ();
-	}
-	
 	,setEditable: function (editable)
 	{
 		this.node.disabled = !editable;

js/vn/model.js

@@ -381,4 +381,11 @@ Klass.implement
 
 		return -1;
 	}
+	
+	//+++++++++++++++++++++++++++++ Virtual
+
+	,refresh: function ()
+	{
+		this._setStatus (Status.READY);
+	}
 });