Planning et agenda: nouveau flux de création et formulaires de demande
This commit is contained in:
nyavokevin
parent
a9a2429b67
commit
083f78673e
@ -27,7 +27,6 @@
|
||||
|
||||
<div class="modal-body p-3 md:p-6">
|
||||
<form class="space-y-4 md:space-y-6" @submit.prevent="handleSubmit">
|
||||
|
||||
<!-- Global Errors -->
|
||||
<div
|
||||
v-if="globalErrors.length"
|
||||
@ -43,14 +42,22 @@
|
||||
<!-- ROW 1: Défunt -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label class="form-label fw-bold small text-dark mb-0">Défunt *</label>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center mb-1"
|
||||
>
|
||||
<label class="form-label fw-bold small text-dark mb-0"
|
||||
>Défunt *</label
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary py-0 px-2"
|
||||
@click="toggleDeceasedMode"
|
||||
>
|
||||
{{ deceasedForm.is_existing ? "+ Créer défunt" : "Rechercher défunt" }}
|
||||
{{
|
||||
deceasedForm.is_existing
|
||||
? "+ Créer défunt"
|
||||
: "Rechercher défunt"
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -69,15 +76,27 @@
|
||||
@input="handleDeceasedSearch"
|
||||
@focus="showDeceasedResults = true"
|
||||
/>
|
||||
<button v-if="deceasedForm.id" class="btn btn-outline-secondary" type="button" @click="clearDeceasedSelection">
|
||||
<button
|
||||
v-if="deceasedForm.id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearDeceasedSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="getFieldError('deceased_id')" class="invalid-feedback d-block">
|
||||
<div
|
||||
v-if="getFieldError('deceased_id')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("deceased_id") }}
|
||||
</div>
|
||||
<!-- Results -->
|
||||
<div v-if="showDeceasedResults && deceasedSearchResults.length" class="list-group position-absolute w-100 shadow mt-1" style="z-index: 1050; max-height: 200px; overflow-y: auto;">
|
||||
<div
|
||||
v-if="showDeceasedResults && deceasedSearchResults.length"
|
||||
class="list-group position-absolute w-100 shadow mt-1"
|
||||
style="z-index: 1050; max-height: 200px; overflow-y: auto"
|
||||
>
|
||||
<button
|
||||
v-for="d in deceasedSearchResults"
|
||||
:key="d.id"
|
||||
@ -86,8 +105,12 @@
|
||||
@click="selectDeceased(d)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1 text-sm">{{ d.first_name }} {{ d.last_name }}</h6>
|
||||
<small class="text-xs text-muted">{{ d.birth_date }} - {{ d.death_date }}</small>
|
||||
<h6 class="mb-1 text-sm">
|
||||
{{ d.first_name }} {{ d.last_name }}
|
||||
</h6>
|
||||
<small class="text-xs text-muted"
|
||||
>{{ d.birth_date }} - {{ d.death_date }}</small
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
@ -97,23 +120,53 @@
|
||||
<div v-else class="card card-body bg-light border-0 p-3">
|
||||
<div class="row g-2">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small text-muted mb-1">Nom *</label>
|
||||
<input v-model="deceasedForm.last_name" class="form-control form-control-sm" :class="{ 'is-invalid': hasError('deceased.last_name') }">
|
||||
<label class="form-label small text-muted mb-1"
|
||||
>Nom *</label
|
||||
>
|
||||
<input
|
||||
v-model="deceasedForm.last_name"
|
||||
class="form-control form-control-sm"
|
||||
:class="{
|
||||
'is-invalid': hasError('deceased.last_name'),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small text-muted mb-1">Prénom</label>
|
||||
<input v-model="deceasedForm.first_name" class="form-control form-control-sm">
|
||||
<label class="form-label small text-muted mb-1"
|
||||
>Prénom</label
|
||||
>
|
||||
<input
|
||||
v-model="deceasedForm.first_name"
|
||||
class="form-control form-control-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small text-muted mb-1">Date Naissance</label>
|
||||
<input v-model="deceasedForm.birth_date" type="date" class="form-control form-control-sm">
|
||||
<label class="form-label small text-muted mb-1"
|
||||
>Date Naissance</label
|
||||
>
|
||||
<input
|
||||
v-model="deceasedForm.birth_date"
|
||||
type="date"
|
||||
class="form-control form-control-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small text-muted mb-1">Date Décès</label>
|
||||
<input v-model="deceasedForm.death_date" type="date" class="form-control form-control-sm">
|
||||
<label class="form-label small text-muted mb-1"
|
||||
>Date Décès</label
|
||||
>
|
||||
<input
|
||||
v-model="deceasedForm.death_date"
|
||||
type="date"
|
||||
class="form-control form-control-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12" v-if="getFieldError('deceased.last_name')">
|
||||
<small class="text-danger">{{ getFieldError('deceased.last_name') }}</small>
|
||||
<div
|
||||
v-if="getFieldError('deceased.last_name')"
|
||||
class="col-12"
|
||||
>
|
||||
<small class="text-danger">{{
|
||||
getFieldError("deceased.last_name")
|
||||
}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -123,7 +176,9 @@
|
||||
<!-- ROW 2: Client -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12 position-relative">
|
||||
<label class="form-label fw-bold small text-dark">Client (Donneur d'ordre) *</label>
|
||||
<label class="form-label fw-bold small text-dark"
|
||||
>Client (Donneur d'ordre) *</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0">
|
||||
<i class="fas fa-user text-muted"></i>
|
||||
@ -137,15 +192,27 @@
|
||||
@input="handleClientSearch"
|
||||
@focus="showClientResults = true"
|
||||
/>
|
||||
<button v-if="selectedClient" class="btn btn-outline-secondary" type="button" @click="clearClientSelection">
|
||||
<button
|
||||
v-if="selectedClient"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearClientSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="getFieldError('client')" class="invalid-feedback d-block">
|
||||
<div
|
||||
v-if="getFieldError('client')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("client") }}
|
||||
</div>
|
||||
<!-- Results -->
|
||||
<div v-if="showClientResults && clientSearchResults.length" class="list-group position-absolute w-100 shadow mt-1" style="z-index: 1050; max-height: 200px; overflow-y: auto;">
|
||||
<div
|
||||
v-if="showClientResults && clientSearchResults.length"
|
||||
class="list-group position-absolute w-100 shadow mt-1"
|
||||
style="z-index: 1050; max-height: 200px; overflow-y: auto"
|
||||
>
|
||||
<button
|
||||
v-for="c in clientSearchResults"
|
||||
:key="c.id"
|
||||
@ -165,20 +232,27 @@
|
||||
<!-- ROW 3: Date et Type -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12 mb-3">
|
||||
<label class="form-label fw-bold small text-dark">Date et heure *</label>
|
||||
<label class="form-label fw-bold small text-dark"
|
||||
>Date et heure *</label
|
||||
>
|
||||
<input
|
||||
v-model="interventionForm.scheduled_at"
|
||||
type="datetime-local"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': hasError('scheduled_at') }"
|
||||
required
|
||||
/>
|
||||
<div
|
||||
v-if="getFieldError('scheduled_at')"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div v-if="getFieldError('scheduled_at')" class="invalid-feedback">
|
||||
{{ getFieldError("scheduled_at") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 position-relative">
|
||||
<label class="form-label fw-bold small text-dark">Type de soin *</label>
|
||||
<label class="form-label fw-bold small text-dark"
|
||||
>Type de soin *</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0">
|
||||
<i class="fas fa-medkit text-muted"></i>
|
||||
@ -190,17 +264,29 @@
|
||||
:class="{ 'is-invalid': hasError('product_id') }"
|
||||
placeholder="Rechercher un type de soin..."
|
||||
@input="handleProductSearch"
|
||||
@focus="showProductResults = true"
|
||||
@focus="handleProductFocus"
|
||||
/>
|
||||
<button v-if="productForm.product_id" class="btn btn-outline-secondary" type="button" @click="clearProductSelection">
|
||||
<button
|
||||
v-if="productForm.product_id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearProductSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="getFieldError('product_id')" class="invalid-feedback d-block">
|
||||
<div
|
||||
v-if="getFieldError('product_id')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("product_id") }}
|
||||
</div>
|
||||
<!-- Results -->
|
||||
<div v-if="showProductResults && productSearchResults.length" class="list-group position-absolute w-100 shadow mt-1" style="z-index: 1050; max-height: 200px; overflow-y: auto;">
|
||||
<div
|
||||
v-if="showProductResults && productSearchResults.length"
|
||||
class="list-group position-absolute w-100 shadow mt-1"
|
||||
style="z-index: 1050; max-height: 200px; overflow-y: auto"
|
||||
>
|
||||
<button
|
||||
v-for="p in productSearchResults"
|
||||
:key="p.id"
|
||||
@ -210,7 +296,9 @@
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1 text-sm">{{ p.nom }}</h6>
|
||||
<small class="text-xs text-muted">{{ p.price ? `${p.price}€` : '' }}</small>
|
||||
<small class="text-xs text-muted">{{
|
||||
p.price ? `${p.price}€` : ""
|
||||
}}</small>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
@ -220,27 +308,47 @@
|
||||
<!-- ROW 4: Intervenant -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold small text-dark">Intervenant *</label>
|
||||
<label class="form-label fw-bold small text-dark"
|
||||
>Intervenant *</label
|
||||
>
|
||||
</div>
|
||||
<div class="col-md-6 mb-2">
|
||||
<label class="form-label text-xs text-muted mb-1">Salarié Thanatopracteur</label>
|
||||
<select v-model="interventionForm.assigned_practitioner_id" class="form-select" :class="{ 'is-invalid': hasError('assigned_practitioner_id') }">
|
||||
<label class="form-label text-xs text-muted mb-1"
|
||||
>Salarié Thanatopracteur</label
|
||||
>
|
||||
<select
|
||||
v-model="interventionForm.assigned_practitioner_id"
|
||||
class="form-select"
|
||||
:class="{
|
||||
'is-invalid': hasError('assigned_practitioner_id'),
|
||||
}"
|
||||
>
|
||||
<option value="">Sélectionner un salarié</option>
|
||||
<option
|
||||
v-for="practitioner in practitioners"
|
||||
:key="practitioner.id"
|
||||
:value="practitioner.id"
|
||||
>
|
||||
{{ practitioner.employee?.first_name }} {{ practitioner.employee?.last_name }}
|
||||
{{ practitioner.employee?.first_name }}
|
||||
{{ practitioner.employee?.last_name }}
|
||||
</option>
|
||||
</select>
|
||||
<div v-if="getFieldError('assigned_practitioner_id')" class="invalid-feedback d-block">
|
||||
<div
|
||||
v-if="getFieldError('assigned_practitioner_id')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("assigned_practitioner_id") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-2">
|
||||
<label class="form-label text-xs text-muted mb-1">OU Sous-traitant</label>
|
||||
<select class="form-select bg-light border-0" disabled title="Bientôt disponible">
|
||||
<label class="form-label text-xs text-muted mb-1"
|
||||
>OU Sous-traitant</label
|
||||
>
|
||||
<select
|
||||
class="form-select bg-light border-0"
|
||||
disabled
|
||||
title="Bientôt disponible"
|
||||
>
|
||||
<option value="">Sélectionner un sous-traitant</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -249,7 +357,9 @@
|
||||
<!-- ROW 5: Numéro Prescription -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold small text-dark">Numéro de prescription médicale</label>
|
||||
<label class="form-label fw-bold small text-dark"
|
||||
>Numéro de prescription médicale</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0">
|
||||
<i class="fas fa-prescription text-muted"></i>
|
||||
@ -259,26 +369,42 @@
|
||||
type="text"
|
||||
class="form-control border-start-0"
|
||||
placeholder="Ex: RX-2024-001 (si fourni par la famille)"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
title="Activer la saisie vocale"
|
||||
@click="toggleVoiceInput('medical_prescription_number')"
|
||||
>
|
||||
<button class="btn btn-outline-secondary" type="button" title="Activer la saisie vocale" @click="toggleVoiceInput('medical_prescription_number')">
|
||||
<i class="fas fa-microphone"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-muted mt-1">📋 Optionnel - À ajouter si fourni par la famille ou dans les documents reçus</p>
|
||||
<p class="text-xs text-muted mt-1">
|
||||
📋 Optionnel - À ajouter si fourni par la famille ou dans les
|
||||
documents reçus
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ROW 6: Lieu -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label class="form-label fw-bold small text-dark mb-0">Lieu d'intervention</label>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center mb-1"
|
||||
>
|
||||
<label class="form-label fw-bold small text-dark mb-0"
|
||||
>Lieu d'intervention</label
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary py-0 px-2"
|
||||
@click="toggleLocationMode"
|
||||
>
|
||||
{{ locationForm.is_existing ? "+ Nouveau lieu" : "Rechercher lieu" }}
|
||||
{{
|
||||
locationForm.is_existing
|
||||
? "+ Nouveau lieu"
|
||||
: "Rechercher lieu"
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -292,17 +418,29 @@
|
||||
v-model="locationSearchQuery"
|
||||
type="text"
|
||||
class="form-control border-start-0"
|
||||
:class="{ 'is-invalid': hasError('location.name') && !locationForm.id }"
|
||||
:class="{
|
||||
'is-invalid':
|
||||
hasError('location.name') && !locationForm.id,
|
||||
}"
|
||||
placeholder="Rechercher un lieu..."
|
||||
@input="handleLocationSearch"
|
||||
@focus="showLocationResults = true"
|
||||
/>
|
||||
<button v-if="locationForm.id" class="btn btn-outline-secondary" type="button" @click="clearLocationSelection">
|
||||
<button
|
||||
v-if="locationForm.id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearLocationSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Results -->
|
||||
<div v-if="showLocationResults && locationSearchResults.length" class="list-group position-absolute w-100 shadow mt-1" style="z-index: 1050; max-height: 200px; overflow-y: auto;">
|
||||
<div
|
||||
v-if="showLocationResults && locationSearchResults.length"
|
||||
class="list-group position-absolute w-100 shadow mt-1"
|
||||
style="z-index: 1050; max-height: 200px; overflow-y: auto"
|
||||
>
|
||||
<button
|
||||
v-for="loc in locationSearchResults"
|
||||
:key="loc.id"
|
||||
@ -316,7 +454,10 @@
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="getFieldError('location.name') && !locationForm.id" class="invalid-feedback d-block">
|
||||
<div
|
||||
v-if="getFieldError('location.name') && !locationForm.id"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("location.name") }}
|
||||
</div>
|
||||
</div>
|
||||
@ -325,24 +466,31 @@
|
||||
<div v-else class="card card-body bg-light border-0 p-3">
|
||||
<div class="row g-2">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small text-muted mb-1">Nom du lieu *</label>
|
||||
<label class="form-label small text-muted mb-1"
|
||||
>Nom du lieu *</label
|
||||
>
|
||||
<input
|
||||
v-model="locationForm.name"
|
||||
class="form-control form-control-sm"
|
||||
placeholder="Ex: Domicile, Eglise St-Pierre..."
|
||||
:class="{ 'is-invalid': hasError('location.name') }"
|
||||
/>
|
||||
<div
|
||||
v-if="getFieldError('location.name')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
<div v-if="getFieldError('location.name')" class="invalid-feedback d-block">
|
||||
{{ getFieldError("location.name") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small text-muted mb-1">Ville</label>
|
||||
<label class="form-label small text-muted mb-1"
|
||||
>Ville</label
|
||||
>
|
||||
<input
|
||||
v-model="locationForm.city"
|
||||
class="form-control form-control-sm"
|
||||
placeholder="Ex: Paris"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -367,9 +515,13 @@
|
||||
<!-- ROW 8: Observations -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold small text-dark">Observations techniques</label>
|
||||
<label class="form-label fw-bold small text-dark"
|
||||
>Observations techniques</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white align-items-start border-end-0 pt-2">
|
||||
<span
|
||||
class="input-group-text bg-white align-items-start border-end-0 pt-2"
|
||||
>
|
||||
<i class="fas fa-sticky-note text-muted"></i>
|
||||
</span>
|
||||
<textarea
|
||||
@ -378,7 +530,12 @@
|
||||
rows="4"
|
||||
placeholder="Notes et observations..."
|
||||
></textarea>
|
||||
<button class="btn btn-outline-secondary align-items-start pt-2" type="button" title="Activer la saisie vocale" @click="toggleVoiceInput('notes')">
|
||||
<button
|
||||
class="btn btn-outline-secondary align-items-start pt-2"
|
||||
type="button"
|
||||
title="Activer la saisie vocale"
|
||||
@click="toggleVoiceInput('notes')"
|
||||
>
|
||||
<i class="fas fa-microphone"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -386,19 +543,40 @@
|
||||
</div>
|
||||
|
||||
<!-- Footer Actions -->
|
||||
<div class="border-top pt-3 d-flex flex-column flex-md-row justify-content-between gap-2">
|
||||
<button type="button" class="btn btn-outline-success d-flex align-items-center justify-content-center gap-2" disabled>
|
||||
<div
|
||||
class="border-top pt-3 d-flex flex-column flex-md-row justify-content-between gap-2"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-success d-flex align-items-center justify-content-center gap-2"
|
||||
disabled
|
||||
>
|
||||
<i class="fas fa-envelope"></i> Récupérer docs emails
|
||||
</button>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-secondary w-100 w-md-auto" data-bs-dismiss="modal" :disabled="submitting">Annuler</button>
|
||||
<button type="submit" class="btn btn-primary w-100 w-md-auto text-white" :disabled="submitting">
|
||||
<span v-if="submitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary w-100 w-md-auto"
|
||||
data-bs-dismiss="modal"
|
||||
:disabled="submitting"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary w-100 w-md-auto text-white"
|
||||
:disabled="submitting"
|
||||
>
|
||||
<span
|
||||
v-if="submitting"
|
||||
class="spinner-border spinner-border-sm me-2"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{{ isEditing ? "Mettre à jour" : "Créer l'intervention" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -414,7 +592,7 @@ import {
|
||||
defineEmits,
|
||||
defineExpose,
|
||||
onMounted,
|
||||
nextTick
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { Modal } from "bootstrap";
|
||||
import DeceasedService from "@/services/deceased";
|
||||
@ -470,12 +648,13 @@ let clientSearchTimeout;
|
||||
|
||||
// Product
|
||||
const productForm = ref({
|
||||
product_id: null
|
||||
product_id: null,
|
||||
});
|
||||
const productSearchQuery = ref("");
|
||||
const productSearchResults = ref([]);
|
||||
const allProducts = ref([]);
|
||||
const showProductResults = ref(false);
|
||||
let productSearchTimeout;
|
||||
|
||||
// Location - FIXED: Start with search mode (true = search existing, false = create new)
|
||||
const locationForm = ref({
|
||||
@ -521,10 +700,17 @@ onMounted(async () => {
|
||||
const pService = new ProductService();
|
||||
const response = await pService.getAllProducts({
|
||||
per_page: 100,
|
||||
is_intervention: true
|
||||
is_intervention: true,
|
||||
});
|
||||
allProducts.value = response.data;
|
||||
productSearchResults.value = allProducts.value;
|
||||
|
||||
const products = Array.isArray(response?.data)
|
||||
? response.data
|
||||
: Array.isArray(response?.data?.data)
|
||||
? response.data.data
|
||||
: [];
|
||||
|
||||
allProducts.value = products;
|
||||
productSearchResults.value = products;
|
||||
} catch (e) {
|
||||
console.error("Failed to load products", e);
|
||||
}
|
||||
@ -561,20 +747,24 @@ const handleDeceasedSearch = () => {
|
||||
}
|
||||
deceasedSearchTimeout = setTimeout(async () => {
|
||||
try {
|
||||
const results = await DeceasedService.searchDeceased(deceasedSearchQuery.value);
|
||||
const results = await DeceasedService.searchDeceased(
|
||||
deceasedSearchQuery.value
|
||||
);
|
||||
deceasedSearchResults.value = results;
|
||||
} catch(e) { console.error(e); }
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const selectDeceased = (d) => {
|
||||
deceasedForm.value.id = d.id;
|
||||
deceasedSearchQuery.value = `${d.first_name || ''} ${d.last_name}`;
|
||||
deceasedSearchQuery.value = `${d.first_name || ""} ${d.last_name}`;
|
||||
deceasedSearchResults.value = [];
|
||||
showDeceasedResults.value = false;
|
||||
|
||||
// Clear any error for deceased
|
||||
errors.value = errors.value.filter(e => e.field !== 'deceased_id');
|
||||
errors.value = errors.value.filter((e) => e.field !== "deceased_id");
|
||||
};
|
||||
|
||||
const clearDeceasedSelection = () => {
|
||||
@ -587,9 +777,8 @@ const clearDeceasedSelection = () => {
|
||||
deceasedSearchResults.value = [];
|
||||
|
||||
// Clear errors
|
||||
errors.value = errors.value.filter(e =>
|
||||
e.field !== 'deceased_id' &&
|
||||
e.field !== 'deceased.last_name'
|
||||
errors.value = errors.value.filter(
|
||||
(e) => e.field !== "deceased_id" && e.field !== "deceased.last_name"
|
||||
);
|
||||
};
|
||||
|
||||
@ -602,20 +791,24 @@ const handleClientSearch = () => {
|
||||
}
|
||||
clientSearchTimeout = setTimeout(async () => {
|
||||
try {
|
||||
const results = await ClientService.searchClients(clientSearchQuery.value);
|
||||
const results = await ClientService.searchClients(
|
||||
clientSearchQuery.value
|
||||
);
|
||||
clientSearchResults.value = results;
|
||||
} catch(e) { console.error(e); }
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const selectClient = (c) => {
|
||||
selectedClient.value = c;
|
||||
clientSearchQuery.value = c.name + (c.email ? ` (${c.email})` : '');
|
||||
clientSearchQuery.value = c.name + (c.email ? ` (${c.email})` : "");
|
||||
clientSearchResults.value = [];
|
||||
showClientResults.value = false;
|
||||
|
||||
// Clear any error for client
|
||||
errors.value = errors.value.filter(e => e.field !== 'client');
|
||||
errors.value = errors.value.filter((e) => e.field !== "client");
|
||||
};
|
||||
|
||||
const clearClientSelection = () => {
|
||||
@ -624,19 +817,45 @@ const clearClientSelection = () => {
|
||||
clientSearchResults.value = [];
|
||||
|
||||
// Clear error
|
||||
errors.value = errors.value.filter(e => e.field !== 'client');
|
||||
errors.value = errors.value.filter((e) => e.field !== "client");
|
||||
};
|
||||
|
||||
// --- PRODUCT LOGIC ---
|
||||
const handleProductSearch = () => {
|
||||
const query = productSearchQuery.value.toLowerCase();
|
||||
if (!query) {
|
||||
productSearchResults.value = allProducts.value;
|
||||
return;
|
||||
showProductResults.value = true;
|
||||
|
||||
if (productSearchTimeout) clearTimeout(productSearchTimeout);
|
||||
|
||||
productSearchTimeout = setTimeout(async () => {
|
||||
try {
|
||||
const pService = new ProductService();
|
||||
const response = await pService.getAllProducts({
|
||||
per_page: 100,
|
||||
is_intervention: true,
|
||||
search: productSearchQuery.value || undefined,
|
||||
});
|
||||
|
||||
const products = Array.isArray(response?.data)
|
||||
? response.data
|
||||
: Array.isArray(response?.data?.data)
|
||||
? response.data.data
|
||||
: [];
|
||||
|
||||
productSearchResults.value = products;
|
||||
} catch (e) {
|
||||
console.error("Failed to search intervention products", e);
|
||||
productSearchResults.value = [];
|
||||
}
|
||||
}, 250);
|
||||
};
|
||||
|
||||
const handleProductFocus = () => {
|
||||
showProductResults.value = true;
|
||||
if (!productSearchQuery.value) {
|
||||
productSearchResults.value = allProducts.value;
|
||||
} else {
|
||||
handleProductSearch();
|
||||
}
|
||||
productSearchResults.value = allProducts.value.filter(p =>
|
||||
p.nom.toLowerCase().includes(query)
|
||||
);
|
||||
};
|
||||
|
||||
const selectProduct = (p) => {
|
||||
@ -645,10 +864,10 @@ const selectProduct = (p) => {
|
||||
showProductResults.value = false;
|
||||
|
||||
// Clear error
|
||||
errors.value = errors.value.filter(e => e.field !== 'product_id');
|
||||
errors.value = errors.value.filter((e) => e.field !== "product_id");
|
||||
|
||||
if (!interventionForm.value.type) {
|
||||
interventionForm.value.type = 'thanatopraxie';
|
||||
interventionForm.value.type = "thanatopraxie";
|
||||
}
|
||||
};
|
||||
|
||||
@ -658,7 +877,7 @@ const clearProductSelection = () => {
|
||||
productSearchResults.value = allProducts.value;
|
||||
|
||||
// Clear error
|
||||
errors.value = errors.value.filter(e => e.field !== 'product_id');
|
||||
errors.value = errors.value.filter((e) => e.field !== "product_id");
|
||||
};
|
||||
|
||||
// --- LOCATION LOGIC --- (FIXED)
|
||||
@ -676,7 +895,7 @@ const toggleLocationMode = () => {
|
||||
}
|
||||
|
||||
// Clear location errors
|
||||
errors.value = errors.value.filter(e => e.field === 'location.name');
|
||||
errors.value = errors.value.filter((e) => e.field === "location.name");
|
||||
};
|
||||
|
||||
const handleLocationSearch = () => {
|
||||
@ -689,10 +908,12 @@ const handleLocationSearch = () => {
|
||||
try {
|
||||
const response = await ClientLocationService.getAllClientLocations({
|
||||
search: locationSearchQuery.value,
|
||||
per_page: 10
|
||||
per_page: 10,
|
||||
});
|
||||
locationSearchResults.value = response.data;
|
||||
} catch (e) { console.error(e); }
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
@ -707,7 +928,7 @@ const selectLocation = (loc) => {
|
||||
locationSearchResults.value = [];
|
||||
|
||||
// Clear error
|
||||
errors.value = errors.value.filter(e => e.field !== 'location.name');
|
||||
errors.value = errors.value.filter((e) => e.field !== "location.name");
|
||||
};
|
||||
|
||||
const clearLocationSelection = () => {
|
||||
@ -719,7 +940,7 @@ const clearLocationSelection = () => {
|
||||
showLocationResults.value = false;
|
||||
|
||||
// Clear error
|
||||
errors.value = errors.value.filter(e => e.field !== 'location.name');
|
||||
errors.value = errors.value.filter((e) => e.field !== "location.name");
|
||||
};
|
||||
|
||||
// --- VOICE INPUT ---
|
||||
@ -729,8 +950,9 @@ const toggleVoiceInput = (field) => {
|
||||
};
|
||||
|
||||
// --- VALIDATION ---
|
||||
const hasError = (field) => errors.value.some(e => e.field === field);
|
||||
const getFieldError = (field) => errors.value.find(e => e.field === field)?.message || "";
|
||||
const hasError = (field) => errors.value.some((e) => e.field === field);
|
||||
const getFieldError = (field) =>
|
||||
errors.value.find((e) => e.field === field)?.message || "";
|
||||
|
||||
const validate = () => {
|
||||
errors.value = [];
|
||||
@ -739,47 +961,65 @@ const validate = () => {
|
||||
// Deceased
|
||||
if (deceasedForm.value.is_existing) {
|
||||
if (!deceasedForm.value.id) {
|
||||
errors.value.push({ field: 'deceased_id', message: 'Veuillez sélectionner un défunt.' });
|
||||
errors.value.push({
|
||||
field: "deceased_id",
|
||||
message: "Veuillez sélectionner un défunt.",
|
||||
});
|
||||
isValid = false;
|
||||
}
|
||||
} else {
|
||||
if (!deceasedForm.value.last_name) {
|
||||
errors.value.push({ field: 'deceased.last_name', message: 'Le nom du défunt est requis.' });
|
||||
errors.value.push({
|
||||
field: "deceased.last_name",
|
||||
message: "Le nom du défunt est requis.",
|
||||
});
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Client
|
||||
if (!selectedClient.value) {
|
||||
errors.value.push({ field: 'client', message: "Veuillez sélectionner un client." });
|
||||
errors.value.push({
|
||||
field: "client",
|
||||
message: "Veuillez sélectionner un client.",
|
||||
});
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Intervention fields
|
||||
if (!interventionForm.value.scheduled_at) {
|
||||
errors.value.push({ field: 'scheduled_at', message: "Date obligatoire." });
|
||||
errors.value.push({ field: "scheduled_at", message: "Date obligatoire." });
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!productForm.value.product_id) {
|
||||
errors.value.push({ field: 'product_id', message: "Type de soin requis." });
|
||||
errors.value.push({ field: "product_id", message: "Type de soin requis." });
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!interventionForm.value.assigned_practitioner_id) {
|
||||
errors.value.push({ field: 'assigned_practitioner_id', message: "Intervenant requis." });
|
||||
errors.value.push({
|
||||
field: "assigned_practitioner_id",
|
||||
message: "Intervenant requis.",
|
||||
});
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Location
|
||||
if (locationForm.value.is_existing) {
|
||||
if (!locationForm.value.id) {
|
||||
errors.value.push({ field: 'location.name', message: "Veuillez sélectionner un lieu." });
|
||||
errors.value.push({
|
||||
field: "location.name",
|
||||
message: "Veuillez sélectionner un lieu.",
|
||||
});
|
||||
isValid = false;
|
||||
}
|
||||
} else {
|
||||
if (!locationForm.value.name) {
|
||||
errors.value.push({ field: 'location.name', message: "Le nom du lieu est requis." });
|
||||
errors.value.push({
|
||||
field: "location.name",
|
||||
message: "Le nom du lieu est requis.",
|
||||
});
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
@ -805,30 +1045,63 @@ const handleSubmit = async () => {
|
||||
if (deceasedForm.value.is_existing && deceasedForm.value.id) {
|
||||
formData.append("deceased_id", deceasedForm.value.id);
|
||||
} else {
|
||||
formData.append(`deceased[first_name]`, deceasedForm.value.first_name || "");
|
||||
formData.append(`deceased[last_name]`, deceasedForm.value.last_name || "");
|
||||
if (deceasedForm.value.birth_date) formData.append(`deceased[birth_date]`, deceasedForm.value.birth_date);
|
||||
if (deceasedForm.value.death_date) formData.append(`deceased[death_date]`, deceasedForm.value.death_date);
|
||||
formData.append(
|
||||
`deceased[first_name]`,
|
||||
deceasedForm.value.first_name || ""
|
||||
);
|
||||
formData.append(
|
||||
`deceased[last_name]`,
|
||||
deceasedForm.value.last_name || ""
|
||||
);
|
||||
if (deceasedForm.value.birth_date)
|
||||
formData.append(`deceased[birth_date]`, deceasedForm.value.birth_date);
|
||||
if (deceasedForm.value.death_date)
|
||||
formData.append(`deceased[death_date]`, deceasedForm.value.death_date);
|
||||
}
|
||||
|
||||
// Client
|
||||
if (selectedClient.value) {
|
||||
formData.append("client_id", selectedClient.value.id);
|
||||
|
||||
if (selectedClient.value.name) formData.append("client[name]", selectedClient.value.name);
|
||||
if (selectedClient.value.email) formData.append("client[email]", selectedClient.value.email);
|
||||
if (selectedClient.value.phone) formData.append("client[phone]", selectedClient.value.phone);
|
||||
if (selectedClient.value.name)
|
||||
formData.append("client[name]", selectedClient.value.name);
|
||||
if (selectedClient.value.email)
|
||||
formData.append("client[email]", selectedClient.value.email);
|
||||
if (selectedClient.value.phone)
|
||||
formData.append("client[phone]", selectedClient.value.phone);
|
||||
|
||||
if (selectedClient.value.billing_address) {
|
||||
if (selectedClient.value.billing_address.line1) formData.append("client[billing_address_line1]", selectedClient.value.billing_address.line1);
|
||||
if (selectedClient.value.billing_address.line2) formData.append("client[billing_address_line2]", selectedClient.value.billing_address.line2);
|
||||
if (selectedClient.value.billing_address.postal_code) formData.append("client[billing_postal_code]", selectedClient.value.billing_address.postal_code);
|
||||
if (selectedClient.value.billing_address.city) formData.append("client[billing_city]", selectedClient.value.billing_address.city);
|
||||
if (selectedClient.value.billing_address.country_code) formData.append("client[billing_country_code]", selectedClient.value.billing_address.country_code);
|
||||
if (selectedClient.value.billing_address.line1)
|
||||
formData.append(
|
||||
"client[billing_address_line1]",
|
||||
selectedClient.value.billing_address.line1
|
||||
);
|
||||
if (selectedClient.value.billing_address.line2)
|
||||
formData.append(
|
||||
"client[billing_address_line2]",
|
||||
selectedClient.value.billing_address.line2
|
||||
);
|
||||
if (selectedClient.value.billing_address.postal_code)
|
||||
formData.append(
|
||||
"client[billing_postal_code]",
|
||||
selectedClient.value.billing_address.postal_code
|
||||
);
|
||||
if (selectedClient.value.billing_address.city)
|
||||
formData.append(
|
||||
"client[billing_city]",
|
||||
selectedClient.value.billing_address.city
|
||||
);
|
||||
if (selectedClient.value.billing_address.country_code)
|
||||
formData.append(
|
||||
"client[billing_country_code]",
|
||||
selectedClient.value.billing_address.country_code
|
||||
);
|
||||
}
|
||||
|
||||
if (selectedClient.value.vat_number) formData.append("client[vat_number]", selectedClient.value.vat_number);
|
||||
if (selectedClient.value.siret) formData.append("client[siret]", selectedClient.value.siret);
|
||||
if (selectedClient.value.vat_number)
|
||||
formData.append("client[vat_number]", selectedClient.value.vat_number);
|
||||
if (selectedClient.value.siret)
|
||||
formData.append("client[siret]", selectedClient.value.siret);
|
||||
}
|
||||
|
||||
// Location
|
||||
@ -836,7 +1109,8 @@ const handleSubmit = async () => {
|
||||
formData.append("location_id", locationForm.value.id);
|
||||
} else {
|
||||
formData.append("location[name]", locationForm.value.name || "");
|
||||
if (locationForm.value.city) formData.append("location[city]", locationForm.value.city);
|
||||
if (locationForm.value.city)
|
||||
formData.append("location[city]", locationForm.value.city);
|
||||
}
|
||||
|
||||
// Product
|
||||
@ -859,7 +1133,7 @@ const handleSubmit = async () => {
|
||||
});
|
||||
|
||||
emit("submit", formData);
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
globalErrors.value.push("Erreur lors de la préparation du formulaire.");
|
||||
} finally {
|
||||
@ -868,17 +1142,25 @@ const handleSubmit = async () => {
|
||||
};
|
||||
|
||||
// Watch for changes to clear errors
|
||||
watch(() => locationForm.value.name, () => {
|
||||
if (getFieldError('location.name')) {
|
||||
errors.value = errors.value.filter(e => e.field !== 'location.name');
|
||||
watch(
|
||||
() => locationForm.value.name,
|
||||
() => {
|
||||
if (getFieldError("location.name")) {
|
||||
errors.value = errors.value.filter((e) => e.field !== "location.name");
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => interventionForm.value.assigned_practitioner_id, () => {
|
||||
if (getFieldError('assigned_practitioner_id')) {
|
||||
errors.value = errors.value.filter(e => e.field !== 'assigned_practitioner_id');
|
||||
watch(
|
||||
() => interventionForm.value.assigned_practitioner_id,
|
||||
() => {
|
||||
if (getFieldError("assigned_practitioner_id")) {
|
||||
errors.value = errors.value.filter(
|
||||
(e) => e.field !== "assigned_practitioner_id"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
|
||||
@ -6,26 +6,33 @@
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<div class="btn-group" role="group">
|
||||
<input
|
||||
id="modeNew"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="deceasedMode"
|
||||
id="modeNew"
|
||||
autocomplete="off"
|
||||
:checked="!formData.is_existing"
|
||||
@change="formData.is_existing = false; formData.id = null"
|
||||
@change="
|
||||
formData.is_existing = false;
|
||||
formData.id = null;
|
||||
"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="modeNew"
|
||||
>Nouveau Défunt</label
|
||||
>
|
||||
<label class="btn btn-outline-primary" for="modeNew">Nouveau Défunt</label>
|
||||
|
||||
<input
|
||||
id="modeSearch"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="deceasedMode"
|
||||
id="modeSearch"
|
||||
autocomplete="off"
|
||||
:checked="formData.is_existing"
|
||||
@change="formData.is_existing = true"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="modeSearch"
|
||||
>Rechercher</label
|
||||
>
|
||||
<label class="btn btn-outline-primary" for="modeSearch">Rechercher</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,16 +51,28 @@
|
||||
placeholder="Tapez pour rechercher..."
|
||||
@input="handleSearchInput"
|
||||
/>
|
||||
<button v-if="formData.id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
|
||||
<button
|
||||
v-if="formData.id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="getFieldError('deceased_id')" class="invalid-feedback d-block">
|
||||
<div
|
||||
v-if="getFieldError('deceased_id')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("deceased_id") }}
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Results -->
|
||||
<div v-if="showResults && searchResults.length" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
|
||||
<div
|
||||
v-if="showResults && searchResults.length"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000; max-height: 200px; overflow-y: auto"
|
||||
>
|
||||
<button
|
||||
v-for="deceased in searchResults"
|
||||
:key="deceased.id"
|
||||
@ -62,19 +81,33 @@
|
||||
@click="selectDeceased(deceased)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">{{ deceased.first_name }} {{ deceased.last_name }}</h6>
|
||||
<small>{{ deceased.birth_date }} - {{ deceased.death_date }}</small>
|
||||
<h6 class="mb-1">
|
||||
{{ deceased.first_name }} {{ deceased.last_name }}
|
||||
</h6>
|
||||
<small
|
||||
>{{ deceased.birth_date }} - {{ deceased.death_date }}</small
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="showResults && searchResults.length === 0 && searchQuery.length >= 2 && !isSearching" class="list-group position-absolute w-100 shadow" style="z-index: 1000;">
|
||||
<div
|
||||
v-if="
|
||||
showResults &&
|
||||
searchResults.length === 0 &&
|
||||
searchQuery.length >= 2 &&
|
||||
!isSearching
|
||||
"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000"
|
||||
>
|
||||
<div class="list-group-item text-muted">Aucun résultat trouvé.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.id" class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<strong>Défunt sélectionné:</strong> {{ formData.first_name }} {{ formData.last_name }}
|
||||
<strong>Défunt sélectionné:</strong> {{ formData.first_name }}
|
||||
{{ formData.last_name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,26 +6,33 @@
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<div class="btn-group" role="group">
|
||||
<input
|
||||
id="locModeNew"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="locationMode"
|
||||
id="locModeNew"
|
||||
autocomplete="off"
|
||||
:checked="!formData.is_existing"
|
||||
@change="formData.is_existing = false; formData.id = null"
|
||||
@change="
|
||||
formData.is_existing = false;
|
||||
formData.id = null;
|
||||
"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="locModeNew"
|
||||
>Nouveau Lieu</label
|
||||
>
|
||||
<label class="btn btn-outline-primary" for="locModeNew">Nouveau Lieu</label>
|
||||
|
||||
<input
|
||||
id="locModeSearch"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="locationMode"
|
||||
id="locModeSearch"
|
||||
autocomplete="off"
|
||||
:checked="formData.is_existing"
|
||||
@change="formData.is_existing = true"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="locModeSearch"
|
||||
>Rechercher</label
|
||||
>
|
||||
<label class="btn btn-outline-primary" for="locModeSearch">Rechercher</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,16 +51,28 @@
|
||||
placeholder="Hôpital, Funérarium, Ville..."
|
||||
@input="handleSearchInput"
|
||||
/>
|
||||
<button v-if="formData.id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
|
||||
<button
|
||||
v-if="formData.id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="getFieldError('location_id')" class="invalid-feedback d-block">
|
||||
<div
|
||||
v-if="getFieldError('location_id')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("location_id") }}
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Results -->
|
||||
<div v-if="showResults && searchResults.length" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
|
||||
<div
|
||||
v-if="showResults && searchResults.length"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000; max-height: 200px; overflow-y: auto"
|
||||
>
|
||||
<button
|
||||
v-for="loc in searchResults"
|
||||
:key="loc.id"
|
||||
@ -62,21 +81,33 @@
|
||||
@click="selectLocation(loc)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">{{ loc.name || 'Lieu sans nom' }}</h6>
|
||||
<h6 class="mb-1">{{ loc.name || "Lieu sans nom" }}</h6>
|
||||
<small>{{ loc.city }}</small>
|
||||
</div>
|
||||
<small class="text-muted">{{ loc.address_line1 }}</small>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="showResults && searchResults.length === 0 && searchQuery.length >= 2 && !isSearching" class="list-group position-absolute w-100 shadow" style="z-index: 1000;">
|
||||
<div
|
||||
v-if="
|
||||
showResults &&
|
||||
searchResults.length === 0 &&
|
||||
searchQuery.length >= 2 &&
|
||||
!isSearching
|
||||
"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000"
|
||||
>
|
||||
<div class="list-group-item text-muted">Aucun résultat trouvé.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.id" class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<strong>Lieu sélectionné:</strong> {{ formData.name }} <br/>
|
||||
<small>{{ formData.address }}, {{ formData.postal_code }} {{ formData.city }}</small>
|
||||
<strong>Lieu sélectionné:</strong> {{ formData.name }} <br />
|
||||
<small
|
||||
>{{ formData.address }}, {{ formData.postal_code }}
|
||||
{{ formData.city }}</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -247,7 +278,7 @@ const handleSearchInput = () => {
|
||||
// Use getAllClientLocations with search param
|
||||
const response = await ClientLocationService.getAllClientLocations({
|
||||
search: searchQuery.value,
|
||||
per_page: 10
|
||||
per_page: 10,
|
||||
});
|
||||
searchResults.value = response.data;
|
||||
showResults.value = true;
|
||||
@ -280,7 +311,6 @@ const clearSelection = () => {
|
||||
searchResults.value = [];
|
||||
};
|
||||
|
||||
|
||||
const getFieldError = (field) => {
|
||||
const error = props.errors.find((err) => err.field === field);
|
||||
return error ? error.message : "";
|
||||
|
||||
@ -16,7 +16,12 @@
|
||||
@input="handleSearchInput"
|
||||
@focus="showResults = true"
|
||||
/>
|
||||
<button v-if="formData.product_id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
|
||||
<button
|
||||
v-if="formData.product_id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -29,13 +34,20 @@
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Results -->
|
||||
<div v-if="showResults" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 250px; overflow-y: auto;">
|
||||
<div
|
||||
v-if="showResults"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000; max-height: 250px; overflow-y: auto"
|
||||
>
|
||||
<div v-if="loading" class="list-group-item text-center">
|
||||
<div class="spinner-border spinner-border-sm text-primary" role="status"></div>
|
||||
<div
|
||||
class="spinner-border spinner-border-sm text-primary"
|
||||
role="status"
|
||||
></div>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
v-for="product in searchResults"
|
||||
v-else
|
||||
:key="product.id"
|
||||
type="button"
|
||||
class="list-group-item list-group-item-action"
|
||||
@ -47,14 +59,21 @@
|
||||
</div>
|
||||
<small class="text-muted">{{ product.description }}</small>
|
||||
</button>
|
||||
<div v-if="!loading && searchResults.length === 0" class="list-group-item text-muted">Aucun résultat trouvé.</div>
|
||||
<div
|
||||
v-if="!loading && searchResults.length === 0"
|
||||
class="list-group-item text-muted"
|
||||
>
|
||||
Aucun résultat trouvé.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected Product Display -->
|
||||
<div v-if="formData.product_id && selectedProductDisplay" class="alert alert-info mt-3">
|
||||
<div
|
||||
v-if="formData.product_id && selectedProductDisplay"
|
||||
class="alert alert-info mt-3"
|
||||
>
|
||||
<strong>Soin sélectionné:</strong> {{ selectedProductDisplay }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -134,7 +153,8 @@ const filterProducts = () => {
|
||||
return;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
searchResults.value = allProducts.value.filter(p =>
|
||||
searchResults.value = allProducts.value.filter(
|
||||
(p) =>
|
||||
p.nom.toLowerCase().includes(query) ||
|
||||
(p.reference && p.reference.toLowerCase().includes(query)) ||
|
||||
(p.description && p.description.toLowerCase().includes(query))
|
||||
@ -155,7 +175,7 @@ onMounted(async () => {
|
||||
// Based on previous code, it seems supported.
|
||||
const response = await service.getAllProducts({
|
||||
per_page: 100, // Fetch enough
|
||||
is_intervention: true // Assuming backend handles this param as before
|
||||
is_intervention: true, // Assuming backend handles this param as before
|
||||
});
|
||||
|
||||
// Check response structure. product.ts says ProductListResponse { data: Product[] ... }
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="modal fade"
|
||||
:class="{ show: show, 'd-block': show }"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-labelledby="planningNewRequestModalLabel"
|
||||
:aria-hidden="!show"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 id="planningNewRequestModalLabel" class="modal-title">Nouvelle demande</h5>
|
||||
<button type="button" class="btn-close" aria-label="Close" @click="$emit('close')"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p v-if="!creationType" class="text-sm text-muted mb-3">Choisissez le type à créer :</p>
|
||||
<p v-else class="text-sm text-muted mb-3">{{ creationTypeTitle }}</p>
|
||||
|
||||
<planning-creation-type-selector
|
||||
v-if="!creationType"
|
||||
@select-type="$emit('select-type', $event)"
|
||||
/>
|
||||
|
||||
<planning-leave-request-form
|
||||
v-else-if="creationType === 'leave'"
|
||||
:form="leaveForm"
|
||||
:collaborators="collaborators"
|
||||
@update:form="$emit('update:leave-form', $event)"
|
||||
@submit="$emit('submit-leave')"
|
||||
@back="$emit('reset-type')"
|
||||
/>
|
||||
|
||||
<planning-event-form
|
||||
v-else-if="creationType === 'event'"
|
||||
:form="eventForm"
|
||||
@update:form="$emit('update:event-form', $event)"
|
||||
@submit="$emit('submit-event')"
|
||||
@back="$emit('reset-type')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="show" class="modal-backdrop fade show" @click="$emit('close')"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PlanningCreationTypeSelector from "@/components/molecules/Planning/PlanningCreationTypeSelector.vue";
|
||||
import PlanningLeaveRequestForm from "@/components/molecules/Planning/PlanningLeaveRequestForm.vue";
|
||||
import PlanningEventForm from "@/components/molecules/Planning/PlanningEventForm.vue";
|
||||
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
|
||||
defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
creationType: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
creationTypeTitle: {
|
||||
type: String,
|
||||
default: "Nouvelle demande",
|
||||
},
|
||||
collaborators: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
leaveForm: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
eventForm: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits([
|
||||
"close",
|
||||
"select-type",
|
||||
"reset-type",
|
||||
"submit-leave",
|
||||
"submit-event",
|
||||
"update:leave-form",
|
||||
"update:event-form",
|
||||
]);
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<planning-template>
|
||||
<template #header>
|
||||
<div class="d-flex flex-column gap-3">
|
||||
<div>
|
||||
<h1 class="display-4 font-bold bg-gradient-indigo-text mb-1">Planning</h1>
|
||||
<p class="text-sm text-secondary">{{ interventionCount }} intervention(s) (mes tâches)</p>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<p class="text-sm text-secondary mb-0">
|
||||
{{ interventionCount }} intervention(s) (mes tâches)
|
||||
</p>
|
||||
</div>
|
||||
<!-- Date Navigator Mobile Position could go here if needed, but keeping simple for now -->
|
||||
</div>
|
||||
<div class="d-flex flex-column flex-md-row gap-3 w-100 w-md-auto align-items-center">
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row gap-2 w-100 w-md-auto align-items-center justify-content-md-end"
|
||||
>
|
||||
<!-- Date Navigator -->
|
||||
<planning-date-navigator
|
||||
:current-date="currentDate"
|
||||
@ -16,16 +16,26 @@
|
||||
@next-week="$emit('next-week')"
|
||||
/>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<planning-action-button variant="secondary" size="sm" @click="$emit('refresh')">
|
||||
<template #icon><i class="fas fa-sync-alt"></i></template>
|
||||
<div class="d-flex gap-2 flex-wrap justify-content-end">
|
||||
<soft-button
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="$emit('refresh')"
|
||||
>
|
||||
<i class="fas fa-sync-alt me-1"></i>
|
||||
<span class="d-none d-lg-inline">Actualiser</span>
|
||||
</planning-action-button>
|
||||
<planning-action-button variant="primary" size="sm" @click="$emit('new-request')">
|
||||
<template #icon><i class="fas fa-plus"></i></template>
|
||||
</soft-button>
|
||||
<soft-button
|
||||
color="info"
|
||||
variant="gradient"
|
||||
size="sm"
|
||||
@click="$emit('new-request')"
|
||||
>
|
||||
<i class="fas fa-plus me-1"></i>
|
||||
<span class="d-none d-lg-inline">Nouvelle demande</span>
|
||||
<span class="d-lg-none">Nouveau</span>
|
||||
</planning-action-button>
|
||||
</soft-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -76,7 +86,6 @@
|
||||
<script setup>
|
||||
import { ref, watch, defineProps, defineEmits } from "vue";
|
||||
import PlanningTemplate from "@/components/templates/Planning/PlanningTemplate.vue";
|
||||
import PlanningActionButton from "@/components/atoms/Planning/PlanningActionButton.vue";
|
||||
import PlanningViewToggles from "@/components/molecules/Planning/PlanningViewToggles.vue";
|
||||
import PlanningLegend from "@/components/molecules/Planning/PlanningLegend.vue";
|
||||
import PlanningCollaboratorsSidebar from "@/components/molecules/Planning/PlanningCollaboratorsSidebar.vue";
|
||||
@ -84,28 +93,29 @@ import PlanningWeekGrid from "@/components/molecules/Planning/PlanningWeekGrid.v
|
||||
import PlanningList from "@/components/molecules/Planning/PlanningList.vue";
|
||||
import PlanningKanban from "@/components/molecules/Planning/PlanningKanban.vue";
|
||||
import PlanningDateNavigator from "@/components/molecules/Planning/PlanningDateNavigator.vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
|
||||
const props = defineProps({
|
||||
interventionCount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
collaborators: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
currentDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
default: () => new Date(),
|
||||
},
|
||||
activeView: {
|
||||
type: String,
|
||||
default: "grille"
|
||||
}
|
||||
default: "grille",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
@ -116,18 +126,24 @@ const emit = defineEmits([
|
||||
"prev-week",
|
||||
"next-week",
|
||||
"edit-intervention",
|
||||
"update-status"
|
||||
"update-status",
|
||||
]);
|
||||
|
||||
const localActiveView = ref(props.activeView);
|
||||
|
||||
watch(() => props.activeView, (newVal) => {
|
||||
watch(
|
||||
() => props.activeView,
|
||||
(newVal) => {
|
||||
localActiveView.value = newVal;
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => localActiveView.value, (newVal) => {
|
||||
watch(
|
||||
() => localActiveView.value,
|
||||
(newVal) => {
|
||||
emit("update:activeView", newVal);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const handleCellClick = (info) => {
|
||||
emit("cell-click", info);
|
||||
@ -143,28 +159,6 @@ const handleUpdateStatus = (payload) => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bg-gradient-indigo-text {
|
||||
background: linear-gradient(to right, #2563eb, #4f46e5, #9333ea);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.display-4 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.display-4 {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
class="btn d-inline-flex align-items-center justify-content-center gap-2 border-0 shadow-sm transition-all"
|
||||
:class="[
|
||||
variant === 'primary' ? 'btn-primary-gradient' : 'btn-outline-indigo',
|
||||
size === 'sm' ? 'btn-sm py-1 px-3' : 'py-2 px-4'
|
||||
size === 'sm' ? 'btn-sm py-1 px-3' : 'py-2 px-4',
|
||||
]"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
@ -20,16 +20,16 @@ import { defineProps, defineEmits } from "vue";
|
||||
defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
default: "secondary" // primary or secondary
|
||||
default: "secondary", // primary or secondary
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "md"
|
||||
default: "md",
|
||||
},
|
||||
hideTextOnMobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["click"]);
|
||||
|
||||
@ -13,7 +13,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 card-body">
|
||||
<div ref="calendarEl" :id="calendarId" data-toggle="widget-calendar"></div>
|
||||
<div
|
||||
:id="calendarId"
|
||||
ref="calendarEl"
|
||||
data-toggle="widget-calendar"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,17 +1,24 @@
|
||||
<template>
|
||||
<div class="card border-0 shadow-lg rounded-xl h-100 sidebar-card" :class="{ 'collapsed': isCollapsed }">
|
||||
<div
|
||||
class="card border-0 shadow-lg rounded-xl h-100 sidebar-card"
|
||||
:class="{ collapsed: isCollapsed }"
|
||||
>
|
||||
<div class="card-header bg-white border-0 pb-0">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-users text-indigo-600"></i>
|
||||
<h3 class="text-xs font-semibold mb-0">👥 Collaborateurs ({{ count }})</h3>
|
||||
<h3 class="text-xs font-semibold mb-0">
|
||||
👥 Collaborateurs ({{ count }})
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div v-if="count === 0" class="text-center text-secondary py-4 text-xs">
|
||||
<p class="mb-2">Aucun collaborateur</p>
|
||||
<p class="text-muted opacity-60">💡 Allouez une couleur depuis la page Salariés</p>
|
||||
<p class="text-muted opacity-60">
|
||||
💡 Allouez une couleur depuis la page Salariés
|
||||
</p>
|
||||
</div>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
@ -26,12 +33,12 @@ import { defineProps } from "vue";
|
||||
defineProps({
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
isCollapsed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="d-grid gap-2">
|
||||
<soft-button color="info" variant="gradient" @click="$emit('select-type', 'intervention')">
|
||||
<i class="fas fa-briefcase-medical me-2"></i>
|
||||
Créer une intervention
|
||||
</soft-button>
|
||||
|
||||
<soft-button color="warning" variant="gradient" @click="$emit('select-type', 'leave')">
|
||||
<i class="fas fa-umbrella-beach me-2"></i>
|
||||
Demande de congé employé
|
||||
</soft-button>
|
||||
|
||||
<soft-button color="success" variant="gradient" @click="$emit('select-type', 'event')">
|
||||
<i class="fas fa-calendar-plus me-2"></i>
|
||||
Créer un événement
|
||||
</soft-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineEmits } from "vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
|
||||
defineEmits(["select-type"]);
|
||||
</script>
|
||||
|
||||
@ -1,31 +1,42 @@
|
||||
<template>
|
||||
<div class="d-flex align-items-center bg-white shadow-sm rounded-lg p-1 border">
|
||||
<button
|
||||
class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md"
|
||||
<div
|
||||
class="d-flex align-items-center bg-white shadow-sm rounded-lg p-1 border"
|
||||
>
|
||||
<soft-button
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="btn-icon-soft"
|
||||
@click="$emit('prev-week')"
|
||||
>
|
||||
<i class="fas fa-chevron-left text-secondary text-xs"></i>
|
||||
</button>
|
||||
<div class="px-3 py-1 text-sm font-semibold text-dark whitespace-nowrap min-w-140 text-center">
|
||||
</soft-button>
|
||||
<div
|
||||
class="px-3 py-1 text-sm font-semibold text-dark whitespace-nowrap min-w-140 text-center"
|
||||
>
|
||||
{{ dateRangeDisplay }}
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md"
|
||||
<soft-button
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="btn-icon-soft"
|
||||
@click="$emit('next-week')"
|
||||
>
|
||||
<i class="fas fa-chevron-right text-secondary text-xs"></i>
|
||||
</button>
|
||||
</soft-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
|
||||
const props = defineProps({
|
||||
currentDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
}
|
||||
default: () => new Date(),
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["prev-week", "next-week"]);
|
||||
@ -43,11 +54,15 @@ const dateRangeDisplay = computed(() => {
|
||||
const sunday = new Date(monday);
|
||||
sunday.setDate(monday.getDate() + 6);
|
||||
|
||||
const options = { day: 'numeric', month: 'short' };
|
||||
const startStr = monday.toLocaleDateString('fr-FR', options);
|
||||
const options = { day: "numeric", month: "short" };
|
||||
const startStr = monday.toLocaleDateString("fr-FR", options);
|
||||
|
||||
// If same month, don't repeat month in start date (optional refinement, sticking to simple for now)
|
||||
const endStr = sunday.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
const endStr = sunday.toLocaleDateString("fr-FR", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
return `${startStr} - ${endStr}`;
|
||||
});
|
||||
@ -58,10 +73,6 @@ const dateRangeDisplay = computed(() => {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@ -78,16 +89,14 @@ const dateRangeDisplay = computed(() => {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.hover\:bg-gray-100:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
.btn-icon-soft {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<form class="d-grid gap-2" @submit.prevent="$emit('submit')">
|
||||
<div>
|
||||
<label class="form-label">Titre</label>
|
||||
<soft-input
|
||||
:model-value="form.title"
|
||||
placeholder="Réunion équipe"
|
||||
@update:model-value="updateField('title', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Date et heure</label>
|
||||
<soft-input
|
||||
:model-value="form.date"
|
||||
type="datetime-local"
|
||||
@update:model-value="updateField('date', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Lieu</label>
|
||||
<soft-input
|
||||
:model-value="form.location"
|
||||
placeholder="Salle principale"
|
||||
@update:model-value="updateField('location', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Description</label>
|
||||
<input
|
||||
:value="form.description"
|
||||
class="form-control"
|
||||
type="text"
|
||||
placeholder="Détails de l'événement"
|
||||
@input="updateField('description', $event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 justify-content-end pt-2">
|
||||
<soft-button color="secondary" variant="outline" @click="$emit('back')">Retour</soft-button>
|
||||
<soft-button color="success" variant="gradient" type="submit">Enregistrer</soft-button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
import SoftInput from "@/components/SoftInput.vue";
|
||||
import { defineEmits, defineProps } from "vue";
|
||||
defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:form", "submit", "back"]);
|
||||
|
||||
const updateField = (field, value) => {
|
||||
emit("update:form", { field, value });
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="planning-kanban-container mt-3">
|
||||
<div class="py-2 min-vh-100 d-inline-flex" style="overflow-x: auto">
|
||||
<div class="planning-kanban-scroll py-2">
|
||||
<div id="planningKanban"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -92,7 +92,7 @@ const initKanban = () => {
|
||||
kanbanInstance = new jKanban({
|
||||
element: "#planningKanban",
|
||||
gutter: "10px",
|
||||
widthBoard: "300px",
|
||||
widthBoard: "360px",
|
||||
responsivePercentage: false,
|
||||
dragItems: true,
|
||||
boards: boards,
|
||||
@ -153,12 +153,18 @@ watch(() => props.interventions, () => {
|
||||
/* Global styles for jKanban overrides */
|
||||
.kanban-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: visible !important;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
width: 360px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.kanban-board-header {
|
||||
@ -183,9 +189,27 @@ watch(() => props.interventions, () => {
|
||||
}
|
||||
|
||||
.kanban-drag {
|
||||
min-height: 500px;
|
||||
min-height: 100%;
|
||||
background-color: #f1f5f9; /* slate-100 */
|
||||
border-radius: 0.75rem;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.planning-kanban-container {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.planning-kanban-scroll {
|
||||
width: 100%;
|
||||
height: calc(100vh - 220px);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
#planningKanban {
|
||||
width: 100%;
|
||||
min-width: max-content;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<form class="d-grid gap-2" @submit.prevent="$emit('submit')">
|
||||
<div>
|
||||
<label class="form-label">Employé</label>
|
||||
<select :value="form.employee" class="form-select" @change="updateField('employee', $event.target.value)">
|
||||
<option value="" disabled>Choisir un employé</option>
|
||||
<option v-for="collab in collaborators" :key="collab.id" :value="collab.name">
|
||||
{{ collab.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Du</label>
|
||||
<soft-input :model-value="form.startDate" type="date" @update:model-value="updateField('startDate', $event)" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Au</label>
|
||||
<soft-input :model-value="form.endDate" type="date" @update:model-value="updateField('endDate', $event)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Motif</label>
|
||||
<soft-input
|
||||
:model-value="form.reason"
|
||||
placeholder="Congé annuel"
|
||||
@update:model-value="updateField('reason', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 justify-content-end pt-2">
|
||||
<soft-button color="secondary" variant="outline" @click="$emit('back')">Retour</soft-button>
|
||||
<soft-button color="warning" variant="gradient" type="submit">Enregistrer</soft-button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
import SoftInput from "@/components/SoftInput.vue";
|
||||
import { defineEmits, defineProps } from "vue";
|
||||
defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
collaborators: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:form", "submit", "back"]);
|
||||
|
||||
const updateField = (field, value) => {
|
||||
emit("update:form", { field, value });
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -7,9 +7,16 @@
|
||||
</div>
|
||||
<div class="card-body pt-2">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<div v-for="item in legend" :key="item.label" class="d-flex align-items-center gap-2">
|
||||
<div
|
||||
v-for="item in legend"
|
||||
:key="item.label"
|
||||
class="d-flex align-items-center gap-2"
|
||||
>
|
||||
<span class="text-sm">{{ item.emoji }}</span>
|
||||
<div class="legend-bar rounded-pill" :style="{ backgroundColor: item.color }"></div>
|
||||
<div
|
||||
class="legend-bar rounded-pill"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
></div>
|
||||
<span class="text-xs text-secondary">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -23,7 +30,7 @@ const legend = [
|
||||
{ emoji: "🏥", label: "Maladie", color: "#ef4444" },
|
||||
{ emoji: "📚", label: "Formation", color: "#8b5cf6" },
|
||||
{ emoji: "💼", label: "Sans solde", color: "#6b7280" },
|
||||
{ emoji: "🚑", label: "Accident travail", color: "#dc2626" }
|
||||
{ emoji: "🚑", label: "Accident travail", color: "#dc2626" },
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
@ -5,56 +5,111 @@
|
||||
<table class="table align-items-center mb-0">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4">Date & Heure</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Type</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Défunt / Client</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Collaborateur</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Statut</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Actions</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4"
|
||||
>
|
||||
Date & Heure
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Défunt / Client
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Collaborateur
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Statut
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="interventions.length === 0">
|
||||
<td colspan="6" class="text-center py-5">
|
||||
<span class="text-muted text-sm">Aucune intervention pour cette période</span>
|
||||
<span class="text-muted text-sm"
|
||||
>Aucune intervention pour cette période</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="intervention in interventions" :key="intervention.id" class="hover-row transition-all">
|
||||
<tr
|
||||
v-for="intervention in interventions"
|
||||
:key="intervention.id"
|
||||
class="hover-row transition-all"
|
||||
>
|
||||
<td class="ps-4">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 text-sm font-weight-bold">{{ formatDate(intervention.date) }}</h6>
|
||||
<span class="text-xs text-secondary">{{ formatTime(intervention.date) }}</span>
|
||||
<h6 class="mb-0 text-sm font-weight-bold">
|
||||
{{ formatDate(intervention.date) }}
|
||||
</h6>
|
||||
<span class="text-xs text-secondary">{{
|
||||
formatTime(intervention.date)
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="badge badge-sm bg-gradient-light text-dark mb-0 d-flex align-items-center gap-1 border">
|
||||
<span class="width-8-px height-8-px rounded-circle me-1" :style="{ backgroundColor: getTypeColor(intervention.type) }"></span>
|
||||
<span
|
||||
class="badge badge-sm bg-gradient-light text-dark mb-0 d-flex align-items-center gap-1 border"
|
||||
>
|
||||
<span
|
||||
class="width-8-px height-8-px rounded-circle me-1"
|
||||
:style="{
|
||||
backgroundColor: getTypeColor(intervention.type),
|
||||
}"
|
||||
></span>
|
||||
{{ intervention.type }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 text-sm">{{ intervention.deceased || 'Non spécifié' }}</h6>
|
||||
<span class="text-xs text-secondary">Client: {{ intervention.client || '-' }}</span>
|
||||
<h6 class="mb-0 text-sm">
|
||||
{{ intervention.deceased || "Non spécifié" }}
|
||||
</h6>
|
||||
<span class="text-xs text-secondary"
|
||||
>Client: {{ intervention.client || "-" }}</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar avatar-xs me-2 bg-gradient-primary rounded-circle text-white d-flex align-items-center justify-content-center text-xxs">
|
||||
<div
|
||||
class="avatar avatar-xs me-2 bg-gradient-primary rounded-circle text-white d-flex align-items-center justify-content-center text-xxs"
|
||||
>
|
||||
{{ getInitials(intervention.collaborator) }}
|
||||
</div>
|
||||
<span class="text-sm font-weight-bold text-secondary">{{ intervention.collaborator }}</span>
|
||||
<span class="text-sm font-weight-bold text-secondary">{{
|
||||
intervention.collaborator
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm" :class="getStatusBadgeClass(intervention.status)">
|
||||
<span
|
||||
class="badge badge-sm"
|
||||
:class="getStatusBadgeClass(intervention.status)"
|
||||
>
|
||||
{{ intervention.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-link text-secondary mb-0 px-2" @click="$emit('edit', intervention)">
|
||||
<button
|
||||
class="btn btn-link text-secondary mb-0 px-2"
|
||||
@click="$emit('edit', intervention)"
|
||||
>
|
||||
<i class="fas fa-edit text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
@ -72,45 +127,57 @@ import { defineProps, defineEmits } from "vue";
|
||||
defineProps({
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["edit"]);
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return "-";
|
||||
return new Date(dateString).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'short' });
|
||||
return new Date(dateString).toLocaleDateString("fr-FR", {
|
||||
weekday: "long",
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
});
|
||||
};
|
||||
|
||||
const formatTime = (dateString) => {
|
||||
if (!dateString) return "-";
|
||||
return new Date(dateString).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
||||
return new Date(dateString).toLocaleTimeString("fr-FR", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const getInitials = (name) => {
|
||||
if (!name) return "?";
|
||||
return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
||||
return name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")
|
||||
.substring(0, 2)
|
||||
.toUpperCase();
|
||||
};
|
||||
|
||||
const getTypeColor = (type) => {
|
||||
const colors = {
|
||||
'Soin': '#3b82f6',
|
||||
'Transport': '#10b981',
|
||||
'Mise en bière': '#f59e0b',
|
||||
'Cérémonie': '#8b5cf6'
|
||||
Soin: "#3b82f6",
|
||||
Transport: "#10b981",
|
||||
"Mise en bière": "#f59e0b",
|
||||
Cérémonie: "#8b5cf6",
|
||||
};
|
||||
return colors[type] || '#6b7280';
|
||||
return colors[type] || "#6b7280";
|
||||
};
|
||||
|
||||
const getStatusBadgeClass = (status) => {
|
||||
const map = {
|
||||
'Confirmé': 'bg-gradient-info',
|
||||
'Terminé': 'bg-gradient-success',
|
||||
'En attente': 'bg-gradient-warning',
|
||||
'Annulé': 'bg-gradient-danger'
|
||||
Confirmé: "bg-gradient-info",
|
||||
Terminé: "bg-gradient-success",
|
||||
"En attente": "bg-gradient-warning",
|
||||
Annulé: "bg-gradient-danger",
|
||||
};
|
||||
return map[status] || 'bg-gradient-secondary';
|
||||
return map[status] || "bg-gradient-secondary";
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,28 +1,29 @@
|
||||
<template>
|
||||
<div class="d-flex gap-2">
|
||||
<button
|
||||
<soft-button
|
||||
v-for="view in views"
|
||||
:key="view.id"
|
||||
class="btn d-inline-flex align-items-center justify-content-center gap-2 border-0 shadow-sm transition-all"
|
||||
:class="[
|
||||
activeView === view.id ? 'btn-active' : 'btn-inactive'
|
||||
]"
|
||||
class="d-inline-flex align-items-center justify-content-center gap-2 transition-all"
|
||||
:color="activeView === view.id ? 'info' : 'secondary'"
|
||||
:variant="activeView === view.id ? 'gradient' : 'outline'"
|
||||
size="sm"
|
||||
@click="$emit('update:activeView', view.id)"
|
||||
>
|
||||
<i :class="view.icon"></i>
|
||||
<span class="d-none d-sm-inline">{{ view.label }}</span>
|
||||
</button>
|
||||
</soft-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
|
||||
defineProps({
|
||||
activeView: {
|
||||
type: String,
|
||||
default: "grille"
|
||||
}
|
||||
default: "grille",
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["update:activeView"]);
|
||||
@ -30,35 +31,16 @@ defineEmits(["update:activeView"]);
|
||||
const views = [
|
||||
{ id: "liste", label: "Liste", icon: "fas fa-list", color: "gray" },
|
||||
{ id: "kanban", label: "Kanban", icon: "fas fa-columns", color: "gray" },
|
||||
{ id: "grille", label: "Grille", icon: "fas fa-calendar-alt", color: "indigo" }
|
||||
{
|
||||
id: "grille",
|
||||
label: "Grille",
|
||||
icon: "fas fa-calendar-alt",
|
||||
color: "indigo",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-active {
|
||||
background-color: #4f46e5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-inactive {
|
||||
background-color: white;
|
||||
color: #64748b;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
}
|
||||
|
||||
.btn-inactive:hover {
|
||||
background-color: #f8fafc;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="calendar-grid-container card h-100 border-0 shadow-sm rounded-xl">
|
||||
<div class="card-body p-3 h-100">
|
||||
<div ref="calendarEl" id="fullCalendarGrid" class="h-100"></div>
|
||||
<div id="fullCalendarGrid" ref="calendarEl" class="h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,12 +16,12 @@ import frLocale from "@fullcalendar/core/locales/fr";
|
||||
const props = defineProps({
|
||||
startDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
default: () => new Date(),
|
||||
},
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["cell-click", "edit"]);
|
||||
@ -49,7 +49,7 @@ const initializeCalendar = () => {
|
||||
contentHeight: "auto",
|
||||
expandRows: true,
|
||||
stickyHeaderDates: true,
|
||||
dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'short' }, // "Lundi 12 janv."
|
||||
dayHeaderFormat: { weekday: "long", day: "numeric", month: "short" }, // "Lundi 12 janv."
|
||||
events: mapEvents(props.interventions),
|
||||
eventClick: (info) => {
|
||||
const originalEvent = info.event.extendedProps.originalData;
|
||||
@ -61,22 +61,22 @@ const initializeCalendar = () => {
|
||||
},
|
||||
// Styling customization via class names injection if needed
|
||||
eventClassNames: (arg) => {
|
||||
return ['shadow-sm', 'border-0'];
|
||||
}
|
||||
return ["shadow-sm", "border-0"];
|
||||
},
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
};
|
||||
|
||||
const mapEvents = (interventions) => {
|
||||
return interventions.map(i => {
|
||||
return interventions.map((i) => {
|
||||
// Map props.interventions structure to FullCalendar event object
|
||||
// Assuming intervention has: id, date (ISO string), title (or type), status, color
|
||||
const typeColors = {
|
||||
'Soin': '#3b82f6',
|
||||
'Transport': '#10b981',
|
||||
'Mise en bière': '#f59e0b',
|
||||
'Cérémonie': '#8b5cf6'
|
||||
Soin: "#3b82f6",
|
||||
Transport: "#10b981",
|
||||
"Mise en bière": "#f59e0b",
|
||||
Cérémonie: "#8b5cf6",
|
||||
};
|
||||
|
||||
// Default duration 1 hour if not specified
|
||||
@ -88,12 +88,12 @@ const mapEvents = (interventions) => {
|
||||
title: i.deceased ? `${i.type} - ${i.deceased}` : i.type,
|
||||
start: i.date,
|
||||
end: i.end || end, // Use provided end or default
|
||||
backgroundColor: typeColors[i.type] || '#6b7280',
|
||||
borderColor: typeColors[i.type] || '#6b7280',
|
||||
textColor: '#ffffff',
|
||||
backgroundColor: typeColors[i.type] || "#6b7280",
|
||||
borderColor: typeColors[i.type] || "#6b7280",
|
||||
textColor: "#ffffff",
|
||||
extendedProps: {
|
||||
originalData: i
|
||||
}
|
||||
originalData: i,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
@ -102,19 +102,25 @@ onMounted(() => {
|
||||
initializeCalendar();
|
||||
});
|
||||
|
||||
watch(() => props.startDate, (newDate) => {
|
||||
watch(
|
||||
() => props.startDate,
|
||||
(newDate) => {
|
||||
if (calendar) {
|
||||
calendar.gotoDate(newDate);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => props.interventions, (newInterventions) => {
|
||||
watch(
|
||||
() => props.interventions,
|
||||
(newInterventions) => {
|
||||
if (calendar) {
|
||||
calendar.removeAllEvents();
|
||||
calendar.addEventSource(mapEvents(newInterventions));
|
||||
}
|
||||
}, { deep: true });
|
||||
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -147,7 +153,8 @@ watch(() => props.interventions, (newInterventions) => {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.fc td), :deep(.fc th) {
|
||||
:deep(.fc td),
|
||||
:deep(.fc th) {
|
||||
border-color: #e9ecef;
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div class="planning-container p-2 p-md-4">
|
||||
<div class="container-max mx-auto">
|
||||
<div class="container-max mx-auto h-100">
|
||||
<!-- Header Section -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3"
|
||||
>
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
|
||||
@ -11,7 +13,7 @@
|
||||
<slot name="view-toggles"></slot>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="content-wrapper h-100">
|
||||
<div class="row g-4">
|
||||
<!-- Sidebar & Legend Column (Left on desktop) -->
|
||||
<!-- <div class="col-12 col-xl-3 order-2 order-xl-1">
|
||||
@ -44,11 +46,14 @@
|
||||
}
|
||||
|
||||
.container-max {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 12rem);
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
|
||||
@ -477,17 +477,20 @@ const routes = [
|
||||
{
|
||||
path: "/fournisseurs/factures",
|
||||
name: "Factures fournisseurs",
|
||||
component: () => import("@/views/pages/Fournisseurs/FactureFournisseurList.vue"),
|
||||
component: () =>
|
||||
import("@/views/pages/Fournisseurs/FactureFournisseurList.vue"),
|
||||
},
|
||||
{
|
||||
path: "/fournisseurs/factures/new",
|
||||
name: "Nouvelle Facture Fournisseur",
|
||||
component: () => import("@/views/pages/Fournisseurs/NewFactureFournisseur.vue"),
|
||||
component: () =>
|
||||
import("@/views/pages/Fournisseurs/NewFactureFournisseur.vue"),
|
||||
},
|
||||
{
|
||||
path: "/fournisseurs/factures/:id",
|
||||
name: "Facture Fournisseur Details",
|
||||
component: () => import("@/views/pages/Fournisseurs/FactureFournisseurDetail.vue"),
|
||||
component: () =>
|
||||
import("@/views/pages/Fournisseurs/FactureFournisseurDetail.vue"),
|
||||
},
|
||||
{
|
||||
path: "/fournisseurs/statistiques",
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<planning-presentation
|
||||
v-model:activeView="activeView"
|
||||
:intervention-count="interventions.length"
|
||||
:collaborators="collaborators"
|
||||
:interventions="interventions"
|
||||
:current-date="currentDate"
|
||||
v-model:activeView="activeView"
|
||||
@refresh="handleRefresh"
|
||||
@new-request="handleNewRequest"
|
||||
@cell-click="handleCellClick"
|
||||
@ -14,18 +14,82 @@
|
||||
@edit-intervention="handleEditIntervention"
|
||||
@update-status="handleUpdateStatus"
|
||||
/>
|
||||
|
||||
<planning-new-request-modal
|
||||
:show="showNewRequestModal"
|
||||
:creation-type="creationType"
|
||||
:creation-type-title="creationTypeTitle"
|
||||
:collaborators="collaborators"
|
||||
:leave-form="leaveForm"
|
||||
:event-form="eventForm"
|
||||
@close="closeNewRequestModal"
|
||||
@select-type="selectCreationType"
|
||||
@reset-type="resetType"
|
||||
@submit-leave="submitLeave"
|
||||
@submit-event="submitEvent"
|
||||
@update:leave-form="updateLeaveForm"
|
||||
@update:event-form="updateEventForm"
|
||||
/>
|
||||
|
||||
<intervention-multi-step-modal
|
||||
ref="interventionModalRef"
|
||||
:is-editing="false"
|
||||
:practitioners="practitioners"
|
||||
:initial-date="initialInterventionDate"
|
||||
@submit="handleInterventionSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import PlanningPresentation from "@/components/Organism/Planning/PlanningPresentation.vue";
|
||||
import PlanningNewRequestModal from "@/components/Organism/Planning/PlanningNewRequestModal.vue";
|
||||
import InterventionMultiStepModal from "@/components/Organism/Agenda/InterventionMultiStepModal.vue";
|
||||
|
||||
// State
|
||||
const interventions = ref([]);
|
||||
const collaborators = ref([]);
|
||||
const currentDate = ref(new Date());
|
||||
const activeView = ref("grille");
|
||||
const showNewRequestModal = ref(false);
|
||||
const creationType = ref("");
|
||||
const interventionModalRef = ref(null);
|
||||
const initialInterventionDate = ref("");
|
||||
|
||||
const leaveForm = ref({
|
||||
employee: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
reason: "",
|
||||
});
|
||||
|
||||
const eventForm = ref({
|
||||
title: "",
|
||||
date: "",
|
||||
location: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const creationTypeTitle = computed(() => {
|
||||
if (creationType.value === "intervention") return "Nouvelle intervention";
|
||||
if (creationType.value === "leave") return "Demande de congé";
|
||||
if (creationType.value === "event") return "Nouvel événement";
|
||||
return "Nouvelle demande";
|
||||
});
|
||||
|
||||
const practitioners = computed(() =>
|
||||
collaborators.value.map((collab) => {
|
||||
const [firstName = collab.name, ...rest] = collab.name.split(" ");
|
||||
return {
|
||||
id: collab.id,
|
||||
employee: {
|
||||
first_name: firstName,
|
||||
last_name: rest.join(" "),
|
||||
},
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
@ -38,7 +102,7 @@ const fetchData = async () => {
|
||||
collaborators.value = [
|
||||
{ id: 1, name: "Jean Dupont" },
|
||||
{ id: 2, name: "Marie Curie" },
|
||||
{ id: 3, name: "Lucas Martin" }
|
||||
{ id: 3, name: "Lucas Martin" },
|
||||
];
|
||||
|
||||
// Generate some random interventions around current date
|
||||
@ -53,7 +117,7 @@ const fetchData = async () => {
|
||||
deceased: "M. Martin",
|
||||
client: "Pompes Funèbres Générales",
|
||||
collaborator: "Jean Dupont",
|
||||
status: "Confirmé"
|
||||
status: "Confirmé",
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
@ -62,7 +126,7 @@ const fetchData = async () => {
|
||||
deceased: "Mme. Dubois",
|
||||
client: "Roc Eclerc",
|
||||
collaborator: "Marie Curie",
|
||||
status: "En cours"
|
||||
status: "En cours",
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
@ -71,7 +135,7 @@ const fetchData = async () => {
|
||||
deceased: "M. Lefebvre",
|
||||
client: "PF Locales",
|
||||
collaborator: "Lucas Martin",
|
||||
status: "En attente"
|
||||
status: "En attente",
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
@ -80,7 +144,7 @@ const fetchData = async () => {
|
||||
deceased: "Mme. Petit",
|
||||
client: "Famille Petit",
|
||||
collaborator: "Jean Dupont",
|
||||
status: "Terminé"
|
||||
status: "Terminé",
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
@ -89,8 +153,8 @@ const fetchData = async () => {
|
||||
deceased: "Inconnu",
|
||||
client: "Police",
|
||||
collaborator: "Marie Curie",
|
||||
status: "Annulé"
|
||||
}
|
||||
status: "Annulé",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
@ -99,7 +163,119 @@ const handleRefresh = async () => {
|
||||
};
|
||||
|
||||
const handleNewRequest = () => {
|
||||
console.log("New request");
|
||||
creationType.value = "";
|
||||
showNewRequestModal.value = true;
|
||||
};
|
||||
|
||||
const closeNewRequestModal = () => {
|
||||
creationType.value = "";
|
||||
showNewRequestModal.value = false;
|
||||
};
|
||||
|
||||
const selectCreationType = (type) => {
|
||||
if (type === "intervention") {
|
||||
creationType.value = "";
|
||||
showNewRequestModal.value = false;
|
||||
const now = new Date();
|
||||
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
|
||||
initialInterventionDate.value = now.toISOString().slice(0, 16);
|
||||
interventionModalRef.value?.show();
|
||||
return;
|
||||
}
|
||||
|
||||
creationType.value = type;
|
||||
};
|
||||
|
||||
const resetType = () => {
|
||||
creationType.value = "";
|
||||
};
|
||||
|
||||
const handleInterventionSubmit = (formData) => {
|
||||
const practitioner = practitioners.value.find(
|
||||
(p) => p.id?.toString() === formData.assigned_practitioner_id?.toString()
|
||||
);
|
||||
|
||||
const collaboratorName = practitioner
|
||||
? `${practitioner.employee?.first_name || ""} ${
|
||||
practitioner.employee?.last_name || ""
|
||||
}`.trim()
|
||||
: collaborators.value[0]?.name || "-";
|
||||
|
||||
interventions.value.unshift({
|
||||
id: Date.now(),
|
||||
date: formData.scheduled_at
|
||||
? new Date(formData.scheduled_at).toISOString()
|
||||
: new Date().toISOString(),
|
||||
type: formData.product_name || formData.type || "Intervention",
|
||||
deceased: formData.deceased_name || "Défunt",
|
||||
client: formData.client_name || "Client",
|
||||
collaborator: collaboratorName,
|
||||
status: "En attente",
|
||||
});
|
||||
};
|
||||
|
||||
const submitLeave = () => {
|
||||
if (!leaveForm.value.employee || !leaveForm.value.startDate) {
|
||||
alert("Veuillez remplir les champs obligatoires de la demande de congé.");
|
||||
return;
|
||||
}
|
||||
|
||||
interventions.value.unshift({
|
||||
id: Date.now() + 1,
|
||||
date: new Date(`${leaveForm.value.startDate}T09:00`).toISOString(),
|
||||
type: "Congé",
|
||||
deceased: `Congé: ${leaveForm.value.employee}`,
|
||||
client: leaveForm.value.reason || "Demande de congé",
|
||||
collaborator: leaveForm.value.employee,
|
||||
status: "En attente",
|
||||
});
|
||||
|
||||
leaveForm.value = {
|
||||
employee: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
reason: "",
|
||||
};
|
||||
closeNewRequestModal();
|
||||
};
|
||||
|
||||
const updateLeaveForm = ({ field, value }) => {
|
||||
leaveForm.value = {
|
||||
...leaveForm.value,
|
||||
[field]: value,
|
||||
};
|
||||
};
|
||||
|
||||
const submitEvent = () => {
|
||||
if (!eventForm.value.title || !eventForm.value.date) {
|
||||
alert("Veuillez remplir les champs obligatoires de l'événement.");
|
||||
return;
|
||||
}
|
||||
|
||||
interventions.value.unshift({
|
||||
id: Date.now() + 2,
|
||||
date: new Date(eventForm.value.date).toISOString(),
|
||||
type: "Événement",
|
||||
deceased: eventForm.value.title,
|
||||
client: eventForm.value.location || eventForm.value.description || "Événement interne",
|
||||
collaborator: "Équipe",
|
||||
status: "Confirmé",
|
||||
});
|
||||
|
||||
eventForm.value = {
|
||||
title: "",
|
||||
date: "",
|
||||
location: "",
|
||||
description: "",
|
||||
};
|
||||
closeNewRequestModal();
|
||||
};
|
||||
|
||||
const updateEventForm = ({ field, value }) => {
|
||||
eventForm.value = {
|
||||
...eventForm.value,
|
||||
[field]: value,
|
||||
};
|
||||
};
|
||||
|
||||
const handleCellClick = (info) => {
|
||||
@ -118,11 +294,15 @@ const handlePrevWeek = () => {
|
||||
};
|
||||
|
||||
const handleUpdateStatus = (payload) => {
|
||||
const intervention = interventions.value.find(i => i.id.toString() === payload.id);
|
||||
const intervention = interventions.value.find(
|
||||
(i) => i.id.toString() === payload.id
|
||||
);
|
||||
if (intervention) {
|
||||
intervention.status = payload.status;
|
||||
// In a real app, we would make an API call here to persist the change
|
||||
console.log(`Updated status of intervention ${payload.id} to ${payload.status}`);
|
||||
console.log(
|
||||
`Updated status of intervention ${payload.id} to ${payload.status}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user