From 1c26b4ceb8e42387c8f6da7cb23b205ef9676475 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <bkhanfir@exoplatform.com>
Date: Mon, 6 Nov 2023 12:22:03 +0100
Subject: [PATCH] feat: Add List Drawers to Programs and rules Widgets -
 MEED-2848 - Meeds-io/MIPs#100 (#1299)

This change will allow to retrieve the list of actions and programs from
overview widgets instead of a direct link to full page applications.
---
 .../locale/portlet/Challenges_en.properties   |   2 +
 .../webapp/vue-app/badgesOverview/main.js     |   2 +-
 .../vue-app/create-program-button/main.js     |   2 +-
 .../webapp/vue-app/myContributions/main.js    |   2 +-
 .../main/webapp/vue-app/myReputation/main.js  |   2 +-
 .../src/main/webapp/vue-app/myRewards/main.js |   2 +-
 .../main/webapp/vue-app/popularSpaces/main.js |   2 +-
 .../main/webapp/vue-app/profileStats/main.js  |   2 +-
 .../components/ProgramDetailDrawer.vue        |   8 +-
 .../components/ProgramOverviewItem.vue        |  14 +-
 .../components/ProgramsOverview.vue           |  28 ++-
 .../components/ProgramsOverviewListDrawer.vue |  90 ++++++++
 .../programsOverview/initComponents.js        |   2 +
 .../webapp/vue-app/programsOverview/main.js   |   2 +-
 .../rules/components/RuleExtensions.vue       |   6 +-
 .../components/drawers/RuleDetailDrawer.vue   |  11 +-
 .../components/RulesOverviewListDrawer.vue    | 208 ++++++++++++++++++
 .../components/RulesOverviewReducedList.vue   |  48 ++--
 .../vue-app/rulesOverview/initComponents.js   |   2 +
 .../components/RulesOverviewItem.vue          |  20 +-
 .../components/RulesOverviewWidget.vue        |  47 ++--
 .../components/TopChallengers.vue             |   3 +-
 .../webapp/vue-app/topChallengers/main.js     |   2 +-
 .../webapp/vue-app/usersLeaderboard/main.js   |   2 +-
 .../components/Profile.vue                    |   4 +-
 .../components/ProfileRealizationItem.vue     |   2 +-
 .../components/ProfileRealizations.vue        |   4 +-
 27 files changed, 438 insertions(+), 81 deletions(-)
 create mode 100644 portlets/src/main/webapp/vue-app/programsOverview/components/ProgramsOverviewListDrawer.vue
 create mode 100644 portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewListDrawer.vue

diff --git a/portlets/src/main/resources/locale/portlet/Challenges_en.properties b/portlets/src/main/resources/locale/portlet/Challenges_en.properties
index e2039449e3..bc9faf4624 100644
--- a/portlets/src/main/resources/locale/portlet/Challenges_en.properties
+++ b/portlets/src/main/resources/locale/portlet/Challenges_en.properties
@@ -392,6 +392,8 @@ search.connector.label.rules=Actions
 gamification.overview.programs=Programs
 gamification.overview.weeklyLeaderboard=Weekly Leaderboard
 gamification.overview.actions=Actions
+gamification.overview.actionsList=Actions list
+gamification.overview.programsList=Programs list
 gamification.overview.leaderboard.drawer.title=Leaderboard
 gamification.overview.programsFilter.drawer.title=Filter per program
 gamification.overview.userAchievementsList.drawer.title=Achievements list
diff --git a/portlets/src/main/webapp/vue-app/badgesOverview/main.js b/portlets/src/main/webapp/vue-app/badgesOverview/main.js
index 5d877f09e3..1bfefce008 100644
--- a/portlets/src/main/webapp/vue-app/badgesOverview/main.js
+++ b/portlets/src/main/webapp/vue-app/badgesOverview/main.js
@@ -29,7 +29,7 @@ if (extensionRegistry) {
 const vuetify = Vue.prototype.vuetifyOptions;
 
 // getting language of user
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 
 const resourceBundleName = 'locale.addon.Gamification';
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/${resourceBundleName}-${lang}.json`;
diff --git a/portlets/src/main/webapp/vue-app/create-program-button/main.js b/portlets/src/main/webapp/vue-app/create-program-button/main.js
index b7437f38c4..2c2faf8f34 100644
--- a/portlets/src/main/webapp/vue-app/create-program-button/main.js
+++ b/portlets/src/main/webapp/vue-app/create-program-button/main.js
@@ -19,7 +19,7 @@
  */
 import './initComponents.js';
 
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 const urls = [
   `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.Challenges-${lang}.json`
 ];
diff --git a/portlets/src/main/webapp/vue-app/myContributions/main.js b/portlets/src/main/webapp/vue-app/myContributions/main.js
index cfded945fd..a739d0a84b 100644
--- a/portlets/src/main/webapp/vue-app/myContributions/main.js
+++ b/portlets/src/main/webapp/vue-app/myContributions/main.js
@@ -17,7 +17,7 @@
 import './initComponents.js';
 
 // getting language of user
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 const resourceBundleName = 'locale.addon.Gamification';
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/${resourceBundleName}-${lang}.json`;
 
diff --git a/portlets/src/main/webapp/vue-app/myReputation/main.js b/portlets/src/main/webapp/vue-app/myReputation/main.js
index d8a8bd7a43..719133e84c 100644
--- a/portlets/src/main/webapp/vue-app/myReputation/main.js
+++ b/portlets/src/main/webapp/vue-app/myReputation/main.js
@@ -23,7 +23,7 @@ extensionRegistry.registerComponent('my-reputation-overview-badges', 'my-reputat
 }); 
 
 // getting language of user
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 
 const resourceBundleName = 'locale.addon.Gamification';
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/${resourceBundleName}-${lang}.json`;
diff --git a/portlets/src/main/webapp/vue-app/myRewards/main.js b/portlets/src/main/webapp/vue-app/myRewards/main.js
index 30235e7ebe..fae5b581c1 100644
--- a/portlets/src/main/webapp/vue-app/myRewards/main.js
+++ b/portlets/src/main/webapp/vue-app/myRewards/main.js
@@ -16,7 +16,7 @@
  */
 import './initComponents.js';
 
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 const urls = [
   `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.addon.Gamification-${lang}.json`,
   `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.Challenges-${lang}.json`
diff --git a/portlets/src/main/webapp/vue-app/popularSpaces/main.js b/portlets/src/main/webapp/vue-app/popularSpaces/main.js
index 21d474cd69..a60454c2b3 100644
--- a/portlets/src/main/webapp/vue-app/popularSpaces/main.js
+++ b/portlets/src/main/webapp/vue-app/popularSpaces/main.js
@@ -29,7 +29,7 @@ if (extensionRegistry) {
 const vuetify = Vue.prototype.vuetifyOptions;
 
 // getting language of user
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 
 const resourceBundleName = 'locale.addon.Gamification';
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/${resourceBundleName}-${lang}.json`;
diff --git a/portlets/src/main/webapp/vue-app/profileStats/main.js b/portlets/src/main/webapp/vue-app/profileStats/main.js
index 7d3a39c7ce..494d04e993 100644
--- a/portlets/src/main/webapp/vue-app/profileStats/main.js
+++ b/portlets/src/main/webapp/vue-app/profileStats/main.js
@@ -19,7 +19,7 @@ import './initComponents.js';
 const vuetify = Vue.prototype.vuetifyOptions;
 
 // getting language of user
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 
 const resourceBundleName = 'locale.addon.Gamification';
 const urls = [
diff --git a/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramDetailDrawer.vue b/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramDetailDrawer.vue
index 0487a5c84f..d846a1b1aa 100644
--- a/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramDetailDrawer.vue
+++ b/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramDetailDrawer.vue
@@ -23,7 +23,8 @@
     id="programDetailDrawer"
     ref="drawer"
     v-model="drawer"
-    :right="!$vuetify.rtl">
+    :right="!$vuetify.rtl"
+    :go-back-button="goBackButton">
     <template #title>
       <span
         :title="$t('rule.detail.letsSeeWhatToDo')"
@@ -109,6 +110,7 @@
         :loading="loading"
         :see-all-url="programLink"
         hide-empty-placeholder
+        go-back-button
         class="mt-n4 mb-4 mx-1">
         <template #title>
           <div class="subtitle-1 dark-grey-color font-weight-bold text-truncate">
@@ -126,6 +128,7 @@ export default {
     drawer: false,
     program: null,
     loading: false,
+    goBackButton: false,
     rules: null,
     rulesLimit: 4,
   }),
@@ -173,8 +176,9 @@ export default {
     this.$root.$on('rule-deleted', this.retrieveRules);
   },
   methods: {
-    open(program) {
+    open(program, goBackButton) {
       this.program = program;
+      this.goBackButton = goBackButton || false;
       this.rules = null;
       this.$refs.drawer.open();
       this.$nextTick()
diff --git a/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramOverviewItem.vue b/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramOverviewItem.vue
index b91766ea4e..217618c404 100644
--- a/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramOverviewItem.vue
+++ b/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramOverviewItem.vue
@@ -16,24 +16,24 @@
 <template>
   <gamification-overview-widget-row
     clickable
-    @open="$root.$emit('program-detail-drawer', program)">
+    @open="$root.$emit('program-detail-drawer', program, goBackButton)">
     <template #icon>
       <v-list-item-avatar
         :style="programStyle"
         height="48"
         width="48"
-        class="border-color rounded my-auto me-auto ms-4"
+        class="border-color rounded my-auto me-auto"
         tile>
         <v-img :src="program.avatarUrl" />
       </v-list-item-avatar>
     </template>
     <template #content>
-      <v-list-item class="ps-0">
+      <v-list-item class="px-0">
         <v-list-item-content class="py-0 my-auto">
-          <v-list-item-title>
+          <v-list-item-title class="subtitle-2">
             {{ program.title }}
           </v-list-item-title>
-          <v-list-item-subtitle class="d-flex flex-nowrap align-center">
+          <v-list-item-subtitle class="d-flex flex-nowrap align-center subtitle-2">
             {{ program.activeRulesCount }} {{ $t('gamification.overview.label.actionsAvailable') }}
           </v-list-item-subtitle>
         </v-list-item-content>
@@ -58,6 +58,10 @@ export default {
       type: Object,
       default: null,
     },
+    goBackButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     programStyle() {
diff --git a/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramsOverview.vue b/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramsOverview.vue
index 2edd8e94d3..ddce166291 100644
--- a/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramsOverview.vue
+++ b/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramsOverview.vue
@@ -15,10 +15,23 @@
 -->
 <template>
   <v-app>
-    <gamification-overview-widget
-      :title="programsDisplayed && $t('gamification.overview.programsOverviewTitle')"
-      :action-url="programsDisplayed && programLink"
-      :loading="loading">
+    <gamification-overview-widget :loading="loading">
+      <template v-if="programsDisplayed || loading" #title>
+        <div v-if="programsDisplayed" class="d-flex flex-grow-1 full-width">
+          <div class="widget-text-header text-none text-truncate">
+            {{ $t('gamification.overview.programsOverviewTitle') }}
+          </div>
+          <v-spacer />
+          <v-btn
+            height="auto"
+            min-width="auto"
+            class="pa-0"
+            text
+            @click="$refs.listDrawer.open()">
+            <span class="primary--text text-none">{{ $t('rules.seeAll') }}</span>
+          </v-btn>
+        </div>
+      </template>
       <template v-if="programsDisplayed" #content>
         <gamification-overview-program-item
           v-for="program in programs" 
@@ -31,6 +44,8 @@
             :key="index"
             class="flex-grow-1" />
         </template>
+        <gamification-program-list-drawer
+          ref="listDrawer" />
       </template>
       <template v-else-if="!loading" #content>
         <gamification-overview-widget-row class="my-auto">
@@ -71,6 +86,7 @@ export default {
   },
   methods: {
     retrievePrograms() {
+      this.loading = true;
       return this.$programService.getPrograms({
         limit: this.limitToLoad,
         type: 'ALL',
@@ -83,8 +99,8 @@ export default {
         .then((data) => {
           this.programs = data?.programs || [];
           this.programsDisplayed = data.size > 0;
-          this.loading = false;
-        });
+        })
+        .finally(() => this.loading = false);
     },
   },
 };
diff --git a/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramsOverviewListDrawer.vue b/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramsOverviewListDrawer.vue
new file mode 100644
index 0000000000..d7a3b4cee4
--- /dev/null
+++ b/portlets/src/main/webapp/vue-app/programsOverview/components/ProgramsOverviewListDrawer.vue
@@ -0,0 +1,90 @@
+<!--
+  This file is part of the Meeds project (https://meeds.io/).
+
+  Copyright (C) 2023 Meeds Association contact@meeds.io
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+<template>
+  <exo-drawer
+    id="programsOverviewListDrawer"
+    ref="drawer"
+    v-model="drawer"
+    :loading="loading"
+    :right="!$vuetify.rtl">
+    <template #title>
+      {{ $t('gamification.overview.programsList') }}
+    </template>
+    <template #titleIcons>
+      <v-btn
+        :href="actionsPageURL"
+        icon>
+        <v-icon size="24">fa-external-link-alt</v-icon>
+      </v-btn>
+    </template>
+    <template #content>
+      <gamification-overview-widget height="auto">
+        <template #content>
+          <gamification-overview-program-item
+            v-for="program in programs"
+            :key="program.id"
+            :program="program"
+            class="flex-grow-1"
+            go-back-button />
+        </template>
+      </gamification-overview-widget>
+    </template>
+  </exo-drawer>
+</template>
+<script>
+export default {
+  data: () => ({
+    programs: [],
+    limitToLoad: -1,
+    loading: false,
+  }),
+  computed: {
+    actionsPageURL() {
+      return eXo.env.portal.portalName === 'public' && '/portal/public/overview/actions' || `${eXo.env.portal.context}/${eXo.env.portal.engagementSiteName}/contributions/actions`;
+    },
+  },
+  created() {
+    this.$root.$on('programs-overview-list-drawer', this.open);
+  },
+  beforeDestroy() {
+    this.$root.$off('programs-overview-list-drawer', this.open);
+  },
+  methods: {
+    open() {
+      this.programs = [];
+      this.retrievePrograms();
+      this.$refs.drawer.open();
+    },
+    retrievePrograms() {
+      this.loading = true;
+      return this.$programService.getPrograms({
+        limit: this.limitToLoad,
+        type: 'ALL',
+        status: 'ENABLED',
+        expand: 'countActiveRules',
+        sortBy: 'modifiedDate',
+        sortDescending: true,
+        lang: eXo.env.portal.language,
+      })
+        .then((data) => this.programs = data?.programs || [])
+        .finally(() => this.loading = false);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/portlets/src/main/webapp/vue-app/programsOverview/initComponents.js b/portlets/src/main/webapp/vue-app/programsOverview/initComponents.js
index 70fca20e67..24f61d776e 100644
--- a/portlets/src/main/webapp/vue-app/programsOverview/initComponents.js
+++ b/portlets/src/main/webapp/vue-app/programsOverview/initComponents.js
@@ -17,11 +17,13 @@
 import ProgramsOverview from './components/ProgramsOverview.vue';
 import ProgramOverviewItem from './components/ProgramOverviewItem.vue';
 import ProgramDetailDrawer from './components/ProgramDetailDrawer.vue';
+import ProgramsOverviewListDrawer from './components/ProgramsOverviewListDrawer.vue';
 
 const components = {
   'gamification-overview-programs': ProgramsOverview,
   'gamification-overview-program-item': ProgramOverviewItem,
   'gamification-program-detail-drawer': ProgramDetailDrawer,
+  'gamification-program-list-drawer': ProgramsOverviewListDrawer,
 };
 
 for (const key in components) {
diff --git a/portlets/src/main/webapp/vue-app/programsOverview/main.js b/portlets/src/main/webapp/vue-app/programsOverview/main.js
index 9d1a006d0b..0e13d145a4 100644
--- a/portlets/src/main/webapp/vue-app/programsOverview/main.js
+++ b/portlets/src/main/webapp/vue-app/programsOverview/main.js
@@ -17,7 +17,7 @@
 import './initComponents.js';
 import '../engagement-center/services.js';
 
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 const urls = [
   `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.addon.Gamification-${lang}.json`,
   `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.Challenges-${lang}.json`
diff --git a/portlets/src/main/webapp/vue-app/rules/components/RuleExtensions.vue b/portlets/src/main/webapp/vue-app/rules/components/RuleExtensions.vue
index c286e9a54c..52c2066c91 100644
--- a/portlets/src/main/webapp/vue-app/rules/components/RuleExtensions.vue
+++ b/portlets/src/main/webapp/vue-app/rules/components/RuleExtensions.vue
@@ -92,10 +92,11 @@ export default {
     emitProgramOwnersDrawerInternaly(event) {
       this.$root.$emit('open-owners-drawer-event', event?.detail?.avatars, event?.detail?.backIcon);
     },
-    emitOpenRuleDrawerGlobally(rule, openAnnouncement) {
+    emitOpenRuleDrawerGlobally(rule, openAnnouncement, goBackButton) {
       document.dispatchEvent(new CustomEvent('rule-detail-drawer-event', {detail: {
         rule,
         openAnnouncement,
+        goBackButton,
       }}));
     },
     emitOpenRuleFormDrawerGlobally(rule, program) {
@@ -104,10 +105,11 @@ export default {
         program,
       }}));
     },
-    emitOpenRuleDrawerByIdGlobally(ruleId, openAnnouncement) {
+    emitOpenRuleDrawerByIdGlobally(ruleId, openAnnouncement, goBackButton) {
       document.dispatchEvent(new CustomEvent('rule-detail-drawer-by-id-event', {detail: {
         ruleId,
         openAnnouncement,
+        goBackButton,
       }}));
     },
     emitRuleDeletedGlobally(data) {
diff --git a/portlets/src/main/webapp/vue-app/rules/components/drawers/RuleDetailDrawer.vue b/portlets/src/main/webapp/vue-app/rules/components/drawers/RuleDetailDrawer.vue
index 7a59877d6c..9d12472c88 100644
--- a/portlets/src/main/webapp/vue-app/rules/components/drawers/RuleDetailDrawer.vue
+++ b/portlets/src/main/webapp/vue-app/rules/components/drawers/RuleDetailDrawer.vue
@@ -25,6 +25,7 @@
     v-model="drawer"
     v-draggable="enabled"
     :right="!$vuetify.rtl"
+    :go-back-button="goBackButton"
     allow-expand
     @closed="onClose"
     @expand-updated="expanded = $event">
@@ -207,6 +208,7 @@ export default {
     drawerUrl: null,
     time: Date.now(),
     interval: null,
+    goBackButton: false,
     objectType: 'activity'
   }),
   computed: {
@@ -322,17 +324,18 @@ export default {
     this.$root.$on('rule-detail-drawer-by-id', this.openById);
     this.$root.$on('rule-form-drawer-opened', this.close);
     this.$root.$on('rule-deleted', this.close);
-    document.addEventListener('rule-detail-drawer-event', event => this.open(event?.detail?.rule, event?.detail?.openAnnouncement));
+    document.addEventListener('rule-detail-drawer-event', event => this.open(event?.detail?.rule, event?.detail?.openAnnouncement, event?.detail?.goBackButton));
     document.addEventListener('rule-detail-drawer-by-id-event', event => this.openById(event?.detail?.ruleId, event?.detail?.openAnnouncement));
   },
   methods: {
-    open(ruleToDisplay, displayAnnouncementForm) {
-      this.openById(ruleToDisplay?.id, displayAnnouncementForm);
+    open(ruleToDisplay, displayAnnouncementForm, goBackButton) {
+      this.openById(ruleToDisplay?.id, displayAnnouncementForm, goBackButton);
     },
-    openById(id, displayAnnouncementForm) {
+    openById(id, displayAnnouncementForm, goBackButton) {
       if (!id || !this.$refs.ruleDetailDrawer) {
         return;
       }
+      this.goBackButton = goBackButton || false;
       this.clear();
       this.checkTime();
       this.rule = {id};
diff --git a/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewListDrawer.vue b/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewListDrawer.vue
new file mode 100644
index 0000000000..0b17fc9e2d
--- /dev/null
+++ b/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewListDrawer.vue
@@ -0,0 +1,208 @@
+<!--
+  This file is part of the Meeds project (https://meeds.io/).
+
+  Copyright (C) 2023 Meeds Association contact@meeds.io
+
+  This program is free software; you can redistribute it and/or
+  modify it under the terms of the GNU Lesser General Public
+  License as published by the Free Software Foundation; either
+  version 3 of the License, or (at your option) any later version.
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+  Lesser General Public License for more details.
+  You should have received a copy of the GNU Lesser General Public License
+  along with this program; if not, write to the Free Software Foundation,
+  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+<template>
+  <exo-drawer
+    id="rulesOverviewListDrawer"
+    ref="drawer"
+    v-model="drawer"
+    :loading="loading"
+    :right="!$vuetify.rtl">
+    <template #title>
+      {{ $t('gamification.overview.actionsList') }}
+    </template>
+    <template #titleIcons>
+      <v-btn
+        :href="actionsPageURL"
+        icon>
+        <v-icon size="24">fa-external-link-alt</v-icon>
+      </v-btn>
+    </template>
+    <template #content>
+      <gamification-overview-widget height="auto">
+        <template #content>
+          <template v-if="endingRulesCount">
+            <div class="d-flex align-center">
+              <span class="me-2 subtitle-1">{{ $t('gamification.overview.endingActionsTitle') }}</span>
+              <v-divider />
+            </div>
+            <gamification-rules-overview-item
+              v-for="rule in endingRulesToDisplay"
+              :key="rule.id"
+              :rule="rule"
+              go-back-button
+              dense />
+          </template>
+          <template v-if="activeRulesCount">
+            <div
+              v-if="!hasAvailableRulesOnly"
+              :class="endingRulesCount && 'pt-5'"
+              class="d-flex align-center">
+              <span class="me-2 subtitle-1">{{ $t('gamification.overview.availableActionsTitle') }}</span>
+              <v-divider />
+            </div>
+            <gamification-rules-overview-item
+              v-for="rule in activeRulesToDisplay"
+              :key="rule.id"
+              :rule="rule"
+              :dense="!hasAvailableRulesOnly"
+              go-back-button />
+          </template>
+          <template v-if="upcomingRulesCount">
+            <div class="d-flex align-center pt-5">
+              <span class="me-2 subtitle-1">{{ $t('gamification.overview.upcomingActionsTitle') }}</span>
+              <v-divider />
+            </div>
+            <gamification-rules-overview-item
+              v-for="rule in upcomingRulesToDisplay"
+              :key="rule.id"
+              :rule="rule"
+              go-back-button
+              dense />
+          </template>
+        </template>
+      </gamification-overview-widget>
+    </template>
+  </exo-drawer>
+</template>
+<script>
+export default {
+  data: () => ({
+    pageSize: 10,
+    drawer: false,
+    loading: false,
+    rules: [],
+    activeRules: [],
+    upcomingRules: [],
+    endingRules: [],
+    weekInMs: 604800000,
+  }),
+  computed: {
+    endingRulesToDisplay() {
+      return this.endingRules
+        .filter(r => r.endDate && (new Date(r.endDate).getTime() - Date.now()) < this.weekInMs)
+        .slice(0, 2);
+    },
+    endingRulesCount() {
+      return this.endingRulesToDisplay.length;
+    },
+    upcomingRulesToDisplay() {
+      return this.upcomingRules
+        .filter(r => r.startDate && (new Date(r.startDate).getTime() - Date.now()) < this.weekInMs)
+        .slice(0, 2);
+    },
+    upcomingRulesCount() {
+      return this.upcomingRulesToDisplay.length;
+    },
+    actionsPageURL() {
+      return eXo.env.portal.portalName === 'public' && '/portal/public/overview/actions' || `${eXo.env.portal.context}/${eXo.env.portal.engagementSiteName}/contributions/actions`;
+    },
+    activeRulesToDisplay() {
+      return this.activeRules
+        .filter(r => !this.endingRulesToDisplay.find(rule => rule.id === r.id))
+        .slice(0, this.pageSize - (this.endingRulesCount && 2 || 0) - (this.upcomingRulesCount && 2 || 0));
+    },
+    activeRulesCount() {
+      return this.activeRulesToDisplay.length;
+    },
+    validRulesCount() {
+      return this.activeRulesCount + this.upcomingRulesCount + this.endingRulesCount;
+    },
+    hasValidRules() {
+      return this.validRulesCount > 0;
+    },
+    hasAvailableRulesOnly() {
+      return this.activeRulesCount && !this.endingRulesCount && !this.upcomingRulesCount;
+    },
+  },
+  created() {
+    this.$root.$on('rules-overview-list-drawer', this.open);
+    this.$root.$on('announcement-added', this.refreshRules);
+    this.$root.$on('rule-updated', this.refreshRules);
+    this.$root.$on('rule-deleted', this.refreshRules);
+  },
+  beforeDestroy() {
+    this.$root.$off('rules-overview-list-drawer', this.open);
+    this.$root.$off('announcement-added', this.refreshRules);
+    this.$root.$off('rule-updated', this.refreshRules);
+    this.$root.$off('rule-deleted', this.refreshRules);
+  },
+  methods: {
+    open() {
+      this.endingRules = [];
+      this.retrieveRules();
+      this.$refs.drawer.open();
+    },
+    refreshRules() {
+      if (!this.drawer) {
+        return false;
+      }
+      this.retrieveRules();
+    },
+    retrieveRules() {
+      this.loading = true;
+      Promise.all([
+        this.retrieveEndingRules(),
+        this.retrieveActiveRules(),
+        this.retrieveUpcomingRules(),
+      ]).finally(() => this.loading = false);
+    },
+    retrieveEndingRules() {
+      return this.$ruleService.getRules({
+        status: 'ENABLED',
+        programStatus: 'ENABLED',
+        dateFilter: 'STARTED_WITH_END',
+        offset: 0,
+        limit: 2,
+        sortBy: 'endDate',
+        sortDescending: false,
+        expand: 'countRealizations',
+        lang: eXo.env.portal.language,
+        returnSize: false,
+      }).then(result => this.endingRules = result?.rules || []);
+    },
+    retrieveActiveRules() {
+      return this.$ruleService.getRules({
+        status: 'ENABLED',
+        programStatus: 'ENABLED',
+        dateFilter: 'STARTED',
+        offset: 0,
+        limit: this.pageSize,
+        sortBy: 'createdDate',
+        sortDescending: true,
+        expand: 'countRealizations',
+        lang: eXo.env.portal.language,
+        returnSize: false,
+      }).then(result => this.activeRules = result?.rules || []);
+    },
+    retrieveUpcomingRules() {
+      return this.$ruleService.getRules({
+        status: 'ENABLED',
+        programStatus: 'ENABLED',
+        dateFilter: 'UPCOMING',
+        offset: 0,
+        limit: 2,
+        sortBy: 'startDate',
+        sortDescending: false,
+        expand: 'countRealizations',
+        lang: eXo.env.portal.language,
+        returnSize: false,
+      }).then(result => this.upcomingRules = result?.rules || []);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewReducedList.vue b/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewReducedList.vue
index cf3509601b..6b005ff50a 100644
--- a/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewReducedList.vue
+++ b/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewReducedList.vue
@@ -11,22 +11,33 @@
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
   Lesser General Public License for more details.
+
   You should have received a copy of the GNU Lesser General Public License
   along with this program; if not, write to the Free Software Foundation,
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <gamification-overview-widget
-    v-if="hasValidRules"
-    :see-all-url="actionsPageURL"
-    extra-class="pa-0 justify-space-between height-auto">
-    <template #title>
-      {{ $t('gamification.overview.challengesOverviewTitle') }}
+  <gamification-overview-widget :loading="loading">
+    <template v-if="hasValidRules || loading" #title>
+      <div v-if="hasValidRules" class="d-flex flex-grow-1 full-width">
+        <div class="widget-text-header text-none text-truncate">
+          {{ $t('gamification.overview.challengesOverviewTitle') }}
+        </div>
+        <v-spacer />
+        <v-btn
+          height="auto"
+          min-width="auto"
+          class="pa-0"
+          text
+          @click="$refs.listDrawer.open()">
+          <span class="primary--text text-none">{{ $t('rules.seeAll') }}</span>
+        </v-btn>
+      </div>
     </template>
-    <template #content>
+    <template v-if="hasValidRules" #content>
       <template v-if="endingRulesCount">
-        <div class="d-flex align-center mx-4">
-          <span class="me-2">{{ $t('gamification.overview.endingActionsTitle') }}</span>
+        <div class="d-flex align-center">
+          <span class="me-2 subtitle-1">{{ $t('gamification.overview.endingActionsTitle') }}</span>
           <v-divider />
         </div>
         <gamification-rules-overview-item
@@ -36,8 +47,11 @@
           dense />
       </template>
       <template v-if="activeRulesCount">
-        <div v-if="!hasAvailableRulesOnly" class="d-flex align-center mx-4">
-          <span class="me-2">{{ $t('gamification.overview.availableActionsTitle') }}</span>
+        <div
+          v-if="!hasAvailableRulesOnly"
+          :class="endingRulesCount && 'pt-5'"
+          class="d-flex align-center">
+          <span class="me-2 subtitle-1">{{ $t('gamification.overview.availableActionsTitle') }}</span>
           <v-divider />
         </div>
         <gamification-rules-overview-item
@@ -47,8 +61,8 @@
           :dense="!hasAvailableRulesOnly" />
       </template>
       <template v-if="upcomingRulesCount">
-        <div class="d-flex align-center mx-4">
-          <span class="me-2">{{ $t('gamification.overview.upcomingActionsTitle') }}</span>
+        <div class="d-flex align-center pt-5">
+          <span class="me-2 subtitle-1">{{ $t('gamification.overview.upcomingActionsTitle') }}</span>
           <v-divider />
         </div>
         <gamification-rules-overview-item
@@ -63,12 +77,10 @@
           :key="index"
           class="flex" />
       </template>
+      <gamification-rules-overview-list-drawer
+        ref="listDrawer" />
     </template>
-  </gamification-overview-widget>
-  <gamification-overview-widget
-    v-else
-    :loading="loading">
-    <template #content>
+    <template v-else #content>
       <gamification-overview-widget-row
         v-show="!loading"
         class="my-auto">
diff --git a/portlets/src/main/webapp/vue-app/rulesOverview/initComponents.js b/portlets/src/main/webapp/vue-app/rulesOverview/initComponents.js
index 0f294b2742..e25f40a0ba 100644
--- a/portlets/src/main/webapp/vue-app/rulesOverview/initComponents.js
+++ b/portlets/src/main/webapp/vue-app/rulesOverview/initComponents.js
@@ -20,12 +20,14 @@ import RulesOverview from './components/RulesOverview.vue';
 import RulesOverviewReducedList from './components/RulesOverviewReducedList.vue';
 import RulesOverviewFullList from './components/RulesOverviewFullList.vue';
 import RulesOverviewSpaceList from './components/RulesOverviewSpaceList.vue';
+import RulesOverviewListDrawer from './components/RulesOverviewListDrawer.vue';
 
 const components = {
   'gamification-rules-overview': RulesOverview,
   'gamification-rules-overview-reduced-list': RulesOverviewReducedList,
   'gamification-rules-overview-full-list': RulesOverviewFullList,
   'gamification-rules-overview-space-list': RulesOverviewSpaceList,
+  'gamification-rules-overview-list-drawer': RulesOverviewListDrawer,
 };
 
 for (const key in components) {
diff --git a/portlets/src/main/webapp/vue-app/rulesOverviewWidget/components/RulesOverviewItem.vue b/portlets/src/main/webapp/vue-app/rulesOverviewWidget/components/RulesOverviewItem.vue
index eb827e4655..59ae635b1c 100644
--- a/portlets/src/main/webapp/vue-app/rulesOverviewWidget/components/RulesOverviewItem.vue
+++ b/portlets/src/main/webapp/vue-app/rulesOverviewWidget/components/RulesOverviewItem.vue
@@ -20,33 +20,33 @@
     :dense="dense"
     class="flex"
     clickable
-    @open="$root.$emit('rule-detail-drawer', rule)">
+    @open="$root.$emit('rule-detail-drawer', rule, false, goBackButton)">
     <template #icon>
       <v-card
         min-width="35"
-        class="d-flex align-center justify-center ms-4 transparent"
+        class="d-flex align-center justify-center transparent"
         flat>
         <rule-icon :rule-event="rule.event" size="30" />
       </v-card>
     </template>
     <template #content>
-      <v-list-item class="ps-0">
+      <v-list-item class="px-0">
         <v-list-item-content class="py-0 my-auto">
-          <v-list-item-title>
+          <v-list-item-title class="subtitle-2">
             {{ rule.title }}
           </v-list-item-title>
-          <v-list-item-subtitle v-if="upcoming || ending" class="d-flex flex-nowrap align-center">
+          <v-list-item-subtitle v-if="upcoming || ending" class="d-flex flex-nowrap align-center subtitle-2">
             <engagement-center-rule-date-info-chip
               :rule="rule"
               size="18" />
           </v-list-item-subtitle>
-          <v-list-item-subtitle v-else-if="rule.realizationsCount === 0">
+          <v-list-item-subtitle v-else-if="rule.realizationsCount === 0" class="subtitle-2">
             {{ $t('gamification.overview.label.firstAnnounecement') }}
           </v-list-item-subtitle>
-          <v-list-item-subtitle v-else-if="rule.realizationsCount === 1">
+          <v-list-item-subtitle v-else-if="rule.realizationsCount === 1" class="subtitle-2">
             1 {{ $t('gamification.overview.label.participation') }}
           </v-list-item-subtitle>
-          <v-list-item-subtitle v-else>
+          <v-list-item-subtitle v-else class="subtitle-2">
             {{ rule.realizationsCount }} {{ $t('gamification.overview.label.participations') }}
           </v-list-item-subtitle>
         </v-list-item-content>
@@ -75,6 +75,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    goBackButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     weekInMs: 604800000,
diff --git a/portlets/src/main/webapp/vue-app/rulesOverviewWidget/components/RulesOverviewWidget.vue b/portlets/src/main/webapp/vue-app/rulesOverviewWidget/components/RulesOverviewWidget.vue
index 715033d12f..fadf4504e5 100644
--- a/portlets/src/main/webapp/vue-app/rulesOverviewWidget/components/RulesOverviewWidget.vue
+++ b/portlets/src/main/webapp/vue-app/rulesOverviewWidget/components/RulesOverviewWidget.vue
@@ -20,51 +20,54 @@
     v-if="hasValidRules"
     :see-all-url="seeAllUrl"
     height="auto"
-    min-width="auto"
-    extra-class="pa-0 justify-space-between">
+    min-width="auto">
     <template #title>
       <slot name="title"></slot>
     </template>
     <template #content>
       <template v-if="lockedRulesCount">
-        <div class="d-flex align-center mx-4">
-          <span class="me-2">{{ $t('gamification.overview.firstActionsToDoTitle') }}</span>
+        <div class="d-flex align-center">
+          <span class="me-2 subtitle-1 text-color">{{ $t('gamification.overview.firstActionsToDoTitle') }}</span>
           <v-divider />
         </div>
         <gamification-rules-overview-item
           v-for="rule in lockedRulesToDisplay"
           :key="rule.id"
-          :rule="rule" />
+          :rule="rule"
+          :go-back-button="goBackButton" />
       </template>
       <template v-if="endingRulesCount">
-        <div class="d-flex align-center mx-4">
-          <span class="me-2">{{ $t('gamification.overview.endingActionsTitle') }}</span>
+        <div class="d-flex align-center">
+          <span class="me-2 subtitle-1 text-color">{{ $t('gamification.overview.endingActionsTitle') }}</span>
           <v-divider />
         </div>
         <gamification-rules-overview-item
           v-for="rule in endingRulesToDisplay"
           :key="rule.id"
-          :rule="rule" />
+          :rule="rule"
+          :go-back-button="goBackButton" />
       </template>
       <template v-if="validRulesCount">
-        <div v-if="sectionsCount > 1" class="d-flex align-center mx-4">
-          <span class="me-2">{{ $t('gamification.overview.availableActionsTitle') }}</span>
+        <div v-if="sectionsCount > 1" class="d-flex align-center pt-5">
+          <span class="me-2 subtitle-1 text-color">{{ $t('gamification.overview.availableActionsTitle') }}</span>
           <v-divider />
         </div>
         <gamification-rules-overview-item
           v-for="rule in validRulesToDisplay"
           :key="rule.id"
-          :rule="rule" />
+          :rule="rule"
+          :go-back-button="goBackButton" />
       </template>
       <template v-if="upcomingRulesCount">
-        <div class="d-flex align-center mx-4">
-          <span class="me-2">{{ $t('gamification.overview.upcomingActionsTitle') }}</span>
+        <div class="d-flex align-center pt-5">
+          <span class="me-2 subtitle-1 text-color">{{ $t('gamification.overview.upcomingActionsTitle') }}</span>
           <v-divider />
         </div>
         <gamification-rules-overview-item
           v-for="rule in upcomingRulesToDisplay"
           :key="rule.id"
-          :rule="rule" />
+          :rule="rule"
+          :go-back-button="goBackButton" />
       </template>
     </template>
   </gamification-overview-widget>
@@ -77,13 +80,15 @@
         <div class="flex-grow-1 flex-shrink-1 text-start text-truncate">
           {{ $t('gamification.overview.challengesOverviewTitle') }}
         </div>
-        <v-btn
-          icon
-          @click="hideEmptyWidget">
-          <v-icon>fa-times</v-icon>
-        </v-btn>
       </div>
     </template>
+    <template #action>
+      <v-btn
+        icon
+        @click="hideEmptyWidget">
+        <v-icon>fa-times</v-icon>
+      </v-btn>
+    </template>
     <template #content>
       <gamification-overview-widget-row v-show="!loading" class="my-auto">
         <template #content>
@@ -138,6 +143,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    goBackButton: {
+      type: Boolean,
+      default: false,
+    },
     seeAllUrl: {
       type: String,
       default: () => '',
diff --git a/portlets/src/main/webapp/vue-app/topChallengers/components/TopChallengers.vue b/portlets/src/main/webapp/vue-app/topChallengers/components/TopChallengers.vue
index bc26e727ce..8d01ea4ce9 100644
--- a/portlets/src/main/webapp/vue-app/topChallengers/components/TopChallengers.vue
+++ b/portlets/src/main/webapp/vue-app/topChallengers/components/TopChallengers.vue
@@ -21,8 +21,7 @@
 -->
 <template>
   <v-app>
-    <gamification-overview-widget
-      :loading="loading">
+    <gamification-overview-widget :loading="loading">
       <template #title>
         <div v-if="!displayPlaceholder && !loading" class="d-flex flex-grow-1 full-width">
           <div class="widget-text-header text-capitalize-first-letter text-truncate">
diff --git a/portlets/src/main/webapp/vue-app/topChallengers/main.js b/portlets/src/main/webapp/vue-app/topChallengers/main.js
index 1344136155..703125b82d 100644
--- a/portlets/src/main/webapp/vue-app/topChallengers/main.js
+++ b/portlets/src/main/webapp/vue-app/topChallengers/main.js
@@ -16,7 +16,7 @@
  */
 import './initComponents.js';
 
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 const urls = [
   `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.addon.Gamification-${lang}.json`,
   `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.Challenges-${lang}.json`
diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboard/main.js b/portlets/src/main/webapp/vue-app/usersLeaderboard/main.js
index 2a8c27f078..07e73198cb 100644
--- a/portlets/src/main/webapp/vue-app/usersLeaderboard/main.js
+++ b/portlets/src/main/webapp/vue-app/usersLeaderboard/main.js
@@ -19,7 +19,7 @@ import './initComponents.js';
 const vuetify = Vue.prototype.vuetifyOptions;
 
 // getting language of user
-const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || 'en';
+const lang = eXo?.env?.portal?.language || 'en';
 
 const resourceBundleName = 'locale.addon.Gamification';
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/${resourceBundleName}-${lang}.json`;
diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/Profile.vue b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/Profile.vue
index 8780027c0e..268d2c81fe 100644
--- a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/Profile.vue
+++ b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/Profile.vue
@@ -87,13 +87,13 @@ export default {
       return this.user && `users-leaderboard-${this.user.identityId}` || '';
     },
     userAvatar() {
-      return this.user && this.user.avatarUrl || `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/users/${this.user.username}/avatar`;
+      return this.user?.avatarUrl || `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/users/${this.user.username}/avatar`;
     },
     profileUrl() {
       return this.username && `${eXo.env.portal.context}/${eXo.env.portal.defaultPortal}/profile/${this.username}`;
     },
     username() {
-      return this.user && this.user.remoteId;
+      return this.user?.remoteId;
     },
     currentUser() {
       return this.username === eXo.env.portal.userName;
diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizationItem.vue b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizationItem.vue
index a62e2b0a0a..2273660397 100644
--- a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizationItem.vue
+++ b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizationItem.vue
@@ -90,7 +90,7 @@ export default {
       return this.actionEventName
         && Object.values(this.$root.actionValueExtensions)
           .sort((ext1, ext2) => (ext1.rank || 0) - (ext2.rank || 0))
-          .find(extension => extension.match && extension.match(this.actionEventName))
+          .find(extension => extension?.match?.(this.actionEventName))
         || null;
     },
     linkExtensionMethod() {
diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizations.vue b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizations.vue
index f00951221d..bd1ff35fa1 100644
--- a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizations.vue
+++ b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/ProfileRealizations.vue
@@ -80,11 +80,11 @@ export default {
   methods: {
     retrieveRealizations() {
       this.loading = true;
-      return this.$realizationService.getRealizations(Object.assign({
+      return this.$realizationService.getRealizations({
         offset: this.realizations.length,
         limit: this.pageSize,
         returnSize: true,
-      }, this.realizationsFilter))
+        ...this.realizationsFilter})
         .then(data => {
           if (data.realizations.length) {
             this.realizations.push(...data.realizations);