feat(machines) : multi-select site checkboxes, alphabetical sort, OR search param

- Replace site dropdown with inline checkboxes for multi-site filtering
- Sort machines alphabetically (localeCompare fr)
- Switch catalog search from ?name= to ?q= for OR search on name/reference

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-23 15:15:16 +01:00
parent ac860d3165
commit 2e82e854bf
4 changed files with 27 additions and 16 deletions

View File

@@ -135,7 +135,7 @@ export function useComposants() {
params.set('page', String(page)) params.set('page', String(page))
if (search && search.trim()) { if (search && search.trim()) {
params.set('name', search.trim()) params.set('q', search.trim())
} }
if (typeName && typeName.trim()) { if (typeName && typeName.trim()) {

View File

@@ -147,7 +147,7 @@ export function usePieces() {
params.set('page', String(page)) params.set('page', String(page))
if (search && search.trim()) { if (search && search.trim()) {
params.set('name', search.trim()) params.set('q', search.trim())
} }
if (typeName && typeName.trim()) { if (typeName && typeName.trim()) {

View File

@@ -145,7 +145,7 @@ export function useProducts() {
params.set('page', String(page)) params.set('page', String(page))
if (search && search.trim()) { if (search && search.trim()) {
params.set('name', search.trim()) params.set('q', search.trim())
} }
if (typeName && typeName.trim()) { if (typeName && typeName.trim()) {

View File

@@ -16,16 +16,23 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label">
<span class="label-text">Site</span> <span class="label-text">Sites</span>
</label> </label>
<select v-model="selectedSite" class="select select-bordered"> <div class="flex flex-wrap gap-3">
<option value=""> <label
Tous les sites v-for="site in sites"
</option> :key="site.id"
<option v-for="site in sites" :key="site.id" :value="site.id"> class="flex items-center gap-2 cursor-pointer"
{{ site.name }} >
</option> <input
</select> type="checkbox"
class="checkbox checkbox-sm"
:checked="selectedSites.has(site.id)"
@change="selectedSites.has(site.id) ? selectedSites.delete(site.id) : selectedSites.add(site.id)"
>
<span class="text-sm">{{ site.name }}</span>
</label>
</div>
</div> </div>
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label">
@@ -113,7 +120,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted } from 'vue' import { ref, reactive, computed, onMounted } from 'vue'
import { useMachines } from '~/composables/useMachines' import { useMachines } from '~/composables/useMachines'
import { useSites } from '~/composables/useSites' import { useSites } from '~/composables/useSites'
import { useToast } from '~/composables/useToast' import { useToast } from '~/composables/useToast'
@@ -128,7 +135,7 @@ const { machines, loading, loadMachines, deleteMachine } = useMachines()
const { sites, loadSites } = useSites() const { sites, loadSites } = useSites()
const toast = useToast() const toast = useToast()
const selectedSite = ref('') const selectedSites = reactive(new Set())
const searchQuery = ref('') const searchQuery = ref('')
// Enrichir les machines avec les objets site complets // Enrichir les machines avec les objets site complets
@@ -145,8 +152,8 @@ const enrichedMachines = computed(() => {
const filteredMachines = computed(() => { const filteredMachines = computed(() => {
let filtered = enrichedMachines.value let filtered = enrichedMachines.value
if (selectedSite.value) { if (selectedSites.size > 0) {
filtered = filtered.filter(machine => machine.siteId === selectedSite.value) filtered = filtered.filter(machine => selectedSites.has(machine.siteId))
} }
if (searchQuery.value.trim()) { if (searchQuery.value.trim()) {
@@ -157,6 +164,10 @@ const filteredMachines = computed(() => {
) )
} }
filtered = [...filtered].sort((a, b) =>
(a.name || '').localeCompare(b.name || '', 'fr')
)
return filtered return filtered
}) })