Misc: homepage widget with tickets, and improvements in ticket list

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue

@@ -1,36 +1,38 @@
 <template>
   <div class="alert alert-light">
-    {{ $t("my_tasks.description_warning") }}
+    {{ trans(MY_TASKS_DESCRIPTION_WARNING) }}
   </div>
-  <span v-if="noResultsAlert" class="chill-no-data-statement">{{
-    $t("no_data")
-  }}</span>
+  <span v-if="noResultsAlert" class="chill-no-data-statement">
+    {{ trans(NO_DATA) }}
+  </span>
   <tab-table v-else>
     <template #thead>
       <th scope="col">
-        {{ $t("warning_date") }}
+        {{ trans(WARNING_DATE) }}
       </th>
       <th scope="col">
-        {{ $t("max_date") }}
+        {{ trans(MAX_DATE) }}
       </th>
       <th scope="col">
-        {{ $t("task") }}
+        {{ 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="null !== t.warningDate">
-          {{ $d(t.warningDate.datetime, "short") }}
+        <td v-if="t.warningDate !== null">
+          {{ $d(new Date(t.warningDate.datetime), "short") }}
         </td>
         <td v-else />
         <td>
-          <span class="outdated">{{ $d(t.endDate.datetime, "short") }}</span>
+          <span class="outdated">{{
+            $d(new Date(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") }) }}
+            {{ trans(SHOW_ENTITY, { entity: trans(THE_TASK) }) }}
           </a>
         </td>
       </tr>
@@ -38,21 +40,21 @@
   </tab-table>
 
   <div class="alert alert-light">
-    {{ $t("my_tasks.description_alert") }}
+    {{ trans(MY_TASKS_DESCRIPTION_ALERT) }}
   </div>
-  <span v-if="noResultsWarning" class="chill-no-data-statement">{{
-    $t("no_data")
-  }}</span>
+  <span v-if="noResultsWarning" class="chill-no-data-statement">
+    {{ trans(NO_DATA) }}
+  </span>
   <tab-table v-else>
     <template #thead>
       <th scope="col">
-        {{ $t("warning_date") }}
+        {{ trans(WARNING_DATE) }}
       </th>
       <th scope="col">
-        {{ $t("max_date") }}
+        {{ trans(MAX_DATE) }}
       </th>
       <th scope="col">
-        {{ $t("task") }}
+        {{ trans(TASK) }}
       </th>
       <th scope="col" />
     </template>
@@ -60,14 +62,14 @@
       <tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
         <td>
           <span class="outdated">{{
-            $d(t.warningDate.datetime, "short")
+            $d(new Date(t.warningDate.datetime), "short")
           }}</span>
         </td>
-        <td>{{ $d(t.endDate.datetime, "short") }}</td>
+        <td>{{ $d(new Date(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") }) }}
+            {{ trans(SHOW_ENTITY, { entity: trans(THE_TASK) }) }}
           </a>
         </td>
       </tr>
@@ -75,39 +77,51 @@
   </tab-table>
 </template>
 
-<script>
-import { mapState, mapGetters } from "vuex";
-import TabTable from "./TabTable";
+<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";
 
-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`;
-    },
-  },
-};
+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>