app/components/Layout/Parameters/EducationTimings.vue

<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="pending" />
    <div v-else>
      <ul>
        <li v-for="timing in allTimings" :key="timing.id">
          {{ timing.timing }}

          <UiButtonDelete :model="EducationTiming" :entity="timing" />
          <span class="edit-icon" @click="goToEditPage(timing.id)">✏️</span>
        </li>
      </ul>
    </div>
    <button @click="goToCreatePage">Nouveau</button>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import EducationTiming from '~/models/Education/EducationTiming'
import { useRepo } from 'pinia-orm'
import EducationTimingsRepository from '~/stores/repositories/EducationTimingsRepository'

const { fetchCollection } = useEntityFetch()

const { data: educationTimings, pending } = fetchCollection(EducationTiming)

const educationTimingRepo = useRepo(EducationTimingsRepository)

/**
 * On récupère les timings via le store 
 * (sans ça, les mises à jour SSE ne seront pas prises en compte)
 */
const allTimings: ComputedRef<Array<EducationTiming>> = computed(() => {
  return educationTimingRepo.getEducationTimings()
})

const goToEditPage = (id: number) => {
  navigateTo(`/parameters/education_timings/${id}`)
}

const goToCreatePage = () => {
  navigateTo(`/parameters/education_timings/new`)
}
</script>