feat: add constructors selection and management
This commit is contained in:
Matthieu
218
app/components/ConstructeurSelect.vue
Normal file
218
app/components/ConstructeurSelect.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<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-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchTerm"
|
||||
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)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l4-4 4 4m0-8l-4 4-4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul
|
||||
v-if="openDropdown"
|
||||
class="menu bg-base-100 border border-base-200 rounded-box shadow-lg mt-1 w-full max-h-48 overflow-y-auto absolute z-20"
|
||||
>
|
||||
<li v-if="options.length === 0" class="px-3 py-2 text-xs text-gray-500">
|
||||
Aucun constructeur trouvé
|
||||
</li>
|
||||
<li
|
||||
v-for="option in options"
|
||||
:key="option.id"
|
||||
class="px-3 py-2"
|
||||
@click="selectOption(option)"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium">{{ option.name }}</span>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ [option.email, option.phone].filter(Boolean).join(' • ') || '—' }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline btn-sm" @click="openCreateModal = true">
|
||||
Nouveau
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedConstructeur" class="text-xs text-gray-500">
|
||||
<span class="font-medium">{{ selectedConstructeur.name }}</span>
|
||||
<span v-if="selectedConstructeur.email"> • {{ selectedConstructeur.email }}</span>
|
||||
<span v-if="selectedConstructeur.phone"> • {{ selectedConstructeur.phone }}</span>
|
||||
</div>
|
||||
|
||||
<dialog class="modal" :class="{ 'modal-open': openCreateModal }">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">Nouveau constructeur</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>
|
||||
<div class="form-control mb-3">
|
||||
<label class="label"><span class="label-text">Email</span></label>
|
||||
<input v-model="createForm.email" type="email" class="input input-bordered" placeholder="ex: contact@constructeur.com" />
|
||||
</div>
|
||||
<div class="form-control mb-3">
|
||||
<label class="label"><span class="label-text">Téléphone</span></label>
|
||||
<input v-model="createForm.phone" type="text" class="input input-bordered" placeholder="ex: 01 23 45 67 89" />
|
||||
</div>
|
||||
|
||||
<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"></span>
|
||||
Créer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Sélectionner ou créer un constructeur...',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const { constructeurs, searchConstructeurs, createConstructeur } = useConstructeurs()
|
||||
const searchTerm = ref('')
|
||||
const openDropdown = ref(false)
|
||||
const openCreateModal = ref(false)
|
||||
const creating = ref(false)
|
||||
const options = ref([])
|
||||
let searchTimeout = null
|
||||
|
||||
const createForm = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
})
|
||||
|
||||
const selectedConstructeur = computed(() =>
|
||||
constructeurs.value.find(item => item.id === props.modelValue) || null
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (newValue && !selectedConstructeur.value) {
|
||||
// ensure current selection is loaded
|
||||
ensureOptionsLoaded(true)
|
||||
}
|
||||
if (newValue) {
|
||||
const match = constructeurs.value.find(item => item.id === newValue)
|
||||
if (match) {
|
||||
searchTerm.value = match.name
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const ensureOptionsLoaded = async (force = false) => {
|
||||
if (options.value.length && !force) return
|
||||
const result = await searchConstructeurs(searchTerm.value)
|
||||
if (result.success) {
|
||||
options.value = result.data
|
||||
}
|
||||
}
|
||||
|
||||
const onSearch = () => {
|
||||
openDropdown.value = true
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(async () => {
|
||||
const result = await searchConstructeurs(searchTerm.value)
|
||||
if (result.success) {
|
||||
options.value = result.data
|
||||
}
|
||||
}, 250)
|
||||
}
|
||||
|
||||
const selectOption = (option) => {
|
||||
emit('update:modelValue', option.id)
|
||||
openDropdown.value = false
|
||||
searchTerm.value = option.name
|
||||
}
|
||||
|
||||
const closeCreateModal = () => {
|
||||
openCreateModal.value = false
|
||||
createForm.value = { name: '', email: '', phone: '' }
|
||||
}
|
||||
|
||||
const handleCreate = async () => {
|
||||
creating.value = true
|
||||
const payload = { ...createForm.value }
|
||||
if (!payload.phone) delete payload.phone
|
||||
if (!payload.email) delete payload.email
|
||||
const result = await createConstructeur(payload)
|
||||
creating.value = false
|
||||
if (result.success) {
|
||||
emit('update:modelValue', result.data.id)
|
||||
searchTerm.value = result.data.name
|
||||
closeCreateModal()
|
||||
await ensureOptionsLoaded(true)
|
||||
}
|
||||
}
|
||||
|
||||
const clickHandler = (event) => {
|
||||
const element = event.target
|
||||
if (element && element.closest) {
|
||||
if (
|
||||
element.closest('.menu') ||
|
||||
element.closest('.modal-box') ||
|
||||
element.closest('.btn') ||
|
||||
element.closest('.constructeur-select')
|
||||
) {
|
||||
return
|
||||
}
|
||||
}
|
||||
openDropdown.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', clickHandler)
|
||||
ensureOptionsLoaded()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('click', clickHandler)
|
||||
clearTimeout(searchTimeout)
|
||||
})
|
||||
</script>
|
||||
watch(
|
||||
constructeurs,
|
||||
(list) => {
|
||||
options.value = [...list]
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
Reference in New Issue
Block a user