Source/Collection | expand more for attributes

OpenConceptLab · Dec 8, 2020 · 66e88a1 · 66e88a1
1 parent bbc00f4
commit 66e88a1
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 0 deletions.
diff --git a/src/components/collections/CollectionHomeHeader.jsx b/src/components/collections/CollectionHomeHeader.jsx
@@ -13,6 +13,7 @@ import VersionButton from '../common/VersionButton';
 import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
 import ExternalIdLabel from '../common/ExternalIdLabel';
 import CustomAttributesPopup from '../common/CustomAttributesPopup';
+import CollapsibleAttributes from '../common/CollapsibleAttributes';
 
 const CollectionHomeHeader = ({
   collection, isVersionedObject, versionedObjectURL, currentURL
@@ -71,6 +72,16 @@ const CollectionHomeHeader = ({
               <CustomAttributesPopup attributes={collection.extras} />
             </span>
           </div>
+          <div className='col-md-12 no-side-padding'>
+            <CollapsibleAttributes
+              object={collection}
+              urlAttrs={['canonical_url']}
+              textAttrs={['publisher', 'purpose', 'copyright', 'preferred_source', 'custom_resources_linked_source']}
+              dateAttrs={['revision_date']}
+              jsonAttrs={['identifier', 'contact', 'jurisdiction']}
+              booleanAttrs={['immutable']}
+            />
+          </div>
           <div className='col-md-12 no-side-padding flex-vertical-center' style={{paddingTop: '10px'}}>
             <span>
               <LastUpdatedOnLabel

diff --git a/src/components/common/CollapsibleAttributes.jsx b/src/components/common/CollapsibleAttributes.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import {
+  ArrowDropDown as ArrowDownIcon, ArrowDropUp as ArrowUpIcon
+} from '@material-ui/icons';
+import { Collapse, Chip } from '@material-ui/core';
+import { map, get, startCase, isEmpty, isArray } from 'lodash';
+import { formatDate } from '../../common/utils';
+
+
+const CollapsibleAttributes = ({
+  object, urlAttrs, jsonAttrs, textAttrs, dateAttrs, booleanAttrs
+}) => {
+  const [expand, setExpand] = React.useState(false);
+  const onExpand = () => setExpand(!expand);
+
+  return (
+    <React.Fragment>
+      <div className='col-md-12 no-side-padding' style={{marginLeft: '-8px', marginTop: '5px'}}>
+        <Chip
+          label="More"
+          onClick={onExpand}
+          color="primary"
+          variant="outlined"
+          size="small"
+          deleteIcon={expand ? <ArrowUpIcon fontSize="inherit" /> : <ArrowDownIcon fontSize="inherit" /> }
+          onDelete={onExpand}
+          style={{border: 'none'}}
+        />
+      </div>
+      <Collapse in={expand} className="col-md-8" style={{fontSize: '95%', padding: '5px', display: `${expand ? 'block' : 'none'}`}}>
+        {
+          isArray(urlAttrs) && map(urlAttrs, attr => (
+            <div className='col-md-6 no-side-padding flex-vertical-center'>
+              <span className='italic' style={{marginRight: '10px'}}>
+                {`${startCase(attr)}:`}
+              </span>
+              <span>
+                {
+                  get(object, attr) ?
+                  <a href={object[attr]} target="_blank" rel="noopener noreferrer">
+                    {object[attr]}
+                  </a> :
+                  'None'
+                }
+              </span>
+            </div>
+          ))
+        }
+        {
+          isArray(textAttrs) && map(textAttrs, attr => (
+            <div className='col-md-6 no-side-padding flex-vertical-center'>
+              <span className='italic' style={{marginRight: '10px'}}>
+                {`${startCase(attr)}:`}
+              </span>
+              <span> {get(object, attr) || 'None'} </span>
+            </div>
+          ))
+        }
+        {
+          isArray(booleanAttrs) && map(booleanAttrs, attr => (
+            <div className='col-md-6 no-side-padding flex-vertical-center'>
+              <span className='italic' style={{marginRight: '10px'}}>
+                {`${startCase(attr)}:`}
+              </span>
+              <span> {get(object, attr) ? 'True' : 'False'} </span>
+            </div>
+          ))
+        }
+        {
+          isArray(dateAttrs) && map(dateAttrs, attr => (
+            <div className='col-md-6 no-side-padding flex-vertical-center'>
+              <span className='italic' style={{marginRight: '10px'}}>
+                {`${startCase(attr)}:`}
+              </span>
+              <span>
+                {get(object, attr) ? formatDate(object[attr]) : 'None'}
+              </span>
+            </div>
+          ))
+        }
+        {
+          isArray(jsonAttrs) && map(jsonAttrs, attr => (
+            <div className='col-md-6 no-side-padding flex-vertical-center'>
+              <span className='italic' style={{marginRight: '10px'}}>
+                {`${startCase(attr)}:`}
+              </span>
+              <span>
+                {
+                  isEmpty(get(object, attr)) ?
+                  'None':
+                  <pre>{JSON.stringify(object[attr], undefined, 2)}</pre>
+                }
+              </span>
+            </div>
+          ))
+        }
+      </Collapse>
+    </React.Fragment>
+  )
+}
+
+export default CollapsibleAttributes;
diff --git a/src/components/sources/SourceHomeHeader.jsx b/src/components/sources/SourceHomeHeader.jsx
@@ -13,6 +13,7 @@ import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
 import ExternalIdLabel from '../common/ExternalIdLabel';
 import PublicAccessChip from '../common/PublicAccessChip';
 import CustomAttributesPopup from '../common/CustomAttributesPopup';
+import CollapsibleAttributes from '../common/CollapsibleAttributes';
 
 const SourceHomeHeader = ({
   source, isVersionedObject, versionedObjectURL, currentURL
@@ -69,6 +70,15 @@ const SourceHomeHeader = ({
               <CustomAttributesPopup attributes={source.extras} />
             </span>
           </div>
+          <div className='col-md-12 no-side-padding'>
+            <CollapsibleAttributes
+              object={source}
+              urlAttrs={['canonical_url']}
+              textAttrs={['publisher', 'purpose', 'copyright', 'content_type']}
+              dateAttrs={['revision_date']}
+              jsonAttrs={['identifier', 'contact', 'jurisdiction']}
+            />
+          </div>
           <div className='col-md-12 no-side-padding flex-vertical-center' style={{paddingTop: '10px'}}>
             <span>
               <LastUpdatedOnLabel