From a7b27ab8ff083d57359e3300998c4a8b4a88cbf3 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Mon, 2 Mar 2020 14:19:45 +0100
Subject: [PATCH] Added selectability to WBBrowse.

---
 frontend/src/css/index.css                    |  4 +++
 .../src/js/component/wb-collection-listing.js |  7 +++--
 .../src/js/component/wb-process-listing.js    |  7 +++--
 .../src/js/component/wb-project-listing.js    | 11 +++++--
 .../src/js/component/wb-workflow-listing.js   |  7 +++--
 frontend/src/js/page/wb-browse.js             | 29 ++++++++++++++++---
 6 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index f0cac02..f46dceb 100755
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -5,3 +5,7 @@ pre.word-wrap {
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
+
+.w-1 {
+  width: 1px !important;
+}
diff --git a/frontend/src/js/component/wb-collection-listing.js b/frontend/src/js/component/wb-collection-listing.js
index 576186a..f0eaa27 100644
--- a/frontend/src/js/component/wb-collection-listing.js
+++ b/frontend/src/js/component/wb-collection-listing.js
@@ -21,9 +21,11 @@ class WBCollectionListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    let { app, renderRenameLink, renderDeleteButton } = this.props;
+    let { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
 
     return items.map(item => [
+      renderSelectionCell(item),
       (<div>
         <div>
           <a href={ urlForObject(item) }>
@@ -137,7 +139,8 @@ class WBCollectionListing extends Component {
           { error }
         </div>) : null }
 
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
+          headerClasses={ [ 'w-1'] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index f1e3033..7c1f3df 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -28,9 +28,11 @@ class WBProcessListing extends Component {
   }
 
   prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
-    const { app, renderRenameLink, renderDeleteButton } = this.props;
+    const { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
     return requests.map(item => {
       return ( [
+        renderSelectionCell(item),
         (<div>
           <div>
             <a href={ '/process/' + item['uuid'] }>
@@ -95,7 +97,8 @@ class WBProcessListing extends Component {
           cssClass="float-left mx-2 my-2" title="Request State: "
           onChange={ () => this.fetchItems() } />
 
-        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
diff --git a/frontend/src/js/component/wb-project-listing.js b/frontend/src/js/component/wb-project-listing.js
index 51795f8..ed07d0c 100644
--- a/frontend/src/js/component/wb-project-listing.js
+++ b/frontend/src/js/component/wb-project-listing.js
@@ -17,9 +17,11 @@ class WBProjectListing extends Component {
   }
 
   prepareRows(items) {
-    let { app, renderRenameLink, renderDeleteButton } = this.props;
+    const { app, renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
 
     return items.map(item => [
+      renderSelectionCell(item),
       (<div>
         <div>
           <a href="#"
@@ -70,7 +72,8 @@ class WBProjectListing extends Component {
   render({ arvHost, arvToken, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
@@ -84,7 +87,9 @@ class WBProjectListing extends Component {
 WBProjectListing.defaultProps = {
   'itemsPerPage': 100,
   'ownerUuid': null,
-  'renderRenameLink': () => null
+  'renderRenameLink': () => null,
+  'renderDeleteButton': () => null,
+  'renderSelectionCell': () => null
 };
 
 export default WBProjectListing;
diff --git a/frontend/src/js/component/wb-workflow-listing.js b/frontend/src/js/component/wb-workflow-listing.js
index 7933b5f..dbb7fcd 100644
--- a/frontend/src/js/component/wb-workflow-listing.js
+++ b/frontend/src/js/component/wb-workflow-listing.js
@@ -21,8 +21,10 @@ class WBWorkflowListing extends Component {
   }
 
   prepareRows(items, ownerLookup) {
-    const { renderRenameLink, renderDeleteButton } = this.props;
+    const { renderRenameLink, renderDeleteButton,
+      renderSelectionCell } = this.props;
     return items.map(item => [
+      renderSelectionCell(item),
       (
         <div>
           <div>
@@ -78,7 +80,8 @@ class WBWorkflowListing extends Component {
   render({ app, ownerUuid, page, getPageUrl }, { rows, numPages }) {
     return (
       <div>
-        <WBTable columns={ [ 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
+        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'Created At', 'Actions' ] }
+          headerClasses={ [ 'w-1' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 91490f2..bf205de 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -19,6 +19,7 @@ class WBBrowse extends Component {
     this.deleteDialogRef = createRef();
     this.newProjectDialogRef = createRef();
     this.projectListingRef = createRef();
+    this.state.selected = {};
   }
 
   getUrl(params) {
@@ -65,6 +66,22 @@ class WBBrowse extends Component {
     );
   }
 
+  renderSelectionCell(item) {
+    const { selected } = this.state;
+    const { uuid } = item;
+    return (
+      <div>
+        <input type="checkbox" checked={ (uuid in selected) }
+          onChange={ e => {
+          if (e.target.value === 'on')
+            selected[uuid] = true;
+          else
+            delete selected[uuid];
+        } } /> { '\u00A0' }
+      </div>
+    );
+  }
+
   render({ mode, ownerUuid, activePage, app,
     objTypeTab, collectionPage, processPage, workflowPage }) {
 
@@ -99,7 +116,8 @@ class WBBrowse extends Component {
           activePage={ Number(activePage || 0) }
           getPageUrl={ i => this.getUrl({ 'activePage': i }) }
           renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+          renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
         { (mode !== 'browse') ? null : (
           <WBTabs tabs={ [
@@ -118,7 +136,8 @@ class WBBrowse extends Component {
               activePage={ Number(collectionPage || 0) }
               getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : (objTypeTab === 'process') ? (
             <WBProcessListing app={ app }
@@ -128,7 +147,8 @@ class WBBrowse extends Component {
               activePage={ Number(processPage || 0) }
               onPageChanged={ i => this.route({ 'processPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : (objTypeTab === 'workflow') ? (
             <WBWorkflowListing app={ app }
@@ -137,7 +157,8 @@ class WBBrowse extends Component {
               page={ Number(workflowPage || 0) }
               getPageUrl={ i => this.getUrl({ 'workflowPage': i }) }
               renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
-              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) } />
+              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
+              renderSelectionCell={ it => this.renderSelectionCell(it) } />
 
           ) : null
         }