Nouvel style planning
This commit is contained in:
kevin
parent
31090d12ba
commit
094c7a0980
@ -0,0 +1,175 @@
|
||||
<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>
|
||||
<!-- 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">
|
||||
<!-- Date Navigator -->
|
||||
<planning-date-navigator
|
||||
:current-date="currentDate"
|
||||
@prev-week="$emit('prev-week')"
|
||||
@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>
|
||||
<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>
|
||||
<span class="d-none d-lg-inline">Nouvelle demande</span>
|
||||
<span class="d-lg-none">Nouveau</span>
|
||||
</planning-action-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #view-toggles>
|
||||
<planning-view-toggles v-model:activeView="localActiveView" />
|
||||
</template>
|
||||
|
||||
<template #legend>
|
||||
<!-- <planning-legend /> -->
|
||||
</template>
|
||||
|
||||
<template #sidebar>
|
||||
<!-- <planning-collaborators-sidebar :count="collaborators.length">
|
||||
<div v-for="collab in collaborators" :key="collab.id" class="collaborator-item">
|
||||
{{ collab.name }}
|
||||
</div>
|
||||
</planning-collaborators-sidebar> -->
|
||||
</template>
|
||||
|
||||
<template #calendar-grid>
|
||||
<!-- Grille View -->
|
||||
<planning-week-grid
|
||||
v-if="localActiveView === 'grille'"
|
||||
:start-date="currentDate"
|
||||
:interventions="interventions"
|
||||
@cell-click="handleCellClick"
|
||||
/>
|
||||
|
||||
<!-- List View -->
|
||||
<planning-list
|
||||
v-if="localActiveView === 'liste'"
|
||||
:interventions="interventions"
|
||||
@edit="handleEdit"
|
||||
/>
|
||||
|
||||
<!-- Kanban View -->
|
||||
<planning-kanban
|
||||
v-if="localActiveView === 'kanban'"
|
||||
:interventions="interventions"
|
||||
@edit="handleEdit"
|
||||
@update-status="handleUpdateStatus"
|
||||
/>
|
||||
</template>
|
||||
</planning-template>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
import PlanningWeekGrid from "@/components/molecules/Planning/PlanningWeekGrid.vue";
|
||||
import PlanningList from "@/components/molecules/Planning/PlanningList.vue";
|
||||
import PlanningKanban from "@/components/molecules/Planning/PlanningKanban.vue";
|
||||
import PlanningDateNavigator from "@/components/molecules/Planning/PlanningDateNavigator.vue";
|
||||
|
||||
const props = defineProps({
|
||||
interventionCount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
collaborators: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
currentDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
},
|
||||
activeView: {
|
||||
type: String,
|
||||
default: "grille"
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
"refresh",
|
||||
"new-request",
|
||||
"cell-click",
|
||||
"update:activeView",
|
||||
"prev-week",
|
||||
"next-week",
|
||||
"edit-intervention",
|
||||
"update-status"
|
||||
]);
|
||||
|
||||
const localActiveView = ref(props.activeView);
|
||||
|
||||
watch(() => props.activeView, (newVal) => {
|
||||
localActiveView.value = newVal;
|
||||
});
|
||||
|
||||
watch(() => localActiveView.value, (newVal) => {
|
||||
emit("update:activeView", newVal);
|
||||
});
|
||||
|
||||
const handleCellClick = (info) => {
|
||||
emit("cell-click", info);
|
||||
};
|
||||
|
||||
const handleEdit = (intervention) => {
|
||||
emit("edit-intervention", intervention);
|
||||
};
|
||||
|
||||
const handleUpdateStatus = (payload) => {
|
||||
emit("update-status", 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;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<button
|
||||
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'
|
||||
]"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<slot name="icon"></slot>
|
||||
<span :class="{ 'd-none d-md-inline': hideTextOnMobile }">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
|
||||
defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
default: "secondary" // primary or secondary
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "md"
|
||||
},
|
||||
hideTextOnMobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
defineEmits(["click"]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-primary-gradient {
|
||||
background: linear-gradient(to right, #2563eb, #4f46e5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary-gradient:hover {
|
||||
background: linear-gradient(to right, #1d4ed8, #4338ca);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
|
||||
}
|
||||
|
||||
.btn-outline-indigo {
|
||||
background-color: white;
|
||||
border: 1px solid #e0e7ff !important;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.btn-outline-indigo:hover {
|
||||
background-color: #f5f7ff;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
|
||||
<!-- Toggle bit for mobile if needed, though we handle collapse in template -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from "vue";
|
||||
|
||||
defineProps({
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isCollapsed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-card {
|
||||
border-radius: 0.75rem;
|
||||
background-color: white;
|
||||
border: 2px solid #e0e7ff; /* border-indigo-200 */
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-indigo-600 {
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.sidebar-card.collapsed {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<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"
|
||||
@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">
|
||||
{{ dateRangeDisplay }}
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md"
|
||||
@click="$emit('next-week')"
|
||||
>
|
||||
<i class="fas fa-chevron-right text-secondary text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
currentDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
}
|
||||
});
|
||||
|
||||
defineEmits(["prev-week", "next-week"]);
|
||||
|
||||
const dateRangeDisplay = computed(() => {
|
||||
const current = new Date(props.currentDate);
|
||||
const dayOfWeek = current.getDay(); // 0 is Sunday
|
||||
|
||||
// Calculate Monday of current week
|
||||
const diff = current.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
|
||||
const monday = new Date(current);
|
||||
monday.setDate(diff);
|
||||
|
||||
// Calculate Sunday of current week
|
||||
const sunday = new Date(monday);
|
||||
sunday.setDate(monday.getDate() + 6);
|
||||
|
||||
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' });
|
||||
|
||||
return `${startStr} - ${endStr}`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.min-w-140 {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.hover\:bg-gray-100:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="planning-kanban-container mt-3">
|
||||
<div class="py-2 min-vh-100 d-inline-flex" style="overflow-x: auto">
|
||||
<div id="planningKanban"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/* eslint-disable */
|
||||
import { onMounted, watch, defineProps, defineEmits } from "vue";
|
||||
import "jkanban/dist/jkanban.min.js";
|
||||
import "jkanban/dist/jkanban.min.css";
|
||||
|
||||
const props = defineProps({
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["edit", "update-status"]);
|
||||
|
||||
let kanbanInstance = null;
|
||||
|
||||
const columns = [
|
||||
{ id: 'todo', title: 'À planifier', status: 'En attente', colorClass: 'warning' },
|
||||
{ id: 'planned', title: 'Confirmé', status: 'Confirmé', colorClass: 'info' },
|
||||
{ id: 'in-progress', title: 'En cours', status: 'En cours', colorClass: 'primary' },
|
||||
{ id: 'done', title: 'Terminé', status: 'Terminé', colorClass: 'success' }
|
||||
];
|
||||
|
||||
const getBoards = () => {
|
||||
return columns.map(col => ({
|
||||
id: col.id,
|
||||
title: col.title,
|
||||
class: col.colorClass, // custom class for header styling if needed
|
||||
item: props.interventions
|
||||
.filter(i => i.status === col.status)
|
||||
.map(i => ({
|
||||
id: i.id.toString(),
|
||||
title: buildCardHtml(i),
|
||||
originalData: i // Store original data for easy access
|
||||
}))
|
||||
}));
|
||||
};
|
||||
|
||||
const buildCardHtml = (item) => {
|
||||
// Helpers
|
||||
const formatTime = (d) => new Date(d).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
||||
const formatDate = (d) => new Date(d).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
|
||||
const getInitials = (n) => n ? n.split(' ').map(s => s[0]).join('').substring(0, 2).toUpperCase() : "?";
|
||||
|
||||
const typeColors = {
|
||||
'Soin': '#3b82f6',
|
||||
'Transport': '#10b981',
|
||||
'Mise en bière': '#f59e0b',
|
||||
'Cérémonie': '#8b5cf6'
|
||||
};
|
||||
const typeColor = typeColors[item.type] || '#6b7280';
|
||||
|
||||
return `
|
||||
<div class="card-content">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="badge badge-sm bg-gradient-light text-dark border py-1">${item.type}</span>
|
||||
<span class="text-xs font-weight-bold text-secondary">${formatTime(item.date)}</span>
|
||||
</div>
|
||||
<h6 class="mb-1 text-sm font-weight-bold">${item.deceased || 'Non spécifié'}</h6>
|
||||
<p class="text-xs text-secondary mb-3 text-truncate">${item.client || '-'}</p>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-between border-top pt-2">
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<i class="far fa-calendar text-xs text-secondary"></i>
|
||||
<span class="text-xs text-secondary">${formatDate(item.date)}</span>
|
||||
</div>
|
||||
<div class="avatar avatar-xs rounded-circle bg-gray-200 text-xs d-flex align-items-center justify-content-center" title="${item.collaborator}">
|
||||
${getInitials(item.collaborator)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-left-strip" style="background-color: ${typeColor}; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;"></div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
const initKanban = () => {
|
||||
const boards = getBoards();
|
||||
|
||||
// Clean up existing if any (jkanban doesn't have a destroy method easily accessible, but we can empty container)
|
||||
const container = document.getElementById("planningKanban");
|
||||
if (container) container.innerHTML = "";
|
||||
|
||||
kanbanInstance = new jKanban({
|
||||
element: "#planningKanban",
|
||||
gutter: "10px",
|
||||
widthBoard: "300px",
|
||||
responsivePercentage: false,
|
||||
dragItems: true,
|
||||
boards: boards,
|
||||
click: (el) => {
|
||||
const id = el.getAttribute("data-eid");
|
||||
const item = props.interventions.find(i => i.id.toString() === id);
|
||||
if (item) {
|
||||
emit("edit", item);
|
||||
}
|
||||
},
|
||||
dropEl: (el, target, source, sibling) => {
|
||||
const id = el.getAttribute("data-eid");
|
||||
const targetBoardId = target.parentElement.getAttribute("data-id");
|
||||
|
||||
// Find new status based on target board ID
|
||||
const targetCol = columns.find(c => c.id === targetBoardId);
|
||||
if (targetCol) {
|
||||
emit("update-status", { id, status: targetCol.status });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Apply custom styling adjustments after render
|
||||
applyCustomStyles();
|
||||
};
|
||||
|
||||
const applyCustomStyles = () => {
|
||||
// Helper to add Bootstrap classes or custom styles to jKanban generated elements
|
||||
const headers = document.querySelectorAll('.kanban-board-header');
|
||||
headers.forEach(header => {
|
||||
header.classList.add('bg-transparent', 'border-0', 'pb-2');
|
||||
// Add dot
|
||||
const boardId = header.parentElement.getAttribute('data-id');
|
||||
const col = columns.find(c => c.id === boardId);
|
||||
if(col) {
|
||||
// Logic to inject the dot and count if we want to replicate the exact header design
|
||||
// Note: jKanban header usually just contains title text. We might want to customize title HTML in getBoards().
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// Give DOM a moment
|
||||
setTimeout(() => {
|
||||
initKanban();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
watch(() => props.interventions, () => {
|
||||
// Re-init on data change
|
||||
// Optimization: use kanbanInstance methods to add/remove, but full re-init is safer for consistency for now
|
||||
initKanban();
|
||||
}, { deep: true });
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Global styles for jKanban overrides */
|
||||
.kanban-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.kanban-board-header {
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.kanban-item {
|
||||
background: white !important;
|
||||
border-radius: 0.75rem !important; /* rounded-xl */
|
||||
margin-bottom: 10px !important;
|
||||
padding: 1rem !important;
|
||||
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
|
||||
border: 0 !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kanban-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.kanban-drag {
|
||||
min-height: 500px;
|
||||
background-color: #f1f5f9; /* slate-100 */
|
||||
border-radius: 0.75rem;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="card border-0 shadow-md rounded-xl">
|
||||
<div class="card-header bg-white border-0 pb-0">
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<h3 class="text-sm font-semibold mb-0">🏖️ Légende congés</h3>
|
||||
</div>
|
||||
</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">
|
||||
<span class="text-sm">{{ item.emoji }}</span>
|
||||
<div class="legend-bar rounded-pill" :style="{ backgroundColor: item.color }"></div>
|
||||
<span class="text-xs text-secondary">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const legend = [
|
||||
{ emoji: "🏖️", label: "Congé payé", color: "#3b82f6" },
|
||||
{ emoji: "🏥", label: "Maladie", color: "#ef4444" },
|
||||
{ emoji: "📚", label: "Formation", color: "#8b5cf6" },
|
||||
{ emoji: "💼", label: "Sans solde", color: "#6b7280" },
|
||||
{ emoji: "🚑", label: "Accident travail", color: "#dc2626" }
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
border-radius: 0.75rem;
|
||||
background-color: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.legend-bar {
|
||||
width: 2rem;
|
||||
height: 0.125rem;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="planning-list card border-0 shadow-sm rounded-xl">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<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>
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
<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>
|
||||
</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>
|
||||
{{ 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>
|
||||
</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">
|
||||
{{ getInitials(intervention.collaborator) }}
|
||||
</div>
|
||||
<span class="text-sm font-weight-bold text-secondary">{{ intervention.collaborator }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<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)">
|
||||
<i class="fas fa-edit text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
|
||||
defineProps({
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
defineEmits(["edit"]);
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return "-";
|
||||
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' });
|
||||
};
|
||||
|
||||
const getInitials = (name) => {
|
||||
if (!name) return "?";
|
||||
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'
|
||||
};
|
||||
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'
|
||||
};
|
||||
return map[status] || 'bg-gradient-secondary';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-xxs {
|
||||
font-size: 0.65rem !important;
|
||||
}
|
||||
|
||||
.width-8-px {
|
||||
width: 8px;
|
||||
}
|
||||
.height-8-px {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.hover-row:hover {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="d-flex gap-2">
|
||||
<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'
|
||||
]"
|
||||
@click="$emit('update:activeView', view.id)"
|
||||
>
|
||||
<i :class="view.icon"></i>
|
||||
<span class="d-none d-sm-inline">{{ view.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
|
||||
defineProps({
|
||||
activeView: {
|
||||
type: String,
|
||||
default: "grille"
|
||||
}
|
||||
});
|
||||
|
||||
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" }
|
||||
];
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,158 @@
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, defineProps, defineEmits } from "vue";
|
||||
import { Calendar } from "@fullcalendar/core";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import frLocale from "@fullcalendar/core/locales/fr";
|
||||
|
||||
const props = defineProps({
|
||||
startDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
},
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["cell-click", "edit"]);
|
||||
|
||||
const calendarEl = ref(null);
|
||||
let calendar = null;
|
||||
|
||||
const initializeCalendar = () => {
|
||||
if (calendar) {
|
||||
calendar.destroy();
|
||||
}
|
||||
|
||||
if (!calendarEl.value) return;
|
||||
|
||||
calendar = new Calendar(calendarEl.value, {
|
||||
plugins: [timeGridPlugin, interactionPlugin],
|
||||
initialView: "timeGridWeek",
|
||||
locale: frLocale,
|
||||
headerToolbar: false, // Hidden header, controlled by parent navigator
|
||||
initialDate: props.startDate,
|
||||
allDaySlot: false,
|
||||
slotMinTime: "07:00:00",
|
||||
slotMaxTime: "21:00:00",
|
||||
height: "auto",
|
||||
contentHeight: "auto",
|
||||
expandRows: true,
|
||||
stickyHeaderDates: true,
|
||||
dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'short' }, // "Lundi 12 janv."
|
||||
events: mapEvents(props.interventions),
|
||||
eventClick: (info) => {
|
||||
const originalEvent = info.event.extendedProps.originalData;
|
||||
emit("edit", originalEvent);
|
||||
},
|
||||
dateClick: (info) => {
|
||||
// timeGrid view dateClick gives date with time
|
||||
emit("cell-click", { date: info.date });
|
||||
},
|
||||
// Styling customization via class names injection if needed
|
||||
eventClassNames: (arg) => {
|
||||
return ['shadow-sm', 'border-0'];
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
};
|
||||
|
||||
const mapEvents = (interventions) => {
|
||||
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'
|
||||
};
|
||||
|
||||
// Default duration 1 hour if not specified
|
||||
const start = new Date(i.date);
|
||||
const end = new Date(start.getTime() + 60 * 60 * 1000);
|
||||
|
||||
return {
|
||||
id: i.id,
|
||||
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',
|
||||
extendedProps: {
|
||||
originalData: i
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initializeCalendar();
|
||||
});
|
||||
|
||||
watch(() => props.startDate, (newDate) => {
|
||||
if (calendar) {
|
||||
calendar.gotoDate(newDate);
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.interventions, (newInterventions) => {
|
||||
if (calendar) {
|
||||
calendar.removeAllEvents();
|
||||
calendar.addEventSource(mapEvents(newInterventions));
|
||||
}
|
||||
}, { deep: true });
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.calendar-grid-container {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
/* FullCalendar Custom Overrides to match Soft UI */
|
||||
:deep(.fc-col-header-cell) {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #67748e;
|
||||
padding-bottom: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
:deep(.fc-timegrid-slot) {
|
||||
height: 3rem; /* Taller slots */
|
||||
}
|
||||
|
||||
:deep(.fc-timegrid-slot-label) {
|
||||
font-size: 0.75rem;
|
||||
color: #8392ab;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.fc-scrollgrid) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.fc td), :deep(.fc th) {
|
||||
border-color: #e9ecef;
|
||||
}
|
||||
|
||||
/* Today highlight */
|
||||
:deep(.fc-day-today) {
|
||||
background-color: rgba(233, 236, 239, 0.3) !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,516 +0,0 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<div class="loading-spinner">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Chargement...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loading-content">
|
||||
<!-- Skeleton Rows -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-flush">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<th>Nom</th>
|
||||
<th>Catégorie parent</th>
|
||||
<th>Description</th>
|
||||
<th>Statut</th>
|
||||
<th>Produits</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="i in skeletonRows" :key="i" class="skeleton-row">
|
||||
<!-- Code Column Skeleton -->
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="skeleton-avatar"></div>
|
||||
<div class="skeleton-text medium ms-2"></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Name Column Skeleton -->
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="skeleton-avatar"></div>
|
||||
<div class="skeleton-text long ms-2"></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Parent Category Column Skeleton -->
|
||||
<td>
|
||||
<div class="skeleton-text medium"></div>
|
||||
</td>
|
||||
|
||||
<!-- Description Column Skeleton -->
|
||||
<td>
|
||||
<div class="skeleton-text very-long"></div>
|
||||
</td>
|
||||
|
||||
<!-- Status Column Skeleton -->
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="skeleton-icon"></div>
|
||||
<div class="skeleton-text short ms-2"></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Products Count Column Skeleton -->
|
||||
<td>
|
||||
<div class="skeleton-text short"></div>
|
||||
</td>
|
||||
|
||||
<!-- Actions Column Skeleton -->
|
||||
<td>
|
||||
<div class="d-flex gap-1">
|
||||
<div class="skeleton-icon small"></div>
|
||||
<div class="skeleton-icon small"></div>
|
||||
<div class="skeleton-icon small"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data State -->
|
||||
<div v-else class="table-responsive">
|
||||
<table id="product-category-list" class="table table-flush">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<th>Nom</th>
|
||||
<th>Catégorie parent</th>
|
||||
<th>Description</th>
|
||||
<th>Statut</th>
|
||||
<th>Produits</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="category in data" :key="category.id">
|
||||
<!-- Code Column -->
|
||||
<td class="font-weight-bold">
|
||||
<div class="d-flex align-items-center">
|
||||
<span>{{ category.code }}</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Name Column -->
|
||||
<td class="font-weight-bold">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<div class="text-sm font-weight-bold">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
<div class="text-xs text-muted">ID: {{ category.id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Parent Category Column -->
|
||||
<td class="text-xs font-weight-bold">
|
||||
<div v-if="category.parent" class="d-flex align-items-center">
|
||||
<soft-button
|
||||
color="info"
|
||||
variant="outline"
|
||||
class="btn-icon-only btn-rounded mb-0 me-2 btn-sm d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<i class="fas fa-folder" aria-hidden="true"></i>
|
||||
</soft-button>
|
||||
<span>{{ category.parent.name }}</span>
|
||||
</div>
|
||||
<div v-else class="text-muted">
|
||||
<soft-button
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
class="btn-icon-only btn-rounded mb-0 me-2 btn-sm d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<i class="fas fa-folder-open" aria-hidden="true"></i>
|
||||
</soft-button>
|
||||
Catégorie racine
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Description Column -->
|
||||
<td class="text-xs font-weight-bold">
|
||||
<div class="description-cell">
|
||||
<span
|
||||
v-if="category.description"
|
||||
class="text-truncate d-inline-block"
|
||||
style="max-width: 200px"
|
||||
>
|
||||
{{ category.description }}
|
||||
</span>
|
||||
<span v-else class="text-muted">Aucune description</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Status Column -->
|
||||
<td class="text-xs font-weight-bold">
|
||||
<div class="d-flex flex-column">
|
||||
<!-- Status Badge -->
|
||||
<span :class="getStatusClass(category)">
|
||||
<i
|
||||
:class="category.active ? 'fas fa-check me-1' : 'fas fa-times me-1'"
|
||||
></i>
|
||||
{{ category.active ? "Active" : "Inactive" }}
|
||||
</span>
|
||||
|
||||
<!-- Children Badge -->
|
||||
<span
|
||||
v-if="category.has_children"
|
||||
class="badge badge-info mt-1"
|
||||
>
|
||||
<i class="fas fa-sitemap me-1"></i>
|
||||
{{ category.children_count || 0 }} enfants
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Products Count Column -->
|
||||
<td class="text-xs font-weight-bold">
|
||||
<div class="d-flex align-items-center">
|
||||
<soft-badge
|
||||
:color="category.has_products ? 'success' : 'secondary'"
|
||||
class="me-2"
|
||||
>
|
||||
{{ category.products_count || 0 }}
|
||||
</soft-badge>
|
||||
<span class="text-muted">produits</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<!-- View Button -->
|
||||
<soft-button
|
||||
color="info"
|
||||
variant="outline"
|
||||
title="Voir la catégorie"
|
||||
:data-category-id="category.id"
|
||||
class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
|
||||
@click="emit('view', category)"
|
||||
>
|
||||
<i class="fas fa-eye" aria-hidden="true"></i>
|
||||
</soft-button>
|
||||
|
||||
<!-- Edit Button -->
|
||||
<soft-button
|
||||
color="warning"
|
||||
variant="outline"
|
||||
title="Modifier la catégorie"
|
||||
:data-category-id="category.id"
|
||||
class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
|
||||
@click="emit('edit', category)"
|
||||
>
|
||||
<i class="fas fa-edit" aria-hidden="true"></i>
|
||||
</soft-button>
|
||||
|
||||
<!-- Delete Button -->
|
||||
<soft-button
|
||||
color="danger"
|
||||
variant="outline"
|
||||
title="Supprimer la catégorie"
|
||||
:data-category-id="category.id"
|
||||
class="btn-icon-only btn-rounded mb-0 btn-sm d-flex align-items-center justify-content-center"
|
||||
@click="emit('delete', category)"
|
||||
>
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</soft-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="!loading && data.length === 0" class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-tags fa-3x text-muted"></i>
|
||||
</div>
|
||||
<h5 class="empty-title">Aucune catégorie de produit trouvée</h5>
|
||||
<p class="empty-text text-muted">
|
||||
Aucune catégorie de produit à afficher pour le moment.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, onUnmounted } from "vue";
|
||||
import { DataTable } from "simple-datatables";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
import SoftAvatar from "@/components/SoftAvatar.vue";
|
||||
import SoftBadge from "@/components/SoftBadge.vue";
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
|
||||
const emit = defineEmits(["view", "edit", "delete"]);
|
||||
|
||||
// Sample avatar images for categories
|
||||
import img1 from "@/assets/img/team-2.jpg";
|
||||
import img2 from "@/assets/img/team-1.jpg";
|
||||
import img3 from "@/assets/img/team-3.jpg";
|
||||
import img4 from "@/assets/img/team-4.jpg";
|
||||
import img5 from "@/assets/img/team-5.jpg";
|
||||
import img6 from "@/assets/img/ivana-squares.jpg";
|
||||
|
||||
const avatarImages = [img1, img2, img3, img4, img5, img6];
|
||||
|
||||
// Reactive data
|
||||
const dataTableInstance = ref(null);
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
skeletonRows: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
});
|
||||
|
||||
// Methods
|
||||
const getRandomAvatar = () => {
|
||||
const randomIndex = Math.floor(Math.random() * avatarImages.length);
|
||||
return avatarImages[randomIndex];
|
||||
};
|
||||
|
||||
const getStatusClass = (category) => {
|
||||
return category.active ? "badge badge-success" : "badge badge-danger";
|
||||
};
|
||||
|
||||
const initializeDataTable = () => {
|
||||
// Destroy existing instance if it exists
|
||||
if (dataTableInstance.value) {
|
||||
dataTableInstance.value.destroy();
|
||||
dataTableInstance.value = null;
|
||||
}
|
||||
|
||||
const dataTableEl = document.getElementById("product-category-list");
|
||||
if (dataTableEl) {
|
||||
dataTableInstance.value = new DataTable(dataTableEl, {
|
||||
searchable: true,
|
||||
fixedHeight: true,
|
||||
perPage: 10,
|
||||
perPageSelect: [5, 10, 15, 20],
|
||||
});
|
||||
|
||||
dataTableEl.addEventListener("click", handleTableClick);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTableClick = (event) => {
|
||||
const button = event.target.closest("button");
|
||||
if (!button) return;
|
||||
const categoryId = button.getAttribute("data-category-id");
|
||||
|
||||
if (
|
||||
button.title === "Supprimer la catégorie" ||
|
||||
button.querySelector(".fa-trash")
|
||||
) {
|
||||
emit("delete", categoryId);
|
||||
} else if (
|
||||
button.title === "Modifier la catégorie" ||
|
||||
button.querySelector(".fa-edit")
|
||||
) {
|
||||
emit("edit", categoryId);
|
||||
} else if (
|
||||
button.title === "Voir la catégorie" ||
|
||||
button.querySelector(".fa-eye")
|
||||
) {
|
||||
emit("view", categoryId);
|
||||
}
|
||||
};
|
||||
|
||||
// Watch for data changes to reinitialize datatable
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!props.loading) {
|
||||
// Small delay to ensure DOM is updated
|
||||
setTimeout(() => {
|
||||
initializeDataTable();
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
const dataTableEl = document.getElementById("product-category-list");
|
||||
if (dataTableEl) {
|
||||
dataTableEl.removeEventListener("click", handleTableClick);
|
||||
}
|
||||
if (dataTableInstance.value) {
|
||||
dataTableInstance.value.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize data
|
||||
onMounted(() => {
|
||||
if (!props.loading && props.data.length > 0) {
|
||||
initializeDataTable();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.skeleton-row {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
.skeleton-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
border-radius: 4px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.skeleton-text.short {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.skeleton-text.medium {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.skeleton-text.long {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.skeleton-text.very-long {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.description-cell {
|
||||
max-width: 200px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.loading-spinner {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.skeleton-text.very-long {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.skeleton-text.long {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.skeleton-text.medium {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-icon.small {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="planning-container p-2 p-md-4">
|
||||
<div class="container-max mx-auto">
|
||||
<!-- 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">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
|
||||
<!-- View Toggles -->
|
||||
<div class="d-flex gap-2 mb-4 overflow-auto pb-2">
|
||||
<slot name="view-toggles"></slot>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="row g-4">
|
||||
<!-- Sidebar & Legend Column (Left on desktop) -->
|
||||
<!-- <div class="col-12 col-xl-3 order-2 order-xl-1">
|
||||
<div class="sticky-top" style="top: 2rem; z-index: 10;">
|
||||
<div class="mb-4">
|
||||
<slot name="legend"></slot>
|
||||
</div>
|
||||
<slot name="sidebar"></slot>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Calendar Grid Column (Right on desktop) -->
|
||||
<div class="col-12 col-xl-12 order-1 order-xl-2">
|
||||
<slot name="calendar-grid"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Template layout for Planning page
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.planning-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f0f7ff 0%, #eef2ff 50%, #f5f3ff 100%);
|
||||
}
|
||||
|
||||
.container-max {
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for view toggles on mobile */
|
||||
.overflow-auto::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
.overflow-auto::-webkit-scrollbar-thumb {
|
||||
background: #e2e8f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.sticky-top {
|
||||
max-height: calc(100vh - 4rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -120,6 +120,14 @@ export default {
|
||||
miniIcon: "A",
|
||||
route: { name: "Agenda" },
|
||||
},
|
||||
{
|
||||
id: "planning",
|
||||
type: "single",
|
||||
text: "Planning",
|
||||
icon: "Office",
|
||||
miniIcon: "P",
|
||||
route: { name: "Planning" },
|
||||
},
|
||||
{
|
||||
id: "courriel",
|
||||
type: "single",
|
||||
|
||||
@ -401,6 +401,12 @@ const routes = [
|
||||
name: "Agenda",
|
||||
component: () => import("@/views/pages/Agenda.vue"),
|
||||
},
|
||||
// Planning
|
||||
{
|
||||
path: "/planning",
|
||||
name: "Planning",
|
||||
component: () => import("@/views/pages/Planning.vue"),
|
||||
},
|
||||
// Courriel
|
||||
{
|
||||
path: "/courriel",
|
||||
|
||||
150
thanasoft-front/src/views/pages/Planning.vue
Normal file
150
thanasoft-front/src/views/pages/Planning.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<planning-presentation
|
||||
:intervention-count="interventions.length"
|
||||
:collaborators="collaborators"
|
||||
:interventions="interventions"
|
||||
:current-date="currentDate"
|
||||
v-model:activeView="activeView"
|
||||
@refresh="handleRefresh"
|
||||
@new-request="handleNewRequest"
|
||||
@cell-click="handleCellClick"
|
||||
@prev-week="handlePrevWeek"
|
||||
@next-week="handleNextWeek"
|
||||
@edit-intervention="handleEditIntervention"
|
||||
@update-status="handleUpdateStatus"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import PlanningPresentation from "@/components/Organism/Planning/PlanningPresentation.vue";
|
||||
|
||||
// State
|
||||
const interventions = ref([]);
|
||||
const collaborators = ref([]);
|
||||
const currentDate = ref(new Date());
|
||||
const activeView = ref("grille");
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
// Methods
|
||||
const fetchData = async () => {
|
||||
// Mock data for demonstration
|
||||
collaborators.value = [
|
||||
{ id: 1, name: "Jean Dupont" },
|
||||
{ id: 2, name: "Marie Curie" },
|
||||
{ id: 3, name: "Lucas Martin" }
|
||||
];
|
||||
|
||||
// Generate some random interventions around current date
|
||||
const baseDate = new Date(currentDate.value);
|
||||
const startOfWeek = getMonday(baseDate);
|
||||
|
||||
interventions.value = [
|
||||
{
|
||||
id: 101,
|
||||
date: addDays(startOfWeek, 0, 9, 30), // Monday 9:30
|
||||
type: "Soin",
|
||||
deceased: "M. Martin",
|
||||
client: "Pompes Funèbres Générales",
|
||||
collaborator: "Jean Dupont",
|
||||
status: "Confirmé"
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
date: addDays(startOfWeek, 1, 14, 0), // Tuesday 14:00
|
||||
type: "Transport",
|
||||
deceased: "Mme. Dubois",
|
||||
client: "Roc Eclerc",
|
||||
collaborator: "Marie Curie",
|
||||
status: "En cours"
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
date: addDays(startOfWeek, 2, 10, 0), // Wednesday 10:00
|
||||
type: "Mise en bière",
|
||||
deceased: "M. Lefebvre",
|
||||
client: "PF Locales",
|
||||
collaborator: "Lucas Martin",
|
||||
status: "En attente"
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
date: addDays(startOfWeek, 3, 16, 30), // Thursday 16:30
|
||||
type: "Cérémonie",
|
||||
deceased: "Mme. Petit",
|
||||
client: "Famille Petit",
|
||||
collaborator: "Jean Dupont",
|
||||
status: "Terminé"
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
date: addDays(startOfWeek, 4, 11, 0), // Friday 11:00
|
||||
type: "Soin",
|
||||
deceased: "Inconnu",
|
||||
client: "Police",
|
||||
collaborator: "Marie Curie",
|
||||
status: "Annulé"
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const handleRefresh = async () => {
|
||||
await fetchData();
|
||||
};
|
||||
|
||||
const handleNewRequest = () => {
|
||||
console.log("New request");
|
||||
};
|
||||
|
||||
const handleCellClick = (info) => {
|
||||
console.log("Cell clicked", info);
|
||||
};
|
||||
|
||||
const handleEditIntervention = (intervention) => {
|
||||
console.log("Edit intervention", intervention);
|
||||
};
|
||||
|
||||
const handlePrevWeek = () => {
|
||||
const newDate = new Date(currentDate.value);
|
||||
newDate.setDate(newDate.getDate() - 7);
|
||||
currentDate.value = newDate;
|
||||
fetchData(); // Refresh data for new week
|
||||
};
|
||||
|
||||
const handleUpdateStatus = (payload) => {
|
||||
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}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNextWeek = () => {
|
||||
const newDate = new Date(currentDate.value);
|
||||
newDate.setDate(newDate.getDate() + 7);
|
||||
currentDate.value = newDate;
|
||||
fetchData(); // Refresh data for new week
|
||||
};
|
||||
|
||||
// Utilities
|
||||
function getMonday(d) {
|
||||
d = new Date(d);
|
||||
var day = d.getDay(),
|
||||
diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
|
||||
return new Date(d.setDate(diff));
|
||||
}
|
||||
|
||||
function addDays(date, days, hours, minutes) {
|
||||
const result = new Date(date);
|
||||
result.setDate(result.getDate() + days);
|
||||
result.setHours(hours, minutes, 0, 0);
|
||||
return result.toISOString();
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user