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

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

@@ -1,35 +1,35 @@
 <template>
   <div class="alert alert-light">
-    {{ $t("my_accompanying_courses.description") }}
+    {{ trans(MY_ACCOMPANYING_COURSES_DESCRIPTION) }}
   </div>
-  <span v-if="noResults" class="chill-no-data-statement">{{
-    $t("no_data")
-  }}</span>
+  <span v-if="noResults" class="chill-no-data-statement">
+    {{ trans(NO_DATA) }}
+  </span>
   <tab-table v-else>
     <template #thead>
       <th scope="col">
-        {{ $t("opening_date") }}
+        {{ trans(OPENING_DATE) }}
       </th>
       <th scope="col">
-        {{ $t("social_issues") }}
+        {{ trans(SOCIAL_ISSUES) }}
       </th>
       <th scope="col">
-        {{ $t("concerned_persons") }}
+        {{ trans(CONCERNED_PERSONS) }}
       </th>
       <th scope="col" />
       <th scope="col" />
     </template>
     <template #tbody>
       <tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
-        <td>{{ $d(c.openingDate.datetime, "short") }}</td>
+        <td>{{ $d(new Date(c.openingDate.datetime), "short") }}</td>
         <td>
           <span
-            v-for="(i, index) in c.socialIssues"
+            v-for="(issue, index) in c.socialIssues"
             :key="index"
             class="chill-entity entity-social-issue"
           >
             <span class="badge bg-chill-l-gray text-dark">
-              {{ localizeString(i.title) }}
+              {{ localizeString(issue.title) }}
             </span>
           </span>
         </td>
@@ -46,15 +46,15 @@
         </td>
         <td>
           <span v-if="c.emergency" class="badge rounded-pill bg-danger me-1">{{
-            $t("emergency")
+            trans(EMERGENCY)
           }}</span>
           <span v-if="c.confidential" class="badge rounded-pill bg-danger">{{
-            $t("confidential")
+            trans(CONFIDENTIAL)
           }}</span>
         </td>
         <td>
           <a class="btn btn-sm btn-show" :href="getUrl(c)">
-            {{ $t("show_entity", { entity: $t("the_course") }) }}
+            {{ trans(SHOW_ENTITY, { entity: trans(THE_COURSE) }) }}
           </a>
         </td>
       </tr>
@@ -62,36 +62,45 @@
   </tab-table>
 </template>
 
-<script>
-import { mapState, mapGetters } from "vuex";
-import TabTable from "./TabTable";
-import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
+<script lang="ts" setup>
+import { computed, ComputedRef } from "vue";
+import { useStore } from "vuex";
+import TabTable from "./TabTable.vue";
+import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
 import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+import { AccompanyingCourse } from "ChillPersonAssets/types";
+import { PaginationResponse } from "ChillMainAssets/lib/api/apiMethods";
+import {
+  MY_ACCOMPANYING_COURSES_DESCRIPTION,
+  OPENING_DATE,
+  SOCIAL_ISSUES,
+  CONCERNED_PERSONS,
+  SHOW_ENTITY,
+  THE_COURSE,
+  NO_DATA,
+  EMERGENCY,
+  CONFIDENTIAL,
+  trans,
+} from "translator";
+const store = useStore();
 
-export default {
-  name: "MyAccompanyingCourses",
-  components: {
-    TabTable,
-    OnTheFly,
-  },
-  computed: {
-    ...mapState(["accompanyingCourses"]),
-    ...mapGetters(["isAccompanyingCoursesLoaded"]),
-    noResults() {
-      if (!this.isAccompanyingCoursesLoaded) {
-        return false;
-      } else {
-        return this.accompanyingCourses.count === 0;
-      }
-    },
-  },
-  methods: {
-    localizeString,
-    getUrl(c) {
-      return `/fr/parcours/${c.id}`;
-    },
-  },
-};
+const accompanyingCourses: ComputedRef<PaginationResponse<AccompanyingCourse>> =
+  computed(() => store.state.homepage.accompanyingCourses);
+const isAccompanyingCoursesLoaded = computed(
+  () => store.getters.isAccompanyingCoursesLoaded,
+);
+
+const noResults = computed(() => {
+  if (!isAccompanyingCoursesLoaded.value) {
+    return false;
+  } else {
+    return accompanyingCourses.value.count === 0;
+  }
+});
+
+function getUrl(c: { id: number }): string {
+  return `/fr/parcours/${c.id}`;
+}
 </script>
 
 <style scoped>