MEED-2071 Add the ability to send a kudos from the composer

kudos-services/src/main/resources/locale/addon/Kudos_en.properties

@@ -6,6 +6,7 @@ NewKudosSentActivityComment.activity_kudos_content={3} Kudos to {1} {2}
 NewKudosSentActivityComment.activity_kudos_title=Kudos to {0}
 
 exoplatform.kudos.title.sendAKudos=Send a Kudos
+exoplatform.kudos.receiver.title=Kudos Receiver
 exoplatform.kudos.content.to=To:
 exoplatform.kudos.choose.audience=Choose an audience:
 exoplatform.kudos.title.message=Message:
@@ -29,6 +30,7 @@ exoplatform.kudos.audience.noDataLabel=No space found
 
 exoplatform.kudos.receiver.searchPlaceholder=Start typing to search
 exoplatform.kudos.receiver.placeholder=Add Receiver
+exoplatform.kudos.choose.receiver.placeholder=Choose who will receive your Kudos
 exoplatform.kudos.receiver.noDataLabel=Not found
 exoplatform.kudos.receiver.noDataLabelInSpace=Not found in space
 

kudos-services/src/main/resources/locale/addon/Kudos_fr.properties

@@ -6,6 +6,7 @@ NewKudosSentActivityComment.activity_kudos_content={3} Kudos \u00E0 {1} {2}
 NewKudosSentActivityComment.activity_kudos_title=Kudos \u00E0 {0}
 
 exoplatform.kudos.title.sendAKudos=Envoyer un kudos
+exoplatform.kudos.receiver.title=Le destinataire du Kudos
 exoplatform.kudos.content.to=\u00C0 :
 exoplatform.kudos.choose.audience=Choisir l'audience :
 exoplatform.kudos.title.message=Message :
@@ -29,6 +30,7 @@ exoplatform.kudos.audience.noDataLabel=Aucun espace trouv\u00E9
 
 exoplatform.kudos.receiver.searchPlaceholder=Commencez \u00E0 taper pour chercher
 exoplatform.kudos.receiver.placeholder=Ajouter un destinataire
+exoplatform.kudos.choose.receiver.placeholder=Choisissez qui recevra vos Kudos
 exoplatform.kudos.receiver.noDataLabel=Non trouv\u00E9
 exoplatform.kudos.receiver.noDataLabelInSpace=Non trouv\u00E9 dans l'espace
 

kudos-webapps/src/main/webapp/vue-app/js/Kudos.js

@@ -219,6 +219,14 @@ export function registerOverviewExtension() {
   }); 
 }
 
+export function registerComposerExtension() {
+  extensionRegistry.registerComponent('ActivityComposerKudos', 'activity-composer-kudos-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',

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);

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="composerDisplay">
+              <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,32 +42,86 @@
                   width="220"
                   class="user-suggester" />
               </div>
-              <exo-user-avatar
-                v-else
-                class="d-flex flex-row pl-4"
-                :identity="identity"
-                :size="32"
-                :popover="false" />
+              <v-list-item class="text-truncate px-0 pt-7">
+                <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>
             </div>
-            <div v-if="!isLinkedKudos">
-              <div class="d-flex flex-row pt-5">
-                <span class="text-header-title">{{ $t('exoplatform.kudos.choose.audience') }} </span>
+            <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 class="d-flex flex-row">
-                <exo-identity-suggester
-                  ref="audienceSuggester"
-                  v-model="audience"
-                  :labels="spaceSuggesterLabels"
-                  :include-users="false"
-                  :width="220"
-                  name="audienceAutocomplete"
-                  class="user-suggester"
-                  include-spaces
-                  only-redactor
-                  required />
+              <div v-if="!isLinkedKudos">
+                <div class="d-flex flex-row pt-5">
+                  <span class="text-header-title">{{ $t('exoplatform.kudos.choose.audience') }} </span>
+                </div>
+                <div class="d-flex flex-row">
+                  <exo-identity-suggester
+                    ref="audienceSuggester"
+                    v-model="audience"
+                    :labels="spaceSuggesterLabels"
+                    :include-users="false"
+                    :width="220"
+                    name="audienceAutocomplete"
+                    class="user-suggester"
+                    include-spaces
+                    only-redactor
+                    required />
+                </div>
               </div>
             </div>
-            <div class="d-flex flex-row pt-5">
+            <div v-if="!composerDisplay" class="d-flex flex-row pt-5">
               <span class="text-header-title">{{ $t('exoplatform.kudos.title.message') }} </span>
             </div>
             <div class="d-flex flex-row pt-3">
@@ -168,7 +220,10 @@ export default {
       selectedReceiver: null,
       spaceURL: null,
       audience: '',
-      objectType: 'activity'
+      objectType: 'activity',
+      composerDisplay: 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.composerDisplay) {
+            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
       };
@@ -227,7 +284,7 @@ export default {
     receiverSuggesterLabels() {
       return {
         searchPlaceholder: this.$t('exoplatform.kudos.receiver.searchPlaceholder'),
-        placeholder: this.$t('exoplatform.kudos.receiver.placeholder'),
+        placeholder: this.composerDisplay ? this.$t('exoplatform.kudos.choose.receiver.placeholder') : this.$t('exoplatform.kudos.receiver.placeholder'),
         noDataLabel: this.spaceURL ? this.$t('exoplatform.kudos.receiver.noDataLabelInSpace') : this.$t('exoplatform.kudos.receiver.noDataLabel'),
       };
     },
@@ -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.composerDisplay = event?.detail?.composerDisplay;
             this.entityType = event && event.detail && event.detail.type;
             this.entityId = event && event.detail && event.detail.id;
             this.metadataObjectId = null;
@@ -445,10 +502,10 @@ export default {
         entityType: this.entityType,
         entityId: this.entityId,
         parentEntityId: this.parentEntityId,
-        receiverType: this.receiverType,
-        receiverId: this.receiverId,
+        receiverType: this.composerDisplay ? 'user' : this.receiverType,
+        receiverId: this.composerDisplay ? this.selectedReceiver.remoteId : this.receiverId,
         message: this.kudosMessage,
-        spacePrettyName: this.audience?.remoteId
+        spacePrettyName: this.composerDisplay ? this.spaceId : this.audience?.remoteId
       };
       sendKudos(kudos)
         .then(kudosSent => {

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: 'SPACE_PROFILE',
+        parentId: '',
+        owner: eXo.env.portal.userName,
+        spaceURL: eXo.env.portal.spaceURL,
+        composerDisplay: true
+      }}));
+    },
+  },
+};
+</script> 

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) {