defunt Doc
This commit is contained in:
Nyavokevin
parent
23bce2abcf
commit
f9b6e5e0f6
@ -1,279 +1,410 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div>
|
||||||
<div class="card-body">
|
<!-- Loading State -->
|
||||||
<!-- Header with Title and Actions -->
|
<div v-if="isLoading" class="text-center py-5">
|
||||||
<div class="row align-items-center mb-4">
|
<div class="spinner-border" role="status">
|
||||||
<div class="col">
|
<span class="visually-hidden">Chargement...</span>
|
||||||
<h5 class="mb-0">Informations du défunt</h5>
|
</div>
|
||||||
<p class="text-sm text-secondary mb-0">
|
<p class="mt-3 text-muted">Chargement des détails du défunt...</p>
|
||||||
Détails et informations personnelles
|
</div>
|
||||||
</p>
|
|
||||||
</div>
|
<!-- Content -->
|
||||||
<div class="col-auto">
|
<template v-else-if="deceased">
|
||||||
<soft-button
|
<!-- Tab Navigation -->
|
||||||
color="primary"
|
<div class="card">
|
||||||
variant="gradient"
|
<div class="card-body">
|
||||||
class="btn-sm"
|
<ul
|
||||||
@click="isEditing = !isEditing"
|
class="nav nav-tabs card-header-tabs"
|
||||||
|
id="defuntTabs"
|
||||||
|
role="tablist"
|
||||||
>
|
>
|
||||||
<i class="fas fa-edit me-2"></i>
|
<li class="nav-item" role="presentation">
|
||||||
{{ isEditing ? "Annuler" : "Modifier" }}
|
<button
|
||||||
</soft-button>
|
class="nav-link"
|
||||||
|
:class="{ active: activeTab === 'details' }"
|
||||||
|
@click="activeTab = 'details'"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i class="fas fa-user me-2"></i>
|
||||||
|
Détails
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button
|
||||||
|
class="nav-link"
|
||||||
|
:class="{ active: activeTab === 'documents' }"
|
||||||
|
@click="activeTab = 'documents'"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i class="fas fa-file-alt me-2"></i>
|
||||||
|
Documents
|
||||||
|
<span
|
||||||
|
v-if="deceased.documents_count"
|
||||||
|
class="badge bg-primary ms-1"
|
||||||
|
>
|
||||||
|
{{ deceased.documents_count }}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button
|
||||||
|
class="nav-link"
|
||||||
|
:class="{ active: activeTab === 'interventions' }"
|
||||||
|
@click="activeTab = 'interventions'"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i class="fas fa-clipboard-list me-2"></i>
|
||||||
|
Interventions
|
||||||
|
<span
|
||||||
|
v-if="deceased.interventions_count"
|
||||||
|
class="badge bg-info ms-1"
|
||||||
|
>
|
||||||
|
{{ deceased.interventions_count }}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Loading State -->
|
<!-- Tab Content -->
|
||||||
<div v-if="isLoading" class="text-center p-4">
|
<div class="tab-content mt-4">
|
||||||
<div class="spinner-border text-primary" role="status">
|
<!-- Details Tab -->
|
||||||
<span class="visually-hidden">Chargement...</span>
|
<div v-if="activeTab === 'details'" class="tab-pane fade show active">
|
||||||
</div>
|
<div class="card">
|
||||||
</div>
|
<div class="card-body">
|
||||||
|
<!-- Header with Title and Actions -->
|
||||||
<!-- Content -->
|
<div class="row align-items-center mb-4">
|
||||||
<div v-else>
|
<div class="col">
|
||||||
<!-- View Mode -->
|
<h5 class="mb-0">Informations du défunt</h5>
|
||||||
<div v-if="!isEditing" class="row">
|
<p class="text-sm text-secondary mb-0">
|
||||||
<div class="col-12">
|
Détails et informations personnelles
|
||||||
<h6
|
</p>
|
||||||
class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
|
|
||||||
>
|
|
||||||
Informations personnelles
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Personal Info -->
|
|
||||||
<div class="col-md-6 mb-3">
|
|
||||||
<div class="border rounded-3 p-3 h-100">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<div
|
|
||||||
class="avatar avatar-sm bg-gradient-secondary rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
||||||
>
|
|
||||||
<i class="fas fa-user text-white"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h6 class="mb-0 text-sm">{{ getFullName }}</h6>
|
|
||||||
<p class="text-xs text-secondary mb-0">Nom complet</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 mb-3">
|
|
||||||
<div class="border rounded-3 p-3 h-100">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<div
|
|
||||||
class="avatar avatar-sm bg-gradient-info rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
||||||
>
|
|
||||||
<i class="fas fa-calendar-alt text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-0 text-sm">
|
|
||||||
{{ formatDate(deceased?.birth_date) }}
|
|
||||||
</h6>
|
|
||||||
<p class="text-xs text-secondary mb-0">Date de naissance</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 mb-3">
|
|
||||||
<div class="border rounded-3 p-3 h-100">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<div
|
|
||||||
class="avatar avatar-sm bg-gradient-danger rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
||||||
>
|
|
||||||
<i class="fas fa-cross text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-0 text-sm">
|
|
||||||
{{ formatDate(deceased?.death_date) }}
|
|
||||||
</h6>
|
|
||||||
<p class="text-xs text-secondary mb-0">Date de décès</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 mb-3">
|
|
||||||
<div class="border rounded-3 p-3 h-100">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<div
|
|
||||||
class="avatar avatar-sm bg-gradient-warning rounded-circle d-flex align-items-center justify-content-center me-3"
|
|
||||||
>
|
|
||||||
<i class="fas fa-map-marker-alt text-white"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="mb-0 text-sm">
|
|
||||||
{{ deceased?.place_of_death || "Non renseigné" }}
|
|
||||||
</h6>
|
|
||||||
<p class="text-xs text-secondary mb-0">Lieu de décès</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Age at death -->
|
|
||||||
<div class="col-12 mb-4">
|
|
||||||
<div class="border rounded-3 p-3">
|
|
||||||
<div class="row align-items-center">
|
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<div
|
<soft-button
|
||||||
class="avatar avatar-lg bg-gradient-success rounded-circle d-flex align-items-center justify-content-center"
|
color="primary"
|
||||||
|
variant="gradient"
|
||||||
|
class="btn-sm"
|
||||||
|
@click="isEditing = !isEditing"
|
||||||
>
|
>
|
||||||
<i class="fas fa-birthday-cake text-white"></i>
|
<i class="fas fa-edit me-2"></i>
|
||||||
|
{{ isEditing ? "Annuler" : "Modifier" }}
|
||||||
|
</soft-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- View Mode -->
|
||||||
|
<div v-if="!isEditing" class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h6
|
||||||
|
class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
|
||||||
|
>
|
||||||
|
Informations personnelles
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Personal Info -->
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<div class="border rounded-3 p-3 h-100">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div
|
||||||
|
class="avatar avatar-sm bg-gradient-secondary rounded-circle d-flex align-items-center justify-content-center me-3"
|
||||||
|
>
|
||||||
|
<i class="fas fa-user text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 class="mb-0 text-sm">{{ getFullName }}</h6>
|
||||||
|
<p class="text-xs text-secondary mb-0">Nom complet</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
|
||||||
<h3 class="mb-0">{{ calculateAgeAtDeath }}</h3>
|
<div class="col-md-6 mb-3">
|
||||||
<p class="text-sm text-secondary mb-0">Âge au décès</p>
|
<div class="border rounded-3 p-3 h-100">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div
|
||||||
|
class="avatar avatar-sm bg-gradient-info rounded-circle d-flex align-items-center justify-content-center me-3"
|
||||||
|
>
|
||||||
|
<i class="fas fa-calendar-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 class="mb-0 text-sm">
|
||||||
|
{{ formatDate(deceased?.birth_date) }}
|
||||||
|
</h6>
|
||||||
|
<p class="text-xs text-secondary mb-0">
|
||||||
|
Date de naissance
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<div class="border rounded-3 p-3 h-100">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div
|
||||||
|
class="avatar avatar-sm bg-gradient-danger rounded-circle d-flex align-items-center justify-content-center me-3"
|
||||||
|
>
|
||||||
|
<i class="fas fa-cross text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 class="mb-0 text-sm">
|
||||||
|
{{ formatDate(deceased?.death_date) }}
|
||||||
|
</h6>
|
||||||
|
<p class="text-xs text-secondary mb-0">Date de décès</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<div class="border rounded-3 p-3 h-100">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div
|
||||||
|
class="avatar avatar-sm bg-gradient-warning rounded-circle d-flex align-items-center justify-content-center me-3"
|
||||||
|
>
|
||||||
|
<i class="fas fa-map-marker-alt text-white"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 class="mb-0 text-sm">
|
||||||
|
{{ deceased?.place_of_death || "Non renseigné" }}
|
||||||
|
</h6>
|
||||||
|
<p class="text-xs text-secondary mb-0">Lieu de décès</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Age at death -->
|
||||||
|
<div class="col-12 mb-4">
|
||||||
|
<div class="border rounded-3 p-3">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-auto">
|
||||||
|
<div
|
||||||
|
class="avatar avatar-lg bg-gradient-success rounded-circle d-flex align-items-center justify-content-center"
|
||||||
|
>
|
||||||
|
<i class="fas fa-birthday-cake text-white"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<h3 class="mb-0">{{ calculateAgeAtDeath }}</h3>
|
||||||
|
<p class="text-sm text-secondary mb-0">Âge au décès</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notes -->
|
||||||
|
<div class="col-12">
|
||||||
|
<h6
|
||||||
|
class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
|
||||||
|
>
|
||||||
|
Notes et observations
|
||||||
|
</h6>
|
||||||
|
<div class="border rounded-3 p-3">
|
||||||
|
<p class="text-sm mb-0">
|
||||||
|
{{ deceased?.notes || "Aucune note renseignée" }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit Mode -->
|
||||||
|
<div v-else class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h6
|
||||||
|
class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
|
||||||
|
>
|
||||||
|
Modifier les informations
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<label class="form-label"
|
||||||
|
>Nom de famille <span class="text-danger">*</span></label
|
||||||
|
>
|
||||||
|
<soft-input
|
||||||
|
v-model="editForm.last_name"
|
||||||
|
type="text"
|
||||||
|
placeholder="Nom de famille"
|
||||||
|
:class="{ 'is-invalid': validationErrors.last_name }"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="validationErrors.last_name"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
{{ validationErrors.last_name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<label class="form-label">Prénom(s)</label>
|
||||||
|
<soft-input
|
||||||
|
v-model="editForm.first_name"
|
||||||
|
type="text"
|
||||||
|
placeholder="Prénom(s)"
|
||||||
|
:class="{ 'is-invalid': validationErrors.first_name }"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="validationErrors.first_name"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
{{ validationErrors.first_name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<label class="form-label">Date de naissance</label>
|
||||||
|
<soft-input
|
||||||
|
v-model="editForm.birth_date"
|
||||||
|
type="date"
|
||||||
|
:class="{ 'is-invalid': validationErrors.birth_date }"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="validationErrors.birth_date"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
{{ validationErrors.birth_date }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3">
|
||||||
|
<label class="form-label">Date de décès</label>
|
||||||
|
<soft-input
|
||||||
|
v-model="editForm.death_date"
|
||||||
|
type="date"
|
||||||
|
:class="{ 'is-invalid': validationErrors.death_date }"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="validationErrors.death_date"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
{{ validationErrors.death_date }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 mb-3">
|
||||||
|
<label class="form-label">Lieu de décès</label>
|
||||||
|
<soft-input
|
||||||
|
v-model="editForm.place_of_death"
|
||||||
|
type="text"
|
||||||
|
placeholder="Lieu de décès"
|
||||||
|
:class="{ 'is-invalid': validationErrors.place_of_death }"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="validationErrors.place_of_death"
|
||||||
|
class="invalid-feedback"
|
||||||
|
>
|
||||||
|
{{ validationErrors.place_of_death }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 mb-4">
|
||||||
|
<label class="form-label">Notes et observations</label>
|
||||||
|
<textarea
|
||||||
|
v-model="editForm.notes"
|
||||||
|
class="form-control"
|
||||||
|
rows="4"
|
||||||
|
placeholder="Notes complémentaires..."
|
||||||
|
:class="{ 'is-invalid': validationErrors.notes }"
|
||||||
|
></textarea>
|
||||||
|
<div v-if="validationErrors.notes" class="invalid-feedback">
|
||||||
|
{{ validationErrors.notes }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="d-flex gap-2">
|
||||||
|
<soft-button
|
||||||
|
color="primary"
|
||||||
|
variant="gradient"
|
||||||
|
@click="saveChanges"
|
||||||
|
:disabled="isSaving"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="isSaving"
|
||||||
|
class="spinner-border spinner-border-sm me-2"
|
||||||
|
role="status"
|
||||||
|
></span>
|
||||||
|
{{ isSaving ? "Sauvegarde..." : "Sauvegarder" }}
|
||||||
|
</soft-button>
|
||||||
|
<soft-button
|
||||||
|
color="secondary"
|
||||||
|
variant="outline"
|
||||||
|
@click="cancelEdit"
|
||||||
|
:disabled="isSaving"
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</soft-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Notes -->
|
|
||||||
<div class="col-12">
|
|
||||||
<h6
|
|
||||||
class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
|
|
||||||
>
|
|
||||||
Notes et observations
|
|
||||||
</h6>
|
|
||||||
<div class="border rounded-3 p-3">
|
|
||||||
<p class="text-sm mb-0">
|
|
||||||
{{ deceased?.notes || "Aucune note renseignée" }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Edit Mode -->
|
<!-- Documents Tab -->
|
||||||
<div v-else class="row">
|
<div v-if="activeTab === 'documents'" class="tab-pane fade show active">
|
||||||
<div class="col-12">
|
<DocumentManagement
|
||||||
<h6
|
:documents="deceasedDocuments"
|
||||||
class="text-uppercase text-secondary text-xs font-weight-bolder mb-3"
|
:loading="documentStore.isLoading"
|
||||||
>
|
:error="documentStore.getError"
|
||||||
Modifier les informations
|
@files-selected="handleFilesSelected"
|
||||||
</h6>
|
@upload-files="handleUploadFiles"
|
||||||
</div>
|
@delete-document="handleDeleteDocument"
|
||||||
|
@delete-documents="handleDeleteDocuments"
|
||||||
|
@update-document-label="handleUpdateDocumentLabel"
|
||||||
|
@retry="loadDeceasedDocuments"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 mb-3">
|
<!-- Interventions Tab -->
|
||||||
<label class="form-label"
|
<div
|
||||||
>Nom de famille <span class="text-danger">*</span></label
|
v-if="activeTab === 'interventions'"
|
||||||
>
|
class="tab-pane fade show active"
|
||||||
<soft-input
|
>
|
||||||
v-model="editForm.last_name"
|
<div class="card">
|
||||||
type="text"
|
<div class="card-header pb-0">
|
||||||
placeholder="Nom de famille"
|
<div class="d-flex align-items-center">
|
||||||
:class="{ 'is-invalid': validationErrors.last_name }"
|
<h6 class="mb-0">
|
||||||
/>
|
Interventions ({{ deceased?.interventions_count || 0 }})
|
||||||
<div v-if="validationErrors.last_name" class="invalid-feedback">
|
</h6>
|
||||||
{{ validationErrors.last_name }}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
|
<div class="text-center py-5">
|
||||||
<div class="col-md-6 mb-3">
|
<div class="avatar avatar-xl mb-3">
|
||||||
<label class="form-label">Prénom(s)</label>
|
<div class="avatar-title bg-gradient-info text-white h5 mb-0">
|
||||||
<soft-input
|
<i class="fas fa-clipboard-list"></i>
|
||||||
v-model="editForm.first_name"
|
</div>
|
||||||
type="text"
|
</div>
|
||||||
placeholder="Prénom(s)"
|
<h6 class="text-sm text-muted">Liste des interventions</h6>
|
||||||
:class="{ 'is-invalid': validationErrors.first_name }"
|
<p class="text-xs text-muted">
|
||||||
/>
|
Interface de gestion des interventions à implémenter...
|
||||||
<div v-if="validationErrors.first_name" class="invalid-feedback">
|
</p>
|
||||||
{{ validationErrors.first_name }}
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 mb-3">
|
|
||||||
<label class="form-label">Date de naissance</label>
|
|
||||||
<soft-input
|
|
||||||
v-model="editForm.birth_date"
|
|
||||||
type="date"
|
|
||||||
:class="{ 'is-invalid': validationErrors.birth_date }"
|
|
||||||
/>
|
|
||||||
<div v-if="validationErrors.birth_date" class="invalid-feedback">
|
|
||||||
{{ validationErrors.birth_date }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 mb-3">
|
|
||||||
<label class="form-label">Date de décès</label>
|
|
||||||
<soft-input
|
|
||||||
v-model="editForm.death_date"
|
|
||||||
type="date"
|
|
||||||
:class="{ 'is-invalid': validationErrors.death_date }"
|
|
||||||
/>
|
|
||||||
<div v-if="validationErrors.death_date" class="invalid-feedback">
|
|
||||||
{{ validationErrors.death_date }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 mb-3">
|
|
||||||
<label class="form-label">Lieu de décès</label>
|
|
||||||
<soft-input
|
|
||||||
v-model="editForm.place_of_death"
|
|
||||||
type="text"
|
|
||||||
placeholder="Lieu de décès"
|
|
||||||
:class="{ 'is-invalid': validationErrors.place_of_death }"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-if="validationErrors.place_of_death"
|
|
||||||
class="invalid-feedback"
|
|
||||||
>
|
|
||||||
{{ validationErrors.place_of_death }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 mb-4">
|
|
||||||
<label class="form-label">Notes et observations</label>
|
|
||||||
<textarea
|
|
||||||
v-model="editForm.notes"
|
|
||||||
class="form-control"
|
|
||||||
rows="4"
|
|
||||||
placeholder="Notes complémentaires..."
|
|
||||||
:class="{ 'is-invalid': validationErrors.notes }"
|
|
||||||
></textarea>
|
|
||||||
<div v-if="validationErrors.notes" class="invalid-feedback">
|
|
||||||
{{ validationErrors.notes }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="d-flex gap-2">
|
|
||||||
<soft-button
|
|
||||||
color="primary"
|
|
||||||
variant="gradient"
|
|
||||||
@click="saveChanges"
|
|
||||||
:disabled="isSaving"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="isSaving"
|
|
||||||
class="spinner-border spinner-border-sm me-2"
|
|
||||||
role="status"
|
|
||||||
></span>
|
|
||||||
{{ isSaving ? "Sauvegarde..." : "Sauvegarder" }}
|
|
||||||
</soft-button>
|
|
||||||
<soft-button
|
|
||||||
color="secondary"
|
|
||||||
variant="outline"
|
|
||||||
@click="cancelEdit"
|
|
||||||
:disabled="isSaving"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</soft-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- No data state -->
|
||||||
|
<div v-else class="text-center py-5">
|
||||||
|
<p class="text-muted">Aucune donnée de défunt disponible</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, watch } from "vue";
|
import { ref, computed, watch, onMounted } from "vue";
|
||||||
import { defineProps, defineEmits } from "vue";
|
import { defineProps, defineEmits } from "vue";
|
||||||
import SoftInput from "@/components/SoftInput.vue";
|
import SoftInput from "@/components/SoftInput.vue";
|
||||||
import SoftButton from "@/components/SoftButton.vue";
|
import SoftButton from "@/components/SoftButton.vue";
|
||||||
|
import DocumentManagement from "@/components/molecules/Interventions/DocumentManagement.vue";
|
||||||
|
import { useDocumentAttachmentStore } from "@/stores/documentAttachmentStore";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
deceased: {
|
deceased: {
|
||||||
@ -286,11 +417,20 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update-deceased"]);
|
const emit = defineEmits(["update-deceased", "refresh-deceased"]);
|
||||||
|
|
||||||
const isEditing = ref(false);
|
const isEditing = ref(false);
|
||||||
const isSaving = ref(false);
|
const isSaving = ref(false);
|
||||||
const validationErrors = ref({});
|
const validationErrors = ref({});
|
||||||
|
const activeTab = ref("details");
|
||||||
|
|
||||||
|
// Document attachment store
|
||||||
|
const documentStore = useDocumentAttachmentStore();
|
||||||
|
|
||||||
|
// Computed properties for document attachments
|
||||||
|
const deceasedDocuments = computed(() =>
|
||||||
|
documentStore.getDeceasedAttachments(props.deceased?.id || 0)
|
||||||
|
);
|
||||||
|
|
||||||
const editForm = ref({
|
const editForm = ref({
|
||||||
last_name: "",
|
last_name: "",
|
||||||
@ -380,7 +520,70 @@ const cancelEdit = () => {
|
|||||||
populateEditForm();
|
populateEditForm();
|
||||||
};
|
};
|
||||||
|
|
||||||
// Watch for deceased changes
|
// Document management handlers
|
||||||
|
const handleFilesSelected = (files) => {
|
||||||
|
// Files have been selected, parent can handle validation if needed
|
||||||
|
console.log("Files selected:", files.length);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUploadFiles = async (files) => {
|
||||||
|
if (!props.deceased?.id || !files.length) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await documentStore.uploadAndAttachFiles(
|
||||||
|
files,
|
||||||
|
"App\\Models\\Deceased",
|
||||||
|
props.deceased.id
|
||||||
|
);
|
||||||
|
emit("refresh-deceased");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error uploading files:", error);
|
||||||
|
documentStore.clearError();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteDocument = async (documentId) => {
|
||||||
|
try {
|
||||||
|
await documentStore.detachFile(documentId);
|
||||||
|
emit("refresh-deceased");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting document:", error);
|
||||||
|
documentStore.clearError();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteDocuments = async (documentIds) => {
|
||||||
|
try {
|
||||||
|
await documentStore.detachMultipleFiles({ attachment_ids: documentIds });
|
||||||
|
emit("refresh-deceased");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting documents:", error);
|
||||||
|
documentStore.clearError();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateDocumentLabel = async ({ id, label }) => {
|
||||||
|
try {
|
||||||
|
await documentStore.updateAttachmentMetadata(id, { label });
|
||||||
|
emit("refresh-deceased");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error updating document label:", error);
|
||||||
|
documentStore.clearError();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadDeceasedDocuments = async () => {
|
||||||
|
if (!props.deceased?.id) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await documentStore.fetchDeceasedFiles(props.deceased.id);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error loading document attachments:", error);
|
||||||
|
documentStore.clearError();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Watchers
|
||||||
watch(
|
watch(
|
||||||
() => props.deceased,
|
() => props.deceased,
|
||||||
(newDeceased) => {
|
(newDeceased) => {
|
||||||
@ -391,6 +594,34 @@ watch(
|
|||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => activeTab.value,
|
||||||
|
(newTab) => {
|
||||||
|
// Load document attachments when documents tab is activated
|
||||||
|
if (newTab === "documents" && props.deceased?.id) {
|
||||||
|
loadDeceasedDocuments();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.deceased?.id,
|
||||||
|
(newId) => {
|
||||||
|
// Load document attachments when deceased changes
|
||||||
|
if (newId && activeTab.value === "documents") {
|
||||||
|
loadDeceasedDocuments();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Lifecycle
|
||||||
|
onMounted(() => {
|
||||||
|
// Load document attachments if starting on documents tab
|
||||||
|
if (activeTab.value === "documents" && props.deceased?.id) {
|
||||||
|
loadDeceasedDocuments();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Initialize form when component mounts
|
// Initialize form when component mounts
|
||||||
populateEditForm();
|
populateEditForm();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -57,37 +57,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="horizontal dark my-3 mx-3" />
|
<hr class="horizontal dark my-3 mx-3" />
|
||||||
|
|
||||||
<!-- Key Dates -->
|
|
||||||
<div class="card-body pt-0">
|
|
||||||
<h6 class="text-uppercase text-secondary text-xs font-weight-bolder mb-3">
|
|
||||||
Dates importantes
|
|
||||||
</h6>
|
|
||||||
<div class="timeline timeline-one-side">
|
|
||||||
<div class="timeline-block mb-3">
|
|
||||||
<span class="timeline-step">
|
|
||||||
<i class="fas fa-calendar-alt text-primary"></i>
|
|
||||||
</span>
|
|
||||||
<div class="timeline-content">
|
|
||||||
<h6 class="text-dark text-sm font-weight-bold mb-0">Naissance</h6>
|
|
||||||
<p class="text-secondary text-xs mb-0">
|
|
||||||
{{ formatDate(deceased?.birth_date) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="timeline-block mb-0">
|
|
||||||
<span class="timeline-step">
|
|
||||||
<i class="fas fa-cross text-dark"></i>
|
|
||||||
</span>
|
|
||||||
<div class="timeline-content">
|
|
||||||
<h6 class="text-dark text-sm font-weight-bold mb-0">Décès</h6>
|
|
||||||
<p class="text-secondary text-xs mb-0">
|
|
||||||
{{ formatDate(deceased?.death_date) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user