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 #thead>
            <th scope="col">
                {{ $t("warning_date") }}
            </th>
            <th scope="col">
                {{ $t("max_date") }}
            </th>
            <th scope="col">
                {{ $t("task") }}
            </th>
            <th scope="col" />
        </template>
        <template #tbody>
            <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
                <td v-if="null !== t.warningDate">
                    {{ $d(t.warningDate.datetime, "short") }}
                </td>
                <td v-else />
                <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 #thead>
            <th scope="col">
                {{ $t("warning_date") }}
            </th>
            <th scope="col">
                {{ $t("max_date") }}
            </th>
            <th scope="col">
                {{ $t("task") }}
            </th>
            <th scope="col" />
        </template>
        <template #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>