From 093d5e7965666c9545a4547d1e952d13e134fc87 Mon Sep 17 00:00:00 2001
From: Giulio Cesare Solaroli <giulio.cesare@clipperz.com>
Date: Mon, 22 Sep 2014 16:53:44 +0200
Subject: [PATCH] Basic implementation of search feature

---
 .../PM/UI/Components/Panels/MainPanel.js      |  4 +--
 .../Clipperz/PM/UI/Components/Selections.js   | 25 +++++++++++++------
 .../delta/js/Clipperz/PM/UI/MainController.js | 13 +++++++++-
 frontend/delta/scss/core/sizes.scss           |  3 ++-
 4 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js b/frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js
index 80e880a..868b4fc 100644
--- a/frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js
+++ b/frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js
@@ -156,8 +156,8 @@ Clipperz.PM.UI.Components.Panels.MainPanel = React.createClass({
 			result = this.renderWide();
 		} else if (aLayout == 'narrow') {
 			result = this.renderNarrow();
-		} else if (aLayout == 'extra-short') {
-			result = this.renderNarrow();
+//		} else if (aLayout == 'extra-short') {
+//			result = this.renderNarrow();
 		} else {
 			Clipperz.Base.exception.raise('UnknownType');
 		}
diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js b/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js
index 4f365ca..af56cf2 100644
--- a/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js
+++ b/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js
@@ -48,27 +48,36 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
 		}
 	},
 
+	handleSearchChange: function (anEvent) {
+		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'search', anEvent.currentTarget.value);
+	},
+	
 	render: function () {
 		var	tagInfo;
 		var	tags;
 		var	archivedCardsCount;
+		var	selectedCardCount;
+		var	filterType;
 
 		tagInfo = this.props['tags'] ? this.props['tags'] : {};
 		tags = MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, MochiKit.Base.keys(tagInfo)).sort(Clipperz.Base.caseInsensitiveCompare);
-
-//		archivedCardsCount = tagInfo[Clipperz.PM.DataModel.Record.archivedTag] ? tagInfo[Clipperz.PM.DataModel.Record.archivedTag] : 0;
 		archivedCardsCount = this.props['archivedCardsCount'];
+		selectedCardCount = this.props['cards'] ? this.props['cards'].length : 0;
+		filterType = (this.props['filter'] && this.props['filter']['type']) ? this.props['filter']['type'] : 'ALL';
 
-		return	React.DOM.div({'key':'selections', 'id':'selections'}, [
+		return	React.DOM.div({'key':'selections', 'id':'selections', 'className':filterType}, [
 			React.DOM.ul({'className':'defaultSet'}, [
-				React.DOM.li({'className':'allCards', onClick: this.selectAll}, "All"),
-				React.DOM.li({'className':'recentCards', onClick: this.selectRecent}, "Recent"),
-				React.DOM.li({'className':'untaggedCards', onClick: this.selectUntaggedCards}, "Untagged - " + this.props['untaggedCardsCount'])
+				React.DOM.li({'className':'allCards', 'onClick': this.selectAll}, "All"),
+				React.DOM.li({'className':'recentCards', 'onClick': this.selectRecent}, "Recent"),
+				React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, "Untagged - " + this.props['untaggedCardsCount'])
 			]),
 			React.DOM.div({'className':'search'}, [
 				React.DOM.form({'className':'searchForm'}, [
-					React.DOM.label({'htmlFor':'searchValue'}, 'search'),
-					React.DOM.input({'type':'text', 'id':'searchValue', 'name':'search'})
+					React.DOM.div({}, [
+						React.DOM.label({'htmlFor':'searchValue'}, 'search'),
+						React.DOM.input({'type':'text', 'id':'searchValue', 'onFocus':this.handleSearchChange, 'onChange':this.handleSearchChange, 'name':'search'})
+					]),
+					React.DOM.div({}, [ React.DOM.span({'className':'count'}, selectedCardCount) ])
 				])
 			]),
 			React.DOM.ul({'className':'tagList'}, MochiKit.Base.map(function (aTag) {return Clipperz.PM.UI.Components.TagIndexItem({'label':aTag, 'count':tagInfo[aTag]}); }, tags)),
diff --git a/frontend/delta/js/Clipperz/PM/UI/MainController.js b/frontend/delta/js/Clipperz/PM/UI/MainController.js
index 92f3384..feafb50 100644
--- a/frontend/delta/js/Clipperz/PM/UI/MainController.js
+++ b/frontend/delta/js/Clipperz/PM/UI/MainController.js
@@ -59,7 +59,7 @@ Clipperz.PM.UI.MainController = function() {
 		'doLogin', 'registerNewUser', 'showRegistrationForm', 'goBack',
 		'toggleSelectionPanel', 'toggleSettingsPanel',
 		'matchMediaQuery', 'unmatchMediaQuery',
-		'selectAllCards', 'selectRecentCards', 'tagSelected', 'selectUntaggedCards',
+		'selectAllCards', 'selectRecentCards', 'search', 'tagSelected', 'selectUntaggedCards',
 		'refreshCardEditDetail',
 //		'refreshCardEditToolbar',
 		'saveCardEdits', 'cancelCardEdits',
@@ -1146,6 +1146,17 @@ console.log("SET USER", aUser);
 		return this.refreshSelectedCards();
 	},
 
+	search_handler: function (aValue) {
+//console.log("SEARCH", aValue);
+		if (aValue == "") {
+			this.setFilter('ALL');
+		} else {
+			this.setFilter('SEARCH', aValue);
+		}
+
+		return this.refreshSelectedCards();
+	},
+
 	tagSelected_handler: function (aTag) {
 		this.setFilter('TAG', aTag);
 		return this.refreshSelectedCards();
diff --git a/frontend/delta/scss/core/sizes.scss b/frontend/delta/scss/core/sizes.scss
index 7ea7ebe..2ee8973 100644
--- a/frontend/delta/scss/core/sizes.scss
+++ b/frontend/delta/scss/core/sizes.scss
@@ -41,7 +41,7 @@ This configuration is now located in the first script included in the index_temp
 		content: "extra-wide";
 	}
 }
-
+/*
 @media only screen and (min-width: 100px) and (max-height: 450px) {
 	html {
 		font-family: "extra-short";
@@ -50,3 +50,4 @@ This configuration is now located in the first script included in the index_temp
 		content: "extra-short";
 	}
 }
+*/
\ No newline at end of file