Listings: form

- fixed compileCSS so that it watches over all .styl files
- uniform "new" form for newsletters / segments / subscribers
- cleaned up jsx files

RoboFile.php

@@ -3,10 +3,8 @@
 class RoboFile extends \Robo\Tasks {
 
   private $css_files = array(
-    'assets/css/src/admin.styl',
-    'assets/css/src/newsletter_editor/newsletter_editor.styl',
-    'assets/css/src/public.styl',
-    'assets/css/src/rtl.styl'
+    'assets/css/src/*.styl',
+    'assets/css/src/**/*.styl'
   );
 
   private $js_files = array(
@@ -33,11 +31,16 @@ class RoboFile extends \Robo\Tasks {
       $js_files = array_merge($js_files, glob($path));
     }, $this->js_files);
 
+    $css_files = array();
+    array_map(function($path) use(&$css_files) {
+      $css_files = array_merge($css_files, glob($path));
+    }, $this->css_files);
+
     $this->taskWatch()
       ->monitor($js_files, function() {
         $this->compileJs();
       })
-      ->monitor($this->css_files, function() {
+      ->monitor($css_files, function() {
         $this->compileCss();
       })
       ->run();
@@ -53,12 +56,19 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function compileCss() {
+    $css_files = array(
+      'assets/css/src/admin.styl',
+      'assets/css/src/newsletter_editor/newsletter_editor.styl',
+      'assets/css/src/public.styl',
+      'assets/css/src/rtl.styl'
+    );
+
     $this->_exec(join(' ', array(
       './node_modules/stylus/bin/stylus',
       '--include ./node_modules',
       '--include-css',
       '-u nib',
-      join(' ', $this->css_files),
+      join(' ', $css_files),
       '-o assets/css/'
     )));
   }

assets/css/src/common.styl

@@ -6,3 +6,10 @@
 // disable outline on link focus
 a:focus
   outline: 0 none !important
+
+// success and error messages
+.mailpoet_success
+  color: #090
+
+.mailpoet_error
+  color: #900

assets/css/src/modal.styl

@@ -176,17 +176,6 @@ body.mailpoet_modal_opened
   background-color: #00ccff
   color: #fff
 
-// notices
-.mailpoet_success,
-.mailpoet_error
-  display: none
-
-.mailpoet_success
-  color: #090
-
-.mailpoet_error
-  color: #900
-
 @media screen and (max-width: 782px)
   #mailpoet_modal_overlay.mailpoet_panel_overlay
     top: 46px

assets/js/src/newsletters/form.jsx

@@ -1,77 +1,76 @@
 define(
-  'form',
+  'newsletters_form',
   [
     'react',
+    'react-router',
     'jquery',
     'mailpoet'
   ],
   function(
     React,
+    Router,
     jQuery,
     MailPoet
   ) {
 
     var Form = React.createClass({
+      mixins: [
+        Router.Navigation
+      ],
       getInitialState: function() {
         return {
-          disabled: false
+          loading: false,
+          errors: []
         };
       },
+      handleSubmit: function(e) {
+        e.preventDefault();
+
+        this.setState({ loading: true });
 
-      post: function(data) {
         MailPoet.Ajax.post({
           endpoint: 'newsletters',
           action: 'save',
-          data: data,
-          onSuccess: function(response) {
-          }.bind(this)
-        })
+          data: {
+            subject: React.findDOMNode(this.refs.subject).value,
+            body: React.findDOMNode(this.refs.body).value
+          }
+        }).done(function(response) {
+          this.setState({ loading: false });
+
+          if(response === true) {
+            this.transitionTo('/');
+          } else {
+            this.setState({ errors: response });
+          }
+        }.bind(this));
       },
-
-      handleSubmit: function(e) {
-        e.preventDefault();
-        this.setState({
-          disabled: true
-        });
-
-        var subject =
-          React.findDOMNode(this.refs.subject);
-        var body =
-          React.findDOMNode(this.refs.body);
-
-        if (!subject.value || !body.value) {
-          return;
-        }
-
-        this.post({
-          subject: subject.value,
-          body: body.value
-        });
-
-        subject.value = '';
-        body.value = '';
-        this.setState({
-          disabled: false
-        });
-
-        return;
-      },
-
       render: function() {
+        var errors = this.state.errors.map(function(error, index) {
+          return (
+            <p key={'error-'+index} className="mailpoet_error">{ error }</p>
+          );
+        });
+
         return (
-          <div>
-            <h1>New</h1>
-            <form className="newslettersForm" onSubmit={this.handleSubmit}>
+          <form onSubmit={ this.handleSubmit }>
+            { errors }
+            <p>
               <input type="text" placeholder="Subject" ref="subject" />
-              <br />
-              <textarea placeholder="Body" ref="body" />
-              <br />
-              <input type="submit" value="Save" disabled={this.state.locked} />
-            </form>
-          </div>
+            </p>
+            <p>
+              <input type="text" placeholder="Body" ref="body" />
+            </p>
+            <input
+              className="button button-primary"
+              type="submit"
+              value="Save"
+              disabled={this.state.loading} />
+          </form>
         );
       }
     });
 
     return Form;
-  });
+  }
+);

assets/js/src/newsletters/newsletters.jsx

@@ -23,13 +23,9 @@ define(
         return (
           <div>
             <h1>
-            { MailPoetI18n.pageTitle }
-              <span>
-                <Link className="add-new-h2" to="list">Newsletters</Link>
-              </span>
-              <span>
-                <Link className="add-new-h2" to="form">New</Link>
-              </span>
+              { MailPoetI18n.pageTitle }
+              &nbsp;
+              <Link className="add-new-h2" to="form">New</Link>
             </h1>
 
             <RouteHandler/>
@@ -40,14 +36,14 @@ define(
 
     var routes = (
       <Route name="app" path="/" handler={App}>
-        <Route name="list" handler={List}/>
-        <Route name="form" handler={Form}/>
-        <DefaultRoute handler={List}/>
+        <Route name="list" handler={List} />
+        <Route name="form" handler={Form} />
+        <DefaultRoute handler={List} />
       </Route>
     );
 
     var hook = document.getElementById('newsletters');
-    if (hook) {
+    if(hook) {
       Router.run(routes, function(Handler, state) {
         React.render(
           <Handler params={state.params} query={state.query} />,
@@ -55,4 +51,5 @@ define(
         );
       });
     }
-  });
+  }
+);

assets/js/src/segments/form.jsx

@@ -0,0 +1,72 @@
+define(
+  'segments_form',
+  [
+    'react',
+    'react-router',
+    'jquery',
+    'mailpoet'
+  ],
+  function(
+    React,
+    Router,
+    jQuery,
+    MailPoet
+  ) {
+
+    var Form = React.createClass({
+      mixins: [
+        Router.Navigation
+      ],
+      getInitialState: function() {
+        return {
+          loading: false,
+          errors: []
+        };
+      },
+      handleSubmit: function(e) {
+        e.preventDefault();
+
+        this.setState({ loading: true });
+
+        MailPoet.Ajax.post({
+          endpoint: 'segments',
+          action: 'save',
+          data: {
+            name: React.findDOMNode(this.refs.name).value
+          }
+        }).done(function(response) {
+          this.setState({ loading: false });
+
+          if(response === true) {
+            this.transitionTo('/');
+          } else {
+            this.setState({ errors: response });
+          }
+        }.bind(this));
+      },
+      render: function() {
+        var errors = this.state.errors.map(function(error, index) {
+          return (
+            <p key={'error-'+index} className="mailpoet_error">{ error }</p>
+          );
+        });
+
+        return (
+          <form onSubmit={ this.handleSubmit }>
+            { errors }
+            <p>
+              <input type="text" placeholder="Name" ref="name" />
+            </p>
+            <input
+              className="button button-primary"
+              type="submit"
+              value="Save"
+              disabled={this.state.loading} />
+          </form>
+        );
+      }
+    });
+
+    return Form;
+  }
+);

assets/js/src/segments/list.jsx

@@ -1,5 +1,5 @@
 define(
-  'list',
+  'segments_list',
   [
     'react',
     'jquery',

assets/js/src/segments/segments.jsx

@@ -3,12 +3,14 @@ define(
   [
     'react',
     'react-router',
-    'segments/list.jsx'
+    'segments/list.jsx',
+    'segments/form.jsx'
   ],
   function(
     React,
     Router,
-    List
+    List,
+    Form
   ) {
 
     var DefaultRoute = Router.DefaultRoute;
@@ -22,11 +24,8 @@ define(
           <div>
             <h1>
               { MailPoetI18n.pageTitle }
-              <span>
-                <Link className="add-new-h2" to="list">
-                  { MailPoetI18n.pageTitle }
-                </Link>
-              </span>
+              &nbsp;
+              <Link className="add-new-h2" to="form">New</Link>
             </h1>
 
             <RouteHandler/>
@@ -38,12 +37,13 @@ define(
     var routes = (
       <Route name="app" path="/" handler={App}>
         <Route name="list" handler={List} />
+        <Route name="form" handler={Form} />
         <DefaultRoute handler={List} />
       </Route>
     );
 
     var hook = document.getElementById('segments');
-    if (hook) {
+    if(hook) {
       Router.run(routes, function(Handler, state) {
         React.render(
           <Handler params={state.params} query={state.query} />,
@@ -51,4 +51,5 @@ define(
         );
       });
     }
-  });
+  }
+);

assets/js/src/subscribers/form.jsx

@@ -0,0 +1,80 @@
+define(
+  'subscribers_form',
+  [
+    'react',
+    'react-router',
+    'jquery',
+    'mailpoet'
+  ],
+  function(
+    React,
+    Router,
+    jQuery,
+    MailPoet
+  ) {
+
+    var Form = React.createClass({
+      mixins: [
+        Router.Navigation
+      ],
+      getInitialState: function() {
+        return {
+          loading: false,
+          errors: []
+        };
+      },
+      handleSubmit: function(e) {
+        e.preventDefault();
+
+        this.setState({ loading: true });
+
+        MailPoet.Ajax.post({
+          endpoint: 'subscribers',
+          action: 'save',
+          data: {
+            email: React.findDOMNode(this.refs.email).value,
+            firstname: React.findDOMNode(this.refs.firstname).value,
+            lastname: React.findDOMNode(this.refs.lastname).value
+          }
+        }).done(function(response) {
+          this.setState({ loading: false });
+
+          if(response === true) {
+            this.transitionTo('/');
+          } else {
+            this.setState({ errors: response });
+          }
+        }.bind(this));
+      },
+      render: function() {
+        var errors = this.state.errors.map(function(error, index) {
+          return (
+            <p key={'error-'+index} className="mailpoet_error">{ error }</p>
+          );
+        });
+
+        return (
+          <form onSubmit={ this.handleSubmit }>
+            { errors }
+            <p>
+              <input type="text" placeholder="Email" ref="email" />
+            </p>
+            <p>
+              <input type="text" placeholder="First name" ref="firstname" />
+            </p>
+            <p>
+              <input type="text" placeholder="Last name" ref="lastname" />
+            </p>
+            <input
+              className="button button-primary"
+              type="submit"
+              value="Save"
+              disabled={this.state.loading} />
+          </form>
+        );
+      }
+    });
+
+    return Form;
+  }
+);

assets/js/src/subscribers/list.jsx

@@ -1,5 +1,5 @@
 define(
-  'list',
+  'subscribers_list',
   [
     'react',
     'jquery',
@@ -53,27 +53,10 @@ define(
         name: 'move',
         label: 'Move to list...',
         onSelect: function(e) {
-          // display list selector
-          jQuery(e.target).after(
-            '<select id="bulk_action_list">'+
-              '<option value="">Select a list</option>'+
-              '<option value="1">List #1</option>'+
-              '<option value="2">List #2</option>'+
-              '<option value="3">List #3</option>'+
-            '</select>'
-          );
+          console.log(e);
         },
         onApply: function(selected) {
-          var list = jQuery('#bulk_action_list').val();
-
-          MailPoet.Ajax.post({
-            endpoint: 'subscribers',
-            action: 'move',
-            data: {
-              selected: selected,
-              list: list
-            }
-          });
+          console.log(selected);
         }
       },
       {

assets/js/src/subscribers/subscribers.jsx

@@ -3,12 +3,14 @@ define(
   [
     'react',
     'react-router',
-    'subscribers/list.jsx'
+    'subscribers/list.jsx',
+    'subscribers/form.jsx'
   ],
   function(
     React,
     Router,
-    List
+    List,
+    Form
   ) {
 
     var DefaultRoute = Router.DefaultRoute;
@@ -22,11 +24,8 @@ define(
           <div>
             <h1>
               { MailPoetI18n.pageTitle }
-              <span>
-                <Link className="add-new-h2" to="list">
-                  { MailPoetI18n.pageTitle }
-                </Link>
-              </span>
+              &nbsp;
+              <Link className="add-new-h2" to="form">New</Link>
             </h1>
 
             <RouteHandler/>
@@ -38,6 +37,7 @@ define(
     var routes = (
       <Route name="app" path="/" handler={App}>
         <Route name="list" handler={List} />
+        <Route name="form" handler={Form} />
         <DefaultRoute handler={List} />
       </Route>
     );
@@ -51,4 +51,5 @@ define(
         );
       });
     }
-  });
+  }
+);