app/pages/freemium/dashboard.vue

<template>
  <v-container fluid>
    <v-row>
      <!-- Bloc événements -->
      <v-col cols="12" md="8">
        <v-card>
          <v-tabs v-model="tab">
            <v-tab value="future">Mes événements à venir</v-tab>
            <v-tab value="past">Mes événements passés</v-tab>
          </v-tabs>

          <v-tabs-window v-model="tab">
            <v-tabs-window-item value="future">
              <UiEventList
                v-if="statusUpcomingEvents == FETCHING_STATUS.SUCCESS && upcomingEvents?.items"
                :events="upcomingEvents.items"
                :pagination="upcomingEvents.pagination"
                @load="loadUpcomingEvents"
                @edit="editEvent"
              />
            </v-tabs-window-item>
            <v-tabs-window-item value="past">
              <UiEventList
                v-if="statusPastEvents == FETCHING_STATUS.SUCCESS && pastEvents?.items"
                :events="pastEvents.items"
                :pagination="pastEvents.pagination"
                @load="loadPastEvents"
                @edit="editEvent"
              />
            </v-tabs-window-item>
          </v-tabs-window>

          <v-card-actions>
            <v-btn color="primary" to="events/new">Ajouter un événement</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>

      <!-- Bloc structure -->
      <v-col cols="12" md="4">
        <v-card v-if="statusOrganization == FETCHING_STATUS.SUCCESS">
          <v-card-title>Structure</v-card-title>
          <v-card-text>
            <div><strong>Nom:</strong> {{ organization?.name }}</div>
            <div><strong>Email:</strong> {{ organization?.email }}</div>
          </v-card-text>
          <v-card-actions>
            <v-btn color="secondary" to="organization">Modifier la structure</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">

import Query from "~/services/data/Query";

definePageMeta({
  name: 'freemium_dashboard_page',
})

import { ref } from 'vue'
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import Organization from "~/models/Freemium/Organization";
import Event from "~/models/Freemium/Event";
import type {AsyncData} from "#app";
import OrderBy from "~/services/data/Filters/OrderBy";
import {FETCHING_STATUS, ORDER_BY_DIRECTION, TIME_STRATEGY} from "~/types/enum/data";
import PageFilter from "~/services/data/Filters/PageFilter";
import TimeFilter from "~/services/data/Filters/TimeFilter";
import Country from "~/models/Core/Country";
import DateUtils from "~/services/utils/dateUtils";
import UrlUtils from "~/services/utils/urlUtils";

//Ref Définition
const tab = ref(null)
const { fetch, fetchCollection } = useEntityFetch()
const upcomingPage = ref(1)
const pastPage = ref(1)

//Fetch
const { data: organization, status:statusOrganization } = fetch(Organization)
const { data: upcomingEvents, status: statusUpcomingEvents, refresh: refreshUpcomingEvents } = fetchEvents()
const { data: pastEvents, status: statusPastEvents, refresh: refreshPastEvents } = fetchEvents(true)

/**
 * Charge une page des événements à venir
 * @param pageNumber
 */
function loadUpcomingEvents(pageNumber: number) {
  upcomingPage.value = pageNumber
  refreshPastEvents()
}

/**
 * Cahrge une page des événements passées
 * @param pageNumber
 */
function loadPastEvents(pageNumber: number) {
  pastPage.value = pageNumber
  refreshPastEvents()
}

/**
 * Redirige vers la page d'édition d'un événement
 * @param eventId
 */
function editEvent(eventId: number) {
  navigateTo(UrlUtils.join('events', eventId))
}

/**
 * Récupère la liste des événements
 * @param past
 */
function fetchEvents(past:boolean = false){
  const today = computed(() => DateUtils.formatIsoShortDate(new Date()))
  const query =
    new Query(
      new OrderBy('datetimeStart', past ? ORDER_BY_DIRECTION.DESC : ORDER_BY_DIRECTION.ASC),
      new PageFilter(past ? pastPage : upcomingPage, ref(5)),
      new TimeFilter('datetimeStart', today, past ? TIME_STRATEGY.BEFORE : TIME_STRATEGY.AFTER)
    )

  return fetchCollection(Event, null, query)
}

/**
 * Nettoyage du store
 */
onUnmounted(() => {
  useRepo(Organization).flush()
  useRepo(Event).flush()
  useRepo(Country).flush()
})

</script>

<style scoped>
.v-card {
  margin-bottom: 16px;
}
</style>