154 lines
4.4 KiB
Vue
154 lines
4.4 KiB
Vue
<template>
|
|
<div class="multisteps-form__panel" :class="isActive ? activeClass : ''">
|
|
<h6 class="mb-3 text-dark font-weight-bold">Informations du Défunt</h6>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Prénom</label>
|
|
<input
|
|
v-model="formData.first_name"
|
|
type="text"
|
|
class="form-control"
|
|
:class="{ 'is-invalid': hasError('first_name') }"
|
|
placeholder="Prénom du défunt"
|
|
maxlength="191"
|
|
/>
|
|
<div v-if="getFieldError('first_name')" class="invalid-feedback">
|
|
{{ getFieldError("first_name") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Nom *</label>
|
|
<input
|
|
v-model="formData.last_name"
|
|
type="text"
|
|
class="form-control"
|
|
:class="{ 'is-invalid': hasError('last_name') }"
|
|
placeholder="Nom du défunt"
|
|
required
|
|
maxlength="191"
|
|
/>
|
|
<div v-if="getFieldError('last_name')" class="invalid-feedback">
|
|
{{ getFieldError("last_name") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Date de naissance</label>
|
|
<input
|
|
v-model="formData.birth_date"
|
|
type="date"
|
|
class="form-control"
|
|
:class="{ 'is-invalid': hasError('birth_date') }"
|
|
/>
|
|
<div v-if="getFieldError('birth_date')" class="invalid-feedback">
|
|
{{ getFieldError("birth_date") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Date de décès</label>
|
|
<input
|
|
v-model="formData.death_date"
|
|
type="date"
|
|
class="form-control"
|
|
:class="{ 'is-invalid': hasError('death_date') }"
|
|
/>
|
|
<div v-if="getFieldError('death_date')" class="invalid-feedback">
|
|
{{ getFieldError("death_date") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Lieu de décès</label>
|
|
<input
|
|
v-model="formData.place_of_death"
|
|
type="text"
|
|
class="form-control"
|
|
:class="{ 'is-invalid': hasError('place_of_death') }"
|
|
placeholder="Lieu de décès"
|
|
maxlength="255"
|
|
/>
|
|
<div v-if="getFieldError('place_of_death')" class="invalid-feedback">
|
|
{{ getFieldError("place_of_death") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Genre</label>
|
|
<select v-model="formData.gender" class="form-select">
|
|
<option value="">Sélectionner</option>
|
|
<option value="male">Homme</option>
|
|
<option value="female">Femme</option>
|
|
<option value="other">Autre</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-12 mb-3">
|
|
<label class="form-label">Notes</label>
|
|
<textarea
|
|
v-model="formData.notes"
|
|
class="form-control"
|
|
:class="{ 'is-invalid': hasError('notes') }"
|
|
rows="3"
|
|
placeholder="Notes supplémentaires..."
|
|
></textarea>
|
|
<div v-if="getFieldError('notes')" class="invalid-feedback">
|
|
{{ getFieldError("notes") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end mt-3">
|
|
<button
|
|
type="button"
|
|
class="btn bg-gradient-primary"
|
|
@click="$emit('next')"
|
|
:disabled="validating"
|
|
>
|
|
<span v-if="validating">
|
|
<i class="fas fa-spinner fa-spin me-2"></i>
|
|
Validation...
|
|
</span>
|
|
<span v-else>
|
|
Suivant
|
|
<i class="fas fa-arrow-right ms-2"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits, toRefs } from "vue";
|
|
|
|
const props = defineProps({
|
|
formData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
isActive: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
activeClass: {
|
|
type: String,
|
|
default: "js-active",
|
|
},
|
|
errors: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
validating: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["next"]);
|
|
|
|
// Error helpers using props
|
|
const getFieldError = (field) => {
|
|
const error = props.errors.find((err) => err.field === field);
|
|
return error ? error.message : "";
|
|
};
|
|
|
|
const hasError = (field) => {
|
|
return props.errors.some((err) => err.field === field);
|
|
};
|
|
</script>
|