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 v-slot: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 v-slot: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 v-slot: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 v-slot: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 v-slot: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 v-slot:n><span>{{ counter.tasksWarning }}</span></template>
                           </i18n-t>
                       </li>
                   </ul>
               </div>
           </div>

           <template v-if="this.hasDashboardItems">
               <template v-for="dashboardItem in this.dashboardItems">
                   <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>