app/pages/parameters/attendances.vue

<template>
  <div>
    <LayoutParametersSection v-if="organizationProfile.isSchool">
      <h4>{{ $t('alert_configuration') }}</h4>
      <UiLoadingPanel v-if="pending" />
      <UiForm v-else-if="parameters !== null" v-model="parameters">
        <v-row>
          <v-col cols="12">
            <UiInputCheckbox
              v-model="parameters.handlePresence"
              field="handlePresence"
            />

            <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-if="parameters.notifyAdministrationAbsence"
              v-model="parameters.numberConsecutiveAbsences"
              field="numberConsecutiveAbsences"
              :rules="rules()"
            />
          </v-col>
        </v-row>
      </UiForm>
    </LayoutParametersSection>

    <LayoutParametersSection>
      <LayoutParametersEntityTable
        :model="AttendanceBookingReason"
        :title="$t('attendanceBookingReasons')"
        :columns-definitions="[{ property: 'reason' }]"
      />
    </LayoutParametersSection>
  </div>
</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 rules = () => [
  (numberConsecutiveAbsences: string | null) =>
    (numberConsecutiveAbsences !== null &&
      parseInt(numberConsecutiveAbsences) > 0) ||
    i18n.t('please_enter_a_value'),
]
</script>