defunt Doc
This commit is contained in:
Nyavokevin
parent
23bce2abcf
commit
f9b6e5e0f6
@ -1,279 +1,410 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<!-- Header with Title and Actions -->
|
||||
<div class="row align-items-center mb-4">
|
||||
<div class="col">
|
||||
<h5 class="mb-0">Informations du défunt</h5>
|
||||
<p class="text-sm text-secondary mb-0">
|
||||
Détails et informations personnelles
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<soft-button
|
||||
color="primary"
|
||||
variant="gradient"
|
||||
class="btn-sm"
|
||||
@click="isEditing = !isEditing"
|
||||
<div>
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="text-center py-5">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Chargement...</span>
|
||||
</div>
|
||||
<p class="mt-3 text-muted">Chargement des détails du défunt...</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<template v-else-if="deceased">
|
||||
<!-- Tab Navigation -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<ul
|
||||
class="nav nav-tabs card-header-tabs"
|
||||
id="defuntTabs"
|
||||
role="tablist"
|
||||
>
|
||||
<i class="fas fa-edit me-2"></i>
|
||||
{{ isEditing ? "Annuler" : "Modifier" }}
|
||||
</soft-button>
|
||||
<li class="nav-item" role="presentation">
|
||||
<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>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="text-center p-4">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Chargement...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div v-else>
|
||||
<!-- 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>
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content mt-4">
|
||||
<!-- Details Tab -->
|
||||
<div v-if="activeTab === 'details'" class="tab-pane fade show active">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<!-- Header with Title and Actions -->
|
||||
<div class="row align-items-center mb-4">
|
||||
<div class="col">
|
||||
<h5 class="mb-0">Informations du défunt</h5>
|
||||
<p class="text-sm text-secondary mb-0">
|
||||
Détails et informations personnelles
|
||||
</p>
|
||||
</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="avatar avatar-lg bg-gradient-success rounded-circle d-flex align-items-center justify-content-center"
|
||||
<soft-button
|
||||
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 class="col">
|
||||
<h3 class="mb-0">{{ calculateAgeAtDeath }}</h3>
|
||||
<p class="text-sm text-secondary mb-0">Âge au décès</p>
|
||||
|
||||
<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="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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Documents Tab -->
|
||||
<div v-if="activeTab === 'documents'" class="tab-pane fade show active">
|
||||
<DocumentManagement
|
||||
:documents="deceasedDocuments"
|
||||
:loading="documentStore.isLoading"
|
||||
:error="documentStore.getError"
|
||||
@files-selected="handleFilesSelected"
|
||||
@upload-files="handleUploadFiles"
|
||||
@delete-document="handleDeleteDocument"
|
||||
@delete-documents="handleDeleteDocuments"
|
||||
@update-document-label="handleUpdateDocumentLabel"
|
||||
@retry="loadDeceasedDocuments"
|
||||
/>
|
||||
</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 }}
|
||||
<!-- Interventions Tab -->
|
||||
<div
|
||||
v-if="activeTab === 'interventions'"
|
||||
class="tab-pane fade show active"
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-header pb-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<h6 class="mb-0">
|
||||
Interventions ({{ deceased?.interventions_count || 0 }})
|
||||
</h6>
|
||||
</div>
|
||||
</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 class="card-body">
|
||||
<div class="text-center py-5">
|
||||
<div class="avatar avatar-xl mb-3">
|
||||
<div class="avatar-title bg-gradient-info text-white h5 mb-0">
|
||||
<i class="fas fa-clipboard-list"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="text-sm text-muted">Liste des interventions</h6>
|
||||
<p class="text-xs text-muted">
|
||||
Interface de gestion des interventions à implémenter...
|
||||
</p>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
import SoftInput from "@/components/SoftInput.vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
import DocumentManagement from "@/components/molecules/Interventions/DocumentManagement.vue";
|
||||
import { useDocumentAttachmentStore } from "@/stores/documentAttachmentStore";
|
||||
|
||||
const props = defineProps({
|
||||
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 isSaving = ref(false);
|
||||
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({
|
||||
last_name: "",
|
||||
@ -380,7 +520,70 @@ const cancelEdit = () => {
|
||||
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(
|
||||
() => props.deceased,
|
||||
(newDeceased) => {
|
||||
@ -391,6 +594,34 @@ watch(
|
||||
{ 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
|
||||
populateEditForm();
|
||||
</script>
|
||||
|
||||
@ -57,37 +57,6 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user