From 496e5f0259652f69ab723edc49af0fa55d17ea39 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Tue, 1 Feb 2022 19:13:25 +0100
Subject: [PATCH] homepage: fix counter appareance on MyCustoms vue tab

---
 .../public/vuejs/HomepageWidget/MyCustoms.vue | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
index 2a003b05f..5e9cb79df 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
@@ -6,22 +6,34 @@
          <div class="custom1">
             <ul class="list-unstyled">
                <li v-if="counter.notifications > 0">
-                  <span class="counter">{{ $tc('counter.unread_notifications', {n: counter.notifications }) }}</span>
+                  <i18n-t keypath="counter.unread_notifications" tag="span" :class="counterClass" :plural="counter.notifications">
+                     <template v-slot:n><span>{{ counter.notifications }}</span></template>
+                  </i18n-t>
                </li>
                <li v-if="counter.accompanyingCourses > 0">
-                  <span class="counter">{{ $tc('counter.assignated_courses', {n: counter.accompanyingCourses }) }}</span>
+                  <i18n-t keypath="counter.assignated_courses" tag="span" :class="counterClass" :plural="counter.accompanyingCourses">
+                     <template v-slot:n><span>{{ counter.accompanyingCourses }}</span></template>
+                  </i18n-t>
                </li>
                <li v-if="counter.works > 0">
-                  <span class="counter">{{ $tc('counter.assignated_actions', {n: counter.works }) }}</span>
+                  <i18n-t keypath="counter.assignated_actions" tag="span" :class="counterClass" :plural="counter.works">
+                     <template v-slot:n><span>{{ counter.works }}</span></template>
+                  </i18n-t>
                </li>
                <li v-if="counter.evaluations > 0">
-                  <span class="counter">{{ $tc('counter.assignated_evaluations', {n: counter.evaluations }) }}</span>
+                  <i18n-t keypath="counter.assignated_evaluations" tag="span" :class="counterClass" :plural="counter.evaluations">
+                     <template v-slot:n><span>{{ counter.evaluations }}</span></template>
+                  </i18n-t>
                </li>
                <li v-if="counter.tasksAlert > 0">
-                  <span class="counter">{{ $tc('counter.alert_tasks', {n: counter.tasksAlert }) }}</span>
+                  <i18n-t keypath="counter.alert_tasks" tag="span" :class="counterClass" :plural="counter.tasksAlert">
+                     <template v-slot:n><span>{{ counter.tasksAlert }}</span></template>
+                  </i18n-t>
                </li>
                <li v-if="counter.tasksWarning > 0">
-                  <span class="counter">{{ $tc('counter.warning_tasks', {n: counter.tasksWarning }) }}</span>
+                  <i18n-t keypath="counter.warning_tasks" tag="span" :class="counterClass" :plural="counter.tasksWarning">
+                     <template v-slot:n><span>{{ counter.tasksWarning }}</span></template>
+                  </i18n-t>
                </li>
             </ul>
          </div>
@@ -54,6 +66,13 @@ import Masonry from 'masonry-layout/masonry';
 
 export default {
    name: "MyCustoms",
+   data() {
+      return {
+         counterClass: {
+            counter: true   //hack to pass class 'counter' in i18n-t
+         }
+      }
+   },
    computed: {
       ...mapGetters(['counter']),
       noResults() {
@@ -67,11 +86,16 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 div.custom4,
 div.custom3,
 div.custom2 {
    font-style: italic;
    color: var(--bs-chill-gray);
 }
+span.counter {
+   & > span {
+      background-color: unset;
+   }
+}
 </style>
\ No newline at end of file