From c65757ee245d4a5c0baaef0244994cc0dd524b93 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 21 May 2026 16:23:40 +0200
Subject: [PATCH] =?UTF-8?q?feat(vue-ensemble)=20:=20tri=20alphab=C3=A9tiqu?=
 =?UTF-8?q?e=20des=20machines=20par=20d=C3=A9faut=20+=20select=20de=20tri?=
 =?UTF-8?q?=20(nom/date)=20+=20harmonisation=20tailles=20des=20champs=20de?=
 =?UTF-8?q?=20filtre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/app/pages/index.vue | 51 +++++++++++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index 8106a59..e5f0ea8 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -58,7 +58,26 @@
                 </option>
               </select>
             </div>
-            <div class="form-control">
+            <div class="form-control md:w-52">
+              <label class="label">
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Trier par</span>
+              </label>
+              <select v-model="sortOrder" class="select select-bordered w-full">
+                <option value="name-asc">
+                  Nom (A → Z)
+                </option>
+                <option value="name-desc">
+                  Nom (Z → A)
+                </option>
+                <option value="date-desc">
+                  Plus récentes
+                </option>
+                <option value="date-asc">
+                  Plus anciennes
+                </option>
+              </select>
+            </div>
+            <div class="form-control md:w-80">
               <label class="label">
                 <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Date de création</span>
               </label>
@@ -66,13 +85,13 @@
                 <input
                   v-model="dateFrom"
                   type="date"
-                  class="input input-bordered input-sm"
+                  class="input input-bordered w-full"
                 >
                 <span class="text-xs text-base-content/50">à</span>
                 <input
                   v-model="dateTo"
                   type="date"
-                  class="input input-bordered input-sm"
+                  class="input input-bordered w-full"
                 >
               </div>
             </div>
@@ -295,6 +314,7 @@ const showAddSiteModal = ref(false)
 const showAddMachineModal = ref(false)
 const searchTerm = ref('')
 const selectedSiteFilter = ref('')
+const sortOrder = ref('name-asc')
 const dateFrom = ref('')
 const dateTo = ref('')
 const collapsedSites = ref([])
@@ -318,10 +338,33 @@ const machinesBySiteId = computed(() => {
   return map
 })
 
+const sortMachines = (machineList) => {
+  const list = [...machineList]
+  switch (sortOrder.value) {
+    case 'name-desc':
+      return list.sort((a, b) =>
+        (b.name || '').localeCompare(a.name || '', 'fr', { sensitivity: 'base', numeric: true })
+      )
+    case 'date-desc':
+      return list.sort((a, b) =>
+        new Date(b.createdAt || 0) - new Date(a.createdAt || 0)
+      )
+    case 'date-asc':
+      return list.sort((a, b) =>
+        new Date(a.createdAt || 0) - new Date(b.createdAt || 0)
+      )
+    case 'name-asc':
+    default:
+      return list.sort((a, b) =>
+        (a.name || '').localeCompare(b.name || '', 'fr', { sensitivity: 'base', numeric: true })
+      )
+  }
+}
+
 const sitesWithMachines = computed(() => {
   return sites.value.map((site) => ({
     ...site,
-    machines: machinesBySiteId.value.get(site.id) || []
+    machines: sortMachines(machinesBySiteId.value.get(site.id) || [])
   }))
 })