| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [ ] CHANGELOG modifié Co-authored-by: Matthieu <mtholot19@gmail.com> Reviewed-on: MALIO-DEV/Coltura#8 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #8.
This commit is contained in:
185
frontend/modules/sites/components/SiteDrawer.vue
Normal file
185
frontend/modules/sites/components/SiteDrawer.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<MalioDrawer
|
||||
:model-value="modelValue"
|
||||
:title="isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite')"
|
||||
drawer-class="w-full max-w-lg"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
>
|
||||
<form class="flex flex-col gap-6 p-4" @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
|
||||
/>
|
||||
<span
|
||||
:style="{ backgroundColor: isValidHex ? form.color : 'transparent' }"
|
||||
class="inline-block size-10 shrink-0 rounded-lg border border-neutral-200"
|
||||
:class="{ 'border-dashed': !isValidHex }"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="form.color && !isValidHex" class="mt-1 text-xs text-red-600">
|
||||
{{ t('admin.sites.form.colorInvalid') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
<div class="flex justify-end gap-3 border-t border-neutral-200 pt-4">
|
||||
<MalioButton
|
||||
v-if="isEditMode"
|
||||
:label="t('common.delete')"
|
||||
variant="danger"
|
||||
icon-name="mdi:delete-outline"
|
||||
icon-position="left"
|
||||
@click="emit('delete')"
|
||||
/>
|
||||
<MalioButton
|
||||
v-else
|
||||
:label="t('common.cancel')"
|
||||
variant="tertiary"
|
||||
@click="emit('update:modelValue', false)"
|
||||
/>
|
||||
<MalioButton
|
||||
:label="t('common.save')"
|
||||
variant="primary"
|
||||
:disabled="saving || !isValidHex"
|
||||
@click="handleSave"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
Reference in New Issue
Block a user