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  }}
          <div class="button-group">
            <UiButtonDelete :model="EducationTiming" :entity="timing" />
            <span class="edit-icon" @click="goToEditPage(timing.id)">✏️</span>
          </div>
        </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);

const allTimings: ComputedRef<Array<EducationTiming>> = computed(() => {
  return educationTimingRepo.getEducationTimings()
})

console.log(allTimings)


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

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

<style scoped lang="scss">
.button-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;  
}

</style>