124 lines
3.2 KiB
Vue
124 lines
3.2 KiB
Vue
<template>
|
|
<div class="space-y-1">
|
|
<SearchSelect
|
|
:model-value="modelValue ?? undefined"
|
|
:options="composantOptions"
|
|
:loading="loading"
|
|
:placeholder="placeholder"
|
|
:empty-text="emptyText"
|
|
size="sm"
|
|
option-value="id"
|
|
option-label="name"
|
|
:disabled="disabled"
|
|
@update:modelValue="updateValue"
|
|
@search="handleSearch"
|
|
>
|
|
<template #option-description="{ option }">
|
|
<span class="text-xs text-base-content/60">
|
|
{{ formatDescription(option) }}
|
|
</span>
|
|
</template>
|
|
</SearchSelect>
|
|
<p v-if="helperText" class="text-xs text-base-content/60">
|
|
{{ helperText }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
import SearchSelect from '~/components/common/SearchSelect.vue'
|
|
import { useComposants } from '~/composables/useComposants'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue?: string | null
|
|
placeholder?: string
|
|
emptyText?: string
|
|
helperText?: string
|
|
disabled?: boolean
|
|
typeComposantId?: string | null
|
|
}>(),
|
|
{
|
|
modelValue: '',
|
|
placeholder: 'Sélectionner un composant…',
|
|
emptyText: 'Aucun composant disponible',
|
|
helperText: '',
|
|
disabled: false,
|
|
typeComposantId: null,
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string | null): void
|
|
}>()
|
|
|
|
const { loading: globalLoading, loadComposants } = useComposants()
|
|
|
|
const localComposants = ref<any[]>([])
|
|
const localLoading = ref(false)
|
|
const loading = computed(() => localLoading.value || globalLoading.value)
|
|
|
|
const composantOptions = computed(() => localComposants.value)
|
|
|
|
const loadFilteredComposants = async (search = '') => {
|
|
if (!props.typeComposantId) return
|
|
localLoading.value = true
|
|
try {
|
|
const result = await loadComposants({ typeComposantId: props.typeComposantId, search, itemsPerPage: 200, force: true })
|
|
if (result.success && result.data?.items) {
|
|
localComposants.value = result.data.items
|
|
}
|
|
}
|
|
catch (error: unknown) {
|
|
console.error('Erreur lors du chargement des composants:', error)
|
|
}
|
|
finally {
|
|
localLoading.value = false
|
|
}
|
|
}
|
|
|
|
let searchDebounce: ReturnType<typeof setTimeout> | null = null
|
|
const handleSearch = (term: string) => {
|
|
if (searchDebounce) clearTimeout(searchDebounce)
|
|
searchDebounce = setTimeout(() => loadFilteredComposants(term.trim()), 300)
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadFilteredComposants()
|
|
})
|
|
|
|
watch(
|
|
() => props.typeComposantId,
|
|
() => {
|
|
loadFilteredComposants()
|
|
},
|
|
)
|
|
|
|
const updateValue = (value: string | number | null | undefined) => {
|
|
if (value === undefined || value === null || value === '') {
|
|
emit('update:modelValue', null)
|
|
return
|
|
}
|
|
emit('update:modelValue', String(value))
|
|
}
|
|
|
|
const formatDescription = (option: any) => {
|
|
const parts: string[] = []
|
|
const typeName = option?.typeComposant?.name
|
|
if (typeName) {
|
|
parts.push(typeName)
|
|
}
|
|
if (option?.reference) {
|
|
parts.push(`Ref. ${option.reference}`)
|
|
}
|
|
if (option?.prix !== undefined && option.prix !== null) {
|
|
const price = Number(option.prix)
|
|
if (!Number.isNaN(price)) {
|
|
parts.push(`${price.toFixed(2)} €`)
|
|
}
|
|
}
|
|
return parts.length ? parts.join(' • ') : 'Sans référence'
|
|
}
|
|
</script>
|