Type & Template

- fixed endpoint's name causing issues on case sensitive systems
- improved behaviour of delete
- added loading state for boxes
- added Breadcrumb ReactClass
- added common styles for breadcrumb

assets/css/src/admin.styl

@@ -9,4 +9,5 @@
 
 @require 'form_editor'
 @require 'listing'
-@require 'box'
+@require 'box'
+@require 'breadcrumb'

assets/css/src/box.styl

@@ -1,3 +1,6 @@
+.mailpoet_boxes.mailpoet_boxes_loading
+  opacity: 0.2
+
 .mailpoet_boxes li
   float: left
   position: relative

assets/css/src/breadcrumb.styl

@@ -0,0 +1,14 @@
+.mailpoet_breadcrumb
+  font-size: 0.9em
+  text-transform: uppercase
+  color: #444
+
+.mailpoet_breadcrumb .mailpoet_current
+  font-weight: bold
+
+.mailpoet_breadcrumb a
+  text-decoration: none
+  color: #444
+
+.mailpoet_breadcrumb a:hover
+  color: darken(#444, 50%)

assets/js/src/newsletters/breadcrumb.jsx

@@ -0,0 +1,76 @@
+define(
+  [
+    'react',
+    'react-router',
+    'classnames'
+  ],
+  function(
+    React,
+    Router,
+    classNames
+  ) {
+    var Link = Router.Link;
+
+    var Breadcrumb = React.createClass({
+      mixins: [
+        Router.Navigation
+      ],
+      getInitialState: function() {
+        return {
+          step: null,
+          steps: [
+            {
+              name: 'type',
+              label: 'Select type',
+              link: '/new'
+            },
+            {
+              name: 'template',
+              label: 'Template'
+            },
+            {
+              name: 'editor',
+              label: 'Designer'
+            },
+            {
+              name: 'send',
+              label: 'Send'
+            }
+          ]
+        };
+      },
+      render: function() {
+        var steps = this.state.steps.map(function(step, index) {
+          var stepClasses = classNames(
+            { 'mailpoet_current': (this.props.step === step.name) }
+          );
+
+          var label = step.label;
+
+          if(step['link'] !== undefined && this.props.step !== step.name) {
+            label = (
+              <Link to={ step.link }>{ step.label }</Link>
+            );
+          }
+
+          return (
+            <span key={ 'step-'+index }>
+              <span className={ stepClasses }>
+                { label }
+              </span>
+              { (index < (this.state.steps.length - 1) ) ? ' > ' : '' }
+            </span>
+          );
+        }.bind(this));
+
+        return (
+          <p className="mailpoet_breadcrumb">
+            { steps }
+          </p>
+        );
+      }
+    });
+
+    return Breadcrumb;
+  }
+);

assets/js/src/newsletters/templates.jsx

@@ -1,13 +1,17 @@
 define(
   [
-  'react',
+    'react',
-  'mailpoet',
+    'mailpoet',
-  'react-router'
+    'react-router',
+    'classnames',
+    'newsletters/breadcrumb.jsx'
   ],
   function(
     React,
     MailPoet,
-    Router
+    Router,
+    classNames,
+    Breadcrumb
   ) {
     var NewsletterTemplates = React.createClass({
       mixins: [
@@ -26,7 +30,7 @@ define(
         this.setState({ loading: true });
 
         MailPoet.Ajax.post({
-          endpoint: 'newslettertemplates',
+          endpoint: 'newsletterTemplates',
           action: 'getAll',
         }).done(function(response) {
           if(this.isMounted()) {
@@ -37,22 +41,29 @@ define(
           }
         }.bind(this));
       },
-      handleSelectTemplate: function(id) {
+      handleSelectTemplate: function(template) {
-        console.log('select '+id);
+        console.log('select '+template.id);
       },
-      handlePreviewTemplate: function(id) {
+      handlePreviewTemplate: function(template) {
-        console.log('preview '+id);
+        console.log('preview '+template.id);
       },
-      handleDeleteTemplate: function(id) {
+      handleDeleteTemplate: function(template) {
         this.setState({ loading: true });
-
+        if(
-        MailPoet.Ajax.post({
+          window.confirm(
-          endpoint: 'newslettertemplates',
+            'You are about to delete the template named "'+ template.name +'"'
-          action: 'delete',
+          )
-          data: id
+        ) {
-        }).done(function(response) {
+          MailPoet.Ajax.post({
-          this.getTemplates();
+            endpoint: 'newsletterTemplates',
-        }.bind(this));
+            action: 'delete',
+            data: template.id
+          }).done(function(response) {
+            this.getTemplates();
+          }.bind(this));
+        } else {
+           this.setState({ loading: false });
+        }
       },
       render: function() {
         var templates = this.state.templates.map(function(template, index) {
@@ -69,14 +80,14 @@ define(
               <div className="mailpoet_actions">
                   <a
                     className="button button-primary"
-                    onClick={ this.handleSelectTemplate.bind(null, template.id) }
+                    onClick={ this.handleSelectTemplate.bind(null, template) }
                   >
                     Select
                   </a>
                   &nbsp;
                   <a
                     className="button button-secondary"
-                    onClick={ this.handlePreviewTemplate.bind(null, template.id) }
+                    onClick={ this.handlePreviewTemplate.bind(null, template) }
                   >
                     Preview
                   </a>
@@ -84,7 +95,7 @@ define(
               <div className="mailpoet_delete">
                 <a
                   href="javascript:;"
-                  onClick={ this.handleDeleteTemplate.bind(null, template.id) }
+                  onClick={ this.handleDeleteTemplate.bind(null, template) }
                 >
                   Delete
                 </a>
@@ -93,21 +104,19 @@ define(
           );
         }.bind(this));
 
+        var boxClasses = classNames(
+          'mailpoet_boxes',
+          'clearfix',
+          { 'mailpoet_boxes_loading': this.state.loading }
+        );
+
         return (
           <div>
             <h1>Select a template</h1>
 
-            <div className="mailpoet_breadcrumbs">
+            <Breadcrumb step="template" />
-              Select type
-              &nbsp;&gt;&nbsp;
-              <strong>Template</strong>
-              &nbsp;&gt;&nbsp;
-              Designer&nbsp;&gt;&nbsp;
-              Send
-            </div>
 
-
+            <ul className={ boxClasses }>
-            <ul className="mailpoet_boxes clearfix">
               { templates }
             </ul>
           </div>

assets/js/src/newsletters/types.jsx

@@ -1,13 +1,15 @@
 define(
   [
-  'react',
+    'react',
-  'mailpoet',
+    'mailpoet',
-  'react-router'
+    'react-router',
+    'newsletters/breadcrumb.jsx'
   ],
   function(
     React,
     MailPoet,
-    Router
+    Router,
+    Breadcrumb
   ) {
     var NewsletterTypes = React.createClass({
       mixins: [
@@ -23,14 +25,7 @@ define(
           <div>
             <h1>Pick a type of campaign</h1>
 
-            <div className="mailpoet_breadcrumbs">
+            <Breadcrumb step="type" />
-              <strong>Select type</strong>
-              &nbsp;&gt;&nbsp;
-              Template
-              &nbsp;&gt;&nbsp;
-              Designer&nbsp;&gt;&nbsp;
-              Send
-            </div>
 
             <ul className="mailpoet_boxes clearfix">
               <li data-type="standard">