From c59c5b3f14d44f1c06aa396125a1f4caaa431c25 Mon Sep 17 00:00:00 2001
From: Egor Lezhnin <878990+pavertomato@users.noreply.github.com>
Date: Wed, 13 Nov 2019 06:38:49 -0800
Subject: [PATCH] feat: filter field for google api windows (#1170)

---
 .../viewer/src/googleCloud/DatasetPicker.js   | 11 ++++++++-
 .../viewer/src/googleCloud/DatasetsList.js    | 12 ++++++----
 .../viewer/src/googleCloud/DicomStoreList.js  | 14 +++++++----
 .../src/googleCloud/DicomStorePicker.js       | 23 +++++++++++++------
 .../viewer/src/googleCloud/LocationPicker.js  | 23 +++++++++++++------
 .../viewer/src/googleCloud/LocationsList.js   | 12 ++++++----
 .../viewer/src/googleCloud/ProjectPicker.js   | 23 +++++++++++++------
 .../viewer/src/googleCloud/ProjectsList.js    | 13 ++++++-----
 .../viewer/src/googleCloud/googleCloud.css    | 12 ++++++++++
 9 files changed, 100 insertions(+), 43 deletions(-)

diff --git a/platform/viewer/src/googleCloud/DatasetPicker.js b/platform/viewer/src/googleCloud/DatasetPicker.js
index 711c216d3..bfa9cf891 100644
--- a/platform/viewer/src/googleCloud/DatasetPicker.js
+++ b/platform/viewer/src/googleCloud/DatasetPicker.js
@@ -9,6 +9,7 @@ export default class DatasetPicker extends Component {
     error: null,
     loading: true,
     datasets: [],
+    filterStr: ""
   };
 
   static propTypes = {
@@ -41,15 +42,23 @@ export default class DatasetPicker extends Component {
   }
 
   render() {
-    const { datasets, loading, error } = this.state;
+    const { datasets, loading, error, filterStr  } = this.state;
     const { onSelect } = this.props;
     return (
+      <div>
+        <input class="form-control gcp-input"
+            type="text"
+            value={ filterStr }
+            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        />
       <DatasetsList
         datasets={datasets}
         loading={loading}
         error={error}
+        filter={filterStr}
         onSelect={onSelect}
       />
+      </div>
     );
   }
 }
diff --git a/platform/viewer/src/googleCloud/DatasetsList.js b/platform/viewer/src/googleCloud/DatasetsList.js
index 4e6e4ebe4..3bb9aeada 100644
--- a/platform/viewer/src/googleCloud/DatasetsList.js
+++ b/platform/viewer/src/googleCloud/DatasetsList.js
@@ -46,21 +46,23 @@ class DatasetsList extends Component {
   }
 
   render() {
-    if (this.props.error) {
-      return <p>{this.props.error}</p>;
+    const { loading, datasets, filter, error } = this.props;
+    
+    if (error) {
+      return <p>{error}</p>;
     }
 
     const loadingIcon = (
       <Icon name="circle-notch" className="loading-icon-spin loading-icon" />
     );
 
-    if (this.props.loading) {
+    if (loading) {
       return loadingIcon;
     }
 
     const body = (
       <tbody id="DatasetList">
-        {this.props.datasets.map(this.renderTableRow)}
+        {datasets.filter(dataset => (dataset.name.split('/')[5].toLowerCase().includes(filter.toLowerCase()) || filter=="")).map(this.renderTableRow)}
       </tbody>
     );
 
@@ -71,7 +73,7 @@ class DatasetsList extends Component {
             <th>{this.props.t('Dataset')}</th>
           </tr>
         </thead>
-        {this.props.datasets && body}
+        {datasets && body}
       </table>
     );
   }
diff --git a/platform/viewer/src/googleCloud/DicomStoreList.js b/platform/viewer/src/googleCloud/DicomStoreList.js
index d21b04456..58f811746 100644
--- a/platform/viewer/src/googleCloud/DicomStoreList.js
+++ b/platform/viewer/src/googleCloud/DicomStoreList.js
@@ -46,20 +46,24 @@ class DicomStoreList extends Component {
   }
 
   render() {
-    if (this.props.error) {
-      return <p>{this.props.error}</p>;
+    const { loading, stores, filter, error } = this.props;
+
+    if (error) {
+      return <p>{error}</p>;
     }
 
     const loadingIcon = (
       <Icon name="circle-notch" className="loading-icon-spin loading-icon" />
     );
 
-    if (this.props.loading) {
+    if (loading) {
       return loadingIcon;
     }
 
     const body = (
-      <tbody id="StoreList">{this.props.stores.map(this.renderTableRow)}</tbody>
+      <tbody id="StoreList">{
+        stores.filter(store => (store.name.split('/')[7].toLowerCase().includes(filter.toLowerCase()) || filter=="")).map(this.renderTableRow)}
+      </tbody>
     );
 
     return (
@@ -69,7 +73,7 @@ class DicomStoreList extends Component {
             <th>{this.props.t('DICOM Store')}</th>
           </tr>
         </thead>
-        {this.props.stores && body}
+        {stores && body}
       </table>
     );
   }
diff --git a/platform/viewer/src/googleCloud/DicomStorePicker.js b/platform/viewer/src/googleCloud/DicomStorePicker.js
index a1cbcc12f..34a6e1c53 100644
--- a/platform/viewer/src/googleCloud/DicomStorePicker.js
+++ b/platform/viewer/src/googleCloud/DicomStorePicker.js
@@ -10,6 +10,7 @@ export default class DicomStorePicker extends Component {
     loading: true,
     stores: [],
     locations: [],
+    filterStr: ""
   };
 
   static propTypes = {
@@ -38,16 +39,24 @@ export default class DicomStorePicker extends Component {
   }
 
   render() {
-    const { stores, loading, error } = this.state;
+    const { stores, loading, error, filterStr } = this.state;
     const { onSelect } = this.props;
 
     return (
-      <DicomStoreList
-        stores={stores}
-        loading={loading}
-        error={error}
-        onSelect={onSelect}
-      />
+      <div>
+        <input class="form-control gcp-input"
+            type="text"
+            value={ filterStr }
+            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        />
+        <DicomStoreList
+          stores={stores}
+          loading={loading}
+          error={error}
+          filter={filterStr}
+          onSelect={onSelect}
+        />
+      </div>
     );
   }
 }
diff --git a/platform/viewer/src/googleCloud/LocationPicker.js b/platform/viewer/src/googleCloud/LocationPicker.js
index 8b687c9a2..b61368c5e 100644
--- a/platform/viewer/src/googleCloud/LocationPicker.js
+++ b/platform/viewer/src/googleCloud/LocationPicker.js
@@ -9,6 +9,7 @@ export default class LocationPicker extends Component {
     error: null,
     loading: true,
     locations: [],
+    filterStr: "",
   };
 
   static propTypes = {
@@ -37,15 +38,23 @@ export default class LocationPicker extends Component {
   }
 
   render() {
-    const { locations, loading, error } = this.state;
+    const { locations, loading, error, filterStr } = this.state;
     const { onSelect } = this.props;
     return (
-      <LocationsList
-        locations={locations}
-        loading={loading}
-        error={error}
-        onSelect={onSelect}
-      />
+      <div>
+        <input class="form-control gcp-input"
+            type="text"
+            value={ filterStr }
+            onChange={ e => this.setState({ filterStr: e.target.value }) }
+        />
+        <LocationsList
+          locations={locations}
+          loading={loading}
+          error={error}
+          filter={filterStr}
+          onSelect={onSelect}
+        />
+      </div>
     );
   }
 }
diff --git a/platform/viewer/src/googleCloud/LocationsList.js b/platform/viewer/src/googleCloud/LocationsList.js
index 70a5d6745..1da01686b 100644
--- a/platform/viewer/src/googleCloud/LocationsList.js
+++ b/platform/viewer/src/googleCloud/LocationsList.js
@@ -46,21 +46,23 @@ class LocationsList extends Component {
   }
 
   render() {
-    if (this.props.error) {
-      return <p>{this.props.error}</p>;
+    const { loading, locations, filter, error } = this.props;
+
+    if (error) {
+      return <p>{error}</p>;
     }
 
     const loadingIcon = (
       <Icon name="circle-notch" className="loading-icon-spin loading-icon" />
     );
 
-    if (this.props.loading) {
+    if (loading) {
       return loadingIcon;
     }
 
     const body = (
       <tbody id="LocationList">
-        {this.props.locations.map(this.renderTableRow)}
+        {locations.filter(location => (location.name.split('/')[3].toLowerCase().includes(filter.toLowerCase()) || filter=="")).map(this.renderTableRow)}
       </tbody>
     );
 
@@ -71,7 +73,7 @@ class LocationsList extends Component {
             <th>{this.props.t('Location')}</th>
           </tr>
         </thead>
-        {this.props.locations && body}
+        {locations && body}
       </table>
     );
   }
diff --git a/platform/viewer/src/googleCloud/ProjectPicker.js b/platform/viewer/src/googleCloud/ProjectPicker.js
index 106dcd9a0..f07449bc1 100644
--- a/platform/viewer/src/googleCloud/ProjectPicker.js
+++ b/platform/viewer/src/googleCloud/ProjectPicker.js
@@ -30,20 +30,29 @@ export default class ProjectPicker extends Component {
 
     this.setState({
       projects: response.data.projects || [],
+      filterStr: "",
       loading: false,
     });
   }
 
   render() {
-    const { projects, loading, error } = this.state;
+    const { projects, loading, filterStr, error } = this.state;
     const { onSelect } = this.props;
     return (
-      <ProjectsList
-        projects={projects}
-        loading={loading}
-        error={error}
-        onSelect={onSelect}
-      />
+      <div>
+        <input class="form-control gcp-input"
+            type="text"
+            value={ filterStr }
+            onChange={ e => this.setState({ filterStr: e.target.value }) } 
+        />
+        <ProjectsList
+          projects={projects}
+          loading={loading}
+          filter={filterStr}
+          error={error}
+          onSelect={onSelect}
+        />
+      </div>
     );
   }
 }
diff --git a/platform/viewer/src/googleCloud/ProjectsList.js b/platform/viewer/src/googleCloud/ProjectsList.js
index 4e6b537b3..576d74784 100644
--- a/platform/viewer/src/googleCloud/ProjectsList.js
+++ b/platform/viewer/src/googleCloud/ProjectsList.js
@@ -50,21 +50,22 @@ class ProjectsList extends Component {
   }
 
   render() {
-    if (this.props.error) {
-      return <p>{this.props.error}</p>;
+    const { loading, projects, filter, error } = this.props;
+
+    if (error) {
+      return <p>{error}</p>;
     }
 
     const loadingIcon = (
       <Icon name="circle-notch" className="loading-icon-spin loading-icon" />
     );
 
-    if (this.props.loading) {
+    if (loading) {
       return loadingIcon;
     }
-
     const body = (
       <tbody id="ProjectList">
-        {this.props.projects.map(this.renderTableRow)}
+        {projects.filter(project => (project.name.toLowerCase().includes(filter.toLowerCase()) || filter=="")).map(this.renderTableRow)}
       </tbody>
     );
 
@@ -76,7 +77,7 @@ class ProjectsList extends Component {
             <th>{this.props.t('ID')}</th>
           </tr>
         </thead>
-        {this.props.projects && body}
+        {projects && body}
       </table>
     );
   }
diff --git a/platform/viewer/src/googleCloud/googleCloud.css b/platform/viewer/src/googleCloud/googleCloud.css
index 9315165aa..aef8395e7 100644
--- a/platform/viewer/src/googleCloud/googleCloud.css
+++ b/platform/viewer/src/googleCloud/googleCloud.css
@@ -141,3 +141,15 @@
   margin: 20px auto;
 }
 
+.gcp-input{
+  height: 40px;
+  margin: 0 5px 20px 5px;
+  padding: 0 20px;
+  cursor: pointer;
+  border: none;
+  background-color: var(--input-background-color);
+  color: var(--input-placeholder-color);
+  font-size: 10pt;
+  font-weight: normal;
+  border-radius: 4px;
+}
\ No newline at end of file