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

<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>