fix: Merge Meeds-io/MIPs#99 : update usage of v-alert to use the comm…

…on method - EXO-67165 (#55)
exoplatform · Oct 28, 2023 · 26cb35b · 26cb35b
1 parent 3a60c68
commit 26cb35b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 112 deletions.
diff --git a/...main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue b/...main/webapp/javascript/automatic-translation/components/ActivityCommentTranslatedBody.vue
@@ -15,29 +15,21 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div>
-    <v-alert
-      v-model="alert"
-      :type="type"
-      dismissible>
-      {{ message }}
-    </v-alert>
+  <div
+    v-if="isTranslatedBodyNotEmpty && !translationHidden">
+    <dynamic-html-element
+      v-sanitized-html="translatedBody"
+      :element="element"
+      class="reset-style-box text-break overflow-hidden font-italic text-light-color translationContent"
+      dir="auto" />
     <div
-      v-if="isTranslatedBodyNotEmpty && !translationHidden">
-      <dynamic-html-element
-        v-sanitized-html="translatedBody"
-        :element="element"
-        class="reset-style-box text-break overflow-hidden font-italic text-light-color translationContent"
-        dir="auto" />
-      <div
-        class="font-italic text-light-color clickable caption"
-        :class="$vuetify.rtl ? 'float-left' : 'float-right'"
-        @click="hideTranslation">
-        <v-icon size="12">mdi-translate</v-icon>
-        <span>
-          {{ $t('automaticTranslation.hideTranslation') }}
-        </span>
-      </div>
+      class="font-italic text-light-color clickable caption"
+      :class="$vuetify.rtl ? 'float-left' : 'float-right'"
+      @click="hideTranslation">
+      <v-icon size="12">mdi-translate</v-icon>
+      <span>
+        {{ $t('automaticTranslation.hideTranslation') }}
+      </span>
     </div>
   </div>
 </template>
@@ -61,9 +53,6 @@ export default {
   data: () => ({
     translatedBody: null,
     translationHidden: true,
-    alert: false,
-    type: '',
-    message: ''
   }),
   computed: {
     isTranslatedBodyNotEmpty() {
@@ -87,10 +76,7 @@ export default {
     });
     document.addEventListener('activity-translation-error', (event) => {
       if (event.detail.id === this.activity.id) {
-        this.displayMessage({
-          type: 'error',
-          message: this.$t('automaticTranslation.errorTranslation')
-        });
+        this.$root.$emit('alert-message', this.$t('automaticTranslation.errorTranslation'), 'error');
       }
     });
     this.retrieveCommentProperties();
@@ -111,13 +97,6 @@ export default {
       this.translationHidden=false;
       this.$el.parentNode.parentNode.firstChild.classList.add('hide');
     },
-    displayMessage(message) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
-    }
-
   },
 };
 </script>
diff --git a/...ps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue b/...ps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue
@@ -15,33 +15,25 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div>
-    <v-alert
-      v-model="alert"
-      :type="type"
-      dismissible>
-      {{ message }}
-    </v-alert>
-    <div
-      v-if="isTranslatedBodyNotEmpty && !translationHidden">
-      <v-divider class="mb-2" />
-      <dynamic-html-element
-        v-sanitized-html="translatedBody"
-        :element="element"
-        class="reset-style-box text-break overflow-hidden font-italic text-light-color"
-        dir="auto" />
+  <div
+    v-if="isTranslatedBodyNotEmpty && !translationHidden">
+    <v-divider class="mb-2" />
+    <dynamic-html-element
+      v-sanitized-html="translatedBody"
+      :element="element"
+      class="reset-style-box text-break overflow-hidden font-italic text-light-color"
+      dir="auto" />
 
-      <div
-        class="font-italic text-light-color clickable caption"
-        :class="$vuetify.rtl ? 'float-left' : 'float-right'"
-        @click="hideTranslation">
-        <v-icon size="12">mdi-translate</v-icon>
-        <span>
-          {{ $t('automaticTranslation.hideTranslation') }}
-        </span>
-      </div>
+    <div
+      class="font-italic text-light-color clickable caption"
+      :class="$vuetify.rtl ? 'float-left' : 'float-right'"
+      @click="hideTranslation">
+      <v-icon size="12">mdi-translate</v-icon>
+      <span>
+        {{ $t('automaticTranslation.hideTranslation') }}
+      </span>
+    </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -59,9 +51,6 @@ export default {
   data: () => ({
     translatedBody: null,
     translationHidden: false,
-    alert: false,
-    type: '',
-    message: ''
   }),
   computed: {
     isTranslatedBodyNotEmpty() {
@@ -83,10 +72,7 @@ export default {
     });
     document.addEventListener('activity-translation-error', (event) => {
       if (event.detail.id === this.activity.id) {
-        this.displayMessage({
-          type: 'error',
-          message: this.$t('automaticTranslation.errorTranslation')
-        });
+        this.$root.$emit('alert-message', this.$t('automaticTranslation.errorTranslation'), 'error');
       }
     });
     this.retrieveActivityProperties();
@@ -99,12 +85,6 @@ export default {
     },
     hideTranslation() {
       this.translationHidden=true;
-    },
-    displayMessage(message) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
     }
   },
 };

diff --git a/...automatic-translation-administration/components/AutomaticTranslationAdministrationApp.vue b/...automatic-translation-administration/components/AutomaticTranslationAdministrationApp.vue
@@ -16,12 +16,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <v-app role="main" id="automaticTranslationAdministration">
-    <v-alert
-      v-model="alert"
-      :type="type"
-      dismissible>
-      {{ message }}
-    </v-alert>
     <v-main class="white rounded-lg pa-5">
       <v-container fluid>
         <v-row>
@@ -82,31 +76,25 @@ export default {
   data: () => ({
     connectors: [],
     selectedConnector: '',
-    alert: false,
-    type: '',
-    message: '',
     apiKey: ''
   }),
   mounted() {
     this.$nextTick().then(() => this.$root.$emit('application-loaded'));
   },
   created() {
-    this.$root.$on('show-alert', message => {
-      this.displayMessage(message);
-    });
     this.getConfiguration();
   },
   methods: {
     getConfiguration() {
       getConfiguration().then(data => {
-        this.connectors = data && data.connectors || [];
+        this.connectors = data?.connectors || [];
         this.connectors.unshift({'name': 'none','description': this.$t('automatic.translation.administration.noconnectorselected')});
-        this.selectedConnector = data && data.activeConnector || 'none';
-        this.apiKey = data && data.activeApiKey || '';
+        this.selectedConnector = data?.activeConnector || 'none';
+        this.apiKey = data?.activeApiKey || '';
       });
     },
     closeSelect() {
-      if (this.$refs.connectorSelector && this.$refs.connectorSelector.isMenuActive) {
+      if (this.$refs.connectorSelector?.isMenuActive) {
         window.setTimeout(() => {
           this.$refs.connectorSelector.isMenuActive = false;
         }, 100);
@@ -120,7 +108,7 @@ export default {
       setActiveConnector(connector).then(resp => {
         let message='';
         let type='';
-        if (resp && resp.ok) {
+        if (resp?.ok) {
           if (connector === null) {
             message = this.$t('automatic.translation.administration.changeConnector.noconnector.confirm');
           } else {
@@ -131,18 +119,15 @@ export default {
           type='error';
           message = this.$t('automatic.translation.administration.changeConnector.error');
         }
-        this.$root.$emit('show-alert', {
-          type: type,
-          message: message
-        });
+        this.$root.$emit('alert-message', message, type);
         this.getConfiguration();
       });
     },
     editApiKey() {
       setApiKey(this.selectedConnector, this.apiKey).then(resp => {
         let message='';
         let type='';
-        if (resp && resp.ok) {
+        if (resp?.ok) {
           if (this.apiKey === '') {
             message = this.$t('automatic.translation.administration.changeApiKey.emptykey.confirm');
           } else {
@@ -153,18 +138,9 @@ export default {
           type='error';
           message = this.$t('automatic.translation.administration.changeApiKey.error');
         }
-        this.$root.$emit('show-alert', {
-          type: type,
-          message: message
-        });
+        this.$root.$emit('alert-message', message, type);
         this.getConfiguration();
       });
-    },
-    displayMessage(message) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
     }
   }
 };

diff --git a/webapps/src/main/webapp/vue-apps/automatic-translation-administration/main.js b/webapps/src/main/webapp/vue-apps/automatic-translation-administration/main.js
@@ -35,14 +35,10 @@ export function init() {
     const appElement = document.createElement('div');
     appElement.id = appId;
 
-    // init Vue app when locale ressources are ready
-    new Vue({
-      mounted() {
-        document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
-      },
+    Vue.createApp({
       template: `<automatic-translation-administration-app v-cacheable id="${appId}" />`,
       vuetify,
       i18n
-    }).$mount(appElement);
+    }, appElement, 'Automatic Translation Administration');
   });
 }