fix: Review UI of timezone in reward configuration - MEED-7629 - Meed…

…s-io/MIPs#154 (#599) This PR will Review UI of timezone.
Meeds-io · Oct 25, 2024 · 5e947e7 · 5e947e7
1 parent aa4725e
commit 5e947e7
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 7 deletions.
diff --git a/wallet-services/src/main/resources/locale/addon/Wallet_en.properties b/wallet-services/src/main/resources/locale/addon/Wallet_en.properties
@@ -512,6 +512,15 @@ wallet.administration.budgetConfiguration.budgetFixed.title=Budget is fixed
 wallet.administration.budgetConfiguration.budgetPerContributor.title=Budget is per Contributor
 wallet.administration.budgetConfiguration.deleteConfiguration=Delete Configuration
 wallet.administration.budgetConfiguration.confirmDeleteConfiguration=Delete Budget Configuration?
+
+wallet.administration.budgetConfiguration.week.periodDates=From Monday to Sunday
+wallet.administration.budgetConfiguration.month.periodDates=During the Month
+wallet.administration.budgetConfiguration.quarter.periodDates=During the quarter
+
+wallet.administration.budgetConfiguration.week.periodDatesTooltip=From {0} to {1}
+wallet.administration.budgetConfiguration.month.periodDatesTooltip=From first day of month {0} to last day of month {1}
+wallet.administration.budgetConfiguration.quarter.periodDatesTooltip=From first day of quarter {0} to last day of quarter {1}
+
 wallet.administration.budgetConfiguration.message.confirmDeleteConfiguration=You have requested to delete the budget configuration. Do you confirm the deletion?
 wallet.administration.rewardCard.status.inPeriod=Waiting for the period to end
 wallet.administration.rewardCard.status.toReward=To Reward

diff --git a/...t-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/BudgetConfiguration.vue b/...t-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/BudgetConfiguration.vue
@@ -87,9 +87,21 @@
               {{ $t('wallet.administration.budgetConfiguration.timeZone.title') }}
             </v-list-item-title>
           </v-list-item-content>
-          <v-list-item-action class="ma-auto font-weight-bold pe-1">
-            {{ periodDatesDisplay }}
-          </v-list-item-action>
+
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <div
+                v-bind="attrs"
+                v-on="on">
+                <v-list-item-action class="ma-auto font-weight-bold pe-1">
+                  {{ periodDatesDisplay }}
+                </v-list-item-action>
+              </div>
+            </template>
+            <span>
+              {{ periodDatesDisplayTooltip }}
+            </span>
+          </v-tooltip>
         </v-list-item>
         <v-list-item>
           <v-list-item-content>
@@ -172,15 +184,27 @@ export default {
     periodDatesDisplay() {
       if (!this.rewardPeriod) {
         return '';
+      } else {
+        return this.$t(`wallet.administration.budgetConfiguration.${this.periodType.toLowerCase()}.periodDates`);
+      }
+    },
+    periodDatesDisplayTooltip() {
+      if (!this.rewardPeriod) {
+        return '';
+      } else {
+        const dateFormat =  this.periodType === 'WEEK' ? this.weekDateformat : this.dateformat;
+        const startDateFormatted = this.$dateUtil.formatDateObjectToDisplay(new Date(this.startDateInSeconds * 1000), dateFormat, eXo.env.portal.language);
+        const endDateFormatted = this.$dateUtil.formatDateObjectToDisplay(new Date(this.endDateInSeconds * 1000 - 1), dateFormat, eXo.env.portal.language);
+        return this.$t(`wallet.administration.budgetConfiguration.${this.periodType.toLowerCase()}.periodDatesTooltip`, {
+          0: startDateFormatted,
+          1: endDateFormatted,
+        });
       }
-      const startDateFormatted = this.$dateUtil.formatDateObjectToDisplay(new Date(this.startDateInSeconds * 1000), this.dateformat, eXo.env.portal.language);
-      const endDateFormatted = this.$dateUtil.formatDateObjectToDisplay(new Date(this.endDateInSeconds * 1000 - 1), this.dateformat, eXo.env.portal.language);
-      return `${startDateFormatted} ${this.$t('exoplatform.wallet.label.to')} ${endDateFormatted}`;
     },
     currentDate() {
       return this.$dateUtil.getISODate(new Date());
     },
-    dateformat() {
+    weekDateformat() {
       return this.timeZone && {
         year: 'numeric',
         month: 'short',
@@ -197,6 +221,17 @@ export default {
         minute: '2-digit',
       };
     },
+    dateformat() {
+      return this.timeZone && {
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZoneName: 'short',
+        timeZone: this.timeZone,
+      } || {
+        hour: '2-digit',
+        minute: '2-digit',
+      };
+    },
     timeZone() {
       return this.rewardPeriod?.timeZone || this.rewardSettings?.timeZone;
     },