112 lines
2.8 KiB
Vue
112 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<h6 class="mb-3">Suivi de la Facture</h6>
|
|
<div class="timeline-scrollable">
|
|
<div class="timeline timeline-one-side">
|
|
<div
|
|
v-for="(item, index) in history"
|
|
:key="index"
|
|
class="timeline-block mb-3"
|
|
>
|
|
<span class="timeline-step">
|
|
<i :class="getStatusIcon(item.new_status)"></i>
|
|
</span>
|
|
<div class="timeline-content">
|
|
<h6 class="text-dark text-sm font-weight-bold mb-0">
|
|
{{ getStatusLabel(item.new_status) }}
|
|
</h6>
|
|
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
|
|
{{ formatDate(item.changed_at) }}
|
|
<span v-if="item.changed_by">par {{ item.changed_by }}</span>
|
|
</p>
|
|
<p v-if="item.comment" class="text-sm mt-2 mb-0">
|
|
{{ item.comment }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="history.length === 0" class="text-sm text-secondary">
|
|
Aucun historique disponible.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from "vue";
|
|
|
|
const props = defineProps({
|
|
history: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return "-";
|
|
const date = new Date(dateString);
|
|
const options = {
|
|
day: "numeric",
|
|
month: "short",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
};
|
|
return date.toLocaleDateString("fr-FR", options);
|
|
};
|
|
|
|
const getStatusIcon = (status) => {
|
|
const map = {
|
|
brouillon: "ni ni-bell-55 text-secondary",
|
|
emise: "ni ni-send text-info",
|
|
envoyee: "ni ni-email-83 text-info",
|
|
partiellement_payee: "ni ni-money-coins text-warning",
|
|
payee: "ni ni-check-bold text-success text-gradient",
|
|
echue: "ni ni-time-alarm text-danger",
|
|
annulee: "ni ni-fat-remove text-danger text-gradient",
|
|
avoir: "ni ni-archive-2 text-dark",
|
|
};
|
|
return map[status] || "ni ni-bell-55 text-secondary";
|
|
};
|
|
|
|
const getStatusLabel = (status) => {
|
|
const labels = {
|
|
brouillon: "Facture créée (Brouillon)",
|
|
emise: "Facture émise",
|
|
envoyee: "Facture envoyée",
|
|
partiellement_payee: "Partiellement payée",
|
|
payee: "Facture payée",
|
|
echue: "Facture échue",
|
|
annulee: "Facture annulée",
|
|
avoir: "Avoir généré",
|
|
};
|
|
return labels[status] || status;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.timeline-scrollable {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.timeline-scrollable::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.timeline-scrollable::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.timeline-scrollable::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.timeline-scrollable::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
</style>
|