|
|
@@ -27,6 +27,53 @@
|
|
|
</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">
|
|
|
@@ -34,6 +81,11 @@ 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()
|
|
|
@@ -48,4 +100,26 @@ 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>
|