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

<template>
    <span v-if="noResults" class="chill-no-data-statement">{{
        $t("no_dashboard")
    }}</span>
    <div v-else id="dashboards" class="container g-3">
        <div class="row">
            <div class="mbloc col-xs-12 col-sm-4">
                <div class="custom1">
                    <ul class="list-unstyled">
                        <li v-if="counter.notifications > 0">
                            <i18n-t
                                keypath="counter.unread_notifications"
                                tag="span"
                                :class="counterClass"
                                :plural="counter.notifications"
                            >
                                <template #n>
                                    <span>{{ counter.notifications }}</span>
                                </template>
                            </i18n-t>
                        </li>
                        <li v-if="counter.accompanyingCourses > 0">
                            <i18n-t
                                keypath="counter.assignated_courses"
                                tag="span"
                                :class="counterClass"
                                :plural="counter.accompanyingCourses"
                            >
                                <template #n>
                                    <span>{{
                                        counter.accompanyingCourses
                                    }}</span>
                                </template>
                            </i18n-t>
                        </li>
                        <li v-if="counter.works > 0">
                            <i18n-t
                                keypath="counter.assignated_actions"
                                tag="span"
                                :class="counterClass"
                                :plural="counter.works"
                            >
                                <template #n>
                                    <span>{{ counter.works }}</span>
                                </template>
                            </i18n-t>
                        </li>
                        <li v-if="counter.evaluations > 0">
                            <i18n-t
                                keypath="counter.assignated_evaluations"
                                tag="span"
                                :class="counterClass"
                                :plural="counter.evaluations"
                            >
                                <template #n>
                                    <span>{{ counter.evaluations }}</span>
                                </template>
                            </i18n-t>
                        </li>
                        <li v-if="counter.tasksAlert > 0">
                            <i18n-t
                                keypath="counter.alert_tasks"
                                tag="span"
                                :class="counterClass"
                                :plural="counter.tasksAlert"
                            >
                                <template #n>
                                    <span>{{ counter.tasksAlert }}</span>
                                </template>
                            </i18n-t>
                        </li>
                        <li v-if="counter.tasksWarning > 0">
                            <i18n-t
                                keypath="counter.warning_tasks"
                                tag="span"
                                :class="counterClass"
                                :plural="counter.tasksWarning"
                            >
                                <template #n>
                                    <span>{{ counter.tasksWarning }}</span>
                                </template>
                            </i18n-t>
                        </li>
                    </ul>
                </div>
            </div>

            <template v-if="this.hasDashboardItems">
                <template
                    v-for="(dashboardItem, index) in this.dashboardItems"
                    :key="index"
                >
                    <div
                        class="mbloc col-xs-12 col-sm-8 news"
                        v-if="dashboardItem.type === 'news'"
                    >
                        <News />
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import News from "./DashboardWidgets/News.vue";

export default {
    name: "MyCustoms",
    components: {
        News,
    },
    data() {
        return {
            counterClass: {
                counter: true, //hack to pass class 'counter' in i18n-t
            },
            dashboardItems: [],
            masonry: null,
        };
    },
    computed: {
        ...mapGetters(["counter"]),
        noResults() {
            return false;
        },
        hasDashboardItems() {
            return this.dashboardItems.length > 0;
        },
    },
    mounted() {
        makeFetch("GET", "/api/1.0/main/dashboard-config-item.json")
            .then((response) => {
                this.dashboardItems = response;
            })
            .catch((error) => {
                throw error;
            });
    },
};
</script>

<style lang="scss" scoped>
div.custom4,
div.custom3,
div.custom2 {
    font-style: italic;
    color: var(--bs-chill-gray);
}
span.counter {
    & > span {
        background-color: unset;
    }
}

div.news {
    max-height: 22rem;
    overflow: hidden;
    overflow-y: scroll;
}
</style>