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" />
      </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" />
      </a>
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        :class="{'active': activeTab === 'MyAccompanyingCourses'}"
        @click="selectTab('MyAccompanyingCourses')"
      >
        {{ $t('my_accompanying_courses.tab') }}
      </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" />
      </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 + state.tasks.alert.count" />
      </a>
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        :class="{'active': activeTab === 'MyWorkflows'}"
        @click="selectTab('MyWorkflows')"
      >
        {{ $t('my_workflows.tab') }}
        <tab-counter :count="state.workflows.count + state.workflowsCc.count" />
      </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')"
      />
    </li>
  </ul>

  <div class="my-4">
    <my-customs
      v-if="activeTab === 'MyCustoms'"
    />
    <my-works
      v-else-if="activeTab === 'MyWorks'"
    />
    <my-evaluations
      v-else-if="activeTab === 'MyEvaluations'"
    />
    <my-tasks
      v-else-if="activeTab === 'MyTasks'"
    />
    <my-accompanying-courses
      v-else-if="activeTab === 'MyAccompanyingCourses'"
    />
    <my-notifications
      v-else-if="activeTab === 'MyNotifications'"
    />
    <my-workflows
      v-else-if="activeTab === 'MyWorkflows'"
    />
  </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 MyWorkflows from './MyWorkflows.vue';
import TabCounter from './TabCounter';
import { mapState } from "vuex";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";


export default {
   name: "App",
   components: {
      MyCustoms,
      MyWorks,
      MyEvaluations,
      MyTasks,
      MyWorkflows,
      MyAccompanyingCourses,
      MyNotifications,
      TabCounter,
   },
   data() {
      return {
         activeTab: 'MyCustoms',
      }
   },
   computed: {
      ...mapState([
         'loading',
      ]),
      // just to see all in devtool :
      ...mapState({
         state: (state) => state,
      }),
   },
   methods: {
      selectTab(tab) {
          if (tab !== 'MyCustoms') {
              this.$store.dispatch('getByTab', { tab: tab });
          }
         this.activeTab = tab;
          console.log(this.activeTab)
      }
   },
   mounted() {
      for (const m of [
         'MyNotifications',
         'MyAccompanyingCourses',
         // 'MyWorks',
         'MyEvaluations',
         'MyTasks',
         'MyWorkflows',
      ]) {
         this.$store.dispatch('getByTab', { tab: m, param: "countOnly=1" });
      }
   }
}
</script>

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