243 lines
8.7 KiB
Vue
243 lines
8.7 KiB
Vue
<template>
|
|
<AppDrawer v-model="drawerOpen" title="Imprimer les absences">
|
|
<form class="space-y-4" @submit.prevent="handleSubmit">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="print-from">
|
|
Date de début <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="print-from"
|
|
v-model="printForm.from"
|
|
type="date"
|
|
:class="fromFieldClass"
|
|
/>
|
|
<p v-if="showFromError" class="mt-1 text-sm text-red-600">
|
|
La date de début est obligatoire.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-md font-semibold text-neutral-700" for="print-to">
|
|
Date de fin <span class="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
id="print-to"
|
|
v-model="printForm.to"
|
|
type="date"
|
|
:class="toFieldClass"
|
|
/>
|
|
<p v-if="showToError" class="mt-1 text-sm text-red-600">
|
|
La date de fin est obligatoire.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<p class="text-md font-semibold text-neutral-700">
|
|
Sites <span class="text-red-600">*</span>
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
|
|
<div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
|
|
<div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
|
|
<label class="text-md" :for="`print-site-${site.id}`">{{ site.name }}</label>
|
|
<input
|
|
:id="`print-site-${site.id}`"
|
|
v-model="printForm.siteIds"
|
|
:value="site.id"
|
|
type="checkbox"
|
|
class="h-4 w-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p v-if="showSitesError" class="text-sm text-red-600">
|
|
Sélectionne au moins un site.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<p class="text-md font-semibold text-neutral-700">
|
|
Type de contrat <span class="text-red-600">*</span>
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
|
|
<div v-for="nature in contractNatures" :key="nature.value" class="flex items-center gap-2">
|
|
<label class="text-md" :for="`print-contract-nature-${nature.value}`">{{ nature.label }}</label>
|
|
<input
|
|
:id="`print-contract-nature-${nature.value}`"
|
|
v-model="printForm.contractNatures"
|
|
:value="nature.value"
|
|
type="checkbox"
|
|
class="h-4 w-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p v-if="showContractNaturesError" class="text-sm text-red-600">
|
|
Sélectionne au moins un type de contrat.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<p class="text-md font-semibold text-neutral-700">
|
|
Temps de travail <span class="text-red-600">*</span>
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
|
|
<div v-for="workContract in workContracts" :key="workContract.id" class="flex items-center gap-2">
|
|
<label class="text-md" :for="`print-work-contract-${workContract.id}`">{{ workContract.name }}</label>
|
|
<input
|
|
:id="`print-work-contract-${workContract.id}`"
|
|
v-model="printForm.workContractIds"
|
|
:value="workContract.id"
|
|
type="checkbox"
|
|
class="h-4 w-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p v-if="showWorkContractsError" class="text-sm text-red-600">
|
|
Sélectionne au moins un temps de travail.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex justify-center pt-2">
|
|
<button
|
|
type="submit"
|
|
class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
|
|
:class="submitButtonClass"
|
|
>
|
|
Imprimer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</AppDrawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, reactive, toRef, watch } from 'vue'
|
|
import AppDrawer from '~/components/AppDrawer.vue'
|
|
|
|
type SiteOption = {
|
|
id: number
|
|
name: string
|
|
color: string
|
|
}
|
|
|
|
type ContractNatureOption = {
|
|
value: 'CDI' | 'CDD' | 'INTERIM'
|
|
label: string
|
|
}
|
|
|
|
type WorkContractOption = {
|
|
id: number
|
|
name: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
sites: SiteOption[]
|
|
contractNatures: ContractNatureOption[]
|
|
workContracts: WorkContractOption[]
|
|
printForm: {
|
|
from: string
|
|
to: string
|
|
siteIds: number[]
|
|
contractNatures: Array<'CDI' | 'CDD' | 'INTERIM'>
|
|
workContractIds: number[]
|
|
}
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: boolean): void
|
|
(event: 'submit'): void
|
|
(event: 'cancel'): void
|
|
}>()
|
|
|
|
const drawerOpen = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: boolean) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const printForm = toRef(props, 'printForm')
|
|
|
|
const validationTouched = reactive({
|
|
from: false,
|
|
to: false,
|
|
sites: false,
|
|
contractNatures: false,
|
|
workContracts: false
|
|
})
|
|
|
|
const isFromValid = computed(() => printForm.value.from.trim() !== '')
|
|
const isToValid = computed(() => printForm.value.to.trim() !== '')
|
|
const isSitesValid = computed(() => printForm.value.siteIds.length > 0)
|
|
const isContractNaturesValid = computed(() => {
|
|
if (props.contractNatures.length === 0) return true
|
|
return printForm.value.contractNatures.length > 0
|
|
})
|
|
const isWorkContractsValid = computed(() => {
|
|
if (props.workContracts.length === 0) return true
|
|
return printForm.value.workContractIds.length > 0
|
|
})
|
|
const isFormValid = computed(
|
|
() =>
|
|
isFromValid.value &&
|
|
isToValid.value &&
|
|
isSitesValid.value &&
|
|
isContractNaturesValid.value &&
|
|
isWorkContractsValid.value
|
|
)
|
|
|
|
const showFromError = computed(() => validationTouched.from && !isFromValid.value)
|
|
const showToError = computed(() => validationTouched.to && !isToValid.value)
|
|
const showSitesError = computed(() => validationTouched.sites && !isSitesValid.value)
|
|
const showContractNaturesError = computed(() => validationTouched.contractNatures && !isContractNaturesValid.value)
|
|
const showWorkContractsError = computed(() => validationTouched.workContracts && !isWorkContractsValid.value)
|
|
|
|
const baseInputClass =
|
|
'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
|
|
const fromFieldClass = computed(() => {
|
|
if (showFromError.value) {
|
|
return `${baseInputClass} border-red-500`
|
|
}
|
|
return `${baseInputClass} border-neutral-300`
|
|
})
|
|
const toFieldClass = computed(() => {
|
|
if (showToError.value) {
|
|
return `${baseInputClass} border-red-500`
|
|
}
|
|
return `${baseInputClass} border-neutral-300`
|
|
})
|
|
|
|
const submitButtonClass = computed(() => {
|
|
if (!isFormValid.value) {
|
|
return 'opacity-50 cursor-not-allowed'
|
|
}
|
|
return ''
|
|
})
|
|
|
|
const handleSubmit = () => {
|
|
validationTouched.from = true
|
|
validationTouched.to = true
|
|
validationTouched.sites = true
|
|
validationTouched.contractNatures = true
|
|
validationTouched.workContracts = true
|
|
if (!isFormValid.value) return
|
|
emit('submit')
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
emit('cancel')
|
|
emit('update:modelValue', false)
|
|
}
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(isOpen) => {
|
|
if (!isOpen) {
|
|
validationTouched.from = false
|
|
validationTouched.to = false
|
|
validationTouched.sites = false
|
|
validationTouched.contractNatures = false
|
|
validationTouched.workContracts = false
|
|
}
|
|
}
|
|
)
|
|
</script>
|