Add collection selection to export-collections-modal

app/assets/javascripts/components/contextActions/ExportImportButton.js

@@ -33,18 +33,13 @@ const ExportImportButton = ({ isDisabled, updateModalProps, customClass }) => (
       </MenuItem>
       <MenuItem divider />
       <MenuItem onSelect={() => exportCollectionFunction(updateModalProps)}
-        title='Export collections as ZIP archive'>
-        Export selected collection
+        title='Export as ZIP archive'>
+        Export collections
       </MenuItem>
       <MenuItem onSelect={() => importCollectionFunction(updateModalProps)}
         title='Import collections from ZIP archive'>
         Import collections
       </MenuItem>
-      <MenuItem divider />
-      <MenuItem onSelect={() => exportCollectionFunctionFull(updateModalProps)}
-        title='Export all collections as one ZIP archive'>
-        Export all collections
-      </MenuItem>
       {/* <MenuItem onSelect={() => importChemScannerFunction(updateModalProps)} disabled={isDisabled} */}
       {/*   title='Import from Docs'> */}
       {/*   Import elements from Docs */}
@@ -117,7 +112,7 @@ const exportReactionFunction = (updateModalProps) => {
 }
 
 const exportCollectionFunction = (updateModalProps) => {
-  const title = "Export Collection as ZIP archive";
+  const title = "Export Collections as ZIP archive";
   const component = ModalExportCollection;
   const action = CollectionActions.exportCollectionsToFile;
   const full = false;
@@ -135,25 +130,6 @@ const exportCollectionFunction = (updateModalProps) => {
   updateModalProps(modalProps);
 }
 
-const exportCollectionFunctionFull = (updateModalProps) => {
-  const title = "Export all collections as one ZIP archive";
-  const component = ModalExportCollection;
-  const action = CollectionActions.exportCollectionsToFile;
-  const full = true;
-  const listSharedCollections = false;
-
-  const modalProps = {
-    show: true,
-    title,
-    component,
-    action,
-    full,
-    listSharedCollections,
-  };
-
-  updateModalProps(modalProps);
-}
-
 const importCollectionFunction = (updateModalProps) => {
   const title = "Import Collections from ZIP archive";
   const component = ModalImportCollection;

app/assets/javascripts/components/contextActions/ModalExportCollection.js

@@ -2,55 +2,95 @@ import React from 'react';
 import {Button, ButtonToolbar} from 'react-bootstrap';
 import UIStore from './../stores/UIStore';
 import NotificationActions from '../actions/NotificationActions';
+import CollectionStore from './../stores/CollectionStore';
 
 export default class ModalExportCollection extends React.Component {
   constructor(props) {
     super(props);
+
+    let collecState = CollectionStore.getState()
+
+    let checkboxes = {}
+    this.gatherCheckboxes(collecState.unsharedRoots, checkboxes)
+    this.gatherCheckboxes(collecState.sharedRoots, checkboxes)
+    this.gatherCheckboxes(collecState.remoteRoots, checkboxes)
+    this.gatherCheckboxes(collecState.lockedRoots, checkboxes)
+
     this.state = {
-      nested: true
+      unsharedRoots: collecState.unsharedRoots,
+      sharedRoots: collecState.sharedRoots,
+      remoteRoots: collecState.remoteRoots,
+      lockedRoots: collecState.lockedRoots,
+      checkboxes: checkboxes
     }
+
+    this.handleCheckAll = this.handleCheckAll.bind(this)
+    this.handleCheckboxChange = this.handleCheckboxChange.bind(this)
     this.handleClick = this.handleClick.bind(this)
-    this.toggleCheckbox = this.toggleCheckbox.bind(this)
   }
 
-  checkbox() {
-    return (
-      <div>
-        <input type="checkbox"
-                 onChange={this.toggleCheckbox}
-                 checked={this.state.nested}
-                 className="common-checkbox" />
-        <span className="g-marginLeft--10"> Include nested collections </span>
-      </div>
-    )
+  gatherCheckboxes(roots, checkboxes) {
+    if (Array.isArray(roots) && roots.length > 0) {
+      roots.map((root, index) => {
+        checkboxes[root.id] = false;
+        this.gatherCheckboxes(root.children, checkboxes)
+      })
+    }
   }
 
-  buttonBar() {
-    const { onHide } = this.props;
-    return (
-      <ButtonToolbar>
-        <div className="pull-right">
-          <ButtonToolbar>
-            <Button bsStyle="primary" onClick={onHide}>Cancel</Button>
-            <Button bsStyle="warning" id="md-export-dropdown"
-                title="Export as ZIP file (incl. attachments)" onClick={this.handleClick}>
-                Export ZIP
-            </Button>
-          </ButtonToolbar>
-        </div>
-      </ButtonToolbar>
-    )
+  hasChecked() {
+    let checkboxes = this.state.checkboxes
+    if (Object.keys(checkboxes).every(key => checkboxes[key] === false)) {
+      // all checkboxes are unchecked
+      return false
+    } else {
+      return true
+    }
+  }
+
+  isChecked(id) {
+    return this.state.checkboxes[id]
+  }
+
+  handleCheckAll() {
+    let checkboxes = this.state.checkboxes,
+        hasChecked = this.hasChecked()
+
+    Object.keys(checkboxes).forEach(key => {
+      checkboxes[key] = !hasChecked
+    })
+
+    this.setState({
+      checkboxes: checkboxes
+    })
+  }
+
+  handleCheckboxChange(e) {
+    let checkboxes = this.state.checkboxes
+    checkboxes[e.target.value] = e.target.checked
+
+    this.setState({
+      checkboxes: checkboxes
+    })
   }
 
   handleClick() {
     const uiState = UIStore.getState();
     const { onHide, action, full } = this.props;
 
+    let collections = []
+    Object.keys(this.state.checkboxes).map((key) => {
+      if (this.state.checkboxes[key]) {
+        collections.push(key)
+      }
+    })
+
     let params = {
-      collections: (full ? [] : [uiState.currentCollection.id]),
+      collections: collections,
       format: 'zip',
-      nested: this.state.nested
+      nested: false
     }
+
     action(params);
 
     onHide();
@@ -68,12 +108,116 @@ export default class ModalExportCollection extends React.Component {
     NotificationActions.add(notification);
   }
 
-  toggleCheckbox() {
-    let newNested = !this.state.nested;
+  renderCheckAll() {
+    return (
+      <div>
+        <input type="checkbox" id="export-collection-check-all"
+          checked={this.hasChecked()} onChange={this.handleCheckAll} className="common-checkbox" />
+        <label className="g-marginLeft--10" htmlFor="export-collection-check-all">
+          {this.hasChecked() ? "Deselect all" : "Select all" }
+        </label>
+      </div>
+    )
+  }
 
-    this.setState({
-      nested: newNested
-    })
+  renderCollections(label, key) {
+    let roots = this.state[key]
+
+    if (Array.isArray(roots) && roots.length > 0) {
+      return (
+        <div>
+          <h4>{label}</h4>
+          {this.renderSubtrees(roots)}
+        </div>
+      )
+    }
+  }
+
+  renderSharedCollections(label, key) {
+    let roots = this.state[key]
+
+    if (Array.isArray(roots) && roots.length > 0) {
+      return (
+        <div>
+          <h4>{label}</h4>
+          {this.renderUserSubtrees(roots)}
+        </div>
+      )
+    }
+  }
+
+  renderUserSubtrees(roots) {
+    if (Array.isArray(roots) && roots.length > 0) {
+
+      let nodes = roots.map((root, index) => {
+
+        let label
+        if (root.shared_by) {
+          label = 'by ' + root.shared_by.initials
+        } else if (root.shared_to) {
+          label = 'with ' + root.shared_to.initials
+        } else {
+          label = root.label
+        }
+
+        return (
+          <li key={index}>
+            <h6>{label}</h6>
+            {this.renderSubtrees(root.children)}
+          </li>
+        )
+      })
+
+      return (
+        <ul className="list-unstyled">
+          {nodes}
+        </ul>
+      )
+    }
+  }
+
+  renderSubtrees(roots) {
+    if (Array.isArray(roots) && roots.length > 0) {
+      let nodes = roots.map((root, index) => {
+        return (
+          <li key={index}>
+            <input className="common-checkbox" type="checkbox"
+                   id={"export-collection-" + root.id}
+                   value={root.id}
+                   onChange={this.handleCheckboxChange}
+                   checked={this.isChecked(root.id)} />
+            <label className="g-marginLeft--10" htmlFor={"export-collection-" + root.id}>
+              { root.label }
+            </label>
+
+            {this.renderSubtrees(root.children)}
+          </li>
+        )
+      })
+
+      return (
+        <ul className="list-unstyled">
+          {nodes}
+        </ul>
+      )
+    }
+  }
+
+  renderButtonBar() {
+    const { onHide } = this.props;
+    return (
+      <ButtonToolbar>
+        <div className="pull-right">
+          <ButtonToolbar>
+            <Button bsStyle="primary" onClick={onHide}>Cancel</Button>
+            <Button bsStyle="warning" id="md-export-dropdown"
+                title="Export as ZIP file (incl. attachments)" onClick={this.handleClick}>
+                Export ZIP
+            </Button>
+          </ButtonToolbar>
+        </div>
+      </ButtonToolbar>
+    )
   }
 
   render() {
@@ -82,9 +226,13 @@ export default class ModalExportCollection extends React.Component {
     )
     const { full } = this.props;
     return (
-      <div>
-        {!full && this.checkbox()}
-        {this.buttonBar()}
+      <div className="export-collections-modal">
+        {this.renderCollections('Global collections', 'lockedRoots')}
+        {this.renderCollections('My collections', 'unsharedRoots')}
+        {this.renderSharedCollections('My shared collections', 'sharedRoots')}
+        {this.renderSharedCollections('Shared with me', 'remoteRoots')}
+        {this.renderCheckAll()}
+        {this.renderButtonBar()}
       </div>
     )
   }

app/assets/stylesheets/export-collections.scss

+.export-collections-modal {
+
+    label {
+        font-weight: normal;
+    }
+
+    ul > li > ul {
+        margin-left: 10px;
+    }
+
+}