feat: Add automatic translation extension for news - EXO-65764 (#48)

Add automatic translation extension for news
exoplatform · Oct 22, 2023 · b7cec6c · b7cec6c
1 parent f26e262
commit b7cec6c
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 20 deletions.
diff --git a/.../src/main/webapp/javascript/automatic-translation/components/NewsAutomaticTranslation.vue b/.../src/main/webapp/javascript/automatic-translation/components/NewsAutomaticTranslation.vue
@@ -0,0 +1,120 @@
+<template>
+  <v-tooltip bottom>
+    <template #activator="{ on, attrs }">
+      <v-btn
+        icon
+        v-bind="attrs"
+        v-on="on"
+        @click="autoTranslate">
+        <v-icon
+          size="22"
+          :class="hasAutoTranslation && 'primary--text' || ''">
+          fa-language
+        </v-icon>
+      </v-btn>
+    </template>
+    <span>
+      {{ $t('notes.automatic.translation.label') }}
+    </span>
+  </v-tooltip>
+</template>
+
+<script>
+
+import {
+  fetchAutoTranslation
+} from '../../../vue-apps/automatic-translation-administration/automaticTranslationServices.js';
+
+export default {
+  data() {
+    return {
+      isResetAutoTranslating: false,
+      isAutoTranslating: false,
+      autoTranslatedContent: null,
+      autoTranslatedTitle: null,
+      autoTranslatedSummary: null
+    };
+  },
+  props: {
+    news: {
+      news: {
+        type: Object,
+        default: null
+      }
+    }
+  },
+  watch: {
+    isAutoTranslating() {
+      this.toggleTopBarLoading(this.isAutoTranslating);
+    },
+    isResetAutoTranslating() {
+      this.toggleTopBarLoading(this.isResetAutoTranslating);
+    }
+  },
+  computed: {
+    hasAutoTranslation() {
+      return this.autoTranslatedTitle && this.autoTranslatedContent && this.autoTranslatedSummary;
+    }
+  },
+  methods: {
+    autoTranslate() {
+      if (this.hasAutoTranslation) {
+        this.resetAutoTranslation();
+      } else {
+        this.isAutoTranslating = true;
+        fetchAutoTranslation(this.news.title).then(translated => {
+          this.handleTranslatedTitle(translated.translation);
+          fetchAutoTranslation(this.news.summary).then(translated => {
+            this.handleTranslatedSummary(translated.translation);
+            fetchAutoTranslation(this.news.body).then(translated => {
+              this.handleTranslatedContent(translated.translation);
+            });
+          });
+        });
+      }
+    },
+    resetAutoTranslation() {
+      this.isResetAutoTranslating = true;
+      this.autoTranslatedTitle = this.autoTranslatedSummary = this.autoTranslatedContent = null;
+      this.updateNewsTitle(this.news.title);
+      this.updateNewsSummary(this.news.title);
+      this.updateNewsContent(this.news.body);
+      this.isResetAutoTranslating = false;
+    },
+    handleTranslatedTitle(translatedText) {
+      this.autoTranslatedTitle = translatedText;
+      this.updateNewsTitle(translatedText);
+    },
+    handleTranslatedSummary(translatedText) {
+      this.autoTranslatedSummary = translatedText;
+      this.updateNewsSummary(translatedText);
+    },
+    handleTranslatedContent(translatedText) {
+      this.autoTranslatedContent = translatedText.replace('<p></p>', '<p>&nbsp;</p>');
+      this.updateNewsContent(this.autoTranslatedContent);
+      this.checkAutoTranslatedStatus();
+    },
+    updateNewsTitle(title) {
+      this.$root.$emit('update-news-title', title);
+    },
+    updateNewsSummary(translation) {
+      this.$root.$emit('update-news-summary', translation);
+    },
+    updateNewsContent(content) {
+      this.$root.$emit('update-news-body', content);
+    },
+    checkAutoTranslatedStatus() {
+      if (this.autoTranslatedTitle && this.autoTranslatedContent && this.autoTranslatedSummary) {
+        this.isAutoTranslating = false;
+      }
+    },
+    toggleTopBarLoading(loading) {
+      if (loading) {
+        document.dispatchEvent(new CustomEvent('displayTopBarLoading'));
+      } else {
+        document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
+      }
+    },
+  }
+};
+</script>
diff --git a/.../src/main/webapp/javascript/automatic-translation/components/NoteAutomaticTranslation.vue b/.../src/main/webapp/javascript/automatic-translation/components/NoteAutomaticTranslation.vue
@@ -22,6 +22,10 @@
 
 <script>
 
+import {
+  fetchAutoTranslation
+} from '../../../vue-apps/automatic-translation-administration/automaticTranslationServices.js';
+
 export default {
   data() {
     return {
@@ -59,9 +63,9 @@ export default {
   methods: {
     autoTranslate() {
       this.isAutoTranslating = true;
-      this.fetchAutoTranslation(this.note.title).then(translated => {
+      fetchAutoTranslation(this.note.title).then(translated => {
         this.handleTranslatedTitle(translated.translation);
-        this.fetchAutoTranslation(this.note.content).then(translated => {
+        fetchAutoTranslation(this.note.content).then(translated => {
           this.handleTranslatedContent(translated.translation);
         });
       });
@@ -114,22 +118,6 @@ export default {
         document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
       }
     },
-    fetchAutoTranslation(content) {
-      const data = `message=${  encodeURIComponent(content)  }&locale=${  eXo.env.portal.language}`;
-      return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/automatic-translation/translate`, {
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded'
-        },
-        method: 'POST',
-        body: data
-      }).then(resp => {
-        if (resp?.ok) {
-          return resp.json();
-        } else {
-          throw new Error('Unable to get automatic translation result');
-        }
-      });
-    }
   }
 };
 </script>
diff --git a/webapps/src/main/webapp/javascript/automatic-translation/extensions.js b/webapps/src/main/webapp/javascript/automatic-translation/extensions.js
@@ -100,13 +100,21 @@
     });
 
     extensionRegistry.registerExtension('notes', 'translation-menu-extension', {
-      id: 'auto-translate',
+      id: 'notes-auto-translate',
       rank: 1000,
       componentOptions: {
         vueComponent: Vue.options.components['note-automatic-translation'],
       },
     });
 
+    extensionRegistry.registerExtension('news', 'translation-menu-extension', {
+      id: 'news-auto-translate',
+      rank: 1000,
+      componentOptions: {
+        vueComponent: Vue.options.components['news-automatic-translation'],
+      },
+    });
+
     extensionRegistry.registerComponent('ActivityContent', 'activity-content-extensions', {
       id: 'translatedBody',
       vueComponent: Vue.options.components['activity-translated-body'],

diff --git a/webapps/src/main/webapp/javascript/automatic-translation/initComponents.js b/webapps/src/main/webapp/javascript/automatic-translation/initComponents.js
@@ -17,11 +17,13 @@
 import ActivityTranslatedBody from './components/ActivityTranslatedBody.vue';
 import ActivityCommentTranslatedBody from './components/ActivityCommentTranslatedBody.vue';
 import NoteAutomaticTranslation from './components/NoteAutomaticTranslation.vue';
+import NewsAutomaticTranslation from './components/NewsAutomaticTranslation.vue';
 
 const components = {
   'activity-translated-body': ActivityTranslatedBody,
   'activity-comment-translated-body': ActivityCommentTranslatedBody,
-  'note-automatic-translation': NoteAutomaticTranslation
+  'note-automatic-translation': NoteAutomaticTranslation,
+  'news-automatic-translation': NewsAutomaticTranslation
 };
 
 for (const key in components) {

diff --git a/...main/webapp/vue-apps/automatic-translation-administration/automaticTranslationServices.js b/...main/webapp/vue-apps/automatic-translation-administration/automaticTranslationServices.js
@@ -48,3 +48,19 @@ export function setApiKey(connector,apikey) {
     });
 }
 
+export function fetchAutoTranslation(content) {
+  const data = `message=${  encodeURIComponent(content)  }&locale=${  eXo.env.portal.language}`;
+  return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/automatic-translation/translate`, {
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    method: 'POST',
+    body: data
+  }).then(resp => {
+    if (resp?.ok) {
+      return resp.json();
+    } else {
+      throw new Error('Unable to get automatic translation result');
+    }
+  });
+}