feat: Make Users Leaderboard contextual switch current space - MEED-7648

- Meeds-io/MIPs#150 (#1759) This change will make contributions and contributors widgets contextual with Space Context.
Meeds-io · Oct 25, 2024 · 37f1a84 · 37f1a84
1 parent 7fffef7
commit 37f1a84
Show file tree

Hide file tree

Showing 31 changed files with 556 additions and 292 deletions.
diff --git a/portlets/src/main/resources/locale/portlet/Challenges_en.properties b/portlets/src/main/resources/locale/portlet/Challenges_en.properties
@@ -411,6 +411,7 @@ program.filter.noResults=No program found
 gamification.overview.badgesTitle=Badges and recognition
 gamification.overview.reputationsTitle=My Reputation
 gamification.overview.topChallengersTitle=Top Contributors
+gamification.overview.space.topChallengersTitle=Community Contributions
 gamification.overview.emptyChallengesOverviewTitle=Take a new challenge
 gamification.overview.challengesOverviewTitle=Actions
 gamification.overview.programsOverviewTitle=Contribution Programs
@@ -427,6 +428,10 @@ search.connector.label.rules=Actions
 gamification.overview.send=Send
 gamification.overview.badges=Badges
 gamification.overview.programs=Programs
+gamification.overview.space.weeklyLeaderboard=Community Weekly Leaderboard
+gamification.overview.space.monthlyLeaderboard=Community Monthly Leaderboard
+gamification.overview.space.quarterlyLeaderboard=Community Quarterly Leaderboard
+gamification.overview.space.allTimeLeaderboard=Community all time Leaderboard
 gamification.overview.weeklyLeaderboard=Weekly Leaderboard
 gamification.overview.monthlyLeaderboard=Monthly Leaderboard
 gamification.overview.quarterlyLeaderboard=Quarterly Leaderboard

diff --git a/portlets/src/main/webapp/vue-app/badgesOverview/components/BadgesOverviewDrawer.vue b/portlets/src/main/webapp/vue-app/badgesOverview/components/BadgesOverviewDrawer.vue
@@ -99,6 +99,7 @@ export default {
       };
       const users = await this.$leaderboardService.getLeaderboard({
         identityId: eXo.env.portal.profileOwnerIdentityId,
+        spaceId: eXo.env.portal.spaceId || null,
         programId: this.programId,
         period: this.period,
         limit: 0,

diff --git a/portlets/src/main/webapp/vue-app/engagement-center/js/ProgramService.js b/portlets/src/main/webapp/vue-app/engagement-center/js/ProgramService.js
@@ -30,6 +30,9 @@ export function getPrograms(filter) {
   if (filter?.query) {
     formData.append('query', filter.query);
   }
+  if (filter?.spaceId) {
+    formData.append('spaceId', filter.spaceId);
+  }
   if (filter?.includeDeleted) {
     formData.append('includeDeleted', 'true');
   }

diff --git a/portlets/src/main/webapp/vue-app/myContributions/components/MyContributions.vue b/portlets/src/main/webapp/vue-app/myContributions/components/MyContributions.vue
@@ -155,6 +155,7 @@ export default {
     retrieveAllPeriodUserStats() {
       return this.$leaderboardService.getLeaderboard({
         identityId: eXo.env.portal.profileOwnerIdentityId,
+        spaceId: eXo.env.portal.spaceId || null,
         period: 'ALL',
         limit: 0,
       })
@@ -167,6 +168,7 @@ export default {
       this.loading = true;
       return this.$leaderboardService.getLeaderboard({
         identityId: eXo.env.portal.profileOwnerIdentityId,
+        spaceId: eXo.env.portal.spaceId || null,
         period: this.$root.myContributionsPeriod,
         limit: 0,
       })

diff --git a/portlets/src/main/webapp/vue-app/myContributions/components/MyContributionsProfileChart.vue b/portlets/src/main/webapp/vue-app/myContributions/components/MyContributionsProfileChart.vue
@@ -144,7 +144,7 @@ export default {
 
       return new Promise((resolve, reject) => {
         this.programs = [];
-        this.$leaderboardService.getStats(this.identityId, this.period)
+        this.$leaderboardService.getStats(this.identityId, this.period, 0, eXo.env.portal.spaceId)
           .then(stats => {
             this.chartData = stats.map(s => {
               this.programs.push({

diff --git a/portlets/src/main/webapp/vue-app/profileStats/components/GamificationRank.vue b/portlets/src/main/webapp/vue-app/profileStats/components/GamificationRank.vue
@@ -150,10 +150,13 @@ export default {
     displayPlaceholder() {
       return !this.loading && !this.users?.length;
     },
+    placeholderPrefix() {
+      return eXo.env.portal.spaceId && 'gamification.overview.space.' || 'gamification.overview.';
+    },
     placeholder() {
       return this.period === 'all' ?
-        this.$t('gamification.overview.allTimeLeaderboard')
-        : this.$t(`gamification.overview.${this.period.toLowerCase()}lyLeaderboard`);
+        this.$t(`${this.placeholderPrefix}allTimeLeaderboard`)
+        : this.$t(`${this.placeholderPrefix}${this.period.toLowerCase()}lyLeaderboard`);
     },
     displayCurrentPosition() {
       return this.isOverviewDisplay ? (this.$root.topChallengersCurrentPosition || false) : true;
@@ -186,6 +189,7 @@ export default {
       this.loading = true;
       return this.$leaderboardService.getLeaderboard({
         identityId: this.identityId,
+        spaceId: eXo.env.portal.spaceId || null,
         period: this.period,
         limit: this.podiumLimit,
       })

diff --git a/portlets/src/main/webapp/vue-app/topChallengers/components/TopChallengers.vue b/portlets/src/main/webapp/vue-app/topChallengers/components/TopChallengers.vue
@@ -28,7 +28,7 @@
         <template #title>
           <div class="d-flex flex-grow-1 full-width position-relative">
             <div v-if="!displayPlaceholder && !loading" class="widget-text-header text-capitalize-first-letter text-truncate">
-              {{ $t('gamification.overview.topChallengersTitle') }}
+              {{ spaceId && $t('gamification.overview.space.topChallengersTitle') || $t('gamification.overview.topChallengersTitle') }}
             </div>
             <div class="spacer"></div>
             <div
@@ -106,6 +106,7 @@ export default {
     registrationSettings: null,
     rankDisplayed: false,
     loading: true,
+    spaceId: eXo.env.portal.spaceId,
     pageSize: Math.max(10, parseInt((window.innerHeight - 122) / 45)),
   }),
   computed: {

diff --git a/...s/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileAchievementsDrawer.vue b/...s/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileAchievementsDrawer.vue
@@ -187,6 +187,7 @@ export default {
       this.loading = true;
       this.$leaderboardService.getLeaderboard({
         identityId,
+        spaceId: eXo.env.portal.spaceId || null,
         period: this.period,
         dateInSeconds: this.dateInSeconds,
         limit: 0,
@@ -212,7 +213,9 @@ export default {
       if (this.programs) {
         return Promise.resolve(this.programs);
       } else {
-        return this.$leaderboardService.getPrograms()
+        return this.$leaderboardService.getPrograms({
+          spaceId: eXo.env.portal.spaceId || null,
+        })
           .then(data => this.programs = data?.programs || [])
           .finally(() => this.loading = false);
       }

diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileChart.vue b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileChart.vue
@@ -182,7 +182,7 @@ export default {
       }
 
       return new Promise((resolve, reject) => {
-        this.$leaderboardService.getStats(this.identityId, this.period, this.dateInSeconds)
+        this.$leaderboardService.getStats(this.identityId, this.period, this.dateInSeconds, eXo.env.portal.spaceId)
           .then(stats => {
             let id = 0;
             this.chartData = stats.map(s => {

diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizations.vue b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizations.vue
@@ -57,6 +57,7 @@ export default {
     sortBy: 'date',
     sortDescending: true,
     realizations: [],
+    programIds: null,
     lang: eXo.env.portal.language,
   }),
   computed: {
@@ -67,7 +68,7 @@ export default {
       return {
         status: 'ACCEPTED',
         earnerIds: [this.identityId],
-        programIds: this.programId && [this.programId],
+        programIds: this.programIds || (this.programId && [this.programId]),
         allPrograms: true,
         sortBy: this.sortBy,
         fromDate: this.fromDateInSecond ? new Date(this.fromDateInSecond * 1000).toISOString() : null,
@@ -93,13 +94,25 @@ export default {
     this.retrieveRealizations();
   },
   methods: {
-    retrieveRealizations() {
+    async retrieveRealizations() {
       this.loading = true;
+      if (eXo.env.portal.spaceId && !this.programIds?.length) {
+        const data = await this.$programService.getPrograms({
+          spaceId: eXo.env.portal.spaceId,
+          returnSize: false,
+        });
+        const programs = data?.programs || [];
+        if (!programs.length) {
+          return;
+        }
+        this.programIds = programs?.map?.(p => p.id) || [];
+        await this.$nextTick();
+      }
       return this.$realizationService.getRealizations({
+        ...this.realizationsFilter,
         offset: this.realizations.length,
         limit: this.pageSize,
-        returnSize: true,
-        ...this.realizationsFilter})
+        returnSize: true,})
         .then(data => {
           if (data.realizations.length) {
             this.realizations.push(...data.realizations);

diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProgramSelectorDrawer.vue b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProgramSelectorDrawer.vue
@@ -124,7 +124,9 @@ export default {
         });
     },
     retrievePrograms() {
-      return this.$leaderboardService.getPrograms()
+      return this.$leaderboardService.getPrograms({
+        spaceId: eXo.env.portal.spaceId,
+      })
         .then(data => {
           const programs = data?.programs || [];
           const defaultProgram = {

diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/Tabs.vue b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/Tabs.vue
@@ -178,6 +178,7 @@ export default {
       this.loading = true;
       return this.$leaderboardService.getLeaderboard({
         programId: this.programId,
+        spaceId: eXo.env.portal.spaceId || null,
         identityId: eXo.env.portal.profileOwnerIdentityId,
         period: this.selectedPeriod,
         limit,

diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/js/LeaderboardService.js b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/js/LeaderboardService.js
@@ -31,6 +31,9 @@ export function getPrograms(filter) {
   if (filter?.query) {
     formData.append('query', filter.query);
   }
+  if (filter?.spaceId) {
+    formData.append('spaceId', filter.spaceId);
+  }
   if (filter?.includeDeleted) {
     formData.append('includeDeleted', 'true');
   }
@@ -68,6 +71,9 @@ export function getLeaderboard(filter) {
   if (filter.programId && filter.programId !== '0') {
     formData.append('programId', filter.programId);
   }
+  if (filter.spaceId && filter.spaceId !== '0') {
+    formData.append('spaceId', filter.spaceId);
+  }
   if (filter.identityId) {
     formData.append('identityId', filter.identityId);
   }
@@ -92,8 +98,17 @@ export function getLeaderboard(filter) {
   });
 }
 
-export function getStats(identityId, period, dateInSeconds) {
-  return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/gamification/leaderboard/stats/${identityId}?period=${period || 'WEEK'}&dateInSeconds=${dateInSeconds || '0'}`, {
+export function getStats(identityId, period, dateInSeconds, spaceId) {
+  const formData = new FormData();
+  formData.append('period', period || 'WEEK');
+  if (dateInSeconds) {
+    formData.append('dateInSeconds', dateInSeconds);
+  }
+  if (spaceId) {
+    formData.append('spaceId', spaceId);
+  }
+  const params = decodeURIComponent(new URLSearchParams(formData).toString());
+  return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/gamification/leaderboard/stats/${identityId}?${params}`, {
     method: 'GET',
     credentials: 'include',
   }).then((resp) => {