OpenConceptLab/ocl_issues#992 | Concept Home | collection membership …

…panel
OpenConceptLab · Sep 28, 2021 · e2b00b6 · e2b00b6
1 parent 0a5084d
commit e2b00b6
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 77 deletions.
diff --git a/src/components/concepts/ConceptCollections.jsx b/src/components/concepts/ConceptCollections.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Link } from 'react-router-dom'
+import {
+  Accordion, AccordionSummary, AccordionDetails, Typography, CircularProgress
+} from '@material-ui/core';
+import { Loyalty as LoyaltyIcon } from '@material-ui/icons'
+import { map, get, isEmpty } from 'lodash';
+import ResourceLabel from '../common/ResourceLabel';
+import { DARKGRAY } from '../../common/constants';
+
+const ACCORDIAN_HEADING_STYLES = {
+  fontWeight: 'bold',
+}
+const ACCORDIAN_DETAILS_STYLES = {
+  maxHeight: '300px', overflow: 'auto', display: 'inline-block', width: '100%', padding: '0'
+}
+
+const None = () => (<div style={{padding: '20px', fontWeight: '300'}}>None</div>);
+
+
+const ConceptCollections = ({ concept, isLoadingCollections }) => {
+  const conceptCollections = get(concept, 'collections') || []
+  const count = isLoadingCollections ? '' : `(${conceptCollections.length})`
+  return (
+    <React.Fragment>
+      <Accordion defaultExpanded>
+        <AccordionSummary
+          className='light-gray-bg less-paded-accordian-header'
+          expandIcon={<span />}
+          aria-controls="panel1a-content"
+        >
+          <Typography style={ACCORDIAN_HEADING_STYLES}>{`Collection Membership ${count}`}</Typography>
+        </AccordionSummary>
+        <AccordionDetails style={ACCORDIAN_DETAILS_STYLES}>
+          {
+            isLoadingCollections ?
+            <div style={{textAlign: 'center', padding: '10px'}}>
+              <CircularProgress />
+            </div> : (
+              isEmpty(conceptCollections) ?
+              None() :
+              map(conceptCollections, collection => (
+                <Link style={{display: 'inline-block', width: '100%'}} key={collection.version_url} to={collection.version_url}>
+                  <div style={{padding: '10px 15px'}}>
+                    <ResourceLabel
+                      owner={collection.owner}
+                      id={collection.short_code}
+                      name={collection.version === 'HEAD' ? collection.name : `${collection.name} / ${collection.version}`}
+                      icon={<LoyaltyIcon fontSize='small' style={{width: '10pt', color: DARKGRAY}}/>}
+                      colorClass="collection-bg"
+                    />
+                  </div>
+                </Link>
+              ))
+            )
+          }
+        </AccordionDetails>
+      </Accordion>
+    </React.Fragment>
+  )
+}
+
+export default ConceptCollections;
diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
@@ -27,9 +27,11 @@ class ConceptHome extends React.Component {
       permissionDenied: false,
       isLoading: true,
       isLoadingMappings: false,
+      isLoadingCollections: false,
       concept: {},
       versions: [],
       mappings: [],
+      collections: [],
       tab: this.getDefaultTabIndex(),
       openHierarchy: isBoolean(props.openHierarchy) ? props.openHierarchy : false,
     }
@@ -99,8 +101,10 @@ class ConceptHome extends React.Component {
                       this.getHierarchy()
                       if(this.state.tab === 1)
                         this.getVersions()
-                      else
+                      else {
                         this.getMappings()
+                        this.getCollectionVersions()
+                      }
                     })
                 })
 
@@ -159,6 +163,17 @@ class ConceptHome extends React.Component {
     })
   }
 
+  getCollectionVersions() {
+    this.setState({isLoadingCollections: true}, () => {
+      APIService.new()
+                .overrideURL(encodeURI(this.getConceptURLFromPath()) + 'collection-versions/?limit=100')
+                .get()
+                .then(response => {
+                  this.setState({collections: response.data, isLoadingCollections: false})
+                })
+    })
+  }
+
   onTabChange = (event, value) => this.setState({tab: value}, () => value === 1 && this.getVersions())
 
   isVersionedObject() {
@@ -193,7 +208,7 @@ class ConceptHome extends React.Component {
     const {
       concept, versions, mappings, isLoadingMappings, isLoading, tab,
       notFound, accessDenied, permissionDenied, hierarchy, openHierarchy, newChildren,
-      isLoadingHierarchy
+      isLoadingHierarchy, collections, isLoadingCollections
     } = this.state;
     const currentURL = this.getConceptURLFromPath()
     const isVersionedObject = this.isVersionedObject()
@@ -225,6 +240,8 @@ class ConceptHome extends React.Component {
               versions={versions}
               mappings={mappings}
               isLoadingMappings={isLoadingMappings}
+              collections={collections}
+              isLoadingCollections={isLoadingCollections}
               currentURL={currentURL}
               isVersionedObject={isVersionedObject}
               onTabChange={this.onTabChange}

diff --git a/src/components/concepts/ConceptHomeDetails.jsx b/src/components/concepts/ConceptHomeDetails.jsx
@@ -6,6 +6,7 @@ import { map, get, isEmpty } from 'lodash';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ConceptDetailsLocale from './ConceptDetailsLocale';
 import HomeMappings from './HomeMappings';
+import ConceptCollections from './ConceptCollections';
 
 const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
@@ -18,7 +19,7 @@ const None = () => {
   return <div style={{padding: '20px', fontWeight: '300'}}>None</div>
 }
 
-const ConceptHomeDetails = ({ concept, currentURL, isLoadingMappings }) => {
+const ConceptHomeDetails = ({ concept, currentURL, isLoadingMappings, isLoadingCollections }) => {
   const names = get(concept, 'names', [])
   const descriptions = get(concept, 'descriptions', [])
   const namesCount = names.length;
@@ -64,7 +65,8 @@ const ConceptHomeDetails = ({ concept, currentURL, isLoadingMappings }) => {
         </Accordion>
       </div>
       <div className='col-md-6 no-right-padding'>
-        <HomeMappings concept={concept} currentURL={currentURL} isLoadingMappings={isLoadingMappings} />
+        <HomeMappings concept={concept} isLoadingMappings={isLoadingMappings} />
+        <ConceptCollections concept={concept} isLoadingCollections={isLoadingCollections} />
       </div>
     </React.Fragment>
   );

diff --git a/src/components/concepts/ConceptHomeTabs.jsx b/src/components/concepts/ConceptHomeTabs.jsx
@@ -6,10 +6,10 @@ import VersionList from '../common/VersionList';
 const ConceptHomeTabs = props => {
   const {
     tab, concept, versions, mappings, currentURL, isVersionedObject, isLoadingMappings, noRedirect,
-    onTabChange
+    onTabChange, collections, isLoadingCollections
   } = props;
   const resourceRelativeURL = isVersionedObject ? concept.url : concept.version_url;
-  const conceptWithMappings = {...concept, mappings: mappings}
+  const conceptWithMappings = {...concept, mappings: mappings, collections: collections}
 
   const detailsRedirectionProps = noRedirect ? {} : {component: "a", href: `#${resourceRelativeURL}details/`}
   const historyRedirectionProps = noRedirect ? {} : {component: "a", href: `#${resourceRelativeURL}history/`}
@@ -21,7 +21,7 @@ const ConceptHomeTabs = props => {
         <Tab label="History" {...historyRedirectionProps} />
       </Tabs>
       <div className='sub-tab-container' style={{display: 'flex', height: 'auto', width: '100%', minHeight: '100vh'}}>
-        { tab === 0 && <ConceptHomeDetails concept={conceptWithMappings} isLoadingMappings={isLoadingMappings} currentURL={currentURL} /> }
+        { tab === 0 && <ConceptHomeDetails concept={conceptWithMappings} isLoadingMappings={isLoadingMappings} currentURL={currentURL} isLoadingCollections={isLoadingCollections} /> }
         { tab === 1 && <VersionList versions={versions} resource='concept' /> }
       </div>
     </div>

diff --git a/src/components/concepts/HomeMappings.jsx b/src/components/concepts/HomeMappings.jsx
@@ -39,76 +39,74 @@ const HomeMappings = ({ concept, isLoadingMappings }) => {
   const orderedMappings = groupMappings(concept, conceptMappings)
 
   return (
-    <div className='col-md-12 no-side-padding'>
-      <Accordion defaultExpanded>
-        <AccordionSummary
-          className='light-gray-bg less-paded-accordian-header'
-          expandIcon={<span />}
-          aria-controls="panel1a-content"
-        >
-          <Typography style={ACCORDIAN_HEADING_STYLES}>{`Associations ${count}`}</Typography>
-        </AccordionSummary>
-        <AccordionDetails style={ACCORDIAN_DETAILS_STYLES}>
-          {
-            isLoadingMappings ?
-            <div style={{textAlign: 'center', padding: '10px'}}>
-              <CircularProgress />
-            </div> : (
-              isEmpty(conceptMappings) ?
-              None() :
-              <Table size="small" aria-label="concept-home-mappings" className='nested-mappings'>
-                <TableHead>
-                  <TableRow style={{backgroundColor: BLUE, color: WHITE}}>
-                    <TableCell align='left' style={tbHeadCellStyles}><b>Relationship</b></TableCell>
-                    <TableCell align='left' style={tbHeadCellStyles}><b>Code</b></TableCell>
-                    <TableCell align='left' style={tbHeadCellStyles}><b>Name</b></TableCell>
-                    <TableCell align='left' style={tbHeadCellStyles}><b>Source</b></TableCell>
-                    <TableCell align='left' />
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {
-                    map(orderedMappings, (oMappings, mapType) => {
-                      const key = generateRandomString()
-                      const hasDirectMappings = !isEmpty(oMappings.direct)
-                      return (
-                        <React.Fragment key={key}>
-                          {
-                            hasDirectMappings &&
-                            <ConceptHomeMappingsTableRows
-                              mappings={oMappings.direct}
-                              mapType={mapType}
-                            />
-                          }
-                        </React.Fragment>
-                      )
-                    })
-                  }
-                  {
-                    map(orderedMappings, (oMappings, mapType) => {
-                      const key = generateRandomString()
-                      const hasInDirectMappings = !isEmpty(oMappings.indirect)
-                      return (
-                        <React.Fragment key={key}>
-                          {
-                            hasInDirectMappings &&
-                            <ConceptHomeMappingsTableRows
-                              mappings={oMappings.indirect}
-                              mapType={mapType}
-                              isIndirect
-                            />
-                          }
-                        </React.Fragment>
-                      )
-                    })
-                  }
-                </TableBody>
-              </Table>
-            )
-          }
-        </AccordionDetails>
-      </Accordion>
-    </div>
+    <Accordion defaultExpanded>
+      <AccordionSummary
+        className='light-gray-bg less-paded-accordian-header'
+        expandIcon={<span />}
+        aria-controls="panel1a-content"
+      >
+        <Typography style={ACCORDIAN_HEADING_STYLES}>{`Associations ${count}`}</Typography>
+      </AccordionSummary>
+      <AccordionDetails style={ACCORDIAN_DETAILS_STYLES}>
+        {
+        isLoadingMappings ?
+        <div style={{textAlign: 'center', padding: '10px'}}>
+          <CircularProgress />
+        </div> : (
+          isEmpty(conceptMappings) ?
+          None() :
+          <Table size="small" aria-label="concept-home-mappings" className='nested-mappings'>
+            <TableHead>
+              <TableRow style={{backgroundColor: BLUE, color: WHITE}}>
+                <TableCell align='left' style={tbHeadCellStyles}><b>Relationship</b></TableCell>
+                <TableCell align='left' style={tbHeadCellStyles}><b>Code</b></TableCell>
+                <TableCell align='left' style={tbHeadCellStyles}><b>Name</b></TableCell>
+                <TableCell align='left' style={tbHeadCellStyles}><b>Source</b></TableCell>
+                <TableCell align='left' />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {
+                map(orderedMappings, (oMappings, mapType) => {
+                  const key = generateRandomString()
+                  const hasDirectMappings = !isEmpty(oMappings.direct)
+                  return (
+                    <React.Fragment key={key}>
+                      {
+                        hasDirectMappings &&
+                        <ConceptHomeMappingsTableRows
+                          mappings={oMappings.direct}
+                          mapType={mapType}
+                        />
+                      }
+                    </React.Fragment>
+                  )
+                })
+              }
+              {
+                map(orderedMappings, (oMappings, mapType) => {
+                  const key = generateRandomString()
+                  const hasInDirectMappings = !isEmpty(oMappings.indirect)
+                  return (
+                    <React.Fragment key={key}>
+                      {
+                        hasInDirectMappings &&
+                        <ConceptHomeMappingsTableRows
+                          mappings={oMappings.indirect}
+                          mapType={mapType}
+                          isIndirect
+                        />
+                      }
+                    </React.Fragment>
+                  )
+                })
+              }
+            </TableBody>
+          </Table>
+        )
+        }
+      </AccordionDetails>
+    </Accordion>
   )
 }