chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue

<template>
   
   <h2>{{ $t('main_title') }}</h2>
   
   <ul class="nav nav-tabs">
      <li class="nav-item">
         <a class="nav-link"
            :class="{'active': activeTab === 'MyCustoms'}"
            @click="selectTab('MyCustoms')">
            <i class="fa fa-dashboard"></i>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link"
            :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">
         <a class="nav-link"
            :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">
         <a class="nav-link"
            :class="{'active': activeTab === 'MyWorks'}"
            @click="selectTab('MyWorks')">
            {{ $t('my_works.tab') }}
            <tab-counter :count="state.works.count"></tab-counter>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link"
            :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">
         <a class="nav-link"
            :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 loading ms-auto py-2" v-if="loading">
         <i class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray" :title="$t('loading')"></i>
      </li>
   </ul>
   
   <div class="my-4">
      <my-customs
         v-if="activeTab === 'MyCustoms'">
      </my-customs>
      <my-works
         v-else-if="activeTab === 'MyWorks'">
      </my-works>
      <my-evaluations
         v-else-if="activeTab === 'MyEvaluations'">
      </my-evaluations>
      <my-tasks
         v-else-if="activeTab === 'MyTasks'">
      </my-tasks>
      <my-accompanying-courses
         v-else-if="activeTab === 'MyAccompanyingCourses'">
      </my-accompanying-courses>
      <my-notifications
         v-else-if="activeTab === 'MyNotifications'">
      </my-notifications>
   </div>
</template>

<script>
import MyCustoms from './MyCustoms';
import MyWorks from './MyWorks';
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 {
   name: "App",
   components: {
      MyCustoms,
      MyWorks,
      MyEvaluations,
      MyTasks,
      MyAccompanyingCourses,
      MyNotifications,
      TabCounter,
   },
   data() {
      return {
         activeTab: 'MyCustoms'
      }
   },
   computed: {
      ...mapState([
         'loading',
      ]),
      // just to see all in devtool :
      ...mapState({
         state: (state) => state,
      }),
   },
   methods: {
      selectTab(tab) {
         this.$store.dispatch('getByTab', { tab: tab });
         this.activeTab = tab;
      }
   },
   mounted() {
      for (const m of [
         'MyNotifications',
         'MyAccompanyingCourses',
         'MyWorks',
         'MyEvaluations',
         'MyTasks',
      ]) {
         this.$store.dispatch('getByTab', { tab: m, param: "countOnly=1" });
      }
   }
}
</script>

<style scoped>
a.nav-link {
   cursor: pointer;
}
</style>