app/pages/parameters/attendances.vue

<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="pending" />
    <UiForm
        v-else
        :model="Parameters"
        :entity="parameters"
        action-position="bottom"
    >
      <v-row>
        <v-col cols="12">
          <UiInputCheckbox
            v-model="parameters.sendAttendanceEmail"
            field="sendAttendanceEmail"
            label="sendAttendanceEmail"
          />

          <UiInputCheckbox
            v-model="parameters.sendAttendanceSms"
            field="sendAttendanceSms"
          />

          <UiInputCheckbox
            v-model="parameters.notifyAdministrationAbsence"
            field="notifyAdministrationAbsence"
          />
        </v-col>
      </v-row>
    </UiForm>

    <v-divider class="my-10"/>

    <UiLoadingPanel v-if="attendanceBookingReasonsPending" />
    <div v-else>
      <v-table>
        <thead>
        <tr>
          <td>{{ $t('attendanceBookingReasons') }}</td>
          <td></td>
        </tr>
        </thead>
        <tbody>
        <tr v-if="attendanceBookingReasons.length > 0" v-for="reason in attendanceBookingReasons" :key="reason.id">
          <td class="cycle-editable-cell">
            {{ reason.reason }}
          </td>
          <td class="d-flex flex-row">
            <v-btn
                :flat="true"
                icon="fa fa-pen"
                class="cycle-edit-icon mr-3"
                @click="goToEditPage(reason.id as number)"
            />
            <UiButtonDelete
                :model="AttendanceBookingReason"
                :entity="reason"
                :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-btn
          :flat="true"
          prepend-icon="fa fa-plus"
          class="theme-primary mt-4"
          @click="goToCreatePage"
      >
        {{ $t('add') }}
      </v-btn>
    </div>
  </LayoutContainer>
</template>
<script setup lang="ts">
import Parameters from '~/models/Organization/Parameters'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
import type { AsyncData } from '#app'
import {type Collection, useRepo} from "pinia-orm";
import type {ComputedRef} from "vue";
import UrlUtils from "~/services/utils/urlUtils";
import AttendanceBookingReason from "~/models/Booking/AttendanceBookingReason";
import AttendanceBookingReasonRepository from "~/stores/repositories/AttendanceBookingReasonRepository";


const { fetch } = useEntityFetch()

const organizationProfile = useOrganizationProfileStore()

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

const { data: parameters, pending } = fetch(
  Parameters,
  organizationProfile.parametersId
) as AsyncData<Parameters, Parameters | true>

const { fetchCollection } = useEntityFetch()

const { pending: attendanceBookingReasonsPending } = fetchCollection(AttendanceBookingReason)

const attendanceBookingReasonsRepo = useRepo(AttendanceBookingReasonRepository)

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

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

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