update

iadmin/themes/new-theme/js/app/pages/translations/components/app.vue

@@ -0,0 +1,175 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div
+    v-if="isReady"
+    id="app"
+    class="translations-app"
+  >
+    <div class="container-fluid">
+      <div class="row justify-content-between align-items-center">
+        <Search @search="onSearch" />
+        <div class="translations-summary">
+          <span>{{ totalTranslations }}</span>
+          <span v-show="totalMissingTranslations">
+            -
+            <span class="missing">{{ totalMissingTranslationsString }}</span>
+          </span>
+        </div>
+      </div>
+
+      <div class="row">
+        <Sidebar
+          :modal="this.$refs.transModal"
+          :principal="this.$refs.principal"
+        />
+        <Principal
+          :modal="this.$refs.transModal"
+          ref="principal"
+        />
+      </div>
+    </div>
+    <PSModal
+      ref="transModal"
+      :translations="translations"
+    />
+  </div>
+</template>
+
+<script>
+  import Search from '@app/pages/translations/components/header/search';
+  import Sidebar from '@app/pages/translations/components/sidebar';
+  import Principal from '@app/pages/translations/components/principal';
+  import PSModal from '@app/widgets/ps-modal';
+
+  export default {
+    name: 'App',
+    computed: {
+      isReady() {
+        return this.$store.getters.isReady;
+      },
+      totalTranslations() {
+        return this.$store.state.totalTranslations <= 1
+          ? this.trans('label_total_domain_singular')
+            .replace('%nb_translation%', this.$store.state.totalTranslations)
+          : this.trans('label_total_domain')
+            .replace('%nb_translations%', this.$store.state.totalTranslations);
+      },
+      totalMissingTranslations() {
+        return this.$store.state.totalMissingTranslations;
+      },
+      totalMissingTranslationsString() {
+        return this.totalMissingTranslations === 1
+          ? this.trans('label_missing_singular')
+          : this.trans('label_missing').replace('%d', this.totalMissingTranslations);
+      },
+      translations() {
+        return {
+          button_save: this.trans('button_save'),
+          button_leave: this.trans('button_leave'),
+          modal_content: this.trans('modal_content'),
+          modal_title: this.trans('modal_title'),
+        };
+      },
+    },
+    mounted() {
+      $('a').on('click', (e) => {
+        if ($(e.currentTarget).attr('href')) {
+          this.destHref = $(e.currentTarget).attr('href');
+        }
+      });
+      window.onbeforeunload = () => {
+        if (!this.destHref && this.isEdited() && !this.leave) {
+          return true;
+        }
+
+        if (!this.leave && this.isEdited()) {
+          setTimeout(() => {
+            window.stop();
+          }, 500);
+
+          this.$refs.transModal.showModal();
+          this.$refs.transModal.$once('save', () => {
+            this.$refs.principal.saveTranslations();
+            this.leavePage();
+          });
+
+          this.$refs.transModal.$once('leave', () => {
+            this.leavePage();
+          });
+          return null;
+        }
+
+        return undefined;
+      };
+    },
+    methods: {
+      onSearch() {
+        this.$store.dispatch('getDomainsTree', {
+          store: this.$store,
+        });
+        this.$store.currentDomain = '';
+      },
+      /**
+       * Set leave to true and redirect the user to the new location
+       */
+      leavePage() {
+        this.leave = true;
+        window.location.href = this.destHref;
+      },
+      isEdited() {
+        return this.$refs.principal.edited();
+      },
+    },
+    data: () => ({
+      destHref: null,
+      leave: false,
+    }),
+    components: {
+      Search,
+      Sidebar,
+      Principal,
+      PSModal,
+    },
+  };
+</script>
+
+<style lang="scss" type="text/scss">
+  @import '~@scss/config/_settings.scss';
+
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .missing {
+    color: $danger;
+  }
+
+  .translations-summary {
+    font-weight: $font-weight-semibold;
+    font-size: 1rem;
+  }
+</style>