feat: ui/ux enhancement in notes automatic-translation option - EXO-6…

…6881

 ui/ux enhancement in notes automatic-translation option

webapps/src/main/webapp/javascript/automatic-translation/components/NewsAutomaticTranslation.vue

@@ -1,3 +1,19 @@
+<!--
+Copyright (C) 2023 eXo Platform SAS.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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>
   <v-tooltip bottom>
     <template #activator="{ on, attrs }">

webapps/src/main/webapp/javascript/automatic-translation/components/NoteAutomaticTranslation.vue

@@ -1,23 +1,35 @@
+<!--
+Copyright (C) 2023 eXo Platform SAS.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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>
   <v-chip
-    v-if="autoTranslatedContent"
     small
-    close
     :outlined="!isAutoTranslationSelected"
+    :close="!!autoTranslatedContent"
     color="primary"
     class="my-auto mx-1"
-    @click="setAutoTranslationSelected"
+    @click="autoTranslate"
     @click:close="resetAutoTranslation">
     {{ $t('notes.automatic.translation.label') }}
+    <span
+      v-if="sourceLanguageVersion"
+      class="text-uppercase ms-1">
+      ({{ sourceLanguageVersion }})
+    </span>
   </v-chip>
-  <v-btn
-    v-else
-    text
-    color="primary"
-    class="px-1 py-0 text-decoration-underline"
-    @click="autoTranslate">
-    {{ $t('UIActivity.label.translate') }}
-  </v-btn>
 </template>
 
 <script>
@@ -32,7 +44,7 @@ export default {
       isAutoTranslating: false,
       isResetAutoTranslating: false,
       autoTranslation: { value: 'autoTranslation', text: this.$t('notes.automatic.translation.label') },
-      previouslySelectedVersion: null,
+      previouslyTranslatedVersion: null,
       autoTranslatedContent: null,
       autoTranslatedTitle: null,
       hasContent: false
@@ -59,25 +71,34 @@ export default {
   computed: {
     isAutoTranslationSelected() {
       return this.selectedTranslation?.value === this.autoTranslation?.value;
+    },
+    sourceLanguageVersion() {
+      return !!this.autoTranslatedContent && this.previouslyTranslatedVersion?.value;
     }
   },
   methods: {
     autoTranslate() {
-      this.isAutoTranslating = true;
-      fetchAutoTranslation(this.note.title).then(translated => {
-        this.handleTranslatedTitle(translated.translation);
-        if (this.note?.content) {
-          this.hasContent = true;
-          const content = this.excludeHtmlSpaceEntities(this.note.content);
-          fetchAutoTranslation(content).then(translated => {
-            this.handleTranslatedContent(translated.translation);
+      if (this.autoTranslatedContent) {
+        this.setAutoTranslationSelected();
+      } else {
+        this.isAutoTranslating = true;
+        fetchAutoTranslation(this.note.title).then(translated => {
+          this.handleTranslatedTitle(translated.translation);
+          if (this.note?.content) {
+            this.hasContent = true;
+            const content = this.excludeHtmlSpaceEntities(this.note.content);
+            fetchAutoTranslation(content).then(translated => {
+              this.handleTranslatedContent(translated.translation);
+              this.setAutoTranslationSelected();
+              this.previouslyTranslatedVersion = this.selectedTranslation;
+              this.isAutoTranslating = false;
+            }).catch(() => this.isAutoTranslating = false);
+          } else {
+            this.hasContent = false;
             this.isAutoTranslating = false;
-          }).catch(() => this.isAutoTranslating = false);
-        } else {
-          this.hasContent = false;
-          this.isAutoTranslating = false;
-        }
-      }).catch(() => this.isAutoTranslating = false);
+          }
+        }).catch(() => this.isAutoTranslating = false);
+      }
     },
     excludeHtmlSpaceEntities(content) {
       return content.replace(/&nbsp;/gi, '<span class="notranslate">&nbsp;</span>');
@@ -111,7 +132,7 @@ export default {
       this.autoTranslatedContent = this.autoTranslatedTitle = null;
       this.updateNoteTitle(this.note.title);
       this.updateNoteContent(this.note.content);
-      this.updateSelectedTranslation(this.previouslySelectedVersion);
+      this.updateSelectedTranslation(this.previouslyTranslatedVersion);
       this.isResetAutoTranslating = false;
     },
     handleTranslatedTitle(translatedText) {
@@ -121,7 +142,6 @@ export default {
     handleTranslatedContent(translatedText) {
       this.autoTranslatedContent = this.restoreHtmlSpaceEntities(translatedText);
       this.updateNoteContent(this.autoTranslatedContent);
-      this.previouslySelectedVersion = this.selectedTranslation;
       this.updateSelectedTranslation(this.autoTranslation);
     },
     toggleTopBarLoading(loading) {