app/pages/parameters/attendances.vue

<template>
  <LayoutContainer>
    <div v-if="organizationProfile.isSchool">
      <UiLoadingPanel v-if="pending" />
      <UiForm
        v-else-if="parameters !== null"
        :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"
            />

            <UiInputNumber
              v-model="parameters.numberConsecutiveAbsences"
              field="notifyAdministrationAbsence"
              :rules="rules()"
            />
          </v-col>
        </v-row>
      </UiForm>

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

    <UiLoadingPanel v-if="attendanceBookingReasonsPending" />
    <div v-else>
      <v-table>
        <thead>
          <tr>
            <td>{{ $t('attendanceBookingReasons') }}</td>
            <td></td>
          </tr>
        </thead>
        <tbody v-if="attendanceBookingReasons!.items.length > 0">
          <tr
            v-for="reason in attendanceBookingReasons!.items"
            :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
                :entity="reason"
                :flat="true"
                class="cycle-edit-icon"
              />
            </td>
          </tr>
        </tbody>
        <tbody v-else>
          <tr 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 type { AsyncData } from '#app'
import Parameters from '~/models/Organization/Parameters'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
import UrlUtils from '~/services/utils/urlUtils'
import AttendanceBookingReason from '~/models/Booking/AttendanceBookingReason'

definePageMeta({
  name: 'parameters_attendances_page',
})

const { fetch } = useEntityFetch()

const i18n = useI18n()

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 | null, Error | null>

const { fetchCollection } = useEntityFetch()

const {
  data: attendanceBookingReasons,
  pending: attendanceBookingReasonsPending,
} = fetchCollection(AttendanceBookingReason)

const rules = () => [
  (numberConsecutiveAbsences: string | null) =>
    (numberConsecutiveAbsences !== null &&
      parseInt(numberConsecutiveAbsences) > 0) ||
    i18n.t('please_enter_a_value'),
]

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

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