Collection Home Tabs | details/concepts/mappings/history

src/components/app/App.jsx

@@ -8,6 +8,7 @@ import Search from '../search/Search';
 import ConceptHome from '../concepts/ConceptHome';
 import MappingHome from '../mappings/MappingHome';
 import SourceHome from '../sources/SourceHome';
+import CollectionHome from '../collections/CollectionHome';
 import { Link } from 'react-router-dom';
 import { isAtGlobalSearch } from '../../common/utils';
 
@@ -126,6 +127,23 @@ class App extends Component {
               path="/users/:user([a-zA-Z0-9\-\.\_]+)/sources/:source([a-zA-Z0-9\-\.\_]+)"
               component={SourceHome}
             />
+            { /* Collection Details */ }
+            <Route
+              path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/collections/:collection([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)"
+              component={CollectionHome}
+            />
+            <Route
+              path="/users/:user([a-zA-Z0-9\-\.\_]+)/collections/:collection([a-zA-Z0-9\-\.\_]+)/:version([a-zA-Z0-9\-\.\_]+)"
+              component={CollectionHome}
+            />
+            <Route
+              path="/orgs/:org([a-zA-Z0-9\-\.\_]+)/collections/:collection([a-zA-Z0-9\-\.\_]+)"
+              component={CollectionHome}
+            />
+            <Route
+              path="/users/:user([a-zA-Z0-9\-\.\_]+)/collections/:collection([a-zA-Z0-9\-\.\_]+)"
+              component={CollectionHome}
+            />
           </Switch>
         </div>
 

src/components/collections/CollectionHome.jsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { CircularProgress } from '@material-ui/core';
+import { includes } from 'lodash';
+import APIService from '../../services/APIService';
+import CollectionHomeHeader from './CollectionHomeHeader';
+import CollectionHomeTabs from './CollectionHomeTabs';
+
+const TABS = ['concepts', 'mappings', 'history', 'about']
+
+class CollectionHome extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      collection: {},
+      versions: [],
+      tab: this.getDefaultTabIndex()
+    }
+  }
+
+  getDefaultTabIndex() {
+    const { location } = this.props;
+
+    if(location.pathname.indexOf('/about') > -1)
+      return 4;
+    if(location.pathname.indexOf('/history') > -1)
+      return 3;
+    if(location.pathname.indexOf('/mappings') > -1)
+      return 2;
+    if(location.pathname.indexOf('/concepts') > -1)
+      return 1;
+
+    return 0;
+  }
+
+  componentDidMount() {
+    this.refreshDataByURL()
+  }
+
+  componentDidUpdate(prevProps) {
+    if(prevProps.location.pathname !== this.props.location.pathname) {
+      this.refreshDataByURL()
+      this.onTabChange(null, this.getDefaultTabIndex())
+    }
+  }
+
+  getVersionedObjectURLFromPath() {
+    const { location } = this.props;
+
+    return location.pathname.split('/').slice(0, 5).join('/') + '/';
+  }
+
+  getURLFromPath() {
+    const { location, match } = this.props;
+    if(location.pathname.indexOf('/history') > -1)
+      return location.pathname.split('/history')[0] + '/'
+    if(location.pathname.indexOf('/mappings') > -1)
+      return location.pathname.split('/mappings')[0] + '/'
+    if(location.pathname.indexOf('/concepts') > -1)
+      return location.pathname.split('/concepts')[0] + '/'
+    if(location.pathname.indexOf('/about') > -1)
+      return location.pathname.split('/about')[0] + '/'
+    if(location.pathname.indexOf('/details') > -1)
+      return location.pathname.split('/details')[0] + '/'
+    if(match.params.version)
+      return location.pathname.split('/').slice(0, 6).join('/') + '/';
+
+    return this.getVersionedObjectURLFromPath();
+  }
+
+  getVersions() {
+    APIService.new()
+              .overrideURL(this.getVersionedObjectURLFromPath() + 'versions/')
+              .get(null, null, {verbose: true})
+              .then(response => {
+                this.setState({versions: response.data})
+              })
+  }
+
+  onTabChange = (event, value) => {
+    this.setState({tab: value}, () => {
+      if(includes([1, 2, 3], value))
+        this.getVersions()
+    })
+  }
+
+  refreshDataByURL() {
+    this.setState({isLoading: true}, () => {
+      APIService.new()
+                .overrideURL(this.getURLFromPath())
+                .get()
+                .then(response => {
+                  this.setState({isLoading: false, collection: response.data}, () => {
+                    if(includes([1, 2, 3], this.state.tab))
+                      this.getVersions()
+                  })
+                })
+
+    })
+  }
+
+  isVersionedObject() {
+    const version = this.props.match.params.version;
+    if(version)
+      return includes(TABS, version)
+    return true
+  }
+
+  getCurrentVersion() {
+    let version = this.props.match.params.version;
+
+    if(!includes(['mappings', 'concepts', 'history', 'about'], version))
+      return version
+  }
+
+  render() {
+    const { collection, versions, isLoading, tab } = this.state;
+    const currentURL = this.getURLFromPath()
+    const versionedObjectURL = this.getVersionedObjectURLFromPath()
+    return (
+      <div style={isLoading ? {textAlign: 'center', marginTop: '40px'} : {}}>
+        {
+          isLoading ?
+          <CircularProgress color='primary' /> :
+          <div className='col-md-12 home-container no-side-padding'>
+            <CollectionHomeHeader
+              collection={collection}
+              isVersionedObject={this.isVersionedObject()}
+              versionedObjectURL={versionedObjectURL}
+              currentURL={currentURL}
+            />
+            <CollectionHomeTabs
+              tab={tab}
+              onChange={this.onTabChange}
+              collection={collection}
+              versions={versions}
+              location={this.props.location}
+              versionedObjectURL={versionedObjectURL}
+              currentVersion={this.getCurrentVersion()}
+            />
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+export default CollectionHome;

src/components/collections/CollectionHomeChildrenList.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import Search from '../search/Search';
+import VersionFilter from '../common/VersionFilter';
+import { map, includes } from 'lodash';
+
+class CollectionHomeChildrenList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedVersion: this.props.currentVersion || 'HEAD'
+    }
+  }
+
+  getURL() {
+    const { selectedVersion } = this.state;
+    const { versionedObjectURL, resource } = this.props;
+    let url = versionedObjectURL;
+    if(selectedVersion && !includes(['HEAD', 'concepts', 'mappings', 'about', 'history'], selectedVersion))
+      url += `${selectedVersion}/`
+    url += `${resource}/`
+
+    return url
+  }
+
+  onChange = version => {
+    this.setState({selectedVersion: version || 'HEAD'})
+  }
+
+  getExtraControls() {
+    const { selectedVersion } = this.state;
+    const { versions } = this.props;
+    return (
+      <VersionFilter
+        size='small'
+        onChange={this.onChange}
+        versions={map(versions, 'id')}
+        selected={selectedVersion}
+      />
+    )
+  }
+
+  render() {
+    return (
+      <Search
+        {...this.props}
+        nested={true}
+        baseURL={this.getURL()}
+        fixedFilters={{isTable: true, limit: 25}}
+        extraControls={this.getExtraControls()}
+      />
+    )
+  }
+}
+
+export default CollectionHomeChildrenList;

src/components/collections/CollectionHomeDetails.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import {
+  Accordion, AccordionSummary, AccordionDetails, Typography, Divider
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { get } from 'lodash';
+import CustomAttributesAccordian from '../common/CustomAttributesAccordian';
+
+const ACCORDIAN_HEADING_STYLES = {
+  fontWeight: 'bold',
+}
+const ACCORDIAN_DETAILS_STYLES = {
+  display: 'inline-block', width: '100%', textAlign: 'left',
+}
+
+const CollectionHomeDetails = ({ collection }) => {
+  return (
+    <div className='col-md-12'>
+      <div className='col-md-8 no-side-padding'>
+        <Accordion defaultExpanded>
+          <AccordionSummary
+            className='light-gray-bg'
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+          >
+            <Typography style={ACCORDIAN_HEADING_STYLES}>Collection Details</Typography>
+          </AccordionSummary>
+          <AccordionDetails style={ACCORDIAN_DETAILS_STYLES}>
+            <div className='col-md-12' style={{marginBottom: '5px', marginTop: '15px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Short Code
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.short_code}
+              </div>
+            </div>
+            <div className='col-md-12' style={{marginBottom: '5px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Name
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.name}
+              </div>
+            </div>
+            <div className='col-md-12' style={{marginBottom: '15px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Full Name
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.full_name}
+              </div>
+            </div>
+
+            <Divider style={{width: '100%'}} />
+            <div className='col-md-12' style={{marginBottom: '5px', marginTop: '15px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Description
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.description}
+              </div>
+            </div>
+            <div className='col-md-12' style={{marginBottom: '5px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Collection Type
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.collection_type}
+              </div>
+            </div>
+            <div className='col-md-12' style={{marginBottom: '5px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Website
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.website}
+              </div>
+            </div>
+            <div className='col-md-12' style={{marginBottom: '15px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Public Access
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.public_access}
+              </div>
+            </div>
+
+            <Divider style={{width: '100%'}} />
+
+            <div className='col-md-12' style={{marginBottom: '5px', marginTop: '15px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Default Locale
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.default_locale}
+              </div>
+            </div>
+            <div className='col-md-12' style={{marginBottom: '5px'}}>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Supported Locales
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.supported_locales.join(', ')}
+              </div>
+            </div>
+            <div className='col-md-12'>
+              <div style={{fontWeight: '300'}} className='col-md-4 no-left-padding'>
+                Custom Validation Schema
+              </div>
+              <div className='col-md-8 no-right-padding'>
+                {collection.custom_validation_schema || 'None'}
+              </div>
+            </div>
+          </AccordionDetails>
+        </Accordion>
+        <CustomAttributesAccordian
+          attributes={get(collection, 'extras', {})}
+          headingStyles={ACCORDIAN_HEADING_STYLES}
+          detailStyles={ACCORDIAN_DETAILS_STYLES}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default CollectionHomeDetails;