Basic implementation of search feature

This commit is contained in:
Giulio Cesare Solaroli 2014-09-22 16:53:44 +02:00
parent f42c469663
commit 093d5e7965
4 changed files with 33 additions and 12 deletions

View File

@ -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');
}

View File

@ -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)),

View File

@ -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();

View File

@ -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";
}
}
*/