From d360149c3d7a52471e344bf273b17fc006574bad Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Wed, 19 Aug 2015 18:12:04 -0700 Subject: [PATCH] first filter --- pub/work/src/js/actions/WorkActions.coffee | 24 ++- .../src/js/components/FilterComponent.coffee | 43 ++++- .../src/js/components/ListComponent.coffee | 21 ++- .../src/js/components/SortComponent.coffee | 6 +- pub/work/src/js/main.js | 150 +++++++++++++++--- pub/work/src/js/stores/WorkStore.coffee | 20 ++- 6 files changed, 226 insertions(+), 38 deletions(-) diff --git a/pub/work/src/js/actions/WorkActions.coffee b/pub/work/src/js/actions/WorkActions.coffee index a176e67e72..a69757e8ae 100644 --- a/pub/work/src/js/actions/WorkActions.coffee +++ b/pub/work/src/js/actions/WorkActions.coffee @@ -1,28 +1,36 @@ Dispatcher = require '../dispatcher/Dispatcher.coffee' module.exports = - newItem: (index,list) -> + setFilter: (key,val) -> + Dispatcher.handleViewAction + type:'setFilter' + key:key + val:val + + setSort: (key,val) -> + Dispatcher.handleViewAction + type:'setSort' + key:key + val:val + + newItem: (index) -> Dispatcher.handleViewAction type:'newItem' index:index - list:list - swapItems: (to,from,list) -> + swapItems: (to,from) -> Dispatcher.handleViewAction type:'swapItem' from:from - list:list to:to - removeItem: (index,list) -> + removeItem: (index) -> Dispatcher.handleViewAction type:'removeItem' index:index - list:list - addItem: (index,item,list) -> + addItem: (index,item) -> Dispatcher.handleViewAction type:'addItem' - list:list index:index item:item \ No newline at end of file diff --git a/pub/work/src/js/components/FilterComponent.coffee b/pub/work/src/js/components/FilterComponent.coffee index c40f79ad99..13d3fa5217 100644 --- a/pub/work/src/js/components/FilterComponent.coffee +++ b/pub/work/src/js/components/FilterComponent.coffee @@ -1,9 +1,50 @@ recl = React.createClass rece = React.createElement -[div,h1,input,textarea] = [React.DOM.div,React.DOM.h1,React.DOM.input,React.DOM.textarea] +[div,h1,label] = [React.DOM.div,React.DOM.h1,React.DOM.label] module.exports = recl + _onKeyDown: (e) -> + if e.keyCode is 13 + e.stopPropagation() + e.preventDefault() + @change(e) + _onBlur: (e) -> @change(e) + change: (e) -> + $t = $(e.target).closest('.filter') + txt = $t.find('.input').text().trim() + if txt.length is 0 then txt = null + @props.onChange $t.attr('data-key'),txt render: -> (div {className:'filters'}, [ (h1 {}, 'Filters:') + (div {className:'owned filter','data-key':'owned'}, [ + (label {}, 'Owened by:') + (div { + contentEditable:true + className:'input ib' + onKeyDown:@_onKeyDown + onBlur:@_onBlur + },@props.filters.owned) + ]) + (div {className:'tag filter','data-key':'tag'}, [ + (label {}, 'Tag:') + (div { + contentEditable:true + className:'input ib' + },@props.filters.tag) + ]) + (div {className:'channel filter','data-key':'channel'}, [ + (label {}, 'Channel:') + (div { + contentEditable:true + className:'input ib' + },@props.filters.channel) + ]) + (div {className:'status filter','data-key':'status'}, [ + (label {}, 'Status:') + (div { + contentEditable:true + className:'input ib' + },@props.filters.status) + ]) ]) \ No newline at end of file diff --git a/pub/work/src/js/components/ListComponent.coffee b/pub/work/src/js/components/ListComponent.coffee index 41e9e24dba..95d2b49f4a 100644 --- a/pub/work/src/js/components/ListComponent.coffee +++ b/pub/work/src/js/components/ListComponent.coffee @@ -89,6 +89,12 @@ module.exports = recl # cancel these if (kc is 13) or (kc is 38) or (kc is 40) then e.preventDefault() + _changeListening: -> + + _changeFilter: (key,val) -> WorkActions.setFilter key,val + + _changeSorts: -> + componentDidMount: -> @placeholder = $ "
x
" WorkStore.addChangeListener @_onChangeStore @@ -113,10 +119,19 @@ module.exports = recl render: -> (div {}, [ (div {className:'ctrl'}, [ - rece(ListeningComponent, @state.listening) + rece(ListeningComponent, { + listening:@state.listening + onChange:@_changeListening + }) (div {className:'transforms'},[ - rece(FilterComponent, @state.filters) - rece(SortComponent, @state.sorts) + rece(FilterComponent, { + filters:@state.filters + onChange:@_changeFilter + }) + rece(SortComponent, { + sorts:@state.sorts + onChange:@_changeSorts + }) ]), ]) (div { diff --git a/pub/work/src/js/components/SortComponent.coffee b/pub/work/src/js/components/SortComponent.coffee index 052301ae2f..5c7fa15a13 100644 --- a/pub/work/src/js/components/SortComponent.coffee +++ b/pub/work/src/js/components/SortComponent.coffee @@ -1,9 +1,13 @@ recl = React.createClass rece = React.createElement -[div,h1,input,textarea] = [React.DOM.div,React.DOM.h1,React.DOM.input,React.DOM.textarea] +[div,h1,button] = [React.DOM.div,React.DOM.h1,React.DOM.button] module.exports = recl render: -> (div {className:'sorts'}, [ (h1 {}, 'Sorts:') + (button {}, 'Name') + (button {}, 'Owner') + (button {}, 'Date') + (button {}, 'Priority') ]) \ No newline at end of file diff --git a/pub/work/src/js/main.js b/pub/work/src/js/main.js index c21da4b5dd..439dbd70c0 100644 --- a/pub/work/src/js/main.js +++ b/pub/work/src/js/main.js @@ -4,32 +4,42 @@ var Dispatcher; Dispatcher = require('../dispatcher/Dispatcher.coffee'); module.exports = { - newItem: function(index, list) { + setFilter: function(key, val) { return Dispatcher.handleViewAction({ - type: 'newItem', - index: index, - list: list + type: 'setFilter', + key: key, + val: val }); }, - swapItems: function(to, from, list) { + setSort: function(key, val) { + return Dispatcher.handleViewAction({ + type: 'setSort', + key: key, + val: val + }); + }, + newItem: function(index) { + return Dispatcher.handleViewAction({ + type: 'newItem', + index: index + }); + }, + swapItems: function(to, from) { return Dispatcher.handleViewAction({ type: 'swapItem', from: from, - list: list, to: to }); }, - removeItem: function(index, list) { + removeItem: function(index) { return Dispatcher.handleViewAction({ type: 'removeItem', - index: index, - list: list + index: index }); }, - addItem: function(index, item, list) { + addItem: function(index, item) { return Dispatcher.handleViewAction({ type: 'addItem', - list: list, index: index, item: item }); @@ -38,19 +48,74 @@ module.exports = { },{"../dispatcher/Dispatcher.coffee":8}],2:[function(require,module,exports){ -var div, h1, input, rece, recl, ref, textarea; +var div, h1, label, rece, recl, ref; recl = React.createClass; rece = React.createElement; -ref = [React.DOM.div, React.DOM.h1, React.DOM.input, React.DOM.textarea], div = ref[0], h1 = ref[1], input = ref[2], textarea = ref[3]; +ref = [React.DOM.div, React.DOM.h1, React.DOM.label], div = ref[0], h1 = ref[1], label = ref[2]; module.exports = recl({ + _onKeyDown: function(e) { + if (e.keyCode === 13) { + e.stopPropagation(); + e.preventDefault(); + return this.change(e); + } + }, + _onBlur: function(e) { + return this.change(e); + }, + change: function(e) { + var $t, txt; + $t = $(e.target).closest('.filter'); + txt = $t.find('.input').text().trim(); + if (txt.length === 0) { + txt = null; + } + return this.props.onChange($t.attr('data-key'), txt); + }, render: function() { return div({ className: 'filters' - }, [h1({}, 'Filters:')]); + }, [ + h1({}, 'Filters:'), div({ + className: 'owned filter', + 'data-key': 'owned' + }, [ + label({}, 'Owened by:'), div({ + contentEditable: true, + className: 'input ib', + onKeyDown: this._onKeyDown, + onBlur: this._onBlur + }, this.props.filters.owned) + ]), div({ + className: 'tag filter', + 'data-key': 'tag' + }, [ + label({}, 'Tag:'), div({ + contentEditable: true, + className: 'input ib' + }, this.props.filters.tag) + ]), div({ + className: 'channel filter', + 'data-key': 'channel' + }, [ + label({}, 'Channel:'), div({ + contentEditable: true, + className: 'input ib' + }, this.props.filters.channel) + ]), div({ + className: 'status filter', + 'data-key': 'status' + }, [ + label({}, 'Status:'), div({ + contentEditable: true, + className: 'input ib' + }, this.props.filters.status) + ]) + ]); } }); @@ -352,6 +417,11 @@ module.exports = recl({ return e.preventDefault(); } }, + _changeListening: function() {}, + _changeFilter: function(key, val) { + return WorkActions.setFilter(key, val); + }, + _changeSorts: function() {}, componentDidMount: function() { this.placeholder = $("
x
"); WorkStore.addChangeListener(this._onChangeStore); @@ -385,9 +455,20 @@ module.exports = recl({ div({ className: 'ctrl' }, [ - rece(ListeningComponent, this.state.listening), div({ + rece(ListeningComponent, { + listening: this.state.listening, + onChange: this._changeListening + }), div({ className: 'transforms' - }, [rece(FilterComponent, this.state.filters), rece(SortComponent, this.state.sorts)]) + }, [ + rece(FilterComponent, { + filters: this.state.filters, + onChange: this._changeFilter + }), rece(SortComponent, { + sorts: this.state.sorts, + onChange: this._changeSorts + }) + ]) ]), div({ className: 'items', onDragOver: this._dragOver @@ -429,19 +510,19 @@ module.exports = recl({ },{}],6:[function(require,module,exports){ -var div, h1, input, rece, recl, ref, textarea; +var button, div, h1, rece, recl, ref; recl = React.createClass; rece = React.createElement; -ref = [React.DOM.div, React.DOM.h1, React.DOM.input, React.DOM.textarea], div = ref[0], h1 = ref[1], input = ref[2], textarea = ref[3]; +ref = [React.DOM.div, React.DOM.h1, React.DOM.button], div = ref[0], h1 = ref[1], button = ref[2]; module.exports = recl({ render: function() { return div({ className: 'sorts' - }, [h1({}, 'Sorts:')]); + }, [h1({}, 'Sorts:'), button({}, 'Name'), button({}, 'Owner'), button({}, 'Date'), button({}, 'Priority')]); } }); @@ -918,7 +999,8 @@ _list = [ _listening = []; _filters = { - owned_by: null, + owned: null, + tag: null, channel: null, status: null }; @@ -941,7 +1023,21 @@ WorkStore = assign({}, EventEmitter.prototype, { return this.removeListener("change", cb); }, getList: function(key) { - return _list; + var add, k, list, v; + list = []; + for (k in _list) { + v = _list[k]; + add = true; + if (_filters.owned !== null) { + if (v.owner !== _filters.owned) { + add = false; + } + } + if (add === true) { + list.push(v); + } + } + return list; }, getListening: function() { return _listening; @@ -949,9 +1045,19 @@ WorkStore = assign({}, EventEmitter.prototype, { getFilters: function() { return _filters; }, + setFilter: function(arg) { + var key, val; + key = arg.key, val = arg.val; + return _filters[key] = val; + }, getSorts: function() { return _sorts; }, + setSort: function(arg) { + var key, val; + key = arg.key, val = arg.val; + return _sorts[key] = val; + }, newItem: function(arg) { var index, item; index = arg.index; @@ -974,7 +1080,7 @@ WorkStore = assign({}, EventEmitter.prototype, { swapItem: function(arg) { var from, to; to = arg.to, from = arg.from; - return _list.splice(to, 0, list.splice(from, 1)[0]); + return _list.splice(to, 0, _list.splice(from, 1)[0]); }, removeItem: function(arg) { var index, list; diff --git a/pub/work/src/js/stores/WorkStore.coffee b/pub/work/src/js/stores/WorkStore.coffee index 01cfeb4e1a..9ada54d959 100644 --- a/pub/work/src/js/stores/WorkStore.coffee +++ b/pub/work/src/js/stores/WorkStore.coffee @@ -50,7 +50,8 @@ _list = [ ] _listening = [] _filters = - owned_by:null + owned:null + tag:null channel:null status:null _sorts = @@ -64,14 +65,27 @@ WorkStore = assign {},EventEmitter.prototype,{ addChangeListener: (cb) -> @on 'change', cb removeChangeListener: (cb) -> @removeListener "change", cb - getList: (key) -> _list + getList: (key) -> + list = [] + for k,v of _list + add = true + if _filters.owned isnt null + if v.owner isnt _filters.owned + add = false + if add is true + list.push v + list getListening: -> _listening getFilters: -> _filters + setFilter: ({key,val}) -> _filters[key] = val + getSorts: -> _sorts + setSort: ({key,val}) -> _sorts[key] = val + newItem: ({index}) -> item = id:index @@ -89,7 +103,7 @@ WorkStore = assign {},EventEmitter.prototype,{ _list.splice index,0,item swapItem: ({to,from}) -> - _list.splice to,0,list.splice(from,1)[0] + _list.splice to,0,_list.splice(from,1)[0] removeItem: ({index}) -> list = lists[list]