diff --git a/src/components/concepts/ConceptCollections.jsx b/src/components/concepts/ConceptCollections.jsx new file mode 100644 index 00000000..c78d45c6 --- /dev/null +++ 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 = () => (
None
); + + +const ConceptCollections = ({ concept, isLoadingCollections }) => { + const conceptCollections = get(concept, 'collections') || [] + const count = isLoadingCollections ? '' : `(${conceptCollections.length})` + return ( + + + } + aria-controls="panel1a-content" + > + {`Collection Membership ${count}`} + + + { + isLoadingCollections ? +
+ +
: ( + isEmpty(conceptCollections) ? + None() : + map(conceptCollections, collection => ( + +
+ } + colorClass="collection-bg" + /> +
+ + )) + ) + } +
+
+
+ ) +} + +export default ConceptCollections; diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx index 2fb41640..0efd7806 100644 --- 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 index a3d2ef02..db7789b6 100644 --- 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
None
} -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 }) => {
- + +
); diff --git a/src/components/concepts/ConceptHomeTabs.jsx b/src/components/concepts/ConceptHomeTabs.jsx index dcd99ef8..e1e856f7 100644 --- 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 === 0 && } + { tab === 0 && } { tab === 1 && }
diff --git a/src/components/concepts/HomeMappings.jsx b/src/components/concepts/HomeMappings.jsx index 1dac2757..510ce6a9 100644 --- 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 ( -
- - } - aria-controls="panel1a-content" - > - {`Associations ${count}`} - - - { - isLoadingMappings ? -
- -
: ( - isEmpty(conceptMappings) ? - None() : - - - - Relationship - Code - Name - Source - - - - - { - map(orderedMappings, (oMappings, mapType) => { - const key = generateRandomString() - const hasDirectMappings = !isEmpty(oMappings.direct) - return ( - - { - hasDirectMappings && - - } - - ) - }) - } - { - map(orderedMappings, (oMappings, mapType) => { - const key = generateRandomString() - const hasInDirectMappings = !isEmpty(oMappings.indirect) - return ( - - { - hasInDirectMappings && - - } - - ) - }) - } - -
- ) - } -
-
-
+ + } + aria-controls="panel1a-content" + > + {`Associations ${count}`} + + + { + isLoadingMappings ? +
+ +
: ( + isEmpty(conceptMappings) ? + None() : + + + + Relationship + Code + Name + Source + + + + + { + map(orderedMappings, (oMappings, mapType) => { + const key = generateRandomString() + const hasDirectMappings = !isEmpty(oMappings.direct) + return ( + + { + hasDirectMappings && + + } + + ) + }) + } + { + map(orderedMappings, (oMappings, mapType) => { + const key = generateRandomString() + const hasInDirectMappings = !isEmpty(oMappings.indirect) + return ( + + { + hasInDirectMappings && + + } + + ) + }) + } + +
+ ) + } +
+
) }