source home | concepts/mappings

OpenConceptLab · Nov 19, 2020 · 2bf358b · 2bf358b
1 parent c59943a
commit 2bf358b
Show file tree

Hide file tree

Showing 10 changed files with 229 additions and 52 deletions.
diff --git a/src/components/common/FilterButton.jsx b/src/components/common/FilterButton.jsx
@@ -4,7 +4,7 @@ import {
   FilterList as FilterListIcon,
 } from '@material-ui/icons';
 
-const FilterButton = ({tooltipTitle, label, count, disabled, onClick}) => {
+const FilterButton = ({tooltipTitle, label, count, disabled, onClick, size}) => {
   const hasFilters = count && count > 0;
   const color = hasFilters ? 'primary' : 'secondary';
   const buttonLabel = (label || 'Filters') + (hasFilters ? ` (${count})` : '');
@@ -19,6 +19,7 @@ const FilterButton = ({tooltipTitle, label, count, disabled, onClick}) => {
         label={buttonLabel}
         style={{minWidth: '100px'}}
         disabled={disabled}
+        size={size || 'medium'}
       />
     </Tooltip>
   )

diff --git a/src/components/common/ResultsCountDropDown.jsx b/src/components/common/ResultsCountDropDown.jsx
@@ -60,12 +60,12 @@ class ResultsCountDropDown extends React.Component {
   }
 
   render() {
-    const { total } = this.props;
+    const { total, size } = this.props;
     const { limit, open } = this.state;
     return (
       <span>
         <Tooltip title='Results Per Page'>
-          <ButtonGroup variant="outlined" color="primary" ref={this.buttonRef} aria-label="limit button">
+          <ButtonGroup variant="outlined" color="primary" ref={this.buttonRef} aria-label="limit button" size={size || 'medium'}>
             <Button style={{fontSize: '0.8125em'}} onClick={this.toggleOpen}>
               Results Per Page : {limit}
             </Button>

diff --git a/src/components/common/VersionFilter.jsx b/src/components/common/VersionFilter.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Chip, MenuItem, Menu } from '@material-ui/core';
+import { AcUnit as AsteriskIcon } from '@material-ui/icons';
+import { map, without } from 'lodash';
+
+const VersionFilter = props => {
+  const { size, onChange, selected, versions } = props;
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const onOpen = event => {
+    versions && setAnchorEl(event.currentTarget);
+  }
+
+  const onClose = () => {
+    setAnchorEl(null)
+  }
+
+  const onSelect = version => {
+    onChange(version)
+    onClose(null)
+  }
+
+  return (
+    <React.Fragment>
+      <Chip
+        variant="outlined"
+        color='primary'
+        icon={<AsteriskIcon fontSize='inherit' />}
+        label={selected}
+        onClick={onOpen}
+        size={size || 'medium'}
+      />
+      <Menu
+        id="versions-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={onClose}
+      >
+        <MenuItem value='HEAD' onClick={() => onSelect('HEAD')}>
+          HEAD
+        </MenuItem>
+        {
+          map(without(versions, 'HEAD'), version => (
+            <MenuItem key={version} value={version} onClick={() => onSelect(version)}>
+              {version}
+            </MenuItem>
+          ))
+        }
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+export default VersionFilter;
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
@@ -69,21 +69,24 @@ class Search extends React.Component {
 
   setQueryParamsInState() {
     const queryParams = new URLSearchParams(this.props.location.search)
+    const fixedFilters = this.props.fixedFilters;
     this.isInfinite = queryParams.get('isInfinite', false)
-    this.isTable = queryParams.get('isTable', false)
+    this.isTable = queryParams.get('isTable') || get(fixedFilters, 'isTable');
     this.setState({
-      resource: queryParams.get('type') || 'concepts',
+      resource: queryParams.get('type') || this.props.resource || 'concepts',
       page: queryParams.get('page') || 1,
       isLoading: true,
       searchStr: queryParams.get('q') || '',
       exactMatch: queryParams.get('exactMatch') || 'off',
-      limit: parseInt(queryParams.get('limit')) || DEFAULT_LIMIT,
+      limit: parseInt(queryParams.get('limit')) || get(fixedFilters, 'limit') || DEFAULT_LIMIT,
     }, this.fetchNewResults)
   }
 
   componentDidUpdate(prevProps) {
     if(prevProps.location.search !== this.props.location.search)
       this.setQueryParamsInState()
+    if(prevProps.baseURL !== this.props.baseURL && this.props.baseURL)
+      this.setQueryParamsInState()
   }
 
   prepareResponseForState(resource, response, resetItems) {
@@ -202,10 +205,11 @@ class Search extends React.Component {
       fetchSearchResults(
         _resource,
         {...queryParams, ...sortParams},
+        this.props.baseURL,
         null,
         (response) => this.onSearchResultsLoad(resource, response, resetItems)
       )
-      if(counts)
+      if(counts && !this.props.nested)
         fetchCounts(resource, queryParams, this.onCountsLoad)
     })
   }
@@ -262,28 +266,37 @@ class Search extends React.Component {
   getFilterControls() {
     const updatedSinceText = this.getUpdatedSinceText();
     const totalResults = this.getCurrentResourceTotalResults();
+    const { nested, extraControls } = this.props;
     const {
       updatedSince, limit, appliedFacets, resource, includeRetired
     } = this.state;
     const isDisabledFilters = includes(['organizations', 'users'], resource);
     return (
-      <span style={{display: 'inline-flex'}}>
+      <span style={{display: 'inline-flex', alignItems: 'center'}}>
+        {
+          extraControls &&
+          <span style={{paddingRight: '5px'}}>
+            {
+              extraControls
+            }
+          </span>
+        }
         <span style={{paddingRight: '5px'}}>
-          <IncludeRetiredFilterChip applied={includeRetired} onClick={this.onClickIncludeRetired} />
+          <IncludeRetiredFilterChip applied={includeRetired} onClick={this.onClickIncludeRetired} size={nested ? 'small' : 'medium'} />
         </span>
         <span style={{paddingRight: '5px'}}>
-          <ChipDatePicker onChange={this.onDateChange} label={updatedSinceText} date={updatedSince} />
+          <ChipDatePicker onChange={this.onDateChange} label={updatedSinceText} date={updatedSince} size={nested ? 'small' : 'medium'} />
         </span>
         <span style={{paddingRight: '5px'}}>
-          <FilterButton count={size(appliedFacets)} onClick={this.toggleFacetsDrawer} disabled={isDisabledFilters} label='More Filters' />
+          <FilterButton count={size(appliedFacets)} onClick={this.toggleFacetsDrawer} disabled={isDisabledFilters} label='More Filters' size={nested ? 'small' : 'medium'} />
         </span>
         {
           !this.isTable && <span style={{paddingRight: '5px'}}>
-            <SortButton onChange={this.onSortChange} />
+            <SortButton onChange={this.onSortChange} size={nested ? 'small' : 'medium'} />
           </span>
         }
         <span>
-          <ResultsCountDropDown onChange={this.onLimitChange} defaultLimit={limit} total={totalResults} />
+          <ResultsCountDropDown onChange={this.onLimitChange} defaultLimit={limit} total={totalResults} size={nested ? 'small' : 'medium'} />
         </span>
       </span>
     )
@@ -306,18 +319,23 @@ class Search extends React.Component {
   }
 
   render() {
+    const { nested } = this.props;
     const {
       resource, results, isLoading, limit, sortParams, openFacetsDrawer,
     } = this.state;
+    const searchResultsContainerClass = nested ? 'col-sm-12 no-side-padding' : 'col-sm-9 no-left-padding';
     const resourceResults = get(results, resource, {});
     const hasPrev = this.hasPrev()
     const hasNext = this.hasNext()
     return (
-      <div className='col-sm-12' style={{paddingTop: '10px'}}>
-        <div className='col-sm-3'>
-          <Resources active={resource} results={results} onClick={this.onResourceChange} />
-        </div>
-        <div className='col-sm-9 no-left-padding'>
+      <div className='col-sm-12' style={nested ? {} : {paddingTop: '10px'}}>
+        {
+          !nested &&
+          <div className='col-sm-3'>
+            <Resources active={resource} results={results} onClick={this.onResourceChange} />
+          </div>
+        }
+        <div className={searchResultsContainerClass}>
           <div className='col-sm-8 no-side-padding' style={{textAlign: 'center'}}>
             <SearchInput
               {...this.props}
@@ -343,7 +361,7 @@ class Search extends React.Component {
           </div>
           {
             isLoading ?
-            <div style={{marginTop: '100px', textAlign: 'center'}}>
+            <div className='col-sm-12 no-side-padding' style={{marginTop: '100px', textAlign: 'center'}}>
               <CircularProgress style={{color: BLUE}}/>
             </div> :
             <div className='col-sm-12 no-side-padding' style={{marginTop: '5px'}}>

diff --git a/src/components/search/SearchInput.jsx b/src/components/search/SearchInput.jsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { Search as SearchIcon, GpsFixedSharp as SharpIcon } from '@material-ui/icons';
+import {
+  Search as SearchIcon,
+  GpsFixedSharp as SharpIcon,
+  Clear as ClearIcon,
+} from '@material-ui/icons';
 import { InputBase, Divider, IconButton, Tooltip  } from '@material-ui/core';
 import { isAtGlobalSearch } from '../../common/utils';
 
@@ -58,6 +62,10 @@ class SearchInput extends React.Component {
       this.moveToSearchPage()
   }
 
+  clearSearch = () => {
+    this.setState({input: ''}, this.performSearch)
+  }
+
   handleInputChange = event => {
     this.setState({input: event.target.value})
   }
@@ -92,6 +100,14 @@ class SearchInput extends React.Component {
             fullWidth
             onChange={this.handleInputChange}
           />
+          {
+            input &&
+            <Tooltip title='Clear'>
+              <IconButton type="submit" style={{padding: '10px'}} aria-label="search" onClick={this.clearSearch}>
+                <ClearIcon />
+              </IconButton>
+            </Tooltip>
+          }
           <Tooltip title='Search'>
             <IconButton type="submit" style={{padding: '10px'}} aria-label="search" onClick={this.performSearch}>
               <SearchIcon />

diff --git a/src/components/search/utils.js b/src/components/search/utils.js
@@ -1,26 +1,30 @@
 import APIService from '../../services/APIService';
 import { without, forEach } from 'lodash';
 
-export const fetchSearchResults = (resource, queryParams, beforeCallback, afterCallback) => {
+export const fetchSearchResults = (resource, queryParams, baseURL, beforeCallback, afterCallback) => {
   if(!resource)
     resource = 'concepts';
 
   if(beforeCallback)
-    beforeCallback(__fetchSearchResults(resource, queryParams, afterCallback));
+    beforeCallback(__fetchSearchResults(resource, queryParams, baseURL, afterCallback));
   else
-    __fetchSearchResults(resource, queryParams, afterCallback);
+    __fetchSearchResults(resource, queryParams, baseURL, afterCallback);
 };
 
-const __fetchSearchResults = (resource, queryParams, callback, method='get') => {
+const __fetchSearchResults = (resource, queryParams, baseURL, callback, method='get') => {
   if(!queryParams)
     queryParams = {};
 
+  const service = APIService[resource]();
+  if(baseURL)
+    service.overrideURL(baseURL);
+
   if(method === 'get')
-  APIService[resource]()
+    service
     .get(null, {INCLUDEFACETS: true}, queryParams)
     .then(response => callback(response, resource));
   if(method === 'head')
-    APIService[resource]()
+    service
     .head(null, {INCLUDEFACETS: true}, queryParams)
     .then(response => callback(response, resource));
 };
@@ -31,6 +35,6 @@ export const fetchCounts = (excludeResource, queryParams, callback) => {
     queryParams = {};
 
   forEach(resources, resource => {
-    __fetchSearchResults(resource, queryParams, callback, 'head')
+    __fetchSearchResults(resource, queryParams, null, callback, 'head')
   });
 }
diff --git a/src/components/sources/SourceHome.jsx b/src/components/sources/SourceHome.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { CircularProgress } from '@material-ui/core';
+import { includes } from 'lodash';
 import APIService from '../../services/APIService';
 import SourceHomeHeader from './SourceHomeHeader';
 import SourceHomeTabs from './SourceHomeTabs';
@@ -76,7 +77,7 @@ class SourceHome extends React.Component {
 
   onTabChange = (event, value) => {
     this.setState({tab: value}, () => {
-      if(value === 3)
+      if(includes([1, 2, 3], value))
         this.getVersions()
     })
   }
@@ -88,7 +89,7 @@ class SourceHome extends React.Component {
                 .get()
                 .then(response => {
                   this.setState({isLoading: false, source: response.data}, () => {
-                    if(this.state.tab === 1)
+                    if(includes([1, 2, 3], this.state.tab))
                       this.getVersions()
                   })
                 })
@@ -103,6 +104,7 @@ class SourceHome extends React.Component {
   render() {
     const { source, versions, isLoading, tab } = this.state;
     const currentURL = this.getURLFromPath()
+    const versionedObjectURL = this.getVersionedObjectURLFromPath()
     return (
       <div style={isLoading ? {textAlign: 'center', marginTop: '40px'} : {}}>
         {
@@ -112,10 +114,18 @@ class SourceHome extends React.Component {
             <SourceHomeHeader
               source={source}
               isVersionedObject={this.isVersionedObject()}
-              versionedObjectURL={this.getVersionedObjectURLFromPath()}
+              versionedObjectURL={versionedObjectURL}
               currentURL={currentURL}
             />
-            <SourceHomeTabs tab={tab} onChange={this.onTabChange} source={source} versions={versions} />
+            <SourceHomeTabs
+              tab={tab}
+              onChange={this.onTabChange}
+              source={source}
+              versions={versions}
+              location={this.props.location}
+              versionedObjectURL={versionedObjectURL}
+              currentVersion={this.props.match.params.version}
+            />
           </div>
         }
       </div>