fix(constructeurs): improve search filtering and duplicate prevention
Switch ConstructeurSelect to client-side filtering instead of debounced API calls. Add duplicate name check before creating a new constructeur in both ConstructeurSelect and the constructeurs page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,16 +20,16 @@
|
|||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
v-if="openDropdown"
|
v-if="openDropdown"
|
||||||
class="absolute z-20 mt-1 w-full max-h-48 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg flex flex-col"
|
class="absolute z-20 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg flex flex-col"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="options.length === 0"
|
v-if="filteredOptions.length === 0"
|
||||||
class="px-3 py-2 text-xs text-gray-500"
|
class="px-3 py-2 text-xs text-gray-500"
|
||||||
>
|
>
|
||||||
Aucun fournisseur trouvé
|
Aucun fournisseur trouvé
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
v-for="option in options"
|
v-for="option in filteredOptions"
|
||||||
:key="option.id"
|
:key="option.id"
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full text-left px-3 py-2 hover:bg-base-200 focus:bg-base-200 focus:outline-none"
|
class="w-full text-left px-3 py-2 hover:bg-base-200 focus:bg-base-200 focus:outline-none"
|
||||||
@@ -164,8 +164,7 @@ const openCreateModal = ref(false)
|
|||||||
const creating = ref(false)
|
const creating = ref(false)
|
||||||
const options = ref<ConstructeurSummary[]>([])
|
const options = ref<ConstructeurSummary[]>([])
|
||||||
const selectedIds = ref<string[]>([])
|
const selectedIds = ref<string[]>([])
|
||||||
let searchTimeout: ReturnType<typeof setTimeout> | null = null
|
|
||||||
let lastSearchTerm = ''
|
|
||||||
|
|
||||||
const uniqueOptions = (items: ConstructeurSummary[] = []) => {
|
const uniqueOptions = (items: ConstructeurSummary[] = []) => {
|
||||||
const seen = new Map<string, ConstructeurSummary>()
|
const seen = new Map<string, ConstructeurSummary>()
|
||||||
@@ -182,32 +181,22 @@ const normalizedInitialOptions = computed(() =>
|
|||||||
)
|
)
|
||||||
|
|
||||||
const applyOptions = (items: ConstructeurSummary[] = []) => {
|
const applyOptions = (items: ConstructeurSummary[] = []) => {
|
||||||
const normalized = uniqueOptions([
|
options.value = uniqueOptions([
|
||||||
...normalizedInitialOptions.value,
|
...normalizedInitialOptions.value,
|
||||||
...items,
|
...items,
|
||||||
])
|
])
|
||||||
const limited = normalized.slice(0, 10)
|
|
||||||
|
|
||||||
selectedIds.value.forEach((id) => {
|
|
||||||
if (!limited.some((item) => item.id === id)) {
|
|
||||||
const match =
|
|
||||||
normalized.find((item) => item.id === id) ||
|
|
||||||
constructeurs.value.find((item) => item.id === id)
|
|
||||||
if (match) {
|
|
||||||
if (limited.length >= 10) {
|
|
||||||
limited.pop()
|
|
||||||
}
|
|
||||||
limited.unshift(match)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
options.value = uniqueOptions([
|
|
||||||
...normalizedInitialOptions.value,
|
|
||||||
...limited,
|
|
||||||
])
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filteredOptions = computed(() => {
|
||||||
|
const term = searchTerm.value.trim().toLowerCase()
|
||||||
|
if (!term) return options.value
|
||||||
|
return options.value.filter((option) =>
|
||||||
|
(option.name ?? '').toLowerCase().includes(term)
|
||||||
|
|| (option.email && option.email.toLowerCase().includes(term))
|
||||||
|
|| (option.phone && option.phone.toLowerCase().includes(term))
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
const createForm = ref({
|
const createForm = ref({
|
||||||
name: '',
|
name: '',
|
||||||
email: '',
|
email: '',
|
||||||
@@ -257,46 +246,20 @@ const extractDataArray = (data: unknown): ConstructeurSummary[] => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const ensureOptionsLoaded = async (force = false) => {
|
const ensureOptionsLoaded = async (force = false) => {
|
||||||
if (!force && !searchTerm.value && constructeurs.value.length) {
|
if (!force && constructeurs.value.length) {
|
||||||
applyOptions(constructeurs.value as ConstructeurSummary[])
|
applyOptions(constructeurs.value as ConstructeurSummary[])
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!force && searchTerm.value === lastSearchTerm && options.value.length) {
|
const result = await searchConstructeurs('')
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.value.length && !force) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await searchConstructeurs(searchTerm.value)
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
applyOptions(extractDataArray(result.data))
|
applyOptions(extractDataArray(result.data))
|
||||||
lastSearchTerm = searchTerm.value
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSearch = () => {
|
const onSearch = () => {
|
||||||
openDropdown.value = true
|
openDropdown.value = true
|
||||||
if (searchTimeout) {
|
ensureOptionsLoaded()
|
||||||
clearTimeout(searchTimeout)
|
|
||||||
}
|
|
||||||
searchTimeout = setTimeout(async () => {
|
|
||||||
if (!searchTerm.value && constructeurs.value.length) {
|
|
||||||
applyOptions(constructeurs.value as ConstructeurSummary[])
|
|
||||||
lastSearchTerm = ''
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (searchTerm.value === lastSearchTerm) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const result = await searchConstructeurs(searchTerm.value)
|
|
||||||
if (result.success) {
|
|
||||||
applyOptions(extractDataArray(result.data))
|
|
||||||
lastSearchTerm = searchTerm.value
|
|
||||||
}
|
|
||||||
}, 250)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleOption = (option: ConstructeurSummary) => {
|
const toggleOption = (option: ConstructeurSummary) => {
|
||||||
@@ -319,9 +282,19 @@ const closeCreateModal = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleCreate = async () => {
|
const handleCreate = async () => {
|
||||||
|
const trimmedName = createForm.value.name.trim()
|
||||||
|
const duplicate = options.value.find(
|
||||||
|
(o) => (o.name ?? '').toLowerCase() === trimmedName.toLowerCase(),
|
||||||
|
)
|
||||||
|
if (duplicate) {
|
||||||
|
emitSelection([...selectedIds.value, duplicate.id])
|
||||||
|
closeCreateModal()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
creating.value = true
|
creating.value = true
|
||||||
const payload: { name: string; email?: string; phone?: string } = {
|
const payload: { name: string; email?: string; phone?: string } = {
|
||||||
name: createForm.value.name,
|
name: trimmedName,
|
||||||
}
|
}
|
||||||
if (createForm.value.email) {
|
if (createForm.value.email) {
|
||||||
payload.email = createForm.value.email
|
payload.email = createForm.value.email
|
||||||
@@ -383,9 +356,6 @@ watch(
|
|||||||
constructeurs,
|
constructeurs,
|
||||||
(list) => {
|
(list) => {
|
||||||
applyOptions((list as ConstructeurSummary[]) || [])
|
applyOptions((list as ConstructeurSummary[]) || [])
|
||||||
if (!searchTerm.value) {
|
|
||||||
lastSearchTerm = ''
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{ immediate: true },
|
{ immediate: true },
|
||||||
)
|
)
|
||||||
@@ -405,9 +375,6 @@ onMounted(() => {
|
|||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.removeEventListener('click', clickHandler)
|
window.removeEventListener('click', clickHandler)
|
||||||
if (searchTimeout) {
|
|
||||||
clearTimeout(searchTimeout)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
|
|||||||
@@ -195,8 +195,18 @@ const closeModal = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const saveConstructeur = async () => {
|
const saveConstructeur = async () => {
|
||||||
|
const trimmedName = form.value.name.trim()
|
||||||
|
const duplicate = constructeurs.value.find(
|
||||||
|
(c) => c.name.toLowerCase() === trimmedName.toLowerCase()
|
||||||
|
&& c.id !== editingConstructeur.value?.id,
|
||||||
|
)
|
||||||
|
if (duplicate) {
|
||||||
|
showError(`Un fournisseur "${duplicate.name}" existe déjà.`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
saving.value = true
|
saving.value = true
|
||||||
const payload = { ...form.value }
|
const payload = { ...form.value, name: trimmedName }
|
||||||
if (!payload.email) { delete payload.email }
|
if (!payload.email) { delete payload.email }
|
||||||
if (!payload.phone) { delete payload.phone }
|
if (!payload.phone) { delete payload.phone }
|
||||||
let result
|
let result
|
||||||
|
|||||||
Reference in New Issue
Block a user