From cb5aa4584c621deb4f2702547793d6c75541e7dc Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Fri, 13 Mar 2026 12:06:48 +0100
Subject: [PATCH] feat(frontend) : add tag, assignee and status filters on
 project page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/pages/projects/[id]/index.vue | 57 +++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/projects/[id]/index.vue b/frontend/pages/projects/[id]/index.vue
index 6667f9e..f6c6abb 100644
--- a/frontend/pages/projects/[id]/index.vue
+++ b/frontend/pages/projects/[id]/index.vue
@@ -10,13 +10,42 @@
             </button>
         </div>
 
-        <div class="mt-4">
+        <div class="mt-4 flex flex-wrap gap-3">
             <MalioSelect
                 v-model="selectedGroupId"
                 :options="groupFilterOptions"
                 label="Groupe"
                 empty-option-label="Tous les groupes"
-                min-width="w-64"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
+            />
+            <MalioSelect
+                v-model="selectedTagId"
+                :options="tagFilterOptions"
+                label="Tags"
+                empty-option-label="Tous les tags"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
+            />
+            <MalioSelect
+                v-model="selectedAssigneeId"
+                :options="userFilterOptions"
+                label="User"
+                empty-option-label="Tous les users"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
+            />
+            <MalioSelect
+                v-model="selectedStatusId"
+                :options="statusFilterOptions"
+                label="Status"
+                empty-option-label="Tous les status"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
             />
         </div>
 
@@ -175,6 +204,9 @@ const users = ref<UserData[]>([])
 const isLoading = ref(true)
 
 const selectedGroupId = ref<number | null>(null)
+const selectedTagId = ref<number | null>(null)
+const selectedAssigneeId = ref<number | null>(null)
+const selectedStatusId = ref<number | null>(null)
 const dragOverStatusId = ref<number | null>(null)
 const dragCounter = ref(0)
 const taskDrawerOpen = ref(false)
@@ -184,11 +216,32 @@ const groupFilterOptions = computed(() =>
     groups.value.filter(g => !g.archived).map(g => ({ label: g.title, value: g.id }))
 )
 
+const tagFilterOptions = computed(() =>
+    tags.value.map(t => ({ label: t.label, value: t.id }))
+)
+
+const userFilterOptions = computed(() =>
+    users.value.map(u => ({ label: u.username, value: u.id }))
+)
+
+const statusFilterOptions = computed(() =>
+    statuses.value.map(s => ({ label: s.label, value: s.id }))
+)
+
 const filteredTasks = computed(() => {
     let result = tasks.value.filter(t => !t.archived)
     if (selectedGroupId.value) {
         result = result.filter(t => t.group?.id === selectedGroupId.value)
     }
+    if (selectedTagId.value) {
+        result = result.filter(t => t.tags?.some(tag => tag.id === selectedTagId.value))
+    }
+    if (selectedAssigneeId.value) {
+        result = result.filter(t => t.assignee?.id === selectedAssigneeId.value)
+    }
+    if (selectedStatusId.value) {
+        result = result.filter(t => t.status?.id === selectedStatusId.value)
+    }
     return result
 })