feat: Reuse centralized Toast Notifs component - MEED-2627 - Meeds-io…

…/MIPs#99 (#772) Prior to this change, the used toast notifications wasn't relying on the centralized reusable component to display alerts. This change removes the specific alerts in order to reuse the centralized component.
Meeds-io · Oct 17, 2023 · 26e88ca · 26e88ca
1 parent bd844fe
commit 26e88ca
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 80 deletions.
diff --git a/notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js b/notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js
@@ -212,7 +212,7 @@ export function getPathByNoteOwner(note, noteAppName) {
   if (!noteAppName) {
     noteAppName = 'notes';
   }
-  if (note.wikiType === 'group') {
+  if (note.wikiType === 'group' && note?.url) {
     const spaceName = note.wikiOwner.split('/spaces/')[1];
     const spaceDisplayName = note.url.split(`/portal/g/:spaces:${spaceName}/`)[1].split('/')[0];
     return `${eXo.env.portal.context}/g/:spaces:${spaceName}/${spaceDisplayName}/${noteAppName}/${note.id}`;

diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -42,16 +42,7 @@
   }
 }
 
-.v-alert.lengthyAlertMessage {
-  max-width: 39% !important;
-}
-
 .notesEditor {
-  .v-alert__content {
-    .dropDraftLink {
-      text-decoration: underline;
-    }
-  }
 
   .customTableDrawer {
     z-index: 99999 !important;
@@ -62,10 +53,6 @@
     }
   }
 
-  .v-alert {
-    z-index: 99999 !important;
-  }
-
   #notesEditor {
     position: fixed;
     height: 100%;

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -1,17 +1,5 @@
 <template>
   <v-app class="notesEditor">
-    <v-alert
-      v-model="alert"
-      :class="alertMessageClass"
-      :type="alertType"
-      :icon="alertType === 'warning' ? 'mdi-alert-circle' : ''"
-      dismissible>
-      {{ message }}
-      <a 
-        v-if="alertType === 'warning' && note.draftPage" 
-        class="dropDraftLink"
-        @click="dropDraft">{{ $t('notes.label.drop.draft') }}</a>
-    </v-alert>
     <div
       id="notesEditor"
       class="notesEditor width-full">
@@ -239,9 +227,7 @@ export default {
     this.$root.$on('updateData', data => {
       this.note.content= data;
     });
-    this.$root.$on('show-alert', message => {
-      this.displayMessage(message);
-    });
+    this.$root.$on('show-alert', this.displayMessage);
     this.$root.$on('display-treeview-items', filter => {
       if ( urlParams.has('noteId') ) {
         this.$refs.noteTreeview.open(this.note, 'includePages', null, filter);
@@ -326,11 +312,7 @@ export default {
         latestDraft = Object.keys(latestDraft).length !== 0 ? latestDraft : null;
         if (latestDraft) {
           this.fillNote(latestDraft);
-          const messageObject = {
-            type: 'warning',
-            message: `${this.$t('notes.alert.warning.label.draft.drop')} ${this.$dateUtil.formatDateObjectToDisplay(new Date(this.note.updatedDate.time), this.dateTimeFormat, this.lang)},`
-          };
-          this.displayMessage(messageObject, true);
+          this.displayDraftMessage();
           this.initActualNoteDone = true;
         } else {
           this.$notesService.getNoteById(id).then(data => {
@@ -345,11 +327,7 @@ export default {
         this.init();
         this.fillNote(data);
       }).finally(() => {
-        const messageObject = {
-          type: 'warning',
-          message: `${this.$t('notes.alert.warning.label.draft.drop')} ${this.$dateUtil.formatDateObjectToDisplay(new Date(this.note.updatedDate.time), this.dateTimeFormat, this.lang)},  `
-        };
-        this.displayMessage(messageObject, true);
+        this.displayDraftMessage();
         this.initActualNoteDone = true;
       });
     },
@@ -778,13 +756,24 @@ export default {
         return true;
       }
     },
-    displayMessage(message, keepAlert) {
-      this.message = message.message;
-      this.alertType = message.type;
-      this.alert = true;
-      if (!keepAlert) {
-        window.setTimeout(() => this.alert = false, 5000);
-      }
+    displayDraftMessage() {
+      this.displayMessage({
+        type: 'warning',
+        message: `
+          <span class="pe-1">${this.$t('notes.alert.warning.label.draft.drop')}</span>
+          <span>${this.$dateUtil.formatDateObjectToDisplay(new Date(this.note.updatedDate.time), this.dateTimeFormat, this.lang)}</span>
+        `,
+        linkText: this.$t('notes.label.drop.draft'),
+        linkCallback: () => this.dropDraft(),
+      });
+    },
+    displayMessage(message) {
+      document.dispatchEvent(new CustomEvent('alert-message-html', {detail: {
+        alertMessage: message?.message,
+        alertType: message?.type,
+        alertLinkText: message?.linkText,
+        alertLinkCallback: message?.linkCallback,
+      }}));
     },
     displayFormTitle() {
       const urlParams = new URLSearchParams(window.location.search);

diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
@@ -252,15 +252,6 @@
       @ok="deleteNote()"
       @dialog-opened="$emit('confirmDialogOpened')"
       @dialog-closed="$emit('confirmDialogClosed')" />
-    <v-alert
-      v-model="alert"
-      :class="alertMessageClass"
-      :type="type"
-      :icon="type === 'warning' ? 'mdi-alert-circle' : ''"
-      @input="onclose"
-      dismissible>
-      {{ message }}
-    </v-alert>
   </v-app>
 </template>
 <script>
@@ -300,9 +291,6 @@ export default {
       existingNote: true,
       currentPath: window.location.pathname,
       currentNoteBreadcrumb: [],
-      alert: false,
-      type: '',
-      message: '',
       loadData: false,
       openTreeView: false,
       hideElementsForSavingPDF: false,
@@ -507,12 +495,6 @@ export default {
       const uris = eXo.env.portal.selectedNodeUri.split('/');
       return uris[uris.length - 1];
     },
-    alertWarningDisplayed(){
-      return (localStorage.getItem(`displayAlertSpaceId-${this.spaceId}`) === 'already_display');
-    },
-    alertMessageClass(){
-      return  this.message.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, '').trim().length > 45 ? 'lengthyAlertMessage' : '';
-    }
   },
   created() {
     if (this.currentPath.endsWith('draft')) {
@@ -529,9 +511,7 @@ export default {
     this.$root.$on('confirmDeleteNote', () => {
       this.confirmDeleteNote();
     });
-    this.$root.$on('show-alert', message => {
-      this.displayMessage(message);
-    });
+    this.$root.$on('show-alert', this.displayMessage);
     this.$root.$on('delete-note', () => {
       this.confirmDeleteNote();
     });
@@ -783,25 +763,16 @@ export default {
           const filename = `${note.title}.pdf`;
           pdf.save(filename);
         }).catch(e => {
-          const messageObject = {
+          this.displayMessage({
             type: 'error',
             message: this.$t('notes.message.export.error')
-          };
-          this.displayMessage(messageObject);
+          });
           console.error('Error when exporting note: ', e);
         });
       });
     },
-    displayMessage(message, keepAlert) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      if (!keepAlert) {
-        window.setTimeout(() => this.alert = false, 5000);
-      }
-    },
-    onclose() {
-      localStorage.setItem(`displayAlertSpaceId-${this.spaceId}`, 'already_display');
+    displayMessage(message) {
+      this.$root.$emit('alert-message', message?.message, message?.type || 'success');
     },
     getNoteVersionByNoteId(noteId) {
       this.noteVersionsArray = [];