Starseed/frontend/modules/sites/components/SiteDrawer.vue

<template>
    <MalioDrawer
        :model-value="modelValue"
        drawer-class="w-full max-w-lg"
        header-class="border-b border-black"
        footer-class="justify-between border-t border-black p-6"
        @update:model-value="emit('update:modelValue', $event)"
    >
        <template #header>
            <h2 class="text-[24px] font-bold">
                {{ isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite') }}
            </h2>
        </template>
        <form class="flex flex-col py-4 gap-2" @submit.prevent="handleSave">
            <MalioInputText
                v-model="form.name"
                :label="t('admin.sites.form.name')"
                input-class="w-full"
                required
            />

            <MalioInputText
                v-model="form.street"
                :label="t('admin.sites.form.street')"
                input-class="w-full"
                required
            />

            <MalioInputText
                v-model="form.complement"
                :label="t('admin.sites.form.complement')"
                :placeholder="t('admin.sites.form.complementPlaceholder')"
                input-class="w-full"
            />

            <!-- Code postal FR : masque "#####" (5 chiffres stricts) +
                 maxLength en double securite. La regex backend validera la
                 forme finale, le masque empeche juste la saisie de
                 caracteres non numeriques. -->
            <MalioInputText
                v-model="form.postalCode"
                :label="t('admin.sites.form.postalCode')"
                input-class="w-full"
                mask="#####"
                max-length="5"
                required
            />

            <MalioInputText
                v-model="form.city"
                :label="t('admin.sites.form.city')"
                input-class="w-full"
                required
            />

            <!-- Champ couleur avec preview puce -->
            <div>
                <label class="mb-1 block text-sm font-semibold text-neutral-700">
                    {{ t('admin.sites.form.color') }}
                </label>
                <div class="flex items-center gap-3">
                    <MalioInputText
                        v-model="form.color"
                        placeholder="#RRGGBB"
                        input-class="w-full font-mono"
                        required
                    />
                    <!-- pb-4 sur le wrapper : simule le slot message du
                         MalioInputText voisin pour qu'items-center recentre
                         la puce sur le centre visible de l'input. -->
                    <div class="shrink-0 pb-4">
                        <span
                            :style="{ backgroundColor: isValidHex ? form.color : 'transparent' }"
                            class="inline-block size-10 rounded-lg border border-neutral-200"
                            :class="{ 'border-dashed': !isValidHex }"
                        />
                    </div>
                </div>
                <p v-if="form.color && !isValidHex" class="mt-1 text-xs text-red-600">
                    {{ t('admin.sites.form.colorInvalid') }}
                </p>
            </div>

        </form>

        <!-- Footer fixe : depuis la 1.7.1 le slot #footer est un frere du body
             scrollable (shrink-0), donc reellement fige sans sticky. -->
        <template #footer>
            <MalioButton
                v-if="isEditMode"
                :label="t('common.delete')"
                variant="danger"
                icon-name="mdi:delete-outline"
                icon-position="left"
                button-class="w-m-btn-action"
                @click="emit('delete')"
            />
            <MalioButton
                v-else
                :label="t('common.cancel')"
                variant="tertiary"
                button-class="w-m-btn-action"
                @click="emit('update:modelValue', false)"
            />
            <MalioButton
                :label="t('common.save')"
                variant="primary"
                button-class="w-m-btn-action"
                :disabled="saving || !isValidHex"
                @click="handleSave"
            />
        </template>
    </MalioDrawer>
</template>

<script setup lang="ts">
import type { Site } from '~/shared/types/sites'
import { isValidSiteColor } from '~/shared/utils/color'

const { t } = useI18n()
const api = useApi()

const props = defineProps<{
    modelValue: boolean
    site: Site | null
}>()

const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    saved: []
    delete: []
}>()

const saving = ref(false)

const form = ref({
    name: '',
    street: '',
    complement: '',
    postalCode: '',
    city: '',
    color: '#000000',
})

const isEditMode = computed(() => props.site !== null)

// Validation locale du format hex #RRGGBB avant envoi backend.
const isValidHex = computed(() => isValidSiteColor(form.value.color))

// Remplir le formulaire quand le site change
watch(() => props.site, (site) => {
    if (site) {
        form.value.name = site.name
        form.value.street = site.street
        form.value.complement = site.complement ?? ''
        form.value.postalCode = site.postalCode
        form.value.city = site.city
        form.value.color = site.color
    } else {
        form.value.name = ''
        form.value.street = ''
        form.value.complement = ''
        form.value.postalCode = ''
        form.value.city = ''
        form.value.color = '#056CF2'
    }
}, { immediate: true })

async function handleSave() {
    if (!isValidHex.value) return
    saving.value = true
    try {
        // Le champ complement est optionnel cote DB : on envoie null si vide
        // pour que le backend stocke NULL plutot qu'une chaine vide.
        const trimmedComplement = form.value.complement.trim()
        const payload = {
            name: form.value.name,
            street: form.value.street,
            complement: trimmedComplement === '' ? null : trimmedComplement,
            postalCode: form.value.postalCode,
            city: form.value.city,
            color: form.value.color,
        }

        if (isEditMode.value && props.site) {
            await api.patch(`/sites/${props.site.id}`, payload, {
                toastSuccessMessage: t('admin.sites.toast.updated'),
            })
        } else {
            await api.post('/sites', payload, {
                toastSuccessMessage: t('admin.sites.toast.created'),
            })
        }

        emit('saved')
        emit('update:modelValue', false)
    } finally {
        saving.value = false
    }
}
</script>