Merge pull request #2028 from kobotoolbox/issue-2020

Improve translationTable closing logic
kobotoolbox · Oct 11, 2018 · 78e5ab0 · 78e5ab0
2 parents e6f6a1e + 23e0d92
commit 78e5ab0
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/jsapp/js/components/modal.es6 b/jsapp/js/components/modal.es6
@@ -165,7 +165,10 @@ class Modal extends React.Component {
     dialog.set(opts).show();
   }
   onModalClose(evt) {
-    if (this.props.params.type === MODAL_TYPES.FORM_TRANSLATIONS_TABLE) {
+    if (
+      this.props.params.type === MODAL_TYPES.FORM_TRANSLATIONS_TABLE &&
+      stores.translations.state.isTranslationTableUnsaved
+    ) {
       this.displaySafeCloseConfirm(
         t('Close Translations Table?'),
         t('You will lose all unsaved changes.')

diff --git a/jsapp/js/components/modalForms/translationTable.es6 b/jsapp/js/components/modalForms/translationTable.es6
@@ -19,10 +19,10 @@ export class TranslationTable extends React.Component {
     super(props);
     this.state = {
       saveChangesButtonText: SAVE_BUTTON_TEXT.DEFAULT,
-      hasUnsavedChanges: false,
       isSaveChangesButtonPending: false,
       tableData: []
     };
+    stores.translations.setTranslationTableUnsaved(false);
     const {translated, survey, choices, translations} = props.asset.content;
     const langIndex = props.langIndex;
 
@@ -72,36 +72,36 @@ export class TranslationTable extends React.Component {
               const data = [...this.state.tableData];
               data[cellInfo.index].value = e.target.value;
               this.setState({ data });
-              this.markSaveButtonUnsaved();
+              this.markFormUnsaved();
             }}
             value={this.state.tableData[cellInfo.index].value || ''}/>
         )
       }
     ];
   }
 
-  markSaveButtonUnsaved() {
+  markFormUnsaved() {
     this.setState({
       saveChangesButtonText: SAVE_BUTTON_TEXT.UNSAVED,
-      hasUnsavedChanges: true,
       isSaveChangesButtonPending: false
     });
+    stores.translations.setTranslationTableUnsaved(true);
   }
 
-  markSaveButtonPending() {
+  markFormPending() {
     this.setState({
       saveChangesButtonText: SAVE_BUTTON_TEXT.PENDING,
-      hasUnsavedChanges: true,
       isSaveChangesButtonPending: true
     });
+    stores.translations.setTranslationTableUnsaved(true);
   }
 
-  markSaveButtonIdle() {
+  markFormIdle() {
     this.setState({
       saveChangesButtonText: SAVE_BUTTON_TEXT.DEFAULT,
-      hasUnsavedChanges: false,
       isSaveChangesButtonPending: false
     });
+    stores.translations.setTranslationTableUnsaved(false);
   }
 
   saveChanges() {
@@ -118,26 +118,26 @@ export class TranslationTable extends React.Component {
       }
     }
 
-    this.markSaveButtonPending();
+    this.markFormPending();
     actions.resources.updateAsset(
       this.props.asset.uid,
       {
         content: JSON.stringify(content)
       },
       {
-        onComplete: this.markSaveButtonIdle.bind(this),
-        onFailed: this.markSaveButtonUnsaved.bind(this)
+        onComplete: this.markFormIdle.bind(this),
+        onFailed: this.markFormUnsaved.bind(this)
       }
     );
   }
 
   onBack() {
-    if (this.state.hasUnsavedChanges) {
+    if (stores.translations.state.isTranslationTableUnsaved) {
       const dialog = alertify.dialog('confirm');
       const opts = {
         title: t('Go back?'),
         message: t('You will lose all unsaved changes.'),
-        labels: {ok: t('Go back'), cancel: t('Cancel')},
+        labels: {ok: t('Confirm'), cancel: t('Cancel')},
         onok: this.showManageLanguagesModal.bind(this),
         oncancel: dialog.destroy
       };

diff --git a/jsapp/js/stores.es6 b/jsapp/js/stores.es6
@@ -77,6 +77,26 @@ var assetSearchStore = Reflux.createStore({
   }
 });
 
+const translationsStore = Reflux.createStore({
+  init() {
+    this.state = {
+      isTranslationTableUnsaved: false
+    }
+  },
+  setState (change) {
+    const changed = changes(this.state, change);
+    if (changed) {
+      assign(this.state, changed);
+      this.trigger(changed);
+    }
+  },
+  setTranslationTableUnsaved (isUnsaved) {
+    this.setState({
+      isTranslationTableUnsaved: isUnsaved
+    });
+  },
+});
+
 var pageStateStore = Reflux.createStore({
   init () {
     this.state = {
@@ -114,14 +134,10 @@ var pageStateStore = Reflux.createStore({
   // use it when you have one modal opened and want to display different one
   // because just calling showModal has weird outcome
   switchModal (params) {
-    this.setState({
-      modal: false
-    });
+    this.hideModal();
     // HACK switch to setState callback after updating to React 16+
     window.setTimeout(() => {
-      this.setState({
-        modal: params
-      });
+      this.showModal(params);
     }, 0);
   }
 });
@@ -497,6 +513,7 @@ if (window.Intercom) {
 assign(stores, {
   tags: tagsStore,
   pageState: pageStateStore,
+  translations: translationsStore,
   assetSearch: assetSearchStore,
   selectedAsset: selectedAssetStore,
   assetContent: assetContentStore,