Meeds-io · MayTekayaa · Aug 14, 2023 · Aug 11, 2023
diff --git a/kudos-services/src/main/resources/locale/addon/Kudos_en.properties b/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
@@ -31,6 +31,7 @@ exoplatform.kudos.receiver.searchPlaceholder=Start typing to search
 exoplatform.kudos.receiver.placeholder=Add Receiver
 exoplatform.kudos.receiver.noDataLabel=Not found
 exoplatform.kudos.receiver.noDataLabelInSpace=Not found in space
+exoplatform.kudos.receiver.title=Kudos Receiver
 
 exoplatform.kudos.error.errorSavingKudosSettings=Error saving Kudos settings. Please try again. If the problem remains, please contact your administrator
 exoplatform.kudos.error.errorSendingKudos=Error sending kudos. Please try again. If the problem remains, please contact your administrator

diff --git a/kudos-services/src/main/resources/locale/addon/Kudos_fr.properties b/kudos-services/src/main/resources/locale/addon/Kudos_fr.properties
@@ -31,6 +31,7 @@ exoplatform.kudos.receiver.searchPlaceholder=Commencez \u00E0 taper pour cherche
 exoplatform.kudos.receiver.placeholder=Ajouter un destinataire
 exoplatform.kudos.receiver.noDataLabel=Non trouv\u00E9
 exoplatform.kudos.receiver.noDataLabelInSpace=Non trouv\u00E9 dans l'espace
+exoplatform.kudos.receiver.title=Le destinataire du Kudos
 
 exoplatform.kudos.error.errorSavingKudosSettings=Erreur lors de l'enregistrement des param\u00E8tres Kudos. Essayez \u00E0 nouveau. Si le probl\u00E8me persiste, veuillez contacter votre administrateur
 exoplatform.kudos.error.errorSendingKudos=Erreur lors de l'envoi du kudos. Essayez \u00E0 nouveau et si le probl\u00E8me persiste, veuillez contacter votre administrateur

diff --git a/kudos-webapps/src/main/webapp/vue-app/js/Kudos.js b/kudos-webapps/src/main/webapp/vue-app/js/Kudos.js
@@ -219,6 +219,14 @@ export function registerOverviewExtension() {
   }); 
 }
 
+export function registerComposerExtension() {
+  extensionRegistry.registerComponent('ComposerAction', 'composer-action-item', {
+    id: 'sendKudosButton',
+    vueComponent: Vue.options.components['send-kudos-composer'],
+    rank: 1,
+  });
+}
+
 export function registerFavoriteExtensions(title) {
   extensionRegistry.registerExtension('ActivityFavoriteIcon', 'activity-favorite-icon-extensions', {
     id: 'favorite-kudos',

diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/components/KudosAPI.vue b/kudos-webapps/src/main/webapp/vue-app/kudos/components/KudosAPI.vue
@@ -7,6 +7,7 @@ export default {
     this.$kudosService.registerExternalExtensions(this.$t('exoplatform.kudos.title.sendAKudos'));
     this.$kudosService.registerFavoriteExtensions(this.$t('exoplatform.kudos.label.to'));
     this.$kudosService.registerOverviewExtension();
+    this.$kudosService.registerComposerExtension();
     this.$kudosService.registerActivityActionExtension();
     this.$kudosService.registerActivityReactionTabs();
     document.addEventListener('display-activity-details', this.getActivityInformations);

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
@@ -27,11 +27,9 @@
           ref="activityKudosForm"
           class="flex mx-4">
           <div class="d-flex flex-column flex-grow-1">
-            <div class="d-flex flex-row pt-5 align-center">
-              <span class="text-header-title text-no-wrap">{{ $t('exoplatform.kudos.content.to') }}</span>
-              <div
-                v-if="isLinkedKudos"
-                class="d-flex flex-row pl-4 mb-2 text-truncate kudosReceiverAttendeeItem">
+            <div v-if="readOnlySpace">
+              <div class="d-flex flex-column pt-5">
+                <span class="text-header-title text-no-wrap">{{ $t('exoplatform.kudos.receiver.title') }}</span>
                 <exo-identity-suggester
                   ref="kudosReceiverAutoComplete"
                   id="kudosReceiverAutoComplete"
@@ -44,14 +42,34 @@
                   width="220"
                   class="user-suggester" />
               </div>
-              <exo-user-avatar
-                v-else
-                class="d-flex flex-row pl-4"
-                :identity="identity"
-                :size="32"
-                :popover="false" />
             </div>
-            <div v-if="!isLinkedKudos">
+            <div v-else>
+              <div class="d-flex flex-row pt-5 align-center">
+                <span class="text-header-title text-no-wrap">{{ $t('exoplatform.kudos.content.to') }}</span>
+                <div
+                  v-if="isLinkedKudos"
+                  class="d-flex flex-row pl-4 mb-2 text-truncate kudosReceiverAttendeeItem">
+                  <exo-identity-suggester
+                    ref="kudosReceiverAutoComplete"
+                    id="kudosReceiverAutoComplete"
+                    v-model="selectedReceiver"
+                    :labels="receiverSuggesterLabels"
+                    :search-options="searchOptions"
+                    :type-of-relations="typeOfRelation"
+                    include-users
+                    name="kudosReceiver"
+                    width="220"
+                    class="user-suggester" />
+                </div>
+                <exo-user-avatar
+                  v-else
+                  class="d-flex flex-row pl-4"
+                  :identity="identity"
+                  :size="32"
+                  :popover="false" />
+              </div>
+            </div>
+            <div v-if="!isLinkedKudos && !readOnlySpace">
               <div class="d-flex flex-row pt-5">
                 <span class="text-header-title">{{ $t('exoplatform.kudos.choose.audience') }} </span>
               </div>
@@ -70,7 +88,41 @@
               </div>
             </div>
             <div class="d-flex flex-row pt-5">
-              <span class="text-header-title">{{ $t('exoplatform.kudos.title.message') }} </span>
+              <v-list-item v-if="readOnlySpace" class="text-truncate px-0 pt-3">
+                <exo-space-avatar
+                  v-if="spaceId"
+                  :space-id="spaceId"
+                  :size="30"
+                  extra-class="text-truncate"
+                  avatar />
+                <exo-user-avatar
+                  :profile-id="username"
+                  :size="spaceId && 25 || 30"
+                  :extra-class="spaceId && 'ms-n4 mt-6' || ''"
+                  avatar />
+                <v-list-item-content class="py-0 accountTitleLabel text-truncate">
+                  <v-list-item-title class="font-weight-bold d-flex body-2 mb-0">
+                    <exo-space-avatar
+                      :space-id="spaceId"
+                      :space="space"
+                      extra-class="text-truncate"
+                      fullname
+                      bold-title
+                      link-style
+                      username-class />
+                  </v-list-item-title>
+                  <v-list-item-subtitle class="d-flex flex-row flex-nowrap">
+                    <exo-user-avatar
+                      :profile-id="username"
+                      extra-class="text-truncate ms-2 me-1"
+                      fullname
+                      link-style
+                      small-font-size
+                      username-class />
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <span v-else class="text-header-title">{{ $t('exoplatform.kudos.title.message') }} </span>
             </div>
             <div class="d-flex flex-row pt-3">
               <rich-editor
@@ -168,7 +220,10 @@ export default {
       selectedReceiver: null,
       spaceURL: null,
       audience: '',
-      objectType: 'activity'
+      objectType: 'activity',
+      readOnlySpace: false,
+      username: eXo.env.portal.userName,
+      spaceId: eXo.env.portal.spaceId,
     };
   },
   watch: {
@@ -190,7 +245,9 @@ export default {
       if (selectedReceiver) {
         if (this.receiverId !== selectedReceiver.remoteId) {
           this.receiverId = selectedReceiver.remoteId;
-          this.displayAlert(this.$t('exoplatform.kudos.success.receiverChanged'));
+          if (!this.readOnlySpace) {
+            this.displayAlert(this.$t('exoplatform.kudos.success.receiverChanged'));
+          }
         }
       }
     },
@@ -212,7 +269,7 @@ export default {
   computed: {
     searchOptions() {
       return {
-        currentUser: eXo.env.portal.userName,
+        currentUser: this.username,
         spaceURL: this.spaceURL,
         activityId: this.entityId
       };
@@ -329,7 +386,7 @@ export default {
             .then(receiverDetails => {
               if (receiverDetails && receiverDetails.id && receiverDetails.type) {
                 receiverDetails.isUserType = receiverDetails.type === 'organization' || receiverDetails.type === 'user';
-                if (!receiverDetails.isUserType || receiverDetails.id !== eXo.env.portal.userName) {
+                if (!receiverDetails.isUserType || receiverDetails.id !== this.username) {
                   if (this.isLinkedKudos) {
                     this.selectedReceiver = {
                       receiverId: receiverDetails.id,
@@ -410,7 +467,7 @@ export default {
         if ( this.remainingKudos > 0 ) {
           this.loading = true;
           this.$nextTick(() => {
-
+            this.readOnlySpace = event?.detail?.readOnlySpace;
             this.entityType = event && event.detail && event.detail.type;
             this.entityId = event && event.detail && event.detail.id;
             this.metadataObjectId = null;
@@ -448,7 +505,7 @@ export default {
         receiverType: this.receiverType,
         receiverId: this.receiverId,
         message: this.kudosMessage,
-        spacePrettyName: this.audience?.remoteId
+        spacePrettyName: this.audience?.remoteId || this.spaceId
       };
       sendKudos(kudos)
         .then(kudosSent => {

diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosComposer.vue b/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosComposer.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-card 
+      class="d-flex flex-row" 
+      @click="openSendKudosDrawer" 
+      outlined 
+      flat 
+      hover>
+      <v-card-actions class="ms-3 me-2">
+        <v-icon
+          color="primary"
+          size="50">
+          fa-award
+        </v-icon>
+      </v-card-actions>
+      <v-card-title class="subtitle-1 font-weight-bold">
+        {{ $t('exoplatform.kudos.title.sendAKudos') }}
+      </v-card-title>
+    </v-card>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    openSendKudosDrawer() {
+      document.dispatchEvent(new CustomEvent('exo-kudos-open-send-modal', {detail: {
+        id: eXo.env.portal.spaceId,
+        type: 'USER_PROFILE',
+        parentId: '',
+        owner: eXo.env.portal.userName,
+        spaceURL: eXo.env.portal.spaceURL,
+        readOnlySpace: true
+      }}));
+    },
+  },
+};
+</script> 
diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/initComponents.js b/kudos-webapps/src/main/webapp/vue-app/kudos/initComponents.js
@@ -2,6 +2,7 @@ import KudosIdentityLink from './components/KudosIdentityLink.vue';
 import KudosAPI from './components/KudosAPI.vue';
 import KudosApp from './components/KudosApp.vue';
 import KudosButton from '../kudos/components/KudosButton.vue';
+import SendKudosComposer from '../kudos/components/SendKudosComposer.vue';
 import PopoverKudosButton from '../kudos/components/PopoverKudosButton.vue';
 import ActivityKudosReactionItem from './components/ActivityKudosReactionItem.vue';
 import ActivityKudosReactionList from './components/ActivityKudosReactionList.vue';
@@ -26,6 +27,7 @@ const components = {
   'activity-kudos-reaction-count': ActivityKudosReactionCount,
   'kudos-overview': KudosOverview,
   'kudos-overview-card': KudosOverviewCard,
+  'send-kudos-composer': SendKudosComposer,
 };
 
 for (const key in components) {