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 { filterSelectClass } from '@/Components/Supervisor/ui.js';
+import { listPerPageOptions } from '@/Components/Supervisor/useListFilters.js';
+import { Link } from '@inertiajs/vue3';
+
+defineProps({
+    paginator: {
+        type: Object,
+        required: true,
+    },
+    perPage: {
+        type: [Number, String],
+        default: 10,
+    },
+});
+
+const emit = defineEmits(['update:perPage']);
+
+const formatLabel = (label) => {
+    const text = String(label)
+        .replace(/&laquo;/g, '‹')
+        .replace(/&raquo;/g, '›')
+        .trim();
+
+    if (/previous/i.test(text)) {
+        return 'Précédent';
+    }
+
+    if (/next/i.test(text)) {
+        return 'Suivant';
+    }
+
+    return text;
+};
+
+const onPerPageChange = (event) => {
+    emit('update:perPage', Number(event.target.value));
+};
+</script>
+
+<template>
+    <div
+        v-if="paginator.total > 0"
+        class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 border-t border-slate-100 px-6 py-4"
+    >
+        <p class="shrink-0 text-sm text-slate-500">
+            {{ paginator.from ?? 0 }}–{{ paginator.to ?? 0 }}
+            <span class="text-slate-400">sur</span>
+            {{ paginator.total }}
+            <span class="text-slate-400">résultat(s)</span>
+        </p>
+
+        <div class="flex flex-wrap items-center gap-4">
+            <label class="flex shrink-0 items-center gap-2 text-sm text-slate-600">
+                <span class="whitespace-nowrap">Lignes par page</span>
+                <select
+                    :value="perPage"
+                    :class="filterSelectClass"
+                    @change="onPerPageChange"
+                >
+                    <option v-for="option in listPerPageOptions" :key="option" :value="option">
+                        {{ option }}
+                    </option>
+                </select>
+            </label>
+
+            <nav
+                v-if="paginator.last_page > 1"
+                class="flex flex-wrap items-center gap-1"
+            >
+                <template v-for="link in paginator.links" :key="link.label">
+                    <Link
+                        v-if="link.url"
+                        :href="link.url"
+                        class="rounded-lg px-3 py-1.5 text-sm font-medium transition"
+                        :class="
+                            link.active
+                                ? 'bg-indigo-600 text-white shadow-sm'
+                                : 'text-slate-600 hover:bg-slate-100'
+                        "
+                        preserve-state
+                    >
+                        {{ formatLabel(link.label) }}
+                    </Link>
+                    <span
+                        v-else
+                        class="cursor-not-allowed rounded-lg px-3 py-1.5 text-sm font-medium text-slate-300"
+                        :class="link.active ? 'bg-indigo-600 text-white shadow-sm' : ''"
+                    >
+                        {{ formatLabel(link.label) }}
+                    </span>
+                </template>
+            </nav>
+        </div>
+    </div>
+</template>