Intégration fonctionnalites V1

2026-07-04 22:30:18 +02:00
parent 55a558b536
commit 10ee859602
54 changed files with 4802 additions and 1018 deletions
@@ -0,0 +1,96 @@
+<script setup>
+import { filterInputClass, filterLabelClass, thFilterClass } from '@/Components/Supervisor/ui.js';
+
+const props = defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    align: {
+        type: String,
+        default: 'left',
+    },
+    sortable: {
+        type: Boolean,
+        default: false,
+    },
+    sortKey: {
+        type: String,
+        default: '',
+    },
+    activeSort: {
+        type: String,
+        default: '',
+    },
+    sortDirection: {
+        type: String,
+        default: 'asc',
+    },
+});
+
+const emit = defineEmits(['sort']);
+
+const isActive = () => props.sortable && props.activeSort === props.sortKey;
+
+const handleSort = () => {
+    if (props.sortable && props.sortKey) {
+        emit('sort', props.sortKey);
+    }
+};
+</script>
+
+<template>
+    <th
+        :class="[
+            thFilterClass,
+            align === 'right' ? 'text-right' : 'text-left',
+        ]"
+    >
+        <button
+            v-if="sortable"
+            type="button"
+            class="mb-1.5 flex items-center gap-1 text-xs font-semibold uppercase tracking-wide transition"
+            :class="[
+                align === 'right' ? 'ml-auto' : '',
+                isActive() ? 'text-indigo-600' : 'text-slate-600 hover:text-indigo-600',
+            ]"
+            @click="handleSort"
+        >
+            <span>{{ label }}</span>
+            <svg
+                v-if="isActive() && sortDirection === 'asc'"
+                class="h-3.5 w-3.5 flex-shrink-0"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2.5"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+            </svg>
+            <svg
+                v-else-if="isActive() && sortDirection === 'desc'"
+                class="h-3.5 w-3.5 flex-shrink-0"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2.5"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+            </svg>
+            <svg
+                v-else
+                class="h-3.5 w-3.5 flex-shrink-0 text-slate-300"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4M8 15l4 4 4-4" />
+            </svg>
+        </button>
+        <span v-else :class="filterLabelClass">{{ label }}</span>
+        <slot>
+            <span class="block h-[34px]" aria-hidden="true" />
+        </slot>
+    </th>
+</template>