OpenConceptLab/ocl_issues#754 | concept/mapping history | showing ret…

…ired label
OpenConceptLab · May 14, 2021 · a045a16 · a045a16
1 parent 0a672e3
commit a045a16
Showing 1 changed file with 55 additions and 42 deletions.
diff --git a/src/components/common/VersionList.jsx b/src/components/common/VersionList.jsx
@@ -11,6 +11,8 @@ import {
 import LastUpdatedOnLabel from './LastUpdatedOnLabel';
 import Tip from './Tip';
 import SourceChildVersionAssociationWithContainer from './SourceChildVersionAssociationWithContainer';
+import RetiredChip from '../common/RetiredChip';
+
 
 const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
@@ -80,54 +82,65 @@ const VersionList = ({ versions, resource }) => {
             {
               isEmpty(sortedVersions) ?
               None() :
-              map(sortedVersions, (version, index) => (
-                <React.Fragment key={index}>
-                  <div className='col-md-12 flex-vertical-center'>
-                    {
-                      canSelect &&
-                      <div className='col-md-1 no-side-padding'>
-                        <Checkbox size='small' onChange={event => onSelectChange(event, version.version_url)} />
-                      </div>
-                    }
-                    <div className={`${gridClass} no-side-padding flex-vertical-center`} style={{margin: '10px 0'}}>
-                      <div className='col-md-11 no-left-padding'>
-                        <div className='col-md-12 no-side-padding'>
+              map(sortedVersions, (version, index) => {
+                const isRetired = version.retired
+                return (
+                  <React.Fragment key={index}>
+                    <div className='col-md-12 flex-vertical-center'>
+                      {
+                        canSelect &&
+                        <div className='col-md-1 no-side-padding'>
+                          <Checkbox size='small' onChange={event => onSelectChange(event, version.version_url)} />
+                        </div>
+                      }
+                      <div className={`${gridClass} no-side-padding flex-vertical-center`} style={{margin: '10px 0'}}>
+                        <div className='col-md-11 no-left-padding flex-vertical-center'>
+                          <div className={isRetired ? 'col-md-10 no-side-padding' : 'col-md-12 no-side-padding'}>
+                            <div className='col-md-12 no-side-padding'>
+                              {
+                                version.update_comment ?
+                                <span>{version.update_comment}</span> :
+                                <span className='gray-italics-small'>No update comment</span>
+                              }
+                            </div>
+                            <div className='col-md-12 no-side-padding' style={{marginTop: '5px'}}>
+                              <LastUpdatedOnLabel
+                                by={version.version_created_by}
+                                date={version.version_created_on}
+                              />
+                            </div>
+                          </div>
                           {
-                            version.update_comment ?
-                            <span>{version.update_comment}</span> :
-                            <span className='gray-italics-small'>No update comment</span>
+                            isRetired &&
+                            <div className='col-md-2 no-right-padding'>
+                              <RetiredChip size='small' />
+                            </div>
                           }
                         </div>
-                        <div className='col-md-12 no-side-padding' style={{marginTop: '5px'}}>
-                          <LastUpdatedOnLabel
-                            by={version.version_created_by}
-                            date={version.version_created_on}
-                          />
+                        <div className='col-md-1 no-right-padding'>
+                          <Tooltip arrow title='Version Link'>
+                            <IconButton href={`#${version.version_url}`} color='primary' size='small'>
+                              <SearchIcon fontSize='inherit' />
+                            </IconButton>
+                          </Tooltip>
                         </div>
                       </div>
-                      <div className='col-md-1 no-right-padding'>
-                        <Tooltip arrow title='Version Link'>
-                          <IconButton href={`#${version.version_url}`} color='primary' size='small'>
-                            <SearchIcon fontSize='inherit' />
-                          </IconButton>
-                        </Tooltip>
-                      </div>
                     </div>
-                  </div>
-                  <div className='col-md-12 no-side-padding' style={{textAlign: 'center', marginTop: '-15px'}}>
-                    <SourceChildVersionAssociationWithContainer
-                      associatedWith={{
-                        source: version.source_versions_associated_with,
-                        collection: version.collection_versions_associated_with
-                      }}
-                    />
-                  </div>
-                  {
-                    !isAssociated(version) && ((index + 1) < versions.length) &&
-                    <Divider style={{width: '100%'}} />
-                  }
-                </React.Fragment>
-              ))
+                    <div className='col-md-12 no-side-padding' style={{textAlign: 'center', marginTop: '-15px'}}>
+                      <SourceChildVersionAssociationWithContainer
+                        associatedWith={{
+                          source: version.source_versions_associated_with,
+                          collection: version.collection_versions_associated_with
+                        }}
+                      />
+                    </div>
+                    {
+                      !isAssociated(version) && ((index + 1) < versions.length) &&
+                      <Divider style={{width: '100%'}} />
+                    }
+                  </React.Fragment>
+                )
+              })
             }
           </AccordionDetails>
         </Accordion>