From f923c46bea34ddbfd0ddcb1860a7e07f34d93b7d Mon Sep 17 00:00:00 2001 From: Lan Le Date: Wed, 27 Mar 2024 14:11:46 +0100 Subject: [PATCH] ref: refactor to confirm close modal without save --- .../elements/details/screens/ScreenDetails.js | 14 +++----- .../container/ContainerDatasetModal.js | 34 +++++++++++-------- .../components/generic/GenericElDetails.js | 5 ++- app/packs/src/stores/alt/stores/UIStore.js | 3 +- app/packs/src/utilities/ElementUtils.js | 2 +- spec/javascripts/utils/ElementUtils.spec.js | 20 ++++++++++- 6 files changed, 50 insertions(+), 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 index 2e99d2eb21..b07d0b29bc 100644 --- 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 index 24f15374a9..296e7cf9ee 100644 --- 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%' }} > -
+ {/*
Changes are kept for this session. Remember to save the element itself to persist changes. -
+
*/}
{/*
diff --git a/app/packs/src/components/generic/GenericElDetails.js b/app/packs/src/components/generic/GenericElDetails.js index 63fbfff377..131acc2e5c 100644 --- 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 index b5d0572cc0..891e040320 100644 --- 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 index 1853bbaf20..fb9869139a 100644 --- 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 index 7e59a6d71e..0fa28bfc66 100644 --- 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); + }); + }); });