defunt Doc
This commit is contained in:
Nyavokevin
parent
23bce2abcf
commit
f9b6e5e0f6
@ -1,4 +1,76 @@
|
||||
<template>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
||||
<!-- 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 -->
|
||||
@ -22,15 +94,6 @@
|
||||
</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">
|
||||
@ -70,7 +133,9 @@
|
||||
<h6 class="mb-0 text-sm">
|
||||
{{ formatDate(deceased?.birth_date) }}
|
||||
</h6>
|
||||
<p class="text-xs text-secondary mb-0">Date de naissance</p>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
Date de naissance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -166,7 +231,10 @@
|
||||
placeholder="Nom de famille"
|
||||
:class="{ 'is-invalid': validationErrors.last_name }"
|
||||
/>
|
||||
<div v-if="validationErrors.last_name" class="invalid-feedback">
|
||||
<div
|
||||
v-if="validationErrors.last_name"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
{{ validationErrors.last_name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -179,7 +247,10 @@
|
||||
placeholder="Prénom(s)"
|
||||
:class="{ 'is-invalid': validationErrors.first_name }"
|
||||
/>
|
||||
<div v-if="validationErrors.first_name" class="invalid-feedback">
|
||||
<div
|
||||
v-if="validationErrors.first_name"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
{{ validationErrors.first_name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -191,7 +262,10 @@
|
||||
type="date"
|
||||
:class="{ 'is-invalid': validationErrors.birth_date }"
|
||||
/>
|
||||
<div v-if="validationErrors.birth_date" class="invalid-feedback">
|
||||
<div
|
||||
v-if="validationErrors.birth_date"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
{{ validationErrors.birth_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -203,7 +277,10 @@
|
||||
type="date"
|
||||
:class="{ 'is-invalid': validationErrors.death_date }"
|
||||
/>
|
||||
<div v-if="validationErrors.death_date" class="invalid-feedback">
|
||||
<div
|
||||
v-if="validationErrors.death_date"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
{{ validationErrors.death_date }}
|
||||
</div>
|
||||
</div>
|
||||
@ -267,13 +344,67 @@
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- 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 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