OpenConceptLab/ocl_issues#1458 | Sorting Associations

OpenConceptLab · Feb 21, 2023 · 923d81d · 923d81d
1 parent d04490d
commit 923d81d
Show file tree

Hide file tree

Showing 5 changed files with 243 additions and 87 deletions.
diff --git a/src/components/concepts/ConceptHierarchyRow.jsx b/src/components/concepts/ConceptHierarchyRow.jsx
@@ -18,7 +18,7 @@ const ConceptHierarchyRow = ({ mapType, concepts, source }) => {
     <React.Fragment>
       {
         mapType &&
-        <TableRow hover>
+        <TableRow>
           <TableCell align='left' rowSpan={count + 1} style={{paddingRight: '5px', verticalAlign: 'top', paddingTop: '7px'}}>
               <Chip
                 size='small'

diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import alertifyjs from 'alertifyjs';
 import Split from 'react-split'
 import { CircularProgress } from '@mui/material';
-import { get, isObject, isBoolean, has, flatten, values, isArray, find } from 'lodash';
+import { get, isObject, isBoolean, has, flatten, values, isArray, find, map } from 'lodash';
 import APIService from '../../services/APIService';
 import { toParentURI, currentUserHasAccess, recordGAAction } from '../../common/utils'
 import NotFound from '../common/NotFound';
@@ -341,6 +341,12 @@ class ConceptHome extends React.Component {
     })
   }
 
+  onUpdateMappingsSorting = mappings => {
+    Promise.all(map(mappings, mapping => APIService.new().overrideURL(mapping.url).put({id: mapping.id, sort_weight: mapping._sort_weight, comment: 'Updated Sort Weight'}))).then(() => {
+      alertifyjs.success('Mappings successfully updated.')
+    })
+  }
+
   onIncludeRetiredAssociationsToggle = includeRetired => this.setState({includeRetiredAssociations: includeRetired}, this.getMappings)
 
   getCollectionVersions() {
@@ -429,6 +435,7 @@ class ConceptHome extends React.Component {
                 parent={this.props.parent}
                 onIncludeRetiredAssociationsToggle={this.onIncludeRetiredAssociationsToggle}
                 onCreateNewMapping={canAct ? this.onCreateNewMapping : false}
+                onUpdateMappingsSorting={canAct ? this.onUpdateMappingsSorting : false}
                 onRemoveMapping={canAct ? this.onRemoveMapping : false}
                 onReactivateMapping={canAct ? this.onReactivateMapping : false}
               />

diff --git a/src/components/concepts/ConceptHomeDetails.jsx b/src/components/concepts/ConceptHomeDetails.jsx
@@ -14,7 +14,7 @@ const ACCORDIAN_DETAILS_STYLES = {
   overflowX: 'auto', width: '100%', padding: '0'
 }
 
-const ConceptHomeDetails = ({ concept, isLoadingMappings, isLoadingCollections, source, singleColumn, versions, scoped, sourceVersion, parent, onIncludeRetiredAssociationsToggle, onCreateNewMapping, onRemoveMapping, onReactivateMapping, mappedSources }) => {
+const ConceptHomeDetails = ({ concept, isLoadingMappings, isLoadingCollections, source, singleColumn, versions, scoped, sourceVersion, parent, onIncludeRetiredAssociationsToggle, onCreateNewMapping, onRemoveMapping, onReactivateMapping, mappedSources, onUpdateMappingsSorting }) => {
   const names = get(concept, 'names', [])
   const descriptions = get(concept, 'descriptions', [])
   let classes = 'col-sm-12 padding-5';
@@ -52,6 +52,7 @@ const ConceptHomeDetails = ({ concept, isLoadingMappings, isLoadingCollections,
           parent={parent}
           onIncludeRetiredToggle={onIncludeRetiredAssociationsToggle}
           onCreateNewMapping={onCreateNewMapping}
+          onUpdateMappingsSorting={onUpdateMappingsSorting}
           onRemoveMapping={onRemoveMapping}
           onReactivateMapping={onReactivateMapping}
         />

diff --git a/src/components/concepts/HomeMappings.jsx b/src/components/concepts/HomeMappings.jsx
@@ -8,8 +8,9 @@ import {
   InfoOutlined as InfoIcon,
   QueryStats as HierarchyIcon,
   Add as AddIcon,
+  WarningAmber as WarnIcon,
 } from '@mui/icons-material'
-import { get, isEmpty, forEach, map, find, compact, flatten, values } from 'lodash';
+import { get, isEmpty, forEach, map, find, compact, flatten, values, uniqBy } from 'lodash';
 import { BLUE, WHITE } from '../../common/constants'
 import { generateRandomString, dropVersion } from '../../common/utils'
 import ConceptHomeMappingsTableRows from '../mappings/ConceptHomeMappingsTableRows';
@@ -63,7 +64,9 @@ const DEFAULT_CASCADE_FILTERS = {
   returnMapTypes: undefined,
 }
 
-const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, parent, onIncludeRetiredToggle, onCreateNewMapping, mappedSources, onRemoveMapping, onReactivateMapping }) => {
+const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, parent, onIncludeRetiredToggle, onCreateNewMapping, mappedSources, onRemoveMapping, onReactivateMapping, onUpdateMappingsSorting }) => {
+  const [orderedMappings, setMappings] = React.useState({});
+  const [updatedMappings, setUpdatedMappings] = React.useState([]);
   const [mappingForm, setMappingForm] = React.useState(false)
   const [hierarchy, setHierarchy] = React.useState(false);
   const [cascadeFilters, setCascadeFilters] = React.useState({...DEFAULT_CASCADE_FILTERS});
@@ -110,13 +113,36 @@ const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, paren
     return _mappings
   }
 
-  const orderedMappings = getMappings()
+  React.useEffect(() => setMappings(getMappings()), [concept])
+
   const getCount = () => flatten(compact(flatten(map(values(orderedMappings), mapping => values(mapping))))).length
 
   const _onCreateNewMapping = onCreateNewMapping ? (payload, targetConcept, isDirect) => onCreateNewMapping(payload, targetConcept, isDirect, () => setMappingForm(false)) : false
 
   const suggested = compact([{...source, suggestionType: 'Current Source'}, ...map(mappedSources, _source => ({..._source, suggestionType: 'Mapped Source'}))])
 
+  const onSortEnd = _mappings => setUpdatedMappings(uniqBy([...updatedMappings, ..._mappings], 'version_url'))
+
+  const onSortCancel = () => {
+    setUpdatedMappings([])
+    setMappings(getMappings())
+  }
+
+  const onSortSave = () => {
+    onUpdateMappingsSorting(updatedMappings)
+    const newMappings = {...orderedMappings}
+    forEach(newMappings, data => {
+      forEach([...data.direct, ...data.indirect, ...data.self], mapping => {
+        const _mapping = find(updatedMappings, {version_url: mapping.version_url})
+        mapping.sort_weight = _mapping?._sort_weight || mapping.sort_weight
+        mapping._sort_weight = undefined
+        mapping._initial_assigned_sort_weight = undefined
+      })
+    })
+    setMappings(newMappings)
+    setUpdatedMappings([])
+  }
+
   return (
     <React.Fragment>
       <Accordion expanded style={{borderRadius: 'unset'}}>
@@ -169,11 +195,11 @@ const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, paren
                       !noAssociations &&
                         <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='right' />
+                            <TableCell align='left' style={{...tbHeadCellStyles, width: '10%'}}><b>Relationship</b></TableCell>
+                            <TableCell align='left' style={{...tbHeadCellStyles, width: '30%'}}><b>Code</b></TableCell>
+                            <TableCell align='left' style={{...tbHeadCellStyles, width: '35%'}}><b>Name</b></TableCell>
+                            <TableCell align='left' style={{...tbHeadCellStyles, width: '20%'}}><b>Source</b></TableCell>
+                            <TableCell align='right' style={{width: '5%'}}/>
                           </TableRow>
                         </TableHead>
                     }
@@ -195,6 +221,7 @@ const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, paren
                                     onRemoveMapping={onRemoveMapping}
                                     onReactivateMapping={onReactivateMapping}
                                     suggested={suggested}
+                                    onSortEnd={onSortEnd}
                                   />
                               }
                             </React.Fragment>
@@ -233,6 +260,7 @@ const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, paren
                                     onRemoveMapping={onRemoveMapping}
                                     onReactivateMapping={onReactivateMapping}
                                     suggested={suggested}
+                                    onSortEnd={onSortEnd}
                                   />
                               }
                             </React.Fragment>
@@ -256,6 +284,7 @@ const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, paren
                                     onRemoveMapping={onRemoveMapping}
                                     onReactivateMapping={onReactivateMapping}
                                     suggested={suggested}
+                                    onSortEnd={onSortEnd}
                                   />
                               }
                             </React.Fragment>
@@ -280,13 +309,29 @@ const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, paren
                   </Table>
               }
               {
-                onCreateNewMapping && !mappingForm &&
+                onCreateNewMapping && !mappingForm && isEmpty(updatedMappings) &&
                   <div className='col-xs-12' style={{padding: '0 5px'}}>
                     <Button endIcon={<AddIcon fontSize='inherit'/>} size='small' style={{fontWeight: 600}} onClick={() => setMappingForm(true)}>
                       Add New Mapping
                     </Button>
                   </div>
               }
+
+              {
+                onCreateNewMapping && !isEmpty(updatedMappings) &&
+                  <div className='col-xs-12 flex-vertical-center' style={{padding: '10px', backgroundColor: BLUE, color: WHITE}}>
+                    <WarnIcon size='small' style={{marginRight: '10px'}} />
+                    {updatedMappings.length} change(s) made. Saving will create a new Mapping Version.
+
+                    <Button size='small' color='primary' variant='text' style={{marginLeft: '5px', boxShadow: 'none', color: 'rgba(255, 255, 255, 0.7)'}} onClick={onSortCancel}>
+                      Undo
+                    </Button>
+                    <Button size='small' color='primary' variant='text' style={{color: WHITE}} onClick={onSortSave}>
+                      Save
+                    </Button>
+                  </div>
+              }
+
             </div>
           }
         </AccordionDetails>