refactor : merge Inventory_frontend submodule into frontend/ directory
Merges the full git history of Inventory_frontend into the monorepo under frontend/. Removes the submodule in favor of a unified repo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
395
frontend/app/components/ConstructeurSelect.vue
Normal file
395
frontend/app/components/ConstructeurSelect.vue
Normal file
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<div class="space-y-2 constructeur-select">
|
||||
<label v-if="label" class="label"><span class="label-text">{{ label }}</span></label>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input
|
||||
v-model="searchTerm"
|
||||
type="text"
|
||||
class="input input-bordered w-full pr-10"
|
||||
:placeholder="placeholder"
|
||||
@focus="openDropdown = true; ensureOptionsLoaded()"
|
||||
@input="onSearch"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs"
|
||||
@click="ensureOptionsLoaded(true)"
|
||||
>
|
||||
<IconLucideChevronsUpDown class="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
<div
|
||||
v-if="openDropdown"
|
||||
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
|
||||
v-if="filteredOptions.length === 0"
|
||||
class="px-3 py-2 text-xs text-gray-500"
|
||||
>
|
||||
Aucun fournisseur trouvé
|
||||
</div>
|
||||
<button
|
||||
v-for="option in filteredOptions"
|
||||
:key="option.id"
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 hover:bg-base-200 focus:bg-base-200 focus:outline-none"
|
||||
:class="{ 'bg-base-200': isSelected(option.id) }"
|
||||
@click="toggleOption(option)"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium">{{ option.name }}</span>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ formatConstructeurContact(option) || '—' }}
|
||||
</span>
|
||||
</div>
|
||||
<IconLucideCheck v-if="isSelected(option.id)" class="w-4 h-4 text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline btn-sm" @click="openCreateModal = true">
|
||||
Nouveau
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 min-h-[1.5rem]">
|
||||
<span v-if="!selectedConstructeurs.length" class="text-sm text-gray-500">
|
||||
Aucun fournisseur sélectionné
|
||||
</span>
|
||||
<span
|
||||
v-for="constructeur in selectedConstructeurs"
|
||||
:key="constructeur.id"
|
||||
class="badge badge-outline gap-1"
|
||||
>
|
||||
<span>{{ constructeur.name }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs p-0"
|
||||
aria-label="Retirer le fournisseur"
|
||||
@click="removeConstructeur(constructeur.id)"
|
||||
>
|
||||
<IconLucideX class="w-3 h-3" aria-hidden="true" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<dialog class="modal" :class="{ 'modal-open': openCreateModal }">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">
|
||||
Nouveau fournisseur
|
||||
</h3>
|
||||
<form @submit.prevent="handleCreate">
|
||||
<div class="form-control mb-3">
|
||||
<label class="label"><span class="label-text">Nom</span></label>
|
||||
<input v-model="createForm.name" type="text" class="input input-bordered" required>
|
||||
</div>
|
||||
<FieldEmail
|
||||
v-model="createForm.email"
|
||||
class="mb-3"
|
||||
label="Email"
|
||||
placeholder="ex: contact@fournisseur.com"
|
||||
autocomplete="email"
|
||||
/>
|
||||
<FieldPhone
|
||||
v-model="createForm.phone"
|
||||
class="mb-3"
|
||||
label="Téléphone"
|
||||
placeholder="ex: 01 23 45 67 89"
|
||||
/>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" @click="closeCreateModal">
|
||||
Annuler
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="creating">
|
||||
<span v-if="creating" class="loading loading-spinner loading-xs mr-2" />
|
||||
Créer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import FieldEmail from '~/components/form/FieldEmail.vue'
|
||||
import FieldPhone from '~/components/form/FieldPhone.vue'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
|
||||
import IconLucideCheck from '~icons/lucide/check'
|
||||
import IconLucideX from '~icons/lucide/x'
|
||||
import {
|
||||
type ConstructeurSummary,
|
||||
formatConstructeurContact,
|
||||
resolveConstructeurs,
|
||||
uniqueConstructeurIds,
|
||||
} from '~/shared/constructeurUtils'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => [],
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Sélectionner ou créer un fournisseur...',
|
||||
},
|
||||
initialOptions: {
|
||||
type: Array as PropType<ConstructeurSummary[]>,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string[]): void
|
||||
}>()
|
||||
|
||||
const {
|
||||
constructeurs,
|
||||
searchConstructeurs,
|
||||
createConstructeur,
|
||||
ensureConstructeurs,
|
||||
} = useConstructeurs()
|
||||
const searchTerm = ref('')
|
||||
const openDropdown = ref(false)
|
||||
const openCreateModal = ref(false)
|
||||
const creating = ref(false)
|
||||
const options = ref<ConstructeurSummary[]>([])
|
||||
const selectedIds = ref<string[]>([])
|
||||
|
||||
|
||||
const uniqueOptions = (items: ConstructeurSummary[] = []) => {
|
||||
const seen = new Map<string, ConstructeurSummary>()
|
||||
items.forEach((item) => {
|
||||
if (item && typeof item === 'object' && typeof item.id === 'string') {
|
||||
seen.set(item.id, item)
|
||||
}
|
||||
})
|
||||
return Array.from(seen.values())
|
||||
}
|
||||
|
||||
const normalizedInitialOptions = computed(() =>
|
||||
uniqueOptions((props.initialOptions as ConstructeurSummary[]) || []),
|
||||
)
|
||||
|
||||
const applyOptions = (items: ConstructeurSummary[] = []) => {
|
||||
options.value = uniqueOptions([
|
||||
...normalizedInitialOptions.value,
|
||||
...items,
|
||||
])
|
||||
}
|
||||
|
||||
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({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
})
|
||||
|
||||
const optionLookup = computed(() => {
|
||||
const map = new Map<string, ConstructeurSummary>()
|
||||
normalizedInitialOptions.value.forEach((item) => {
|
||||
map.set(item.id, item)
|
||||
})
|
||||
constructeurs.value.forEach((item: ConstructeurSummary) => {
|
||||
map.set(item.id, item)
|
||||
})
|
||||
options.value.forEach((item) => {
|
||||
map.set(item.id, item)
|
||||
})
|
||||
return map
|
||||
})
|
||||
|
||||
const selectedConstructeurs = computed<ConstructeurSummary[]>(() => {
|
||||
if (!selectedIds.value.length) {
|
||||
return []
|
||||
}
|
||||
|
||||
return selectedIds.value
|
||||
.map((id) => optionLookup.value.get(id))
|
||||
.filter((item): item is ConstructeurSummary => Boolean(item))
|
||||
})
|
||||
|
||||
const isSelected = (id: string) => selectedIds.value.includes(id)
|
||||
|
||||
const emitSelection = (ids: string[]) => {
|
||||
const normalized = uniqueConstructeurIds(ids)
|
||||
selectedIds.value = normalized
|
||||
emit('update:modelValue', normalized)
|
||||
}
|
||||
|
||||
const extractDataArray = (data: unknown): ConstructeurSummary[] => {
|
||||
if (Array.isArray(data)) {
|
||||
return data as ConstructeurSummary[]
|
||||
}
|
||||
if (data && typeof data === 'object' && 'id' in data) {
|
||||
return [data as ConstructeurSummary]
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
const ensureOptionsLoaded = async (force = false) => {
|
||||
if (!force && constructeurs.value.length) {
|
||||
applyOptions(constructeurs.value as ConstructeurSummary[])
|
||||
return
|
||||
}
|
||||
|
||||
const result = await searchConstructeurs('')
|
||||
if (result.success) {
|
||||
applyOptions(extractDataArray(result.data))
|
||||
}
|
||||
}
|
||||
|
||||
const onSearch = () => {
|
||||
openDropdown.value = true
|
||||
ensureOptionsLoaded()
|
||||
}
|
||||
|
||||
const toggleOption = (option: ConstructeurSummary) => {
|
||||
const ids = new Set(selectedIds.value)
|
||||
if (ids.has(option.id)) {
|
||||
ids.delete(option.id)
|
||||
} else {
|
||||
ids.add(option.id)
|
||||
}
|
||||
emitSelection(Array.from(ids))
|
||||
}
|
||||
|
||||
const removeConstructeur = (id: string) => {
|
||||
emitSelection(selectedIds.value.filter((item) => item !== id))
|
||||
}
|
||||
|
||||
const closeCreateModal = () => {
|
||||
openCreateModal.value = false
|
||||
createForm.value = { name: '', email: '', phone: '' }
|
||||
}
|
||||
|
||||
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
|
||||
const payload: { name: string; email?: string; phone?: string } = {
|
||||
name: trimmedName,
|
||||
}
|
||||
if (createForm.value.email) {
|
||||
payload.email = createForm.value.email
|
||||
}
|
||||
if (createForm.value.phone) {
|
||||
payload.phone = createForm.value.phone
|
||||
}
|
||||
const result = await createConstructeur(payload)
|
||||
creating.value = false
|
||||
if (result.success && result.data && !Array.isArray(result.data)) {
|
||||
emitSelection([...selectedIds.value, result.data.id])
|
||||
searchTerm.value = ''
|
||||
closeCreateModal()
|
||||
await ensureOptionsLoaded(true)
|
||||
}
|
||||
}
|
||||
|
||||
const clickHandler = (event: Event) => {
|
||||
const element = event.target as HTMLElement | null
|
||||
if (element && element.closest) {
|
||||
if (
|
||||
element.closest('.menu') ||
|
||||
element.closest('.modal-box') ||
|
||||
element.closest('.btn') ||
|
||||
element.closest('.constructeur-select')
|
||||
) {
|
||||
return
|
||||
}
|
||||
}
|
||||
openDropdown.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
selectedIds.value = uniqueConstructeurIds(newValue)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
selectedIds,
|
||||
async (ids) => {
|
||||
if (!ids.length) {
|
||||
return
|
||||
}
|
||||
const missing = ids.some((id) => !optionLookup.value.get(id))
|
||||
if (missing) {
|
||||
const fetched = await ensureConstructeurs(ids)
|
||||
if (fetched.length) {
|
||||
applyOptions([...options.value, ...fetched])
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
constructeurs,
|
||||
(list) => {
|
||||
applyOptions((list as ConstructeurSummary[]) || [])
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
normalizedInitialOptions,
|
||||
() => {
|
||||
applyOptions(options.value)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', clickHandler)
|
||||
ensureOptionsLoaded()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('click', clickHandler)
|
||||
})
|
||||
|
||||
watch(
|
||||
selectedIds,
|
||||
(ids) => {
|
||||
// ensure options contain newly selected ids
|
||||
const resolved = resolveConstructeurs(
|
||||
ids,
|
||||
constructeurs.value as ConstructeurSummary[],
|
||||
options.value,
|
||||
)
|
||||
if (resolved.length) {
|
||||
applyOptions([...resolved, ...options.value])
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
Reference in New Issue
Block a user