From 7f64a4670053d81270acad41b570c5686f95c4a4 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 10:34:31 +0100
Subject: [PATCH] Added WBPickObjectDialog.

---
 .../src/js/dialog/wb-pick-object-dialog.js    | 111 ++++++++++++++++++
 frontend/src/js/page/wb-sharing-page.js       |  36 ++++--
 2 files changed, 136 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/js/dialog/wb-pick-object-dialog.js

diff --git a/frontend/src/js/dialog/wb-pick-object-dialog.js b/frontend/src/js/dialog/wb-pick-object-dialog.js
new file mode 100644
index 0000000..07d3b5c
--- /dev/null
+++ b/frontend/src/js/dialog/wb-pick-object-dialog.js
@@ -0,0 +1,111 @@
+import { h, Component, createRef } from 'preact';
+import WBDialog from 'wb-dialog';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosObjectName from 'arvados-object-name';
+
+class WBPickObjectDialog extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state.title = 'WBPickObjectDialog';
+    this.state.rows = [];
+    this.state.textSearch = null;
+    this.dialogRef = createRef();
+  }
+
+  show(title, objectType, accept, filters=[]) {
+    this.setState({ title, objectType, page: 0, rows: [], accept, filters, textSearch: null });
+    this.dialogRef.current.show();
+    this.fetchData();
+  }
+
+  hide() {
+    this.dialogRef.current.hide();
+  }
+
+  fetchData() {
+    const { app, itemsPerPage } = this.props;
+    const { arvHost, arvToken } = app.state;
+    const { objectType, page, textSearch } = this.state;
+    let { filters } = this.state;
+    if (textSearch)
+      filters = filters.concat([['any', 'ilike', '%' + textSearch + '%']]);
+    const order = (objectType === 'user') ?
+      ['last_name asc', 'first_name asc'] :
+      ['name asc'];
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + objectType +
+      's?offset=' + (page * itemsPerPage) +
+      '&limit=' + itemsPerPage +
+      '&filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&order=' + encodeURIComponent(JSON.stringify(order))
+    );
+    prom = prom.then(xhr => this.setState({
+      numPages: Math.ceil(xhr.response.items_available / itemsPerPage),
+      rows: this.prepareRows(xhr.response.items)
+    }));
+    return prom;
+  }
+
+  prepareRows(items) {
+    const { accept } = this.state;
+    const { dialogRef } = this;
+
+    return items.map(it => [
+      (<div>
+        <div>
+          <a href="#" onclick={ () => { dialogRef.current.hide(); accept(it); } }>
+            { arvadosObjectName(it) }
+          </a>
+        </div>
+        <div>{ it.uuid }</div>
+      </div>)
+    ]);
+  }
+
+  search(textSearch) {
+    this.setState({ textSearch, page: 0});
+    this.fetchData();
+  }
+
+  render({}, { title, rows, page, numPages, textSearch }) {
+    return (
+      <WBDialog title={ title } ref={ this.dialogRef }>
+        <div>
+          <div class="input-group mb-3">
+            <input type="text" class="form-control" placeholder="Search"
+              aria-label="Search" value={ textSearch }
+              onkeydown={ e => { if (e.keyCode === 13) {
+                e.preventDefault();
+                this.search(e.target.value);
+              } } }
+              onchange={ e => this.search(e.target.value) } />
+
+            <div class="input-group-append">
+              <button class="btn btn-outline-primary" type="button" onclick={ e => e.preventDefault() }>Search</button>
+            </div>
+          </div>
+
+          <WBTable columns={ [ 'Name' ] } rows={ rows } />
+
+          <WBPagination activePage={ page } numPages={ numPages } chunkSize={ 3 }
+            onPageChanged={ i => { this.setState({ page: i }); this.fetchData(); } } />
+        </div>
+
+        <div>
+          <button class="btn btn-secondary"
+            onclick={ e => { e.preventDefault(); this.hide(); } }>
+            Cancel
+          </button>
+        </div>
+      </WBDialog>
+    );
+  }
+}
+
+WBPickObjectDialog.defaultProps = {
+  itemsPerPage: 20
+};
+
+export default WBPickObjectDialog;
diff --git a/frontend/src/js/page/wb-sharing-page.js b/frontend/src/js/page/wb-sharing-page.js
index 5904529..3ef7193 100644
--- a/frontend/src/js/page/wb-sharing-page.js
+++ b/frontend/src/js/page/wb-sharing-page.js
@@ -4,14 +4,14 @@ import WBArvadosCrumbs from 'wb-arvados-crumbs';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBSelect from 'wb-select';
 import WBTable from 'wb-table';
-import WBBrowseDialog from 'wb-browse-dialog';
+import WBPickObjectDialog from 'wb-pick-object-dialog';
 import makeArvadosRequest from 'make-arvados-request';
 
 class WBSharingPage extends Component {
   constructor(...args) {
     super(...args);
     this.state.rows = [];
-    this.browseDialogRef = createRef();
+    this.dialogRef = createRef();
   }
 
   componentDidMount() {
@@ -44,6 +44,14 @@ class WBSharingPage extends Component {
     ]);
   }
 
+  addEntry(it) {
+    throw Error('Not implemented');
+  }
+
+  save() {
+    throw Error('Not implemented');
+  }
+
   render({ app, uuid }, { rows }) {
     return (
       <div>
@@ -51,18 +59,24 @@ class WBSharingPage extends Component {
 
         <WBArvadosCrumbs app={ app } uuid={ uuid } />
 
-        <div class="my-2">
-          This is the sharing management page for { uuid }
-        </div>
+        <div class="container-fluid">
+          <div class="my-2">
+            This is the sharing management page for { uuid }
+          </div>
 
-        <WBTable columns={ [ 'Name', 'Permission', '' ] }
-          headerClasses={ [ null, null, 'w-1' ] }
-          rows={ rows } />
+          <WBTable columns={ [ 'Name', 'Permission', '' ] }
+            headerClasses={ [ null, null, 'w-1' ] }
+            rows={ rows } />
 
-        <WBBrowseDialog app={ app } ref={ this.browseDialogRef } />
+          <WBPickObjectDialog app={ app } ref={ this.dialogRef } />
 
-        <button class="btn btn-primary"
-          onclick={ () => this.browseDialogRef.current.show() }>Add</button>
+          <button class="btn btn-outline-secondary mr-2"
+            onclick={ () => this.dialogRef.current.show('Select User', 'user', it => this.addEntry(it)) }>Add User...</button>
+          <button class="btn btn-outline-secondary mr-2"
+            onclick={ () => this.dialogRef.current.show('Select Group', 'group', it => this.addEntry(it), [['group_class', '=', 'role']]) }>Add Group...</button>
+          <button class="btn btn-primary mr-2"
+            onclick={ () => this.save() }>Save</button>
+        </div>
       </div>
     );
   }