Collections | Version & Expansions UI | no expansions options and shr…

…unk header
OpenConceptLab · Dec 2, 2021 · 84e04d4 · 84e04d4
1 parent 5882550
commit 84e04d4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/src/components/collections/CollectionHome.jsx b/src/components/collections/CollectionHome.jsx
@@ -242,6 +242,7 @@ class CollectionHome extends React.Component {
               currentURL={currentURL}
               config={selectedConfig}
               expansion={expansion}
+              tab={tab}
             />
             <CollectionHomeTabs
               tab={tab}

diff --git a/src/components/collections/CollectionHomeHeader.jsx b/src/components/collections/CollectionHomeHeader.jsx
@@ -39,11 +39,13 @@ const DEFAULT_VISIBLE_ATTRIBUTES = COLLECTION_DEFAULT_CONFIG.config.header.visib
 const DEFAULT_INVISIBLE_ATTRIBUTES = COLLECTION_DEFAULT_CONFIG.config.header.invisibleAttributes
 
 const CollectionHomeHeader = ({
-  collection, isVersionedObject, versionedObjectURL, currentURL, config, expansion
+  collection, isVersionedObject, versionedObjectURL, currentURL, config, expansion, tab
 }) => {
   const downloadFileName = isVersionedObject ? `${collection.type}-${collection.short_code}` : `${collection.type}-${collection.short_code}-${collection.id}`;
+  const tabConfig = get(config, `config.tabs.${tab}`);
   const hasAccess = currentUserHasAccess();
-  const [openHeader, setOpenHeader] = React.useState(!get(config, 'config.header.shrink', false));
+  const isExpandedHeader = () => !get(config, 'config.header.shrink', false) && tabConfig.type !== 'versions';
+  const [openHeader, setOpenHeader] = React.useState(isExpandedHeader);
   const [deleteDialog, setDeleteDialog] = React.useState(false);
   const [logoURL, setLogoURL] = React.useState(collection.logo_url)
   const [collectionForm, setCollectionForm] = React.useState(false);
@@ -84,7 +86,7 @@ const CollectionHomeHeader = ({
 
 
   React.useEffect(
-    () => setOpenHeader(!get(config, 'config.header.shrink', false)),
+    () => setOpenHeader(isExpandedHeader()),
     [get(config, 'config.header.shrink')]
   )
 

diff --git a/src/components/collections/CollectionHomeTabs.jsx b/src/components/collections/CollectionHomeTabs.jsx
@@ -31,6 +31,7 @@ const CollectionHomeTabs = props => {
   const [referenceForm, setReferenceForm] = React.useState(false);
   const [expansionForm, setExpansionForm] = React.useState(false);
   const [configFormWidth, setConfigFormWidth] = React.useState(false);
+  const [selectedVersion, setSelectedVersion] = React.useState();
   const onNewClick = resource => {
     if(resource === 'version')
       setVersionForm(true)
@@ -39,6 +40,12 @@ const CollectionHomeTabs = props => {
     if(resource === 'expansion')
       setExpansionForm(true)
   }
+
+  const onCreateExpansionClick = version => {
+    setSelectedVersion(version)
+    setExpansionForm(true)
+  }
+
   const currentResourceURL = isVersionedObject ? collection.url : (expansion.url || collection.version_url)
   const getTABHref = tabConfig => {
     let href = '';
@@ -122,7 +129,7 @@ const CollectionHomeTabs = props => {
         }
         {
           !isInvalidTabConfig && selectedTabConfig.type === 'versions' &&
-          <VersionList2 versions={versions} resource='collection' canEdit={hasAccess} onUpdate={onVersionUpdate} isLoading={isLoadingVersions} />
+          <VersionList2 versions={versions} resource='collection' canEdit={hasAccess} onUpdate={onVersionUpdate} isLoading={isLoadingVersions} onCreateExpansionClick={onCreateExpansionClick} />
         }
         {
           !isInvalidTabConfig && selectedTabConfig.type === 'text' &&
@@ -176,7 +183,7 @@ const CollectionHomeTabs = props => {
         isOpen={expansionForm}
         onClose={() => setExpansionForm(false)}
         formComponent={
-          <ExpansionForm onCancel={() => setExpansionForm(false)} reloadOnSuccess={tab==3} version={collection} versions={versions} />
+          <ExpansionForm onCancel={() => setExpansionForm(false)} reloadOnSuccess={tab==3} version={selectedVersion || collection} versions={versions} />
         }
       />
     </div>

diff --git a/src/components/collections/VersionList2.jsx b/src/components/collections/VersionList2.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import alertifyjs from 'alertifyjs';
 import {
-  Divider, Tooltip,
+  Divider, Tooltip, Button,
   IconButton, CircularProgress, Card, CardContent
 } from '@mui/material';
 import {
@@ -51,7 +51,7 @@ const deleteVersion = version => getService(version).delete().then(response => h
 const updateVersion = (version, data, verb, successCallback) => getService(version).put(data).then(response => handleResponse(response, version.type, verb, updatedVersion => successCallback(merge(version, updatedVersion))))
 const deleteExpansion = expansion => APIService.new().overrideURL(expansion.url).delete().then(response => handleExpansionResponse(response, 'Deleted'))
 
-const VersionList2 = ({ versions, canEdit, onUpdate }) => {
+const VersionList2 = ({ versions, canEdit, onUpdate, onCreateExpansionClick }) => {
   const resource = 'collection'
   const sortedVersions = headFirst(versions)
   const [versionForm, setVersionForm] = React.useState(false);
@@ -116,7 +116,7 @@ const VersionList2 = ({ versions, canEdit, onUpdate }) => {
 
     service.appendToUrl('expansions/?includeSummary=true&verbose=true').get().then(response => {
       setExpansions(prevExpansions => ({...prevExpansions, [version.uuid]: getFormattedExpansions(version, response.data)}))
-      setLoadingExpansions({...loadingExpansions, [version.uuid]: false})
+      setLoadingExpansions(prevLoading => ({...prevLoading, [version.uuid]: false}))
     })
   }
 
@@ -151,7 +151,7 @@ const VersionList2 = ({ versions, canEdit, onUpdate }) => {
       {
         map(sortedVersions, version => {
           const isHEAD = version.id.toLowerCase() === 'head';
-          const isLoadingExpansions = get(loadingExpansions, version.uuid)
+          const isLoadingExpansions = isExpansionsLoading(version)
           const style = {margin: '5px 0'}
           const versionExpansions = get(expansions, version.uuid, [])
           return (
@@ -254,6 +254,16 @@ const VersionList2 = ({ versions, canEdit, onUpdate }) => {
                       <CircularProgress />
                     </div> :
                     (
+                      isEmpty(versionExpansions) && loadingExpansions[version.uuid] === false ?
+                      <div className='flex-column-center' style={{height: '100%'}}>
+                        <Button
+                          onClick={() => onCreateExpansionClick(version)}
+                          variant="text"
+                          size='small'
+                          style={{textTransform: 'inherit'}}>
+                          Create First Expansion for this version
+                        </Button>
+                      </div> :
                       map(versionExpansions, expansion => {
                         const isDefault = expansion.default
                         const isAuto = expansion.auto