feat: Add List Drawers to Programs and rules Widgets - MEED-2848 - Me…

…eds-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.
Meeds-io · Nov 9, 2023 · 1c26b4c · 1c26b4c
1 parent 6d83b5f
commit 1c26b4c
Show file tree

Hide file tree

Showing 27 changed files with 438 additions and 81 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
diff --git 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
@@ -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
@@ -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
@@ -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};