Segment listing

- fixed duplicate entry in Robofile for editor styles
- added Segment menu
- added Segment listing
- added listing methods to Segment model
- fixed syntax in both Segment & Subscriber models (MAX LINE 80!!!)

assets/js/src/segments/list.jsx

@@ -0,0 +1,101 @@
+define(
+  'list',
+  [
+    'react',
+    'jquery',
+    'mailpoet',
+    'listing/listing.jsx',
+    'classnames'
+  ],
+  function(
+    React,
+    jQuery,
+    MailPoet,
+    Listing,
+    classNames
+  ) {
+
+    var columns = [
+      {
+        name: 'name',
+        label: 'Name',
+        sortable: true
+      },
+      {
+        name: 'created_at',
+        label: 'Created on',
+        sortable: true
+      },
+      {
+        name: 'updated_at',
+        label: 'Last modified on',
+        sortable: true
+      }
+    ];
+
+    var actions = [
+    ];
+
+    var List = React.createClass({
+      getItems: function(listing) {
+        MailPoet.Ajax.post({
+          endpoint: 'segments',
+          action: 'get',
+          data: {
+            offset: (listing.state.page - 1) * listing.state.limit,
+            limit: listing.state.limit,
+            group: listing.state.group,
+            search: listing.state.search,
+            sort_by: listing.state.sort_by,
+            sort_order: listing.state.sort_order
+          },
+          onSuccess: function(response) {
+            if(listing.isMounted()) {
+              listing.setState({
+                items: response.items || [],
+                filters: response.filters || [],
+                groups: response.groups || [],
+                count: response.count || 0,
+                loading: false
+              });
+            }
+          }.bind(listing)
+        });
+      },
+      renderItem: function(segment) {
+        var rowClasses = classNames(
+          'manage-column',
+          'column-primary',
+          'has-row-actions'
+        );
+
+        return (
+          <div>
+            <td className={ rowClasses }>
+              <strong>
+                <a>{ segment.name }</a>
+              </strong>
+            </td>
+            <td className="column-date" data-colname="Subscribed on">
+              <abbr>{ segment.created_at }</abbr>
+            </td>
+            <td className="column-date" data-colname="Last modified on">
+              <abbr>{ segment.updated_at }</abbr>
+            </td>
+          </div>
+        );
+      },
+      render: function() {
+        return (
+          <Listing
+            onRenderItem={this.renderItem}
+            items={this.getItems}
+            columns={columns}
+            actions={actions} />
+        );
+      }
+    });
+
+    return List;
+  }
+);

assets/js/src/segments/segments.jsx

@@ -0,0 +1,54 @@
+define(
+  'segments',
+  [
+    'react',
+    'react-router',
+    'segments/list.jsx'
+  ],
+  function(
+    React,
+    Router,
+    List
+  ) {
+
+    var DefaultRoute = Router.DefaultRoute;
+    var Link = Router.Link;
+    var Route = Router.Route;
+    var RouteHandler = Router.RouteHandler;
+
+    var App = React.createClass({
+      render: function() {
+        return (
+          <div>
+            <h1>
+              { MailPoetI18n.pageTitle }
+              <span>
+                <Link className="add-new-h2" to="list">
+                  { MailPoetI18n.pageTitle }
+                </Link>
+              </span>
+            </h1>
+
+            <RouteHandler/>
+          </div>
+        );
+      }
+    });
+
+    var routes = (
+      <Route name="app" path="/" handler={App}>
+        <Route name="list" handler={List} />
+        <DefaultRoute handler={List} />
+      </Route>
+    );
+
+    var hook = document.getElementById('segments');
+    if (hook) {
+      Router.run(routes, function(Handler, state) {
+        React.render(
+          <Handler params={state.params} query={state.query} />,
+          hook
+        );
+      });
+    }
+  });

assets/js/src/subscribers/subscribers.jsx

@@ -21,9 +21,11 @@ define(
         return (
           <div>
             <h1>
-            { MailPoetI18n.pageTitle }
+              { MailPoetI18n.pageTitle }
               <span>
-                <Link className="add-new-h2" to="list">Subscribers</Link>
+                <Link className="add-new-h2" to="list">
+                  { MailPoetI18n.pageTitle }
+                </Link>
               </span>
             </h1>