96 lines
3.1 KiB
Svelte
96 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import * as Card from '$lib/components/ui/card';
|
|
import { Label } from '$lib/components/ui/label';
|
|
import type { Pedimento } from '$lib/api/dashboard/a76/pedimentos';
|
|
|
|
let {
|
|
pedimento,
|
|
formData = $bindable(),
|
|
exists = $bindable(),
|
|
pedimentoType = '',
|
|
pedimentoNumber = ''
|
|
}: {
|
|
pedimento: Pedimento | null;
|
|
formData?: any;
|
|
exists?: boolean;
|
|
pedimentoType?: string;
|
|
pedimentoNumber?: string;
|
|
} = $props();
|
|
|
|
// Asegurar que formData siempre tenga un valor por defecto
|
|
formData = formData || { observaciones: '' };
|
|
|
|
// Variable para rastrear el último valor del servidor
|
|
let lastServerObservations = $state<string | null>(null);
|
|
|
|
// Actualizar formData solo cuando el pedimento cambie desde el servidor
|
|
$effect(() => {
|
|
const currentObservations = pedimento?.observations ?? null;
|
|
console.log('🔄 Pedimento changed in dates-tab-form:', currentObservations);
|
|
|
|
// Solo actualizar si el valor del servidor cambió realmente
|
|
if (currentObservations !== lastServerObservations) {
|
|
lastServerObservations = currentObservations;
|
|
formData = {
|
|
observaciones: currentObservations || ''
|
|
};
|
|
exists = !!currentObservations;
|
|
console.log('✅ Updated formData.observaciones:', formData.observaciones);
|
|
}
|
|
});
|
|
|
|
// Mapear el tipo de pedimento a un nombre legible
|
|
const tipoPedimentoNombre = $derived.by(() => {
|
|
switch(pedimentoType?.toLowerCase()) {
|
|
case 'automovil':
|
|
return 'Automóvil';
|
|
case 'complementario':
|
|
return 'Complementario';
|
|
case 'consolidado':
|
|
return 'Consolidado';
|
|
case 'normal':
|
|
return 'Normal';
|
|
default:
|
|
return pedimentoType || 'No especificado';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<Card.Title>Observaciones</Card.Title>
|
|
<Card.Description>
|
|
Agrega notas y observaciones sobre el pedimento
|
|
</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<div class="space-y-4">
|
|
<!-- Mostrar el tipo de pedimento y número -->
|
|
<div class="rounded-lg border bg-card p-4">
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-medium text-muted-foreground">Tipo de Pedimento:</span>
|
|
<span class="text-sm font-semibold">{tipoPedimentoNombre}</span>
|
|
</div>
|
|
{#if pedimentoNumber}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-medium text-muted-foreground">Número de Pedimento:</span>
|
|
<span class="text-sm font-semibold">{pedimentoNumber}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="observaciones">Observaciones</Label>
|
|
<textarea
|
|
id="observaciones"
|
|
bind:value={formData.observaciones}
|
|
placeholder="Escribe tus observaciones aquí..."
|
|
rows={10}
|
|
class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</Card.Content>
|
|
</Card.Root> |