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

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

@@ -1,27 +1,26 @@
-// CURRENTLY NOT IN USE
 <template>
   <div class="accompanying-course-work">
     <div class="alert alert-light">
-      {{ $t("my_works.description") }}
+      {{ trans(MY_WORKS_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("StartDate") }}
+          {{ trans(START_DATE) }}
         </th>
         <th scope="col">
-          {{ $t("SocialAction") }}
+          {{ trans(SOCIAL_ACTION) }}
         </th>
         <th scope="col">
-          {{ $t("concerned_persons") }}
+          {{ trans(CONCERNED_PERSONS) }}
         </th>
         <th scope="col" />
       </template>
       <template #tbody>
-        <tr v-for="(w, i) in works.results" :key="`works-${i}`">
+        <tr v-for="(w, i) in works.value.results" :key="`works-${i}`">
           <td>{{ $d(w.startDate.datetime, "short") }}</td>
           <td>
             <span class="chill-entity entity-social-issue">
@@ -51,8 +50,8 @@
             <div class="btn-group-vertical" role="group" aria-label="Actions">
               <a class="btn btn-sm btn-update" :href="getUrl(w)">
                 {{
-                  $t("show_entity", {
-                    entity: $t("the_action"),
+                  trans(SHOW_ENTITY, {
+                    entity: trans(THE_ACTION),
                   })
                 }}
               </a>
@@ -61,8 +60,8 @@
                 :href="getUrl(w.accompanyingPeriod)"
               >
                 {{
-                  $t("show_entity", {
-                    entity: $t("the_course"),
+                  trans(SHOW_ENTITY, {
+                    entity: trans(THE_COURSE),
                   })
                 }}
               </a>
@@ -74,41 +73,47 @@
   </div>
 </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 } from "vue";
+import { useStore } from "vuex";
+import TabTable from "./TabTable.vue";
+import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
+import {
+  MY_WORKS_DESCRIPTION,
+  CONCERNED_PERSONS,
+  SHOW_ENTITY,
+  THE_COURSE,
+  THE_ACTION,
+  SOCIAL_ACTION,
+  START_DATE,
+  NO_DATA,
+  trans,
+} from "translator";
+import { Workflow } from "ChillPersonAssets/types";
 
-export default {
-  name: "MyWorks",
-  components: {
-    TabTable,
-    OnTheFly,
-  },
-  computed: {
-    ...mapState(["works"]),
-    ...mapGetters(["isWorksLoaded"]),
-    noResults() {
-      if (!this.isWorksLoaded) {
-        return false;
-      } else {
-        return this.works.count === 0;
-      }
-    },
-  },
-  methods: {
-    getUrl(e) {
-      switch (e.type) {
-        case "accompanying_period_work":
-          return `/fr/person/accompanying-period/work/${e.id}/edit`;
-        case "accompanying_period":
-          return `/fr/parcours/${e.id}`;
-        default:
-          throw "entity type unknown";
-      }
-    },
-  },
-};
+const store = useStore();
+
+const works = computed(() => store.state.homepage.works);
+const isWorksLoaded = computed(() => store.getters.isWorksLoaded);
+
+const noResults = computed(() => {
+  if (!isWorksLoaded.value) {
+    return false;
+  } else {
+    return works.value.count === 0;
+  }
+});
+
+function getUrl(e: Workflow): string {
+  switch (e.type) {
+    case "accompanying_period_work":
+      return `/fr/person/accompanying-period/work/${e.id}/edit`;
+    case "accompanying_period":
+      return `/fr/parcours/${e.id}`;
+    default:
+      throw "entity type unknown";
+  }
+}
 </script>
 
 <style scoped></style>