From 599a7999c93b75b0fd7dbace470ae927c1884af1 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 22 Nov 2025 03:33:19 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20agregar=20creaci=C3=B3n=20de=20lotes=20?=
 =?UTF-8?q?de=20input=20en=20formulario=20de=20operaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ahora el formulario de crear operación permite crear nuevos lotes de
entrada directamente desde el paso 2, sin necesidad de salir del modal.

Cambios:
- Agregar botón "Nuevo lote de entrada" en el paso 2
- Mostrar formulario inline para crear lote con código, tipo y cantidad
- Al crear el lote, se agrega automáticamente a la lista de disponibles
- Se selecciona automáticamente como input de la operación
- Importar createLote del composable useLotes
- Agregar estado showCreateInputForm y creatingInput
- Implementar funciones cancelCreateInput y handleCreateInput

Beneficios:
- Flujo más ágil sin interrupciones
- Consistencia con la creación de lotes de output
- Mejor experiencia de usuario
---
 nuxt4/app/components/operaciones/Form.vue | 107 +++++++++++++++++++++-
 1 file changed, 106 insertions(+), 1 deletion(-)

diff --git a/nuxt4/app/components/operaciones/Form.vue b/nuxt4/app/components/operaciones/Form.vue
index 12bf4bd..89c7778 100644
--- a/nuxt4/app/components/operaciones/Form.vue
+++ b/nuxt4/app/components/operaciones/Form.vue
@@ -63,6 +63,7 @@
         </div>
 
         <div v-else class="space-y-2">
+          <!-- Lotes existentes -->
           <div
             v-for="lote in lotesDisponibles"
             :key="lote.id"
@@ -90,8 +91,68 @@
               />
             </div>
           </div>
+
+          <!-- Formulario para crear nuevo lote de entrada -->
+          <div v-if="showCreateInputForm" class="p-4 border-2 border-dashed border-primary/50 rounded-lg space-y-3 bg-primary/5">
+            <div class="flex justify-between items-center">
+              <h5 class="font-medium text-primary">Nuevo lote de entrada</h5>
+              <UButton
+                icon="i-heroicons-x-mark"
+                size="xs"
+                variant="ghost"
+                @click="cancelCreateInput"
+              />
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <UFormGroup label="Código (opcional)">
+                <UInput v-model="newInputLote.codigo" placeholder="Ej: UVA-001" icon="i-heroicons-hashtag" />
+              </UFormGroup>
+
+              <UFormGroup label="Tipo" required>
+                <USelect
+                  v-model="newInputLote.tipo"
+                  :items="TIPOS_LOTE"
+                  label-key="label"
+                  value-key="value"
+                  placeholder="Selecciona tipo"
+                  searchable
+                />
+              </UFormGroup>
+
+              <UFormGroup label="Cantidad (kg)">
+                <UInput v-model.number="newInputLote.cantidad_kg" type="number" step="0.01" placeholder="0.00" icon="i-heroicons-scale" />
+              </UFormGroup>
+            </div>
+
+            <div class="flex gap-2 justify-end">
+              <UButton
+                label="Cancelar"
+                variant="outline"
+                size="sm"
+                @click="cancelCreateInput"
+              />
+              <UButton
+                label="Crear y Seleccionar"
+                color="primary"
+                size="sm"
+                :loading="creatingInput"
+                :disabled="!newInputLote.tipo"
+                @click="handleCreateInput"
+              />
+            </div>
+          </div>
         </div>
 
+        <UButton
+          v-if="!showCreateInputForm"
+          icon="i-heroicons-plus"
+          label="Nuevo lote de entrada"
+          variant="outline"
+          block
+          @click="showCreateInputForm = true"
+        />
+
         <div class="flex gap-2 justify-end pt-4">
           <UButton
             label="Anterior"
@@ -191,12 +252,19 @@ const emit = defineEmits<{
   success: []
 }>()
 
-const { fetchLotes, createOperacion, TIPOS_OPERACION, TIPOS_LOTE } = useLotes()
+const { fetchLotes, createLote, createOperacion, TIPOS_OPERACION, TIPOS_LOTE } = useLotes()
 
 const step = ref(1)
 const loading = ref(false)
 const loadingLotes = ref(false)
 const lotesDisponibles = ref<Lote[]>([])
+const showCreateInputForm = ref(false)
+const creatingInput = ref(false)
+const newInputLote = ref({
+  codigo: '',
+  tipo: '',
+  cantidad_kg: undefined as number | undefined,
+})
 
 const formState = ref({
   tipo: '',
@@ -247,6 +315,43 @@ const removeOutput = (index: number) => {
   formState.value.outputs.splice(index, 1)
 }
 
+const cancelCreateInput = () => {
+  showCreateInputForm.value = false
+  newInputLote.value = {
+    codigo: '',
+    tipo: '',
+    cantidad_kg: undefined,
+  }
+}
+
+const handleCreateInput = async () => {
+  creatingInput.value = true
+  try {
+    const createdLote = await createLote({
+      codigo: newInputLote.value.codigo || undefined,
+      tipo: newInputLote.value.tipo,
+      cantidad_kg: newInputLote.value.cantidad_kg,
+    })
+
+    if (createdLote) {
+      // Agregar a la lista de lotes disponibles
+      lotesDisponibles.value.unshift(createdLote)
+
+      // Seleccionarlo automáticamente como input
+      formState.value.inputs.push({
+        lote_id: createdLote.id,
+        cantidad_kg: createdLote.cantidad_kg || undefined,
+        _lote: createdLote,
+      })
+
+      // Cerrar el formulario
+      cancelCreateInput()
+    }
+  } finally {
+    creatingInput.value = false
+  }
+}
+
 const getTipoLabel = (tipo: string) => {
   const foundOp = TIPOS_OPERACION.find((t) => t.value === tipo)
   if (foundOp) return foundOp.label