feat: change flow to save updated attachment

ComPlat · Apr 3, 2024 · 532a787 · 532a787
1 parent 8933fe2
commit 532a787
Show file tree

Hide file tree

Showing 21 changed files with 347 additions and 29 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';
 
@@ -433,6 +434,8 @@ export default class SampleDetails extends React.Component {
         ...previousState, activeTab: state.sample.activeTab
       }));
     }
+    const { sample } = this.state;
+    handleSaveDataset(sample, state, this.handleSubmit, false);
   }
 
   sampleFooter() {

diff --git a/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js b/app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js
@@ -226,6 +226,7 @@ function RndEdit({
                   container={container}
                   disabled={isDisabled}
                   onChange={handleChange}
+                  elementID={sample.id}
                 />
               </Panel.Body>
             </Panel>

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/ContainerComponent.js b/app/packs/src/components/container/ContainerComponent.js
@@ -143,7 +143,7 @@ export default class ContainerComponent extends Component {
 
   render() {
     const { container, textTemplate } = this.state;
-    const { readOnly, disabled } = this.props;
+    const { readOnly, disabled, elementID, templateType } = this.props;
 
     let quill = (<span />);
     if (readOnly || disabled) {
@@ -224,6 +224,8 @@ export default class ContainerComponent extends Component {
           {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label>Datasets</label>
           <ContainerDatasets
+            elementID={elementID}
+            templateType={templateType}
             container={container}
             readOnly={readOnly}
             disabled={disabled}
@@ -251,7 +253,8 @@ ContainerComponent.propTypes = {
   onChange: PropTypes.func,
   readOnly: PropTypes.bool,
   disabled: PropTypes.bool,
-  container: PropTypes.object
+  container: PropTypes.object,
+  elementID: PropTypes.string,
 };
 
 ContainerComponent.defaultProps = {
@@ -261,5 +264,6 @@ ContainerComponent.defaultProps = {
   onChange: () => {},
   readOnly: false,
   disabled: false,
-  container: {}
+  container: {},
+  elementID: ''
 };
diff --git a/app/packs/src/components/container/ContainerDatasetModal.js b/app/packs/src/components/container/ContainerDatasetModal.js
@@ -5,6 +5,8 @@ import {
   Modal, ButtonGroup, OverlayTrigger, Tooltip, Button,
 } from 'react-bootstrap';
 import ContainerDatasetModalContent from 'src/components/container/ContainerDatasetModalContent';
+import UIActions from 'src/stores/alt/actions/UIActions';
+import LoadingStore from 'src/stores/alt/stores/LoadingStore';
 
 export default class ContainerDatasetModal extends Component {
   constructor(props) {
@@ -20,23 +22,56 @@ export default class ContainerDatasetModal extends Component {
     this.handleSave = this.handleSave.bind(this);
     this.handleSwitchMode = this.handleSwitchMode.bind(this);
     this.handleModalClose = this.handleModalClose.bind(this);
+    this.handleSaveWithoutClose = this.handleSaveWithoutClose.bind(this);
+    this.onLoadingStoreChange = this.onLoadingStoreChange.bind(this);
+  }
+
+  componentDidMount() {
+    LoadingStore.listen(this.onLoadingStoreChange);
+  }
+
+  componentWillUnmount() {
+    LoadingStore.unlisten(this.onLoadingStoreChange);
+  }
+
+  onLoadingStoreChange(state) {
+    const { loading } = state;
+    if (!loading) {
+      UIActions.saveAttachmentDataset.defer('', false, '');
+    }
   }
 
   handleModalClose(event) {
     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();
+    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() {
     this.props.onChange({
       ...this.props.datasetContainer,
       ...this.datasetInput.current.state.datasetContainer,
       name: this.state.localName
     });
+
+    const { elementID, templateType } = this.props;
+    const datasetID = this.datasetInput.current.state.datasetContainer.id;
+    UIActions.saveAttachmentDataset(elementID, templateType, datasetID);
   }
 
   handleNameChange(newName) {
@@ -175,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' }}
@@ -190,9 +225,16 @@ export default class ContainerDatasetModal extends Component {
               <Button
                 bsStyle="primary"
                 style={{ alignSelf: 'center', marginLeft: 'auto' }}
+                onClick={this.handleSaveWithoutClose}
+              >
+                Save
+              </Button>
+              <Button
+                bsStyle="danger"
+                style={{ alignSelf: 'center', marginLeft: '10px' }}
                 onClick={this.handleSave}
               >
-                Keep Changes
+                Close
               </Button>
             </div>
           </Modal.Footer>
@@ -213,10 +255,14 @@ ContainerDatasetModal.propTypes = {
   readOnly: PropTypes.bool,
   disabled: PropTypes.bool,
   kind: PropTypes.string,
+  elementID: PropTypes.string,
+  templateType: PropTypes.string,
 };
 
 ContainerDatasetModal.defaultProps = {
   readOnly: false,
   disabled: false,
   kind: null,
+  elementID: '',
+  templateType: '',
 };