Add responsive class for Campaign list

Fix back button in preview Fix add to campaign in pages section
silverstripe · Oct 26, 2016 · 368399e · 368399e
1 parent 7fa0520
commit 368399e
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 83 deletions.
diff --git a/admin/client/dist/js/bundle.js b/admin/client/dist/js/bundle.js
diff --git a/admin/client/dist/styles/bundle.css b/admin/client/dist/styles/bundle.css
@@ -16034,6 +16034,17 @@ body,html{
   height:100%;
 }
 
+@media (max-width:991px){
+  .campaign-admin__campaign--no-selected-item .preview{
+    display:none;
+  }
+
+  .campaign-admin__campaign--no-selected-item .list-group-item.active{
+    background-color:inherit;
+    color:inherit;
+  }
+}
+
 .campaign-admin__campaign-items{
   width:100%;
   z-index:1;

diff --git a/admin/client/src/components/FormBuilderModal/FormBuilderModal.js b/admin/client/src/components/FormBuilderModal/FormBuilderModal.js
@@ -80,6 +80,7 @@ class FormBuilderModal extends SilverStripeComponent {
    * @returns {Promise}
    */
   handleSubmit(data, action, submitFn) {
+    console.log(data, action, submitFn);
     let promise = null;
     if (typeof this.props.handleSubmit === 'function') {
       promise = this.props.handleSubmit(data, action, submitFn);
@@ -104,6 +105,8 @@ class FormBuilderModal extends SilverStripeComponent {
             });
           });
         });
+    } else {
+      throw new Error('Promise was not returned for submitting');
     }
 
     return promise;

diff --git a/admin/client/src/components/Preview/Preview.js b/admin/client/src/components/Preview/Preview.js
@@ -7,6 +7,19 @@ import SilverStripeComponent from 'lib/SilverStripeComponent';
  */
 class Preview extends SilverStripeComponent {
 
+  constructor(props) {
+    super(props);
+
+    this.handleBackClick = this.handleBackClick.bind(this);
+  }
+
+  handleBackClick(event) {
+    if (typeof this.props.onBack === 'function') {
+      event.preventDefault();
+      this.props.onBack(event);
+    }
+  }
+
   render() {
     // @todo - Multiple preview views with toggle slider
     let body = null;
@@ -68,6 +81,7 @@ class Preview extends SilverStripeComponent {
           <button
             className="btn btn-secondary font-icon-left-open-big toolbar__back-button hidden-lg-up"
             type="button"
+            onClick={this.handleBackClick}
           >Back</button>
           <div className="btn-toolbar">
             {toolbarButtons}
@@ -81,6 +95,7 @@ class Preview extends SilverStripeComponent {
 Preview.propTypes = {
   itemLinks: React.PropTypes.object,
   itemId: React.PropTypes.number,
+  onBack: React.PropTypes.func,
 };
 
 export default Preview;
diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js b/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
@@ -83,7 +83,6 @@ class CampaignAdmin extends SilverStripeComponent {
       if (last && last.href) {
         event.preventDefault();
         this.props.router.push(last.href);
-        return;
       }
     }
   }

diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss b/admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss
@@ -4,6 +4,17 @@
   height: 100%;
 }
 
+@include media-breakpoint-down(md) {
+  .campaign-admin__campaign--no-selected-item {
+    .preview {
+      display: none;
+    }
+    .list-group-item.active {
+      background-color: inherit;
+      color: inherit;
+    }
+  }
+}
 .campaign-admin__campaign-items {
   width: 100%;
   z-index: 1;

diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js b/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
@@ -27,6 +27,7 @@ class CampaignAdminList extends SilverStripeComponent {
     this.handlePublish = this.handlePublish.bind(this);
     this.handleItemSelected = this.handleItemSelected.bind(this);
     this.setBreadcrumbs = this.setBreadcrumbs.bind(this);
+    this.handleCloseItem = this.handleCloseItem.bind(this);
   }
 
   componentDidMount() {
@@ -72,6 +73,7 @@ class CampaignAdminList extends SilverStripeComponent {
   render() {
     let itemId = this.props.campaign.changeSetItemId;
     let itemLinks = null;
+    const selectedClass = (!itemId) ? 'campaign-admin__campaign--no-selected-item' : '';
     const campaignId = this.props.campaignId;
     const campaign = this.props.record;
 
@@ -141,8 +143,8 @@ class CampaignAdminList extends SilverStripeComponent {
       ? (<Accordion>{accordionBlocks}</Accordion>)
       : (
         <div className="alert alert-warning" role="alert">
-          <strong>This campaign is empty.</strong> You can add pages by selecting{' '}
-          <em>Add to campaign</em> from within the <em>More Options</em> popup on{' '}
+          <strong>This campaign is empty.</strong> You can add pages by selecting
+          <em>Add to campaign</em> from within the <em>More Options</em> popup on
           the <a href={pagesLink}>edit page screen</a>.
         </div>
       );
@@ -151,10 +153,8 @@ class CampaignAdminList extends SilverStripeComponent {
     ];
 
     return (
-      <div className="fill-width campaign-admin__campaign">
-        <div className="fill-height campaign-admin__campaign-items"
-          aria-expanded="true"
-        >
+      <div className={`fill-width campaign-admin__campaign ${selectedClass}`}>
+        <div className="fill-height campaign-admin__campaign-items" aria-expanded="true">
           <Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
             <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
           </Toolbar>
@@ -165,7 +165,7 @@ class CampaignAdminList extends SilverStripeComponent {
             {this.renderButtonToolbar()}
           </div>
         </div>
-        <Preview itemLinks={itemLinks} itemId={itemId} />
+        <Preview itemLinks={itemLinks} itemId={itemId} onBack={this.handleCloseItem} />
       </div>
     );
   }
@@ -180,6 +180,10 @@ class CampaignAdminList extends SilverStripeComponent {
     this.props.campaignActions.selectChangeSetItem(itemId);
   }
 
+  handleCloseItem() {
+    this.props.campaignActions.selectChangeSetItem(null);
+  }
+
   renderButtonToolbar() {
     const items = this.getItems();
 
@@ -231,7 +235,7 @@ class CampaignAdminList extends SilverStripeComponent {
   }
 
   /**
-   * @return {Array}
+   * @return {array}
    */
   getItems() {
     if (this.props.record && this.props.record._embedded) {
@@ -244,7 +248,7 @@ class CampaignAdminList extends SilverStripeComponent {
   /**
    * Group items for changeset display
    *
-   * @return array
+   * @return {object}
    */
   groupItemsForSet() {
     const groups = {};

diff --git a/admin/client/src/legacy/AddToCampaignForm.js b/admin/client/src/legacy/AddToCampaignForm.js
@@ -33,6 +33,11 @@ jQuery.entwine('ss', ($) => {
    */
   $('#add-to-campaign__dialog-wrapper').entwine({
 
+    onunmatch() {
+      // solves errors given by ReactDOM "no matched root found" error.
+      this.close();
+    },
+
     open() {
       this._renderModal();
     },
@@ -71,10 +76,10 @@ jQuery.entwine('ss', ($) => {
       // this.empty();
     },
 
-    _handleSubmitModal(event, fieldValues, submitFn) {
+    _handleSubmitModal(data, action, submitFn) {
       event.preventDefault();
 
-      if (!fieldValues.Campaign) {
+      if (!data.Campaign) {
         // TODO invisible submit disable, remove this when validation is implemented
         // eslint-disable-next-line no-alert
         alert(i18n._t(