othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Egor Lezhnin 2019-11-13 06:38:49 -08:00 committed by Danny Brown
parent c4adcfd39e
commit c59c5b3f14
9 changed files with 100 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
platform/viewer/src/googleCloud/DatasetPicker.js
View File

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

12
platform/viewer/src/googleCloud/DatasetsList.js
View File

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

14
platform/viewer/src/googleCloud/DicomStoreList.js
View File

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

23
platform/viewer/src/googleCloud/DicomStorePicker.js
View File

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

23
platform/viewer/src/googleCloud/LocationPicker.js
View File

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

12
platform/viewer/src/googleCloud/LocationsList.js
View File

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

23
platform/viewer/src/googleCloud/ProjectPicker.js
View File

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

13
platform/viewer/src/googleCloud/ProjectsList.js
View File

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

12
platform/viewer/src/googleCloud/googleCloud.css
View File

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