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:
@@ -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()) {
|
||||||
|
|||||||
@@ -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()) {
|
||||||
|
|||||||
@@ -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()) {
|
||||||
|
|||||||
@@ -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
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user