feat: filter field for google api windows (#1170)

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>
     );
   }
 }

platform/viewer/src/googleCloud/DatasetsList.js

@@ -46,21 +46,23 @@ class DatasetsList extends Component {
   }
 
   render() {
-    if (this.props.error) {
+    const { loading, datasets, filter, error } = this.props;
-      return <p>{this.props.error}</p>;
+    
+    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>
     );
   }

platform/viewer/src/googleCloud/DicomStoreList.js

@@ -46,20 +46,24 @@ class DicomStoreList extends Component {
   }
 
   render() {
-    if (this.props.error) {
+    const { loading, stores, filter, error } = this.props;
-      return <p>{this.props.error}</p>;
+
+    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>
     );
   }

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
+      <div>
-        stores={stores}
+        <input class="form-control gcp-input"
-        loading={loading}
+            type="text"
-        error={error}
+            value={ filterStr }
-        onSelect={onSelect}
+            onChange={ e => this.setState({ filterStr: e.target.value }) }
-      />
+        />
+        <DicomStoreList
+          stores={stores}
+          loading={loading}
+          error={error}
+          filter={filterStr}
+          onSelect={onSelect}
+        />
+      </div>
     );
   }
 }

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
+      <div>
-        locations={locations}
+        <input class="form-control gcp-input"
-        loading={loading}
+            type="text"
-        error={error}
+            value={ filterStr }
-        onSelect={onSelect}
+            onChange={ e => this.setState({ filterStr: e.target.value }) }
-      />
+        />
+        <LocationsList
+          locations={locations}
+          loading={loading}
+          error={error}
+          filter={filterStr}
+          onSelect={onSelect}
+        />
+      </div>
     );
   }
 }

platform/viewer/src/googleCloud/LocationsList.js

@@ -46,21 +46,23 @@ class LocationsList extends Component {
   }
 
   render() {
-    if (this.props.error) {
+    const { loading, locations, filter, error } = this.props;
-      return <p>{this.props.error}</p>;
+
+    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>
     );
   }

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
+      <div>
-        projects={projects}
+        <input class="form-control gcp-input"
-        loading={loading}
+            type="text"
-        error={error}
+            value={ filterStr }
-        onSelect={onSelect}
+            onChange={ e => this.setState({ filterStr: e.target.value }) } 
-      />
+        />
+        <ProjectsList
+          projects={projects}
+          loading={loading}
+          filter={filterStr}
+          error={error}
+          onSelect={onSelect}
+        />
+      </div>
     );
   }
 }

platform/viewer/src/googleCloud/ProjectsList.js

@@ -50,21 +50,22 @@ class ProjectsList extends Component {
   }
 
   render() {
-    if (this.props.error) {
+    const { loading, projects, filter, error } = this.props;
-      return <p>{this.props.error}</p>;
+
+    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>
     );
   }

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;
+}