Inventory_frontend/app/components/CustomFieldsDisplay.vue

<template>
  <div v-if="customFields && customFields.length > 0" class="space-y-4">
    <h4 class="font-semibold text-gray-700 mb-3">
      Champs personnalisés
    </h4>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div
        v-for="field in sortedCustomFields"
        :key="field.id"
        class="form-control"
      >
        <label class="label">
          <span class="label-text">{{ field.name }}</span>
          <span v-if="field.required" class="label-text-alt text-error">*</span>
        </label>

        <!-- Champ de type TEXT -->
        <input
          v-if="field.type === 'text'"
          v-model="fieldValues[field.id]"
          type="text"
          class="input input-bordered input-sm"
          :required="field.required"
          @blur="updateCustomFieldValue(field.id)"
        >

        <!-- Champ de type NUMBER -->
        <input
          v-else-if="field.type === 'number'"
          v-model="fieldValues[field.id]"
          type="number"
          class="input input-bordered input-sm"
          :required="field.required"
          @blur="updateCustomFieldValue(field.id)"
        >

        <!-- Champ de type SELECT -->
        <select
          v-else-if="field.type === 'select'"
          v-model="fieldValues[field.id]"
          class="select select-bordered select-sm"
          :required="field.required"
          @change="updateCustomFieldValue(field.id)"
        >
          <option value="">
            Sélectionner...
          </option>
          <option
            v-for="option in field.options"
            :key="option"
            :value="option"
          >
            {{ option }}
          </option>
        </select>

        <!-- Champ de type BOOLEAN -->
        <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
          <input
            v-model="fieldValues[field.id]"
            type="checkbox"
            class="checkbox checkbox-sm"
            :checked="fieldValues[field.id] === 'true'"
            @change="updateCustomFieldValue(field.id)"
          >
          <span class="text-sm">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
        </div>

        <!-- Champ de type DATE -->
        <input
          v-else-if="field.type === 'date'"
          v-model="fieldValues[field.id]"
          type="date"
          class="input input-bordered input-sm"
          :required="field.required"
          @blur="updateCustomFieldValue(field.id)"
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, watch, computed } from 'vue'

const props = defineProps({
  customFields: {
    type: Array,
    default: () => []
  },
  entityId: {
    type: String,
    required: true
  },
  entityType: {
    type: String,
    required: true, // 'machine', 'composant', 'piece'
    validator: value => ['machine', 'composant', 'piece'].includes(value)
  }
})

const emit = defineEmits(['update'])

const sortedCustomFields = computed(() => {
  if (!Array.isArray(props.customFields)) {
    return []
  }
  return [...props.customFields].sort((a, b) => {
    const left = typeof a?.orderIndex === 'number' ? a.orderIndex : 0
    const right = typeof b?.orderIndex === 'number' ? b.orderIndex : 0
    return left - right
  })
})

// Valeurs des champs personnalisés
const fieldValues = reactive({})

// Initialiser les valeurs sans appliquer de valeur par défaut implicite
const initializeFieldValues = () => {
  props.customFields.forEach((field) => {
    if (!(field.id in fieldValues)) {
      fieldValues[field.id] = field.value ?? ''
    }
  })
}

// Mettre à jour la valeur d'un champ personnalisé
const updateCustomFieldValue = (fieldId) => {
  const field = props.customFields.find(f => f.id === fieldId)
  if (field) {
    emit('update', {
      fieldId,
      value: fieldValues[fieldId],
      field
    })
  }
}

// Surveiller les changements dans les champs personnalisés
watch(() => props.customFields, () => {
  initializeFieldValues()
}, { deep: true })

onMounted(() => {
  initializeFieldValues()
})
</script>