Merge pull request #230 from Kitware/multi-delete

Multi delete
Kitware · Mar 14, 2016 · fdfac5c · fdfac5c
2 parents 8aa8a43 + 38bcc8f
commit fdfac5c
Show file tree

Hide file tree

Showing 7 changed files with 77,958 additions and 87 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,6 +4,7 @@ module.exports = {
     'array-bracket-spacing': 0,
     'guard-for-in': 0,
     'max-len': [1, 160, 4, {"ignoreUrls": true}],
+    'no-alert': 0,
     'no-console': 0,
     'no-multi-spaces': 0,
     'no-nested-ternary': 0,

diff --git a/dist/HPCCloud.js b/dist/HPCCloud.js
diff --git a/src/pages/Project/All/index.js b/src/pages/Project/All/index.js
@@ -34,7 +34,15 @@ export default React.createClass({
       .catch(err => console.log('Error Project/All', err));
   },
 
-  createProject(e) {
+  onAction(action, selectedItems) {
+    if (selectedItems) {
+      this[action](selectedItems);
+    } else {
+      this[action]();
+    }
+  },
+
+  addItem() {
     const filter = '';
     this.context.router.replace({
       pathname: '/New/Project',
@@ -43,6 +51,19 @@ export default React.createClass({
     });
   },
 
+  deleteItems(items) {
+    if (!confirm(`Are you sure you want to delete ${items.length === 1 ? 'this' : 'these'} ${items.length} project${items.length === 1 ? '' : 's'}?`)) {
+      return;
+    }
+    Promise.all(items.map((proj) => client.deleteProject(proj._id)))
+      .then((resp) => {
+        this.updateProjectList();
+      })
+      .catch((error) => {
+        console.log('problem deleting projects', error);
+      });
+  },
+
   render() {
     return (
       <TableListing
@@ -54,7 +75,7 @@ export default React.createClass({
         location={ this.props.location }
         accessHelper={ ProjectHelper }
         items={ this.state.projects }
-        onAction={ this.createProject }
+        onAction={ this.onAction }
         title="Projects"
       />);
   },

diff --git a/src/pages/Project/View/index.js b/src/pages/Project/View/index.js
@@ -52,10 +52,31 @@ export default React.createClass({
       });
   },
 
-  createSimulation(e) {
+  onAction(action, selectedItems) {
+    if (selectedItems) {
+      this[action](selectedItems);
+    } else {
+      this[action]();
+    }
+  },
+
+  addItem() {
     this.context.router.replace(`/New/Simulation/${this.props.params.id}`);
   },
 
+  deleteItems(items) {
+    if (!confirm(`Are you sure you want to delete ${items.length === 1 ? 'this' : 'these'} ${items.length} simulation${items.length === 1 ? '' : 's'}?`)) {
+      return;
+    }
+    Promise.all(items.map((sim) => client.deleteSimulation(sim._id)))
+      .then((resp) => {
+        this.updateState();
+      })
+      .catch((error) => {
+        console.log('problem deleting simulations', error);
+      });
+  },
+
   render() {
     return (
       <TableListing
@@ -68,7 +89,7 @@ export default React.createClass({
         location={ this.props.location }
         accessHelper={ SimulationHelper }
         items={ this.state.simulations }
-        onAction={ this.createSimulation }
+        onAction={ this.onAction }
         title="Simulations"
       />);
   },

diff --git a/src/panels/TableListing/index.js b/src/panels/TableListing/index.js
@@ -13,6 +13,11 @@ import {
     itemFilter,
 } from '../../utils/Filters';
 
+const TOOLBAR_ACTIONS = {
+  add: { name: 'addItem', icon: style.addIcon },
+  delete: { name: 'deleteItems', icon: style.deleteIcon },
+};
+
 export default React.createClass({
 
   displayName: 'TableListing',
@@ -36,17 +41,52 @@ export default React.createClass({
     };
   },
 
-  toolbarAction(e) {
+  getInitialState() {
+    return {
+      selected: [],
+      actions: [TOOLBAR_ACTIONS.add],
+    };
+  },
+
+  toolbarAction(action) {
     if (this.props.onAction) {
-      this.props.onAction(e);
+      this.props.onAction(action, this.state.selected.map((index) => this.props.items[index]));
+      // reset selection after action is performed on them.
+      this.setState({ selected: [], actions: [TOOLBAR_ACTIONS.add] });
     }
   },
 
-  goTo(e) {
+  itemClicked(e) {
     var linkToGo = e;
+    var selectedIndex = -1;
     const filter = '';
 
-    if (e.target) {
+    if ((e.metaKey || e.ctrlKey) && e.target) {
+      let trEl = e.target;
+      while (!trEl.dataset.index) {
+        trEl = trEl.parentNode;
+      }
+      const selected = this.state.selected;
+      const actions = this.state.actions;
+
+      selectedIndex = parseInt(trEl.dataset.index, 10);
+      if (selected.indexOf(selectedIndex) !== -1) {
+        // remove already selected cell
+        selected.splice(selected.indexOf(selectedIndex), 1);
+        if (selected.length === 0) {
+          actions.pop();
+        }
+      } else {
+        // add new cell to selection
+        if (selected.length === 0) {
+          actions.push(TOOLBAR_ACTIONS.delete);
+        }
+        selected.push(selectedIndex);
+      }
+
+      this.setState({ selected, actions });
+      return;
+    } else if (e.target) {
       let trEl = e.target;
       while (!trEl.dataset.link) {
         trEl = trEl.parentNode;
@@ -78,7 +118,7 @@ export default React.createClass({
             location={ this.props.location }
             title={this.props.title}
             breadcrumb={ this.props.breadcrumb }
-            actions={[{ name: 'addItem', icon: style.addIcon }]}
+            actions={ this.state.actions }
             onAction={ this.toolbarAction }
             filter
           />
@@ -94,17 +134,19 @@ export default React.createClass({
                   </tr>
               </thead>
               <tbody>
-                { filteredList.map(item =>
-                  <tr key={ item._id } data-link={ helper.getViewLink(item) }>
-                    <td onClick={ this.goTo } >
+                { filteredList.map((item, index) =>
+                  <tr key={ `${item._id}_${index}` } data-link={ helper.getViewLink(item) } data-index={ index }
+                    className={this.state.selected.indexOf(index) !== -1 ? style.selected : ''}
+                  >
+                    <td onClick={ this.itemClicked } >
                       <ImageIcon data={ helper.getIcon(item) } />
                     </td>
-                    <td onClick={ this.goTo } >{ helper.getName(item) }</td>
-                    <td onClick={ this.goTo } >{ helper.getDescription(item) }</td>
-                    <td onClick={ this.goTo } >{ helper.getCreationDate(item) }</td>
-                    <td onClick={ this.goTo } >{ helper.getUpdateDate(item) }</td>
+                    <td onClick={ this.itemClicked } >{ helper.getName(item) }</td>
+                    <td onClick={ this.itemClicked } >{ helper.getDescription(item) }</td>
+                    <td onClick={ this.itemClicked } >{ helper.getCreationDate(item) }</td>
+                    <td onClick={ this.itemClicked } >{ helper.getUpdateDate(item) }</td>
                     <td>
-                      <IconActionList actions={ helper.getActions(item) } onAction={ this.goTo } />
+                      <IconActionList actions={ helper.getActions(item) } onAction={ this.itemClicked } />
                     </td>
                   </tr>
                 )}

diff --git a/src/workflows/pyfr/components/steps/Simulation/Start/index.js b/src/workflows/pyfr/components/steps/Simulation/Start/index.js
@@ -137,7 +137,8 @@ export default React.createClass({
               <select
                 className={formStyle.input}
                 value={this.state.serverType}
-                onChange={ this.updateServerType } >
+                onChange={ this.updateServerType }
+              >
                 <option value="Traditional">Traditional</option>
                 <option value="EC2">EC2</option>
                 <option value="OpenStack">OpenStack</option>

diff --git a/style/TableListing.mcss b/style/TableListing.mcss
@@ -20,7 +20,7 @@
     transition: all 0.2s ease;
 }
 
-.table > tbody > tr:hover {
+.table > tbody > tr:not(.selected):hover {
     background-color: #efefef;
 }
 
@@ -36,7 +36,22 @@
     color: #18e;
 }
 
+/* Selection styling rules */
+.selected {
+    background-color: #aaa;
+}
+
+.table > tbody > tr:nth-of-type(odd).selected {
+    background-color: #aaa;
+}
+
+/* action icons */
 .addIcon {
     composes: fa        from 'font-awesome/css/font-awesome.css';
     composes: fa-plus   from 'font-awesome/css/font-awesome.css';
 }
+
+.deleteIcon {
+    composes: fa        from 'font-awesome/css/font-awesome.css';
+    composes: fa-trash  from 'font-awesome/css/font-awesome.css';
+}