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

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="col-12">
+    <!-- Loading state -->
+    <div
+      v-if="isTicketLoading"
+      class="d-flex justify-content-center align-items-center"
+      style="height: 200px"
+    >
+      <div class="text-center">
+        <div class="spinner-border mb-3" role="status">
+          <span class="visually-hidden">{{
+            trans(CHILL_TICKET_LIST_LOADING_TICKET)
+          }}</span>
+        </div>
+        <div class="text-muted">
+          {{ trans(CHILL_TICKET_LIST_LOADING_TICKET) }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Ticket list -->
+    <ticket-list-component
+      v-else
+      :tickets="ticketList"
+      title=""
+      :hasMoreTickets="pagination.next !== null"
+      @fetchNextPage="fetchNextPage"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+// Components
+import TicketListComponent from "../../../../../ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/TicketListComponent.vue";
+
+// Types
+import { Pagination } from "ChillMainAssets/lib/api/apiMethods";
+import { TicketSimple } from "src/Bundle/ChillTicketBundle/src/Resources/public/types";
+
+// Translation
+import { CHILL_TICKET_LIST_LOADING_TICKET, trans } from "translator";
+
+const store = useStore();
+const pagination = computed(() => store.getters.getPagination as Pagination);
+
+const ticketList = computed(
+  () => store.getters.getTicketList as TicketSimple[],
+);
+const isTicketLoading = computed(() => store.getters.isTicketLoading);
+
+const fetchNextPage = async () => {
+  if (pagination.value.next) {
+    await store.dispatch("fetchTicketListByUrl", pagination.value.next);
+  }
+};
+</script>