feat(frontend) : add tag, assignee and status filters on project page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-13 12:06:48 +01:00
parent 1d0f9a28c3
commit cb5aa4584c

View File

@@ -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
})