add counter pills in tabs

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 {

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>