1 files changed, 161 insertions, 0 deletions
diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js b/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js
new file mode 100644
index 0000000..66d20f1
--- a/dev/null
+++ b/frontend/delta/js/Clipperz/PM/UI/Components/CardList.js
@@ -0,0 +1,161 @@
+/*
+
+Copyright 2008-2013 Clipperz Srl
+
+This file is part of Clipperz, the online password manager.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com.
+
+* Clipperz is free software: you can redistribute it and/or modify it
+  under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or 
+  (at your option) any later version.
+
+* Clipperz is distributed in the hope that it will be useful, but 
+  WITHOUT ANY WARRANTY; without even the implied warranty of 
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Clipperz. If not, see http://www.gnu.org/licenses/.
+
+*/
+
+Clipperz.PM.UI.Components.CardList = React.createClass({
+
+	getDefaultProps: function () {
+		return {
+			selectedCard: null,
+			searchDelay: 0.3
+		}
+	},
+
+	propTypes: {
+		searchDelay: React.PropTypes.number
+	},
+
+	getInitialState: function () {
+		return {
+			showSearch: false,
+			searchTimer: null,
+			searchText: '',
+//			passphrase: '',
+//			pin: ''
+		};
+	},
+
+	//=========================================================================
+
+	toggleSearch: function (anEvent) {
+		var	showSearchBox;
+
+		showSearchBox = !this.state.showSearch;
+
+		this.setState({showSearch: showSearchBox});
+
+		if (showSearchBox) {
+			MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'focusOnSearchField'));
+		}
+	},
+
+	updateSearchText: function (anEvent) {
+		var	searchText;
+
+		searchText = anEvent.target.value;
+//console.log(">>> updateSearchText", searchText);
+
+		if ((this.state['searchTimer'] != null) && (searchText != this.state['searchText'])) {
+			this.state['searchTimer'].cancel();
+		}
+
+		if (searchText != this.state['searchText']) {
+			this.state['searchText'] = searchText;
+			this.state['searchTimer'] = MochiKit.Async.callLater(this.props['searchDelay'], MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'searchCards', searchText);
+		}
+	},
+
+	focusOnSearchField: function () {
+console.log("focusOnSearchField", this.refs['searchField']);
+		this.refs['searchField'].getDOMNode.focus();
+	},
+
+	searchBox: function () {
+		var result;
+
+		if (this.state.showSearch) {
+			result =	React.DOM.div({className:'searchBox'}, [
+							React.DOM.div(null, [
+								React.DOM.input({type:'search', placeholder:"search", ref:'searchField', onChange:this.updateSearchText})
+							])
+						]);
+		} else {
+			result = null;
+		}
+
+		return result;
+	},
+
+	//=========================================================================
+
+	cardItem: function (aRecordReference) {
+		var	reference = aRecordReference['_reference'];
+		var	selectedCard = (reference == this.props.selectedCard);
+
+		return	React.DOM.div({className:'listItem', onClick:MochiKit.Base.method(this, 'handleClickOnCardDetail', reference)}, [
+					React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label)),
+//					React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label + ' ' + aRecordReference.label)),
+					React.DOM.div({className:'faviconWrapper'}, aRecordReference.favicon ? React.DOM.img({className:'favicon', src:aRecordReference.favicon}) : React.DOM.div({className:'favicon'}, '\u00A0')),
+					React.DOM.div({className:'detailLinkWrapper'}, React.DOM.span({className:'detailLink ' + (selectedCard ? 'icon-spin' : '')}, (selectedCard ? "loading" : "detail")))
+				]);
+	},
+
+	handleClickOnCardDetail: function (aRecordReference, anEvent) {
+		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showRecord', aRecordReference);
+	},
+
+	cardListItems: function () {
+		var	list;
+		var	result;
+
+		list = this.props['cardList'];
+
+		if (typeof(list) != 'undefined') {
+			result = MochiKit.Base.map(MochiKit.Base.method(this, 'cardItem'), list);
+		} else {
+			result = null;
+		}
+
+		return result;
+	},
+
+	//=========================================================================
+
+	handleChange: function (anEvent) {
+//		var	refs = this.refs;
+//		var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0];
+//		var newState = {};
+//
+//		newState[refName] = event.target.value;
+//	    this.setState(newState);
+	},
+
+	//=========================================================================
+
+	render: function() {
+		return	React.DOM.div(null, [
+					React.DOM.div({className:'header'}, [
+						React.DOM.a({className:'account'}, 'clipperz'),
+						React.DOM.div({className:'features'}, [
+							React.DOM.a({className:'addCard'}, 'add'),
+							React.DOM.a({className:'search ' + (this.state.showSearch ? 'selected' : ''), onClick:this.toggleSearch}, 'search'),
+							React.DOM.a({className:'settings'}, 'settings')
+						]),
+//						this.searchBox()
+					]),
+					this.searchBox(),
+					React.DOM.div({className:'content cardList'}, this.cardListItems()),
+				]);
+	}
+
+	//=========================================================================
+});