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

<template>
   
   <div class="alert alert-light">{{ $t('my_tasks.description_warning') }}</div>
   <span v-if="noResultsAlert" class="chill-no-data-statement">{{ $t('no_data') }}</span>
   <tab-table v-else>
      <template v-slot:thead>
         <th scope="col">{{ $t('warning_date') }}</th>
         <th scope="col">{{ $t('max_date') }}</th>
         <th scope="col">{{ $t('task') }}</th>
         <th scope="col"></th>
      </template>
      <template v-slot:tbody>
         <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
            <td>{{ $d(t.warningDate.datetime, 'short') }}</td>
            <td>
               <span class="outdated">{{ $d(t.endDate.datetime, 'short') }}</span>
            </td>
            <td>{{ t.title }}</td>
            <td>
               <a class="btn btn-sm btn-show" :href="getUrl(t)">
                  {{ $t('show_entity', { entity: $t('the_task') }) }}
               </a>
            </td>
         </tr>
      </template>
   </tab-table>
   
   <div class="alert alert-light">{{ $t('my_tasks.description_alert') }}</div>
   <span v-if="noResultsWarning" class="chill-no-data-statement">{{ $t('no_data') }}</span>
   <tab-table v-else>
      <template v-slot:thead>
         <th scope="col">{{ $t('warning_date') }}</th>
         <th scope="col">{{ $t('max_date') }}</th>
         <th scope="col">{{ $t('task') }}</th>
         <th scope="col"></th>
      </template>
      <template v-slot:tbody>
         <tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
            <td>
               <span class="outdated">{{ $d(t.warningDate.datetime, 'short') }}</span>
            </td>
            <td>{{ $d(t.endDate.datetime, 'short') }}</td>
            <td>{{ t.title }}</td>
            <td>
               <a class="btn btn-sm btn-show" :href="getUrl(t)">
                  {{ $t('show_entity', { entity: $t('the_task') }) }}
               </a>
            </td>
         </tr>
      </template>
   </tab-table>
   
</template>

<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";

export default {
   name: "MyTasks",
   components: {
      TabTable
   },
   computed: {
      ...mapState([
         'tasks',
      ]),
      ...mapGetters([
         'isTasksWarningLoaded',
         'isTasksAlertLoaded',
      ]),
      noResultsAlert() {
         if (!this.isTasksAlertLoaded) {
            return false;
         } else {
            return this.tasks.alert.count === 0;
         }
      },
      noResultsWarning() {
         if (!this.isTasksWarningLoaded) {
            return false;
         } else {
            return this.tasks.warning.count === 0;
         }
      }
   },
   methods: {
      getUrl(t) {
         return `/fr/task/single-task/${t.id}/show`
      }
   },
}
</script>

<style scoped>
span.outdated {
   font-weight: bold;
   color: var(--bs-warning);
}
</style>