app/pages/parameters/education_timings.vue

<template>
  <NuxtLayout name="parameters">
    <LayoutContainer>
      <UiLoadingPanel v-if="pending" />
      <v-container v-else style="width: 500px;">
        <v-col cols="12">
          <v-row class="justify-center">
            <v-table class="w-100">
              <thead>
                <tr>
                  <td>{{ $t('educationTimings') }}</td>
                  <td></td>
                </tr>
              </thead>
              <tbody>
                <tr v-if="educationTimings.length > 0" v-for="timing in educationTimings" :key="timing.id">
                  <td class="cycle-editable-cell">
                    {{ timing.timing }}
                  </td>
                  <td class="d-flex flex-row">
                    <v-btn
                        :flat="true"
                        icon="fa fa-pen"
                        class="cycle-edit-icon mr-3"
                        @click="goToEditPage(timing.id as number)"
                    />
                    <UiButtonDelete
                        :model="EducationTiming"
                        :entity="timing"
                        :flat="true"
                        class="cycle-edit-icon"
                    />
                  </td>
                </tr>
                <tr v-else class="theme-neutral">
                  <td><i>{{ $t('nothing_to_show')}}</i></td>
                  <td></td>
                </tr>
              </tbody>
            </v-table>
          </v-row>
          <v-row class="justify-end">
            <v-btn
                :flat="true"
                prepend-icon="fa fa-plus"
                class="theme-primary mt-2"
                @click="goToCreatePage"
            >
              {{ $t('add') }}
            </v-btn>
          </v-row>
        </v-col>
      </v-container>
    </LayoutContainer>
  </NuxtLayout>

</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'
import {ComputedRef} from "vue";
import {useOrganizationProfileStore} from "~/stores/organizationProfile";
import UrlUtils from "~/services/utils/urlUtils";

/**
 * Disable the default layout, the page will use the layout defined with <NuxtLayout />
 * @see https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis
 */
definePageMeta({
  layout: false,
});

const organizationProfile = useOrganizationProfileStore()

if (organizationProfile.parametersId === null) {
  throw new Error('Missing organization parameters id')
}

const { fetch, fetchCollection } = useEntityFetch()

const { 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 educationTimings: ComputedRef<Array<EducationTiming>> = computed(() => {
  return educationTimingRepo.getEducationTimings()
})

const goToEditPage = (id: number) => {
  navigateTo(UrlUtils.join('/parameters/education_timings', id))
}

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

<style scoped lang="scss">
// TODO: voir à factoriser ces styles, ptêt en faisant un component de ces boutons?
:deep(.cycle-edit-icon .v-icon) {
  color: rgb(var(--v-theme-primary));
  font-size: 18px;
}
</style>