ref: refactor to confirm close modal without save

ComPlat · Apr 2, 2024 · f923c46 · f923c46
1 parent 299ee83
commit f923c46
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 28 deletions.
diff --git a/app/packs/src/apps/mydb/elements/details/screens/ScreenDetails.js b/app/packs/src/apps/mydb/elements/details/screens/ScreenDetails.js
@@ -34,6 +34,7 @@ import CommentActions from 'src/stores/alt/actions/CommentActions';
 import CommentModal from 'src/components/common/CommentModal';
 import { commentActivation } from 'src/utilities/CommentHelper';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
+import { handleSaveDataset } from 'src/utilities/ElementUtils';
 
 export default class ScreenDetails extends Component {
   constructor(props) {
@@ -50,6 +51,7 @@ export default class ScreenDetails extends Component {
     this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
     this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
     this.updateComponentGraphData = this.updateComponentGraphData.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   componentDidMount() {
@@ -83,14 +85,8 @@ export default class ScreenDetails extends Component {
         activeTab: state.screen.activeTab
       });
     }
-  }
-
-  onUIStoreChange(state) {
-    if (state.screen.activeTab != this.state.activeTab) {
-      this.setState({
-        activeTab: state.screen.activeTab
-      });
-    }
+    const { screen } = this.state;
+    handleSaveDataset(screen, state, this.handleSubmit);
   }
 
   onTabPositionChanged(visible) {
@@ -99,7 +95,7 @@ export default class ScreenDetails extends Component {
 
   handleSubmit() {
     const { screen } = this.state;
-    LoadingActions.start();
+    LoadingActions.start.defer();
 
     if (screen.isNew) {
       ElementActions.createScreen(screen);

diff --git a/app/packs/src/components/container/ContainerDatasetModal.js b/app/packs/src/components/container/ContainerDatasetModal.js
@@ -45,17 +45,21 @@ export default class ContainerDatasetModal extends Component {
     if (event && event.type === 'keydown' && event.key === 'Escape') {
       this.handleSave();
     } else {
-      this.props.onHide();
+      if (confirm('Changes are kept for this session. Remember to save the element itself to persist changes.')) {
+        this.props.onHide();
+      }
     }
   }
 
   handleSave() {
-    this.datasetInput.current.handleSave();
-    this.props.onChange({
-      ...this.props.datasetContainer,
-      ...this.datasetInput.current.state.datasetContainer,
-      name: this.state.localName
-    });
+    if (confirm('Changes are kept for this session. Remember to save the element itself to persist changes.')) {
+      this.datasetInput.current.handleSave();
+      this.props.onChange({
+        ...this.props.datasetContainer,
+        ...this.datasetInput.current.state.datasetContainer,
+        name: this.state.localName
+      });
+    }
   }
 
   handleSaveWithoutClose() {
@@ -206,11 +210,11 @@ export default class ContainerDatasetModal extends Component {
             display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0, width: '100%'
           }}
           >
-            <div>
+            {/* <div>
               <small style={{ alignSelf: 'center' }}>
                 Changes are kept for this session. Remember to save the element itself to persist changes.
               </small>
-            </div>
+            </div> */}
             <div style={{ alignSelf: 'right', marginLeft: 'auto' }}>
               {/* <Button
                 style={{ marginRight: '10px' }}
@@ -221,16 +225,16 @@ export default class ContainerDatasetModal extends Component {
               <Button
                 bsStyle="primary"
                 style={{ alignSelf: 'center', marginLeft: 'auto' }}
-                onClick={this.handleSave}
+                onClick={this.handleSaveWithoutClose}
               >
-                Keep Changes
+                Save
               </Button>
               <Button
-                bsStyle="primary"
-                style={{ alignSelf: 'center', marginLeft: 'auto' }}
-                onClick={this.handleSaveWithoutClose}
+                bsStyle="danger"
+                style={{ alignSelf: 'center', marginLeft: '10px' }}
+                onClick={this.handleSave}
               >
-                Save without close
+                Close
               </Button>
             </div>
           </Modal.Footer>

diff --git a/app/packs/src/components/generic/GenericElDetails.js b/app/packs/src/components/generic/GenericElDetails.js
@@ -33,6 +33,7 @@ import GenericAttachments from 'src/components/generic/GenericAttachments';
 import { SegmentTabs } from 'src/components/generic/SegmentDetails';
 import RevisionViewerBtn from 'src/components/generic/RevisionViewerBtn';
 import OpenCalendarButton from 'src/components/calendar/OpenCalendarButton';
+import { handleSaveDataset } from 'src/utilities/ElementUtils';
 
 const onNaviClick = (type, id) => {
   const { currentCollection, isSync } = UIStore.getState();
@@ -94,6 +95,8 @@ export default class GenericElDetails extends Component {
         });
       }
     }
+    const { genericEl } = this.state;
+    handleSaveDataset(genericEl, state, this.handleSubmit, false);
   }
 
   handleElChanged(el) {
@@ -142,7 +145,7 @@ export default class GenericElDetails extends Component {
       });
       return false;
     }
-    LoadingActions.start();
+    LoadingActions.start.defer();
     genericEl.name = genericEl.name.trim();
     // filter is_deleted analysis
     const { container } = genericEl;

diff --git a/app/packs/src/stores/alt/stores/UIStore.js b/app/packs/src/stores/alt/stores/UIStore.js
@@ -506,10 +506,11 @@ class UIStore {
   handleSaveAttachmentDataset(data) {
     const { isSaving } = this.state.containerDataSet;
     const { elementID, elementType, datasetID } = data;
+    const savingState = elementID === '' ? false : !isSaving;
     this.state.containerDataSet = {
       elementID: elementID,
       elementType: elementType,
-      isSaving: !isSaving,
+      isSaving: savingState,
       datasetID: datasetID,
     }
   }

diff --git a/app/packs/src/utilities/ElementUtils.js b/app/packs/src/utilities/ElementUtils.js
@@ -480,7 +480,7 @@ const handleSaveDataset = (element, uiStoreState, callbackFunc, ...args) => {
   const { elementID, isSaving, elementType } = containerDataSet;
   if (!isSaving) return false;
 
-  const supporedTypes = ['sample', 'reaction', 'researchPlan', 'wellplate']
+  const supporedTypes = ['sample', 'reaction', 'researchPlan', 'wellplate', 'screen'];
   if (supporedTypes.includes(elementType)) {
     if (Array.isArray(element)) {
       if (elementType === 'sample') {

diff --git a/spec/javascripts/utils/ElementUtils.spec.js b/spec/javascripts/utils/ElementUtils.spec.js
@@ -319,7 +319,7 @@ describe('Handle container dataset saving', () => {
   });
 
   describe('save dataset for wellplate', () => {
-    it('when it is not the same wellplate plan id', () => {
+    it('when it is not the same wellplate id', () => {
       const wellplate = { id: 100 };
       const containerDataSet = { elementType: 'wellplate', isSaving: true, elementID: 101 };
       const uiState = { containerDataSet };
@@ -335,4 +335,22 @@ describe('Handle container dataset saving', () => {
       expect(triggered).toEqual(true);
     });
   });
+
+  describe('save dataset for screen', () => {
+    it('when it is not the same screen id', () => {
+      const screen = { id: 100 };
+      const containerDataSet = { elementType: 'screen', isSaving: true, elementID: 101 };
+      const uiState = { containerDataSet };
+      const triggered = handleSaveDataset(screen, uiState, handleSubmit);
+      expect(triggered).toEqual(false);
+    });
+
+    it('when it is the same screen id', () => {
+      const screen = { id: 100 };
+      const containerDataSet = { elementType: 'screen', isSaving: true, elementID: 100 };
+      const uiState = { containerDataSet };
+      const triggered = handleSaveDataset(screen, uiState, handleSubmit, true);
+      expect(triggered).toEqual(true);
+    });
+  });
 });