From 678af2747d6414379e81ee6856c7ec2f3cd5a890 Mon Sep 17 00:00:00 2001
From: François Schmidts <francois.schmidts@gmail.com>
Date: Sat, 30 Jan 2016 23:17:03 +0100
Subject: registering modifications on feeds / categories

---
 src/web/js/components/RightPanel.react.js | 156 ++++++++++++++++++++----------
 1 file changed, 105 insertions(+), 51 deletions(-)

(limited to 'src/web/js/components/RightPanel.react.js')

diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 2e2aac3e..fda7c976 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -4,11 +4,15 @@ var Glyphicon = require('react-bootstrap/Glyphicon');
 var Button = require('react-bootstrap/Button');
 var ButtonGroup = require('react-bootstrap/ButtonGroup');
 
+var RightPanelActions = require('../actions/RightPanelActions');
 var RightPanelStore = require('../stores/RightPanelStore');
 var JarrTime = require('./time.react');
 
 var PanelMixin = {
     propTypes: {obj: React.PropTypes.object.isRequired},
+    getInitialState: function() {
+        return {edit_mode: false, obj: this.props.obj};
+    },
     getHeader: function() {
         var icon = null;
         if(this.props.obj.icon_url){
@@ -46,7 +50,9 @@ var PanelMixin = {
         var items = [];
         var key;
         if(!this.state.edit_mode) {
-        this.fields.map(function(field) {
+        this.fields.filter(function(field) {
+            return field.type != 'ignore';
+        }).map(function(field) {
             key = this.getKey('dt', field.key);
             items.push(<dt key={key}>{field.title}</dt>);
             key = this.getKey('dd', field.key);
@@ -67,24 +73,30 @@ var PanelMixin = {
             }
         }.bind(this));
         } else {
-        this.fields.map(function(field) {
+        items.push(<dd key={this.getKey('dd', 'submit')}>
+                        <button className="btn btn-default"
+                                onClick={this.saveObj}>
+                            Submit
+                        </button>
+                    </dd>);
+        this.fields.filter(function(field) {
+            return field.type != 'ignore';
+        }).map(function(field) {
             key = this.getKey('dd', field.key);
             items.push(<dt key={key}>{field.title}</dt>);
             key = this.getKey('dt', field.key);
+            var input = null;
             if(field.type == 'string' || field.type == 'link') {
-                items.push(<dd key={key}><input type="text"
-                                    defaultValue={this.props.obj[field.key]} />
-                           </dd>);
+                input = (<input type="text" name={field.key}
+                                onChange={this.saveField}
+                                defaultValue={this.props.obj[field.key]} />);
             } else if (field.type == 'bool') {
-                items.push(<dd key={key}><input type="checkbox"
-                           defaultChecked={this.props.obj[field.key]} /></dd>);
+                input = (<input type="checkbox" name={field.key}
+                                onChange={this.saveField}
+                                defaultChecked={this.props.obj[field.key]} />);
             }
+            items.push(<dd key={key}>{input}</dd>);
         }.bind(this));
-            items.push(<dd key={this.getKey('dd', 'submit')}>
-                           <button className="btn btn-default">
-                               Submit
-                           </button>
-                       </dd>);
         }
         return (<dl className="dl-horizontal">{items}</dl>);
     },
@@ -99,15 +111,39 @@ var PanelMixin = {
         this.setState({edit_mode: !this.state.edit_mode});
     },
     onClickRemove: function() {
+        RightPanelActions.delObj(this.props.obj.id, this.obj_type);
+    },
+    saveField: function(evnt) {
+        var obj = this.state.obj;
+        for(var i in this.fields) {
+            if(evnt.target.name == this.fields[i].key) {
+                if(this.fields[i].type == 'bool') {
+                    obj[evnt.target.name] = evnt.target.checked;
+                } else {
+                    obj[evnt.target.name] = evnt.target.value;
+                }
+                break;
+            }
+        }
+        this.setState({obj: obj});
+    },
+    saveObj: function() {
+        var to_push = {};
+        this.fields.map(function(field) {
+            to_push[field.key] = this.state.obj[field.key];
+        }.bind(this));
+        this.setState({edit_mode: false}, function() {
+            RightPanelActions.putObj(this.props.obj.id, this.obj_type, to_push);
+        }.bind(this));
     },
 };
 
 var Article = React.createClass({
     mixins: [PanelMixin],
-    getInitialState: function() {return {edit_mode: false};},
-    fields: [],
     isEditable: function() {return false;},
     isRemovable: function() {return true;},
+    fields: [],
+    obj_type: 'article',
     getTitle: function() {return this.props.obj.title;},
     getBody: function() {
         return (<div className="panel-body" dangerouslySetInnerHTML={
@@ -117,16 +153,15 @@ var Article = React.createClass({
 
 var Feed = React.createClass({
     mixins: [PanelMixin],
-    getInitialState: function() {
-        return {edit_mode: false, filters: this.props.obj.filters};
-    },
     isEditable: function() {return true;},
     isRemovable: function() {return true;},
+    obj_type: 'feed',
     fields: [{'title': 'Feed title', 'type': 'string', 'key': 'title'},
              {'title': 'Description', 'type': 'string', 'key': 'description'},
              {'title': 'Feed link', 'type': 'link', 'key': 'link'},
              {'title': 'Site link', 'type': 'link', 'key': 'site_link'},
              {'title': 'Enabled', 'type': 'bool', 'key': 'enabled'},
+             {'title': 'Filters', 'type': 'ignore', 'key': 'filters'},
     ],
     getTitle: function() {return this.props.obj.title;},
     getFilterRow: function(i, filter) {
@@ -138,30 +173,56 @@ var Feed = React.createClass({
                         <Glyphicon glyph='minus' />
                     </button>
                 </span>
+                <select name="action on" className="form-control"
+                        data-index={i} onChange={this.saveFilterChange}
+                        defaultValue={filter['action on']}>
+                    <option value="match">match</option>
+                    <option value="no match">no match</option>
+                </select>
+                <input name="pattern" type="text" className="form-control"
+                        data-index={i} onChange={this.saveFilterChange}
+                        defaultValue={filter.pattern} />
                 <select name="type" className="form-control"
+                        data-index={i} onChange={this.saveFilterChange}
                         defaultValue={filter.type}>
                     <option value='simple match'>simple match</option>
                     <option value='regex'>regex</option>
                 </select>
-                <input type="text" className="form-control"
-                        name="pattern" defaultValue={filter.pattern} />
-                <select name="action_on" className="form-control"
-                        defaultValue={filter.action_on}>
-                    <option value="match">match</option>
-                    <option value="no match">no match</option>
-                </select>
                 <select name="action" className="form-control"
+                        data-index={i} onChange={this.saveFilterChange}
                         defaultValue={filter.action}>
                     <option value="mark as read">mark as read</option>
                     <option value="mark as favorite">mark as favorite</option>
                 </select>
             </dd>);
     },
-    getBody: function() {
-        var filter_rows = [];
-        for(var i in this.state.filters) {
-            filter_rows.push(this.getFilterRow(i, this.state.filters[i]));
+    getFilterRows: function() {
+        var rows = [];
+        if(this.state.edit_mode) {
+            for(var i in this.state.obj.filters) {
+                rows.push(this.getFilterRow(i, this.state.obj.filters[i]));
+            }
+            return (<dl className="dl-horizontal">
+                        <dt>Filters</dt>
+                        <dd>
+                            <button className="btn btn-default"
+                                    type="button" onClick={this.addFilterRow}>
+                                <Glyphicon glyph='plus' />
+                            </button>
+                        </dd>
+                        {rows}
+                    </dl>);
         }
+        rows = [];
+        rows.push(<dt key={'d-title'}>Filters</dt>);
+        for(var i in this.state.obj.filters) {
+            rows.push(<dd key={'d' + i}>
+                    When {this.state.obj.filters[i]['action on']} on "{this.state.obj.filters[i].pattern}" ({this.state.obj.filters[i].type}) => {this.state.obj.filters[i].action}
+                    </dd>);
+        }
+        return <dl className="dl-horizontal">{rows}</dl>;
+    },
+    getBody: function() {
         return (<div className="panel-body">
                     <dl className="dl-horizontal">
                         <dt>Created on</dt>
@@ -174,44 +235,37 @@ var Feed = React.createClass({
                         </dd>
                     </dl>
                     {this.getCore()}
-                    <dl className="dl-horizontal">
-                    <form>
-                        <dt>Filters</dt>
-                        <dd>
-                            <button className="btn btn-default"
-                                    type="button" onClick={this.addFilterRow}>
-                                <Glyphicon glyph='plus' />
-                            </button>
-                            <button className="btn btn-default">Submit
-                            </button>
-                        </dd>
-                        {filter_rows}
-                    </form>
-                    </dl>
+                    {this.getFilterRows()}
                 </div>
         );
     },
     addFilterRow: function() {
-        var filters = this.state.filters;
-        filters.push({action: null, action_on: null,
-                      type: null, pattern: null});
-        this.setState({filters: filters});
+        var obj = this.state.obj;
+        obj.filters.push({action: "mark as read", 'action on': "match",
+                      type: "simple match", pattern: ""});
+        this.setState({obj: obj});
     },
     removeFilterRow: function(evnt) {
-        var filters = this.state.filters;
-        delete filters[evnt.target.getAttribute('data-index')];
-        this.setState({filters: filters});
+        var obj = this.state.obj;
+        delete obj.filters[evnt.target.getAttribute('data-index')];
+        this.setState({obj: obj});
+    },
+    saveFilterChange: function(evnt) {
+        var index = evnt.target.getAttribute('data-index');
+        var obj = this.state.obj;
+        obj.filters[index][evnt.target.name] = evnt.target.value;
+        this.setState({obj: obj});
     },
 });
 
 var Category = React.createClass({
     mixins: [PanelMixin],
-    getInitialState: function() {return {edit_mode: false};},
     isEditable: function() {
         if(this.props.obj.id != 0) {return true;}
         else {return false;}
     },
     isRemovable: function() {return this.isEditable();},
+    obj_type: 'category',
     fields: [{'title': 'Category name', 'type': 'string', 'key': 'name'}],
     getTitle: function() {return this.props.obj.name;},
     getBody: function() {
@@ -299,7 +353,7 @@ var RightPanel = React.createClass({
         RightPanelStore.removeChangeListener(this._onChange);
     },
     _onChange: function() {
-        this.setState(RightPanelStore._datas);
+        this.setState(RightPanelStore.getAll());
     },
 });
 
-- 
cgit