BO: Add confirmation modal in translation page

marekhanus · Jul 10, 2017 · 1023ada · 1023ada
1 parent 9b116d6
commit 1023ada
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/admin-dev/themes/new-theme/js/app/pages/translations/components/app.vue b/admin-dev/themes/new-theme/js/app/pages/translations/components/app.vue
@@ -82,15 +82,16 @@
           this.destHref = $(e.currentTarget).attr('href');
         }
       });
-      EventBus.$on('isEdited', (val) => {
-        console.log(val);
-      });
       window.onbeforeunload = () => {
-        if (!this.leave && this.edited) {
+        if (!this.destHref && this.isEdited() && !this.leave) {
+          return true;
+        }
+        if (!this.leave && this.isEdited()) {
           setTimeout(() => {
             window.stop();
           }, 500);
           EventBus.$emit('showModal');
+          return null;
         }
       };
     },
@@ -102,12 +103,16 @@
         this.$store.currentDomain = '';
       },
       onSave() {
-
+        this.$refs.principal.saveTranslations();
+        EventBus.$emit('hideModal');
       },
       onLeave() {
         this.leave = true;
         window.location.href = this.destHref;
       },
+      isEdited() {
+        return this.$refs.principal.edited();
+      },
     },
     data: () => ({
       destHref: null,

diff --git a/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/index.vue b/admin-dev/themes/new-theme/js/app/pages/translations/components/principal/index.vue
@@ -48,7 +48,12 @@
               @pageChanged="onPageChanged"
             />
           </div>
-          <form class="col-xs-12" :action="saveAction" method="post" @submit.prevent="saveTranslations">
+          <form class="col-xs-12"
+            method="post" 
+            :action="saveAction"
+            :isEdited="isEdited"
+            @submit.prevent="saveTranslations"
+          >
             <div class="row">
               <div class="col-xs-12 m-b-2">
                 <PSButton :primary="true" type="submit" class="pull-xs-right">
@@ -64,7 +69,7 @@
               :translated="translation"
               :label="translation.default"
               :extraInfo="getDomain(translation.tree_domain)"
-              @isEdited="edited"
+              @editedAction="isEdited"
               >
             </TranslationInput>
             <PSButton :primary="true" type="submit" class="pull-xs-right m-t-3">
@@ -149,6 +154,13 @@
       },
     },
     methods: {
+      isEdited(input) {
+        if (this.editedInput.indexOf(input.id) === -1 && input.value) {
+          this.editedInput.push(input.id);
+        } else if (this.editedInput.indexOf(input.id) >= 0 && !input.value) {
+          this.editedInput.splice(this.editedInput.indexOf(input.id), 1);
+        }
+      },
       onPageChanged(pageIndex) {
         this.$store.dispatch('updatePageIndex', pageIndex);
         this.fetch();
@@ -194,12 +206,15 @@
 
         return this.modifiedTranslations;
       },
+      edited() {
+        return this.editedInput.length > 0;
+      },
     },
     data: () => ({
       translations: [],
       originalTranslations: [],
       modifiedTranslations: [],
-      edited: false,
+      editedInput: [],
     }),
     mounted() {
       EventBus.$on('resetTranslation', (el) => {

diff --git a/...dev/themes/new-theme/js/app/pages/translations/components/principal/translation-input.vue b/...dev/themes/new-theme/js/app/pages/translations/components/principal/translation-input.vue
@@ -35,7 +35,6 @@
 
 <script>
   import PSButton from 'app/widgets/ps-button';
-  import { EventBus } from 'app/utils/event-bus';
 
   export default {
     name: 'TranslationInput',
@@ -65,7 +64,10 @@
           modifiedTranslated.database = modifiedValue;
           modifiedTranslated.edited = modifiedValue;
           this.$emit('input', modifiedTranslated);
-          this.edited = modifiedValue !== '';
+          this.$emit('editedAction', {
+            value: modifiedValue !== '',
+            id: this.id,
+          });
         },
       },
       isMissing() {
@@ -78,17 +80,6 @@
         EventBus.$emit('resetTranslation', this.translated);
       },
     },
-    watch: {
-      edited(val) {
-        EventBus.$emit('isEdited', {
-          value: val,
-          id: this.id,
-        });
-      },
-    },
-    data: () => ({
-      edited: false,
-    }),
     components: {
       PSButton,
     },

diff --git a/admin-dev/themes/new-theme/js/app/widgets/ps-modal.vue b/admin-dev/themes/new-theme/js/app/widgets/ps-modal.vue
@@ -35,11 +35,17 @@ export default {
     EventBus.$on('showModal', () => {
       this.showModal();
     });
+    EventBus.$on('hideModal', () => {
+      this.hideModal();
+    });
   },
   methods: {
     showModal() {
       $(this.$el).modal('show');
     },
+    hideModal() {
+      $(this.$el).modal('hide');
+    },
     onSave() {
       this.$emit('save');
     },