Files
Inventory/app/components/sites/SiteContactFormFields.vue
Matthieu cc70fe2b29 feat(permissions) : add role-based UI guards and readonly mode for viewers
- Add usePermissions composable (isAdmin, canEdit, canView)
- Password-protected profile login with modal on profiles page
- Disable all form fields for ROLE_VIEWER across edit/create pages
- Show navigation buttons (Modifier/Consulter) for all roles, hide delete for viewers
- Add readonly prop to ModelTypeForm for category pages
- Disable modal fields (sites, constructeurs) for viewers
- Guard /admin routes in middleware

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 13:36:42 +01:00

133 lines
2.9 KiB
Vue

<template>
<div class="grid grid-cols-1 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">Nom du contact</span>
</label>
<input
v-model="contactName"
type="text"
placeholder="Nom et prénom"
class="input input-bordered"
:disabled="disabled"
required
/>
</div>
<FieldPhone v-model="contactPhone" :disabled="disabled" required />
<div class="form-control">
<label class="label">
<span class="label-text">Adresse</span>
</label>
<input
v-model="contactAddress"
type="text"
placeholder="Adresse complète"
class="input input-bordered"
:disabled="disabled"
required
/>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">Code postal</span>
</label>
<input
v-model="contactPostalCode"
type="text"
placeholder="Code postal"
class="input input-bordered"
:disabled="disabled"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Ville</span>
</label>
<input
v-model="contactCity"
type="text"
placeholder="Ville"
class="input input-bordered"
:disabled="disabled"
required
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, toRef } from 'vue'
import type { PropType } from 'vue'
import FieldPhone from '~/components/form/FieldPhone.vue'
type SiteForm = {
contactName: string
contactPhone: string
contactAddress: string
contactPostalCode: string
contactCity: string
}
const props = defineProps({
form: {
type: Object as PropType<SiteForm>,
required: true,
},
disabled: {
type: Boolean,
default: false,
},
})
const form = toRef(props, 'form')
const contactName = computed({
get: () => form.value.contactName,
set: (value: string) => {
form.value.contactName = value
},
})
const contactPhone = computed({
get: () => form.value.contactPhone,
set: (value: string) => {
form.value.contactPhone = value
},
})
const contactAddress = computed({
get: () => form.value.contactAddress,
set: (value: string) => {
form.value.contactAddress = value
},
})
const contactPostalCode = computed({
get: () => form.value.contactPostalCode,
set: (value: string) => {
form.value.contactPostalCode = value
},
})
const contactCity = computed({
get: () => form.value.contactCity,
set: (value: string) => {
form.value.contactCity = value
},
})
</script>
<!--
Bloc de formulaire partagé pour la saisie/édition des informations de contact d'un site.
Utilisation :
<SiteContactFormFields :form="siteForm" />
-->