From 1e1311b7c8adc9e68cb17b90f34041cc68a94660 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Tue, 25 Jan 2022 21:09:11 +0100
Subject: [PATCH] add counter pills in tabs

---
 .../public/vuejs/HomepageWidget/App.vue        |  9 ++++++++-
 .../public/vuejs/HomepageWidget/TabCounter.vue | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
index 85f20b455..bee4fb62f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -13,7 +13,7 @@
             :class="{'active': activeTab === 'MyWorks'}"
             @click="selectTab('MyWorks')">
             {{ $t('my_works.tab') }}
-            <!-- <span class="badge rounded-pill bg-danger counter">2</span> -->
+            <tab-counter :count="state.works.count"></tab-counter>
          </a>
       </li>
       <li class="nav-item">
@@ -21,6 +21,7 @@
             :class="{'active': activeTab === 'MyEvaluations'}"
             @click="selectTab('MyEvaluations')">
             {{ $t('my_evaluations.tab') }}
+            <tab-counter :count="state.evaluations.count"></tab-counter>
          </a>
       </li>
       <li class="nav-item">
@@ -28,6 +29,8 @@
             :class="{'active': activeTab === 'MyTasks'}"
             @click="selectTab('MyTasks')">
             {{ $t('my_tasks.tab') }}
+            <tab-counter :count="state.tasks.warning.count"></tab-counter>
+            <tab-counter :count="state.tasks.alert.count"></tab-counter>
          </a>
       </li>
       <li class="nav-item">
@@ -35,6 +38,7 @@
             :class="{'active': activeTab === 'MyAccompanyingCourses'}"
             @click="selectTab('MyAccompanyingCourses')">
             {{ $t('my_accompanying_courses.tab') }}
+            <tab-counter :count="state.accompanyingCourses.count"></tab-counter>
          </a>
       </li>
       <li class="nav-item">
@@ -42,6 +46,7 @@
             :class="{'active': activeTab === 'MyNotifications'}"
             @click="selectTab('MyNotifications')">
             {{ $t('my_notifications.tab') }}
+            <tab-counter :count="state.notifications.count"></tab-counter>
          </a>
       </li>
       <li class="nav-item loading ms-auto py-2" v-if="loading">
@@ -78,6 +83,7 @@ import MyEvaluations from './MyEvaluations';
 import MyTasks from './MyTasks';
 import MyAccompanyingCourses from './MyAccompanyingCourses';
 import MyNotifications from './MyNotifications';
+import TabCounter from './TabCounter';
 import { mapState } from "vuex";
 
 export default {
@@ -89,6 +95,7 @@ export default {
       MyTasks,
       MyAccompanyingCourses,
       MyNotifications,
+      TabCounter,
    },
    data() {
       return {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
new file mode 100644
index 000000000..5587e7176
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
@@ -0,0 +1,18 @@
+<template>
+   <span v-if="isCounterAvailable"
+         class="badge rounded-pill bg-danger counter">
+      {{ count }}
+   </span>
+</template>
+
+<script>
+export default {
+   name: "TabCounter",
+   props: ['count'],
+   computed: {
+      isCounterAvailable() {
+         return (typeof this.count !== 'undefined' && this.count > 0 )
+      }
+   }
+}
+</script>
\ No newline at end of file