feat(sites) : API CRUD + rattachement User<->Site + admin (ticket 2/4)
Exposition de Site via API Platform (5 operations RBAC sites.view/sites.manage), relation User.sites (M2M user_site EAGER) + User.currentSite (M2O nullable, ON DELETE SET NULL). Endpoint PATCH /api/me/current-site via ressource virtuelle + processor (SiteNotAuthorizedException → 403). UserRbacProcessor etendu avec gardes post-persist : auto-reset si currentSite retire, auto-select premier site si null + sites non vide. Page /admin/sites (DataTable + drawer creation/edition + modale suppression). UserRbacDrawer etendu avec section "Sites autorises". Colonne "Sites" ajoutee dans la table /admin/users (liste des noms separes par virgule). Sidebar entree Sites (module: sites, permission: sites.view). Refactor adresse : split full_address en street + complement (nullable) + getter computed Site::getFullAddress() multi-lignes. Migration ALTER dediee pour compat devs ayant deja joue le ticket 1. Fixtures avec vraies adresses (Chatellerault/Fontenet/Pommevic). Doctrine : inversedBy synchrone User.sites <-> Site.users pour maintenir la collection inverse en memoire. User::switchCurrentSite() porte la garde domaine (throw SiteNotAuthorizedException), aligne sur Role::ensureDeletable. Helper skipIfSitesModuleDisabled centralise dans AbstractApiTestCase. Tests : 182/182 (182/182 aussi module desactive, 2 skipped). 29 nouveaux tests PHPUnit (CRUD API, switch currentSite, cascade DB, /api/me enrichi, extension /rbac, gardes structurelles fullAddress/currentSite ignores, anti-cycle Site.users). 11 tests Vitest sur la validation hex couleur. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
76
frontend/modules/sites/components/SiteDeleteModal.vue
Normal file
76
frontend/modules/sites/components/SiteDeleteModal.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
|
||||
@click.self="cancel"
|
||||
>
|
||||
<div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
|
||||
<h3 class="text-lg font-semibold text-neutral-900">
|
||||
{{ t('admin.sites.delete.title') }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm text-neutral-600">
|
||||
{{ t('admin.sites.delete.message', { name: siteName }) }}
|
||||
</p>
|
||||
<div class="mt-6 flex justify-end gap-3">
|
||||
<MalioButton
|
||||
:label="t('common.cancel')"
|
||||
variant="secondary"
|
||||
@click="cancel"
|
||||
/>
|
||||
<MalioButton
|
||||
:label="t('common.delete')"
|
||||
variant="danger"
|
||||
icon-name="mdi:delete-outline"
|
||||
icon-position="left"
|
||||
:disabled="loading"
|
||||
@click="confirm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
siteName: string
|
||||
loading: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
confirm: []
|
||||
}>()
|
||||
|
||||
function cancel() {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
function confirm() {
|
||||
emit('confirm')
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') cancel()
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('keydown', onKeydown))
|
||||
onUnmounted(() => document.removeEventListener('keydown', onKeydown))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
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 '~/modules/sites/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