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";

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>