feat: Allow to Hide Actions Widget when empty using UI - MEED-7649 - M…

…eeds-io/MIPs#150
Meeds-io · Nov 4, 2024 · b4458f1 · b4458f1
1 parent 3ecbef3
commit b4458f1
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 12 deletions.
diff --git a/portlets/src/main/resources/locale/portlet/Challenges_en.properties b/portlets/src/main/resources/locale/portlet/Challenges_en.properties
@@ -442,7 +442,9 @@ gamification.overview.monthlyAchievements=Contributions of the Month
 gamification.overview.quarterlyAchievements=Contributions of the Quarter
 gamification.overview.noWeeklyAchievements=No contributions yet this week
 gamification.overview.actions=Actions
+gamification.overview.space.actions=Community Actions
 gamification.overview.actionsList=Actions
+gamification.overview.space.actionsList=Community Actions
 gamification.overview.programsList=Programs
 gamification.overview.space.programsList=Community Programs
 gamification.overview.leaderboard.drawer.title=Leaderboard
@@ -614,6 +616,7 @@ gamification.rules.overviewSettings.actionsEndingSoon=Actions ending soon
 gamification.rules.overviewSettings.actionsToDoFirst=Actions to do first
 gamification.rules.overviewSettings.actionsAvailable=Actions Available
 gamification.rules.overviewSettings.actionsSoonAvailable=Actions Soon Available
+gamification.rules.overviewSettings.hideWhenEmpty=Hide widget when no actions to list
 
 gamification.myContributions.title=My Contributions
 gamification.myContributions.settings.title=Edit Contributions Widget

diff --git a/...lets/src/main/webapp/WEB-INF/conf/gamification/portal/dynamic-container-configuration.xml b/...lets/src/main/webapp/WEB-INF/conf/gamification/portal/dynamic-container-configuration.xml
@@ -325,6 +325,18 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                 </value>
               </collection>
             </field>
+            <field name="portletPrefs">
+              <map type="java.util.HashMap">
+                <entry>
+                  <key>
+                    <string>hideWidgetWhenEmpty</string>
+                  </key>
+                  <value>
+                    <string>true</string>
+                  </value>
+                </entry>
+              </map>
+            </field>
             <field name="title">
               <string>Rules Overview</string>
             </field>

diff --git a/portlets/src/main/webapp/WEB-INF/jsp/rulesOverview.jsp b/portlets/src/main/webapp/WEB-INF/jsp/rulesOverview.jsp
@@ -30,6 +30,7 @@
  if (Utils.canAccessAnonymousResources()) {
    String portletStorageId = ((String) request.getAttribute("portletStorageId"));
    String sortBy = request.getAttribute("rulesSortBy") == null ? "score" : ((String[]) request.getAttribute("rulesSortBy"))[0];
+   String hideWidgetWhenEmpty = request.getAttribute("hideWidgetWhenEmpty") == null ? "false" : ((String[]) request.getAttribute("hideWidgetWhenEmpty"))[0];
    String lockedRulesLimit = request.getAttribute("lockedRulesLimit") == null ? "2" : ((String[]) request.getAttribute("lockedRulesLimit"))[0];
    String endingRulesLimit = request.getAttribute("endingRulesLimit") == null ? "2" : ((String[]) request.getAttribute("endingRulesLimit"))[0];
    String availableRulesLimit = request.getAttribute("availableRulesLimit") == null ? "4" : ((String[]) request.getAttribute("availableRulesLimit"))[0];
@@ -46,6 +47,7 @@
         <%=availableRulesLimit%>,
         <%=upcomingRulesLimit%>,
         '<%=sortBy%>',
+        <%=hideWidgetWhenEmpty%>,
         <%=canEdit%>,
         '<%=pageRef%>'
       ));

diff --git a/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverview.vue b/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverview.vue
@@ -20,13 +20,14 @@
     <v-hover v-model="hover">
       <gamification-rules-overview-widget
         :hover-edit="hoverEdit"
+        :hide-empty-placeholder="$root.hideWidgetWhenEmpty"
         @open-list="$refs.listDrawer.open()"
         @hide="hidden = true" />
     </v-hover>
     <gamification-rules-overview-list-drawer
       ref="listDrawer" />
     <gamification-rules-overview-settings-drawer
-      v-if="$root.canEdit" />
+      v-if="$root.canEdit && !hidden" />
     <engagement-center-rule-extensions />
   </v-app>
 </template>

diff --git a/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewSettingsDrawer.vue b/portlets/src/main/webapp/vue-app/rulesOverview/components/RulesOverviewSettingsDrawer.vue
@@ -25,8 +25,7 @@
     v-model="drawer"
     :right="!$vuetify.rtl"
     :loading="loading"
-    eager
-    @closed="reset">
+    eager>
     <template slot="title">
       {{ $t('gamification.rules.overviewSettings.title') }}
     </template>
@@ -84,6 +83,12 @@
           :step="1"
           class="ms-auto me-n1 my-0 pa-0" />
       </div>
+      <div class="d-flex align-center px-5 mt-4">
+        <div>{{ $t('gamification.rules.overviewSettings.hideWhenEmpty') }}</div>
+        <v-switch
+          v-model="hideWidgetWhenEmpty"
+          class="ms-auto my-0 pa-0" />
+      </div>
     </template>
     <template #footer>
       <div class="d-flex align-center">
@@ -114,6 +119,7 @@ export default {
     endingRulesLimit: 0,
     availableRulesLimit: 0,
     upcomingRulesLimit: 0,
+    hideWidgetWhenEmpty: false,
     sortBy: 'score',
   }),
   computed: {
@@ -135,13 +141,13 @@ export default {
   },
   created() {
     this.$root.$on('rules-overview-settings', this.open);
+    this.reset();
   },
   beforeDestroy() {
     this.$root.$off('rules-overview-settings', this.open);
   },
   methods: {
     open() {
-      this.reset();
       this.$refs.drawer.open();
     },
     reset() {
@@ -150,17 +156,19 @@ export default {
       this.endingRulesLimit = this.$root.endingRulesLimit;
       this.availableRulesLimit = this.$root.availableRulesLimit;
       this.upcomingRulesLimit = this.$root.upcomingRulesLimit;
+      this.hideWidgetWhenEmpty = this.$root.hideWidgetWhenEmpty;
       this.loading = false;
     },
     close() {
       this.$refs.drawer.close();
     },
     save() {
-      this.loading = true;
       const formData = new FormData();
       formData.append('pageRef', this.$root.pageRef);
       formData.append('applicationId', this.$root.portletStorageId);
       const params = new URLSearchParams(formData).toString();
+
+      this.loading = true;
       return fetch(`/layout/rest/pages/application/preferences?${params}`, {
         method: 'PATCH',
         credentials: 'include',
@@ -180,6 +188,9 @@ export default {
           }, {
             name: 'upcomingRulesLimit',
             value: String(this.upcomingRulesLimit),
+          }, {
+            name: 'hideWidgetWhenEmpty',
+            value: String(this.hideWidgetWhenEmpty),
           }, {
             name: 'rulesSortBy',
             value: this.sortBy || 'modifiedDate',
@@ -192,8 +203,10 @@ export default {
           this.$root.endingRulesLimit = this.endingRulesLimit;
           this.$root.availableRulesLimit = this.availableRulesLimit;
           this.$root.upcomingRulesLimit = this.upcomingRulesLimit;
+          window.setTimeout(() => this.$root.hideWidgetWhenEmpty = this.hideWidgetWhenEmpty, 500);
           this.close();
         })
+        .then(() => this.$nextTick())
         .finally(() => this.loading = false);
     },
   },

diff --git a/portlets/src/main/webapp/vue-app/rulesOverview/main.js b/portlets/src/main/webapp/vue-app/rulesOverview/main.js
@@ -30,6 +30,7 @@ export function init(
   availableRulesLimit,
   upcomingRulesLimit,
   rulesSortBy,
+  hideWidgetWhenEmpty,
   canEdit,
   pageRef) {
   exoi18n.loadLanguageAsync(lang, urls)
@@ -45,6 +46,7 @@ export function init(
           availableRulesLimit,
           upcomingRulesLimit,
           rulesSortBy,
+          hideWidgetWhenEmpty,
           canEdit: portletStorageId && canEdit || false,
           pageRef,
           displayNotPublicallyVisible: eXo.env.portal.portalName === 'public' && canEdit,

diff --git a/...ts/src/main/webapp/vue-app/usersLeaderboardCommon/components/RulesOverviewEmptyWidget.vue b/...ts/src/main/webapp/vue-app/usersLeaderboardCommon/components/RulesOverviewEmptyWidget.vue
@@ -45,7 +45,7 @@
   </gamification-overview-widget-row>
   <div v-else class="d-flex flex-column align-center justify-center full-width full-height">
     <v-icon color="tertiary" size="60">fa-rocket</v-icon>
-    <span class="text-body mt-5">{{ $t('gamification.overview.actions') }}</span>
+    <span class="text-body mt-5">{{ spaceId && $t('gamification.overview.space.actions') || $t('gamification.overview.actions') }}</span>
   </div>
 </template>
 <script>
@@ -56,6 +56,9 @@ export default {
       default: false,
     },
   },
+  data: () => ({
+    spaceId: eXo.env.portal.spaceId,
+  }),
   computed: {
     completedRulesImageIndex() {
       return (Number(eXo.env.portal.spaceId || '0') + Number(eXo.env.portal.userIdentityId)) % 8 + 1;

diff --git a/...ets/src/main/webapp/vue-app/usersLeaderboardCommon/components/RulesOverviewListDrawer.vue b/...ets/src/main/webapp/vue-app/usersLeaderboardCommon/components/RulesOverviewListDrawer.vue
@@ -24,7 +24,7 @@
     :right="!$vuetify.rtl"
     :go-back-button="goBackButton">
     <template #title>
-      {{ $t('gamification.overview.actionsList') }}
+      {{ spaceId && $t('gamification.overview.space.actionsList') || $t('gamification.overview.actionsList') }}
     </template>
     <template #titleIcons>
       <v-btn

diff --git a/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/RulesOverviewWidget.vue b/portlets/src/main/webapp/vue-app/usersLeaderboardCommon/components/RulesOverviewWidget.vue
@@ -296,11 +296,10 @@ export default {
       return this.sectionsCount > 0;
     },
     isHiddenWhenEmpty() {
-      return (this.hideIfEmpty && !this.hideEmptyPlaceholder)
-        || this.$root.isAnonymous
-        || (this.spaceId?.length
-            && (eXo.env.portal.hiddenGamOverviewEmptyWidgetBySpace?.[this.spaceId]
-            || !this.activeRulesSize))
+      return this.$root.isAnonymous
+        || this.hideEmptyPlaceholder
+        || this.hideIfEmpty
+        || eXo.env.portal.hiddenGamOverviewEmptyWidgetBySpace?.[this.spaceId]
         || false;
     },
     isHiddenWidget() {