ref: refactor to confirm close modal without save

ComPlat · Apr 3, 2024 · b9f7f6a · b9f7f6a
1 parent d9bd447
commit b9f7f6a
Show file tree

Hide file tree

Showing 17 changed files with 248 additions and 59 deletions.
diff --git a/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow.js b/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow.js
@@ -32,6 +32,7 @@ export default class EditModeRow extends Component {
             disabled={false}
             container={container}
             onChange={() => parent.handleChange(container)}
+            elementID={element.id}
           />
         </Panel.Body>
       </Panel>

diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -28,7 +28,7 @@ import { setReactionByType } from 'src/apps/mydb/elements/details/reactions/Reac
 import { sampleShowOrNew } from 'src/utilities/routesUtils';
 import ReactionSvgFetcher from 'src/fetchers/ReactionSvgFetcher';
 import ConfirmClose from 'src/components/common/ConfirmClose';
-import { rfValueFormat } from 'src/utilities/ElementUtils';
+import { rfValueFormat, handleSaveDataset } from 'src/utilities/ElementUtils';
 import ExportSamplesBtn from 'src/apps/mydb/elements/details/ExportSamplesBtn';
 import CopyElementModal from 'src/components/common/CopyElementModal';
 import { permitOn } from 'src/components/common/uis';
@@ -122,10 +122,16 @@ export default class ReactionDetails extends Component {
         activeTab: state.reaction.activeTab
       });
     }
+    const { reaction } = this.state;
+    const { products } = reaction;
+    const saved = handleSaveDataset(reaction, state, this.handleSubmit, false);
+    if (!saved && products.length > 0) {
+      handleSaveDataset(products, state, this.handleSubmit, false);
+    }
   }
 
   handleSubmit(closeView = false) {
-    LoadingActions.start();
+    LoadingActions.start.defer();
 
     const { reaction } = this.state;
     if (reaction && reaction.isNew) {

diff --git a/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
@@ -330,6 +330,7 @@ export default class ReactionDetailsContainers extends Component {
                         templateType="reaction"
                         container={container}
                         onChange={this.handleChange.bind(this, container)}
+                        elementID={reaction.id}
                       />
                       <ViewSpectra
                         sample={reaction}

diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
@@ -42,6 +42,7 @@ import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 import UserStore from 'src/stores/alt/stores/UserStore';
 import MatrixCheck from 'src/components/common/MatrixCheck';
 import { commentActivation } from 'src/utilities/CommentHelper';
+import { handleSaveDataset } from 'src/utilities/ElementUtils';
 
 export default class ResearchPlanDetails extends Component {
   constructor(props) {
@@ -53,6 +54,7 @@ export default class ResearchPlanDetails extends Component {
       visible: Immutable.List(),
       currentUser: (UserStore.getState() && UserStore.getState().currentUser) || {},
     };
+    this.onUIStoreChange = this.onUIStoreChange.bind(this);
     this.handleSwitchMode = this.handleSwitchMode.bind(this);
     this.handleResearchPlanChange = this.handleResearchPlanChange.bind(this);
     this.toggleFullScreen = this.toggleFullScreen.bind(this);
@@ -68,6 +70,8 @@ export default class ResearchPlanDetails extends Component {
     const { researchPlan } = this.props;
     const { currentUser } = this.state;
 
+    UIStore.listen(this.onUIStoreChange);
+
     if (MatrixCheck(currentUser.matrix, commentActivation) && !researchPlan.isNew) {
       CommentActions.fetchComments(researchPlan);
     }
@@ -78,6 +82,15 @@ export default class ResearchPlanDetails extends Component {
     this.setState({ researchPlan });
   }
 
+  componentWillUnmount() {
+    UIStore.unlisten(this.onUIStoreChange)
+  }
+
+  onUIStoreChange(state) {
+    const { researchPlan } = this.state;
+    handleSaveDataset(researchPlan, state, this.handleSubmit);
+  }
+
   handleResearchPlanChange(el) {
     const researchPlan = el;
     researchPlan.changed = true;
@@ -104,7 +117,7 @@ export default class ResearchPlanDetails extends Component {
 
   handleSubmit() {
     const { researchPlan } = this.state;
-    LoadingActions.start();
+    LoadingActions.start.defer();
 
     if (researchPlan.isNew) {
       ElementActions.createResearchPlan(researchPlan);

diff --git a/...src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js b/...src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
@@ -292,6 +292,7 @@ export default class ResearchPlanDetailsContainers extends Component {
                         disabled={readOnly}
                         container={container}
                         onChange={this.handleChange}
+                        elementID={researchPlan.id}
                       />
                       <ViewSpectra
                         sample={this.props.researchPlan}

diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -36,6 +36,7 @@ import PubchemLabels from 'src/components/pubchem/PubchemLabels';
 import PubchemLcss from 'src/components/pubchem/PubchemLcss';
 import ElementReactionLabels from 'src/apps/mydb/elements/labels/ElementReactionLabels';
 import SampleDetailsContainers from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers';
+import { handleSaveDataset } from 'src/utilities/ElementUtils';
 
 import StructureEditorModal from 'src/components/structureEditor/StructureEditorModal';
 
@@ -434,11 +435,7 @@ export default class SampleDetails extends React.Component {
       }));
     }
     const { sample } = this.state;
-    const { containerDataSet } = state;
-    const { elementID, isSaving, elementType } = containerDataSet;
-    if (elementType === 'sample' && isSaving && elementID === sample.id) {
-      this.handleSubmit(false);
-    }
+    handleSaveDataset(sample, state, this.handleSubmit, false);
   }
 
   sampleFooter() {

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/apps/mydb/elements/details/screens/analysesTab/ScreenDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/screens/analysesTab/ScreenDetailsContainers.js
@@ -131,6 +131,7 @@ export default class ScreenDetailsContainers extends Component {
                           readOnly={readOnly}
                           container={container}
                           onChange={container => this.handleChange(container)}
+                          elementID={screen.id}
                         />
                       </Panel.Body>
                     </Panel>

diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js b/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
@@ -19,6 +19,7 @@ import WellplateDetailsContainers from
   'src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers';
 import WellplateDetailsAttachments from
   'src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments';
+import { handleSaveDataset } from 'src/utilities/ElementUtils';
 import PrintCodeButton from 'src/components/common/PrintCodeButton';
 import Attachment from 'src/models/Attachment';
 import Utils from 'src/utilities/Functions';
@@ -93,7 +94,7 @@ export default class WellplateDetails extends Component {
 
   handleSubmit() {
     const { wellplate } = this.state;
-    LoadingActions.start();
+    LoadingActions.start.defer();
     if (wellplate.isNew) {
       ElementActions.createWellplate(wellplate);
     } else {
@@ -234,6 +235,8 @@ export default class WellplateDetails extends Component {
         activeTab: state.wellplate.activeTab
       });
     }
+    const { wellplate } = this.state;
+    handleSaveDataset(wellplate, state, this.handleSubmit);
   }
 
   wellplateHeader(wellplate) {

diff --git a/...packs/src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers.js b/...packs/src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers.js
@@ -139,6 +139,7 @@ export default class WellplateDetailsContainers extends Component {
                           readOnly={readOnly}
                           container={container}
                           onChange={container => this.handleChange(container)}
+                          elementID={wellplate.id}
                         />
                       </Panel.Body>
                     </Panel>

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/container/ContainerDatasets.js b/app/packs/src/components/container/ContainerDatasets.js
@@ -29,7 +29,7 @@ export default class ContainerDatasets extends Component {
   initState(props) {
     const { container } = props;
     const { children } = container;
-    const datasetContainer = children.length > 0 ? children[0] : null;  //TODO: need to be check
+    const datasetContainer = children.length > 0 ? children[0] : null;
     const uiStoreContainerDataSet = (UIStore.getState() && UIStore.getState().containerDataSet) || { isSaving: false };
     const { isSaving } = uiStoreContainerDataSet;
     this.state = {
@@ -46,32 +46,25 @@ export default class ContainerDatasets extends Component {
   }
 
   handleSavingModal(prevProps) {
-    //TODO: need to be refactor
-    const { container } = this.props;
-    const { children } = container;
-    if (prevProps.container) {
+    const uiStoreContainerDataSet = (UIStore.getState() && UIStore.getState().containerDataSet) || { isSaving: false };
+    const { isSaving, datasetID } = uiStoreContainerDataSet;
+    if (isSaving && prevProps.container) {
+      const { container } = this.props;
+      const { children } = container;
       const prevChildren = prevProps.container.children;
       const childrenIds = children.map((item) => item.id);
       const prevChildrenIds = prevChildren.map((item) => item.id);
       let diffIds = childrenIds.filter((id) => !prevChildrenIds.includes(id));
-      const uiStoreContainerDataSet = (UIStore.getState() && UIStore.getState().containerDataSet) || { isSaving: false };
-      const { isSaving, datasetID } = uiStoreContainerDataSet;
-      if (isSaving) {
-        if (diffIds.length === 0) {
-          diffIds = [datasetID];
-        }
-        UIActions.saveAttachmentDataset.defer('', false, datasetID);
-        const filterChildren = children.filter((item) => diffIds.includes(item.id));
-        const datasetContainer = filterChildren.length > 0 ? filterChildren[0] : null;
-        this.setState({
-          container: this.props.container,
-          modal: { show: true, datasetContainer: datasetContainer },
-        });
-      } else {
-        this.setState({
-          container: this.props.container,
-        });
+      if (diffIds.length === 0) {
+        diffIds = [datasetID];
       }
+      UIActions.saveAttachmentDataset.defer('', false, datasetID);
+      const filterChildren = children.filter((item) => diffIds.includes(item.id));
+      const datasetContainer = filterChildren.length > 0 ? filterChildren[0] : null;
+      this.setState({
+        container: this.props.container,
+        modal: { show: true, datasetContainer: datasetContainer },
+      });
     } else {
       this.setState({
         container: this.props.container,

diff --git a/app/packs/src/components/generic/GenericContainer.js b/app/packs/src/components/generic/GenericContainer.js
@@ -181,6 +181,7 @@ const AiHeader = (props) => {
           readOnly={readOnly}
           container={container}
           onChange={() => fnChange()}
+          elementID={generic.id}
         />
         <ViewSpectra
           sample={generic}

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,
     }
   }