Inventory_frontend/app/components/ComponentItem.vue

<template>
  <div class="space-y-4">
    <!-- Component Header -->
    <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
      <div class="flex items-start gap-3 w-full">
        <button
          type="button"
          class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
          :class="{ 'rotate-90': !isCollapsed }"
          @click="toggleCollapse"
          :aria-expanded="!isCollapsed"
          :title="isCollapsed ? 'Déplier les détails du composant' : 'Replier les détails du composant'"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} le composant</span>
        </button>
        <div class="flex-1">
          <h3 class="text-lg font-semibold">{{ component.name }}</h3>
          <div class="flex flex-wrap gap-2 mt-2">
            <span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
            <span v-if="component.constructeur" class="badge badge-outline badge-sm">{{ component.constructeur }}</span>
            <span v-if="component.emplacement" class="badge badge-outline badge-sm">{{ component.emplacement }}</span>
            <span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
          </div>
        </div>
      </div>
    </div>

    <div v-show="!isCollapsed" class="space-y-4">
      <!-- Component Info Display - Editable or Read-only -->
      <div class="p-4 bg-base-100 border border-gray-200 rounded-lg">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div class="form-control">
            <label class="label"><span class="label-text font-medium">Nom</span></label>
            <input
              v-if="isEditMode"
              v-model="component.name"
              type="text"
              class="input input-bordered input-sm"
              @blur="updateComponent"
            />
            <div v-else class="input input-bordered input-sm bg-base-200">{{ component.name }}</div>
          </div>
          <div class="form-control">
            <label class="label"><span class="label-text font-medium">Référence</span></label>
            <input
              v-if="isEditMode"
              v-model="component.reference"
              type="text"
              class="input input-bordered input-sm"
              @blur="updateComponent"
            />
            <div v-else class="input input-bordered input-sm bg-base-200">{{ component.reference || 'Non définie' }}</div>
          </div>
          <div class="form-control">
            <label class="label"><span class="label-text font-medium">Constructeur</span></label>
            <input
              v-if="isEditMode"
              v-model="component.constructeur"
              type="text"
              class="input input-bordered input-sm"
              @blur="updateComponent"
            />
            <div v-else class="input input-bordered input-sm bg-base-200">{{ component.constructeur || 'Non défini' }}</div>
          </div>
          <div class="form-control">
            <label class="label"><span class="label-text font-medium">Emplacement</span></label>
            <input
              v-if="isEditMode"
              v-model="component.emplacement"
              type="text"
              class="input input-bordered input-sm"
              @blur="updateComponent"
            />
            <div v-else class="input input-bordered input-sm bg-base-200">{{ component.emplacement || 'Non défini' }}</div>
          </div>
          <div class="form-control">
            <label class="label"><span class="label-text font-medium">Prix</span></label>
            <input
              v-if="isEditMode"
              v-model="component.prix"
              type="number"
              step="0.01"
              class="input input-bordered input-sm"
              @blur="updateComponent"
            />
            <div v-else class="input input-bordered input-sm bg-base-200">{{ component.prix ? `${component.prix}€` : 'Non défini' }}</div>
          </div>
        </div>
      </div>

      <!-- Custom Fields Display - Editable or Read-only -->
      <div v-if="component.customFields && component.customFields.length > 0" class="mt-4 pt-4 border-t border-gray-200">
        <h4 class="font-semibold text-sm 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 component.customFields" :key="field.id" class="form-control">
            <label class="label">
              <span class="label-text text-sm">{{ field.name }}</span>
              <span v-if="field.required" class="label-text-alt text-error">*</span>
            </label>
            <template v-if="isEditMode">
              <input
                v-if="field.type === 'text'"
                v-model="field.value"
                type="text"
                :placeholder="field.defaultValue || ''"
                class="input input-bordered input-sm"
                :required="field.required"
                @blur="updateComponentCustomField(field)"
              />
              <input
                v-else-if="field.type === 'number'"
                v-model="field.value"
                type="number"
                :placeholder="field.defaultValue || ''"
                class="input input-bordered input-sm"
                :required="field.required"
                @blur="updateComponentCustomField(field)"
              />
              <select
                v-else-if="field.type === 'select'"
                v-model="field.value"
                class="select select-bordered select-sm"
                :required="field.required"
                @change="updateComponentCustomField(field)"
              >
                <option value="">{{ field.defaultValue || 'Sélectionner...' }}</option>
                <option v-for="option in field.options" :key="option" :value="option">{{ option }}</option>
              </select>
              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
                <input
                  v-model="field.value"
                  type="checkbox"
                  class="checkbox checkbox-sm"
                  true-value="true"
                  false-value="false"
                  @change="updateComponentCustomField(field)"
                />
                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
              </div>
              <input
                v-else-if="field.type === 'date'"
                v-model="field.value"
                type="date"
                :placeholder="field.defaultValue || ''"
                class="input input-bordered input-sm"
                :required="field.required"
                @blur="updateComponentCustomField(field)"
              />
            </template>
            <template v-else>
              <div class="input input-bordered input-sm bg-base-200">{{ field.value || field.defaultValue || 'Non défini' }}</div>
            </template>
          </div>
        </div>
      </div>

      <!-- Component Pieces -->
      <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
        <h4 class="font-semibold text-gray-700">Pièces du composant</h4>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          <PieceItem
            v-for="piece in component.pieces"
            :key="piece.id"
            :piece="piece"
            :is-edit-mode="isEditMode"
            @update="updatePiece"
            @edit="editPiece"
            @custom-field-update="updatePieceCustomField"
          />
        </div>
      </div>

      <!-- Sub Components -->
      <div v-if="component.subComponents && component.subComponents.length > 0" class="space-y-3">
        <h4 class="font-semibold text-gray-700">Sous-composants</h4>
        <div class="space-y-3 pl-4 border-l-2 border-gray-200">
          <ComponentItem
            v-for="subComponent in component.subComponents"
            :key="subComponent.id"
            :component="subComponent"
            :is-edit-mode="isEditMode"
            :collapse-all="collapseAll"
            :toggle-token="toggleToken"
            @update="$emit('update', $event)"
            @edit-piece="$emit('edit-piece', $event)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import PieceItem from './PieceItem.vue'

const props = defineProps({
  component: {
    type: Object,
    required: true
  },
  isEditMode: {
    type: Boolean,
    default: false
  },
  collapseAll: {
    type: Boolean,
    default: true
  },
  toggleToken: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['update', 'edit-piece'])

const isCollapsed = ref(true)

watch(
  () => props.toggleToken,
  () => {
    isCollapsed.value = props.collapseAll
  },
  { immediate: true }
)

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

// Methods
const updateComponent = () => {
  emit('update', props.component)
}

const updateComponentCustomField = (field) => {
  // Mettre à jour le champ personnalisé du composant
  emit('update', props.component)
}

const updatePiece = (updatedPiece) => {
  emit('edit-piece', updatedPiece)
}

const editPiece = (piece) => {
  emit('edit-piece', piece)
}

const updatePieceCustomField = (fieldUpdate) => {
  // Forward to parent
  emit('edit-piece', { ...fieldUpdate, type: 'custom-field-update' })
}
</script>