Inventory/frontend/app/components/sites/SiteContactFormFields.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" />
-->