From 20b40620a8241e4710943a86b8533e618f7c297b Mon Sep 17 00:00:00 2001
From: MayTekayaa <mtekaya@exoplatform.com>
Date: Tue, 24 Oct 2023 09:35:19 +0100
Subject: [PATCH] MEED-2749 Fix the mentioned users removed when selecting
 another audience

---
 .../vue-app/kudos/components/KudosApp.vue     | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/components/KudosApp.vue b/kudos-webapps/src/main/webapp/vue-app/kudos/components/KudosApp.vue
index 544eb2ada..28a1a5209 100644
--- a/kudos-webapps/src/main/webapp/vue-app/kudos/components/KudosApp.vue
+++ b/kudos-webapps/src/main/webapp/vue-app/kudos/components/KudosApp.vue
@@ -9,6 +9,7 @@
 
     <exo-drawer
       ref="activityKudosDrawer"
+      v-model="drawer"
       v-draggable="enabled"
       width="500px"
       hide-actions
@@ -174,8 +175,8 @@
               username-class />
             <div class="d-flex flex-row pt-8">
               <rich-editor
+                v-if="drawer"
                 :ref="ckEditorId"
-                :key="spaceURL"
                 v-model="kudosMessage"
                 :max-length="MESSAGE_MAX_LENGTH"
                 :ck-editor-type="ckEditorType"
@@ -305,6 +306,11 @@ export default {
       this.spaceURL = this.audience?.remoteId || null;
       this.spaceId = this.audience?.spaceId || null;
     },
+    spaceURL() {
+      // Clear suggester cache
+      document.dispatchEvent(new CustomEvent('suggester-clear-people-cache'));
+      this.resetRichEditorData();
+    },
     audienceChoice(newVal) {
       if (newVal === 'yourNetwork') {
         this.removeAudience();
@@ -423,7 +429,10 @@ export default {
     },
     displaySenderAvatar() {
       return (this.postInYourNetwork && this.audienceTypesDisplay) || this.isLinkedKudos;
-    }
+    },
+    ckEditorInstance() {
+      return this.drawer && this.$refs.kudosContent || null;
+    },
   },
   methods: {
     init() {
@@ -450,7 +459,7 @@ export default {
         });
     },
     resetEditor() {
-      this.$refs[this.ckEditorId].destroyCKEditor();
+      this.ckEditorInstance.destroyCKEditor();
     },
     initDrawer() {
       this.kudosMessage = '';
@@ -561,7 +570,7 @@ export default {
             this.$refs.activityKudosDrawer.startLoading();
             this.initDrawer()
               .then(() => this.$nextTick())
-              .then(() => this.$refs[this.ckEditorId].initCKEditor())
+              .then(() => this.ckEditorInstance.initCKEditor())
               .finally( () => {
                 this.loading = false;
                 this.$refs.activityKudosDrawer.endLoading();
@@ -579,6 +588,7 @@ export default {
     send() {
       this.error = null;
 
+      const kudosMessage = this.ckEditorInstance.updateMessageBeforPost();
       this.$refs.activityKudosDrawer.startLoading();
       const kudos = {
         entityType: this.entityType,
@@ -586,7 +596,7 @@ export default {
         parentEntityId: this.parentEntityId,
         receiverType: this.receiverType,
         receiverId: this.receiverId,
-        message: this.kudosMessage,
+        message: kudosMessage,
         spacePrettyName: this.audience?.remoteId || this.spaceId
       };
       sendKudos(kudos)
@@ -598,7 +608,7 @@ export default {
           document.dispatchEvent(new CustomEvent('exo-kudos-sent', {detail: kudosSent}));
           return this.$nextTick();
         })
-        .then(() => this.$refs[this.ckEditorId].saveAttachments())
+        .then(() => this.ckEditorInstance.saveAttachments())
         .then(() => {
           return this.init()
             .catch(e => {
@@ -658,7 +668,14 @@ export default {
     },
     removeReceiver() {
       this.selectedReceiver = '';
-    }
+    },
+    resetRichEditorData() {
+      const message = this.ckEditorInstance.getMessage(); 
+      const mentionedUsers = message.match(/@([A-Za-z0-9_'.+-]+)/g)?.map(a => a.replace('@', '')) || null;
+      if (mentionedUsers?.length) {
+        this.ckEditorInstance?.replaceSuggestedUsers?.(message, mentionedUsers, this.spaceId);
+      }
+    },
   }
 };
 </script>