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

<template>
  <div class="alert alert-light">
    {{ trans(MY_TASKS_DESCRIPTION_WARNING) }}
  </div>
  <span v-if="noResultsAlert" class="chill-no-data-statement">
    {{ trans(NO_DATA) }}
  </span>
  <tab-table v-else>
    <template #thead>
      <th scope="col">
        {{ trans(WARNING_DATE) }}
      </th>
      <th scope="col">
        {{ trans(MAX_DATE) }}
      </th>
      <th scope="col">
        {{ trans(TASK) }}
      </th>
      <th scope="col" />
    </template>
    <template #tbody>
      <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
        <td v-if="t.warningDate !== null">
          {{ localizeDateTimeFormat(t.warningDate, "short") }}
        </td>
        <td v-else />
        <td>
          <span class="outdated">{{
            localizeDateTimeFormat(t.endDate, "short")
          }}</span>
        </td>
        <td>{{ t.title }}</td>
        <td>
          <a class="btn btn-sm btn-show" :href="getUrl(t)">
            {{ trans(SHOW_ENTITY, { entity: trans(THE_TASK) }) }}
          </a>
        </td>
      </tr>
    </template>
  </tab-table>

  <div class="alert alert-light">
    {{ trans(MY_TASKS_DESCRIPTION_ALERT) }}
  </div>
  <span v-if="noResultsWarning" class="chill-no-data-statement">
    {{ trans(NO_DATA) }}
  </span>
  <tab-table v-else>
    <template #thead>
      <th scope="col">
        {{ trans(WARNING_DATE) }}
      </th>
      <th scope="col">
        {{ trans(MAX_DATE) }}
      </th>
      <th scope="col">
        {{ trans(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">{{
            localizeDateTimeFormat(t.warningDate, "short")
          }}</span>
        </td>
        <td>{{ localizeDateTimeFormat(t.endDate, "short") }}</td>
        <td>{{ t.title }}</td>
        <td>
          <a class="btn btn-sm btn-show" :href="getUrl(t)">
            {{ trans(SHOW_ENTITY, { entity: trans(THE_TASK) }) }}
          </a>
        </td>
      </tr>
    </template>
  </tab-table>
</template>

<script lang="ts" setup>
import { computed, ComputedRef } from "vue";
import { useStore } from "vuex";
import TabTable from "./TabTable.vue";
import {
  MY_TASKS_DESCRIPTION_ALERT,
  MY_TASKS_DESCRIPTION_WARNING,
  MAX_DATE,
  WARNING_DATE,
  TASK,
  SHOW_ENTITY,
  THE_TASK,
  NO_DATA,
  trans,
} from "translator";
import { TasksState } from "./store/modules/homepage";
import { Alert, Warning } from "ChillPersonAssets/types";
import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

const store = useStore();

const tasks: ComputedRef<TasksState> = computed(
  () => store.state.homepage.tasks,
);
const isTasksWarningLoaded = computed(() => store.getters.isTasksWarningLoaded);
const isTasksAlertLoaded = computed(() => store.getters.isTasksAlertLoaded);

const noResultsAlert = computed(() => {
  if (!isTasksAlertLoaded.value) {
    return false;
  } else {
    return tasks.value.alert.count === 0;
  }
});

const noResultsWarning = computed(() => {
  if (!isTasksWarningLoaded.value) {
    return false;
  } else {
    return tasks.value.warning.count === 0;
  }
});

function getUrl(t: Warning | Alert): string {
  return `/fr/task/single-task/${t.id}/show`;
}
</script>

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