Merge branch 'development' into fix/permisos
This commit is contained in:
@@ -134,22 +134,6 @@
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
{#if classesLoadError}
|
||||
<div
|
||||
role="alert"
|
||||
class="mx-6 mt-2 flex gap-2 rounded-md border border-destructive/25 bg-destructive/5 p-2.5 text-sm text-destructive"
|
||||
>
|
||||
<AlertCircle class="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<p class="font-medium leading-snug">{classesLoadError}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto shrink-0 cursor-pointer opacity-60 hover:opacity-100"
|
||||
onclick={() => (classesLoadError = '')}
|
||||
aria-label="Cerrar"
|
||||
>×</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="px-6 py-2">
|
||||
<div class="relative group">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400 transition-colors group-focus-within:text-blue-500" />
|
||||
|
||||
@@ -132,22 +132,6 @@
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
{#if partsLoadError}
|
||||
<div
|
||||
role="alert"
|
||||
class="mx-6 mt-2 flex gap-2 rounded-md border border-destructive/25 bg-destructive/5 p-2.5 text-sm text-destructive"
|
||||
>
|
||||
<AlertCircle class="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<p class="font-medium leading-snug">{partsLoadError}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto shrink-0 cursor-pointer opacity-60 hover:opacity-100"
|
||||
onclick={() => (partsLoadError = '')}
|
||||
aria-label="Cerrar"
|
||||
>×</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="px-6 py-2">
|
||||
<div class="relative group">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400 transition-colors group-focus-within:text-blue-500" />
|
||||
|
||||
@@ -173,22 +173,6 @@
|
||||
<fieldset class="border rounded-md p-3 space-y-3">
|
||||
<legend class="text-xs font-semibold px-2 uppercase">Series</legend>
|
||||
|
||||
{#if seriesErrorMessage}
|
||||
<div
|
||||
role="alert"
|
||||
class="flex gap-2 rounded-md border border-destructive/25 bg-destructive/5 p-2.5 text-sm text-destructive"
|
||||
>
|
||||
<AlertCircle class="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<p class="font-medium leading-snug">{seriesErrorMessage}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto shrink-0 cursor-pointer opacity-60 hover:opacity-100"
|
||||
onclick={() => (seriesErrorMessage = '')}
|
||||
aria-label="Cerrar"
|
||||
>×</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center justify-between gap-2 flex-wrap">
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<Checkbox
|
||||
|
||||
@@ -1,203 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { AlertCircle, AlertTriangle, ChevronDown, ChevronUp, X } from 'lucide-svelte';
|
||||
import { cn } from '$lib/utils';
|
||||
|
||||
export type ErrorPanelNoticeRow = {
|
||||
field: string;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export type ErrorPanelNoticeVariant = 'error' | 'warning';
|
||||
|
||||
export type ErrorPanelNoticeLabels = {
|
||||
clear: string;
|
||||
columnType: string;
|
||||
columnField: string;
|
||||
columnMessage: string;
|
||||
emptyField: string;
|
||||
dismissRowAria: string;
|
||||
toggleDetailsAria: string;
|
||||
};
|
||||
|
||||
let {
|
||||
open,
|
||||
variant = 'error',
|
||||
title,
|
||||
rows = [],
|
||||
durationMs = 12000,
|
||||
labels,
|
||||
dismissibleRows = true,
|
||||
class: className = '',
|
||||
onClose,
|
||||
onDismissRow
|
||||
}: {
|
||||
open: boolean;
|
||||
variant?: ErrorPanelNoticeVariant;
|
||||
title: string;
|
||||
rows: ErrorPanelNoticeRow[];
|
||||
durationMs?: number;
|
||||
labels: ErrorPanelNoticeLabels;
|
||||
dismissibleRows?: boolean;
|
||||
class?: string;
|
||||
onClose?: () => void;
|
||||
onDismissRow?: (index: number) => void;
|
||||
} = $props();
|
||||
|
||||
let expanded = $state(true);
|
||||
|
||||
const isWarning = $derived(variant === 'warning');
|
||||
|
||||
/** Re-expand the table when the panel opens or when errors/warnings change (new batch). */
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
void title;
|
||||
void variant;
|
||||
void JSON.stringify(rows);
|
||||
expanded = true;
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (!open || durationMs <= 0) return;
|
||||
void rows.length;
|
||||
const t = setTimeout(() => onClose?.(), durationMs);
|
||||
return () => clearTimeout(t);
|
||||
});
|
||||
|
||||
function toggleExpanded() {
|
||||
expanded = !expanded;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
data-partida-notice-layer
|
||||
role={isWarning ? 'status' : 'alert'}
|
||||
class={cn(
|
||||
// Above sonner; inset-left keeps the panel aligned with empty space in Partidas
|
||||
'pointer-events-auto fixed top-4 left-0 z-[1000000000] flex w-[min(100vw-2rem,30rem)] max-h-[min(72vh,calc(100vh-2rem))] flex-col overflow-hidden rounded-lg border bg-background text-foreground shadow-xl sm:left-1',
|
||||
isWarning ? 'border-amber-400/40' : 'border-border',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<!-- Header -->
|
||||
<div
|
||||
class={cn(
|
||||
'flex shrink-0 items-center gap-2 border-b px-3 py-2.5',
|
||||
isWarning
|
||||
? 'border-amber-400/30 bg-amber-500/10 dark:bg-amber-500/15'
|
||||
: 'border-destructive/20 bg-destructive/10 dark:bg-destructive/15'
|
||||
)}
|
||||
>
|
||||
<span
|
||||
class={cn(
|
||||
'flex size-7 shrink-0 items-center justify-center rounded-full',
|
||||
isWarning
|
||||
? 'bg-amber-500 text-white'
|
||||
: 'bg-destructive text-destructive-foreground'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{#if isWarning}
|
||||
<AlertTriangle class="size-4" />
|
||||
{:else}
|
||||
<AlertCircle class="size-4" />
|
||||
{/if}
|
||||
</span>
|
||||
<p class="min-w-0 flex-1 text-sm font-semibold text-foreground">{title}</p>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex h-7 cursor-pointer items-center rounded-md px-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
onclick={() => onClose?.()}
|
||||
>
|
||||
{labels.clear}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
onclick={toggleExpanded}
|
||||
aria-expanded={expanded}
|
||||
aria-label={labels.toggleDetailsAria}
|
||||
>
|
||||
{#if expanded}
|
||||
<ChevronUp class="size-4" />
|
||||
{:else}
|
||||
<ChevronDown class="size-4" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if expanded && rows.length > 0}
|
||||
<div class="min-h-0 flex-1 overflow-y-auto">
|
||||
<table class="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-border bg-muted/30">
|
||||
<th
|
||||
class="w-10 px-2 py-1.5 text-center text-[10px] font-semibold tracking-widest text-muted-foreground uppercase"
|
||||
>
|
||||
{labels.columnType}
|
||||
</th>
|
||||
<th
|
||||
class="w-[38%] px-2 py-1.5 text-center text-[10px] font-semibold tracking-widest text-muted-foreground uppercase"
|
||||
>
|
||||
{labels.columnField}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1.5 text-left text-[10px] font-semibold tracking-widest text-muted-foreground uppercase"
|
||||
>
|
||||
{labels.columnMessage}
|
||||
</th>
|
||||
{#if dismissibleRows && onDismissRow}
|
||||
<th class="w-8"></th>
|
||||
{/if}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each rows as row, i (i)}
|
||||
<tr class="border-b border-border/50 hover:bg-muted/20">
|
||||
<td class="px-2 py-2.5 text-center align-middle">
|
||||
<span
|
||||
class={cn(
|
||||
'inline-flex size-5 items-center justify-center rounded-full text-[11px] font-bold leading-none',
|
||||
isWarning
|
||||
? 'bg-amber-500 text-white'
|
||||
: 'bg-destructive text-destructive-foreground'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{#if isWarning}
|
||||
<AlertTriangle class="size-3" />
|
||||
{:else}
|
||||
×
|
||||
{/if}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="break-words px-2 py-2.5 align-middle text-center font-semibold text-foreground"
|
||||
>
|
||||
{row.field || labels.emptyField}
|
||||
</td>
|
||||
<td class="break-words px-2 py-2.5 align-top text-left leading-relaxed text-muted-foreground">
|
||||
{row.message}
|
||||
</td>
|
||||
{#if dismissibleRows && onDismissRow}
|
||||
<td class="px-1 py-2 text-center align-middle">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex size-6 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
onclick={() => onDismissRow!(i)}
|
||||
aria-label={labels.dismissRowAria}
|
||||
>
|
||||
<X class="size-3" />
|
||||
</button>
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -47,7 +47,10 @@
|
||||
let showDetails = $state(false);
|
||||
|
||||
|
||||
const columns = createColumns();
|
||||
const isError = $derived(!canView || status >= 400 || error);
|
||||
|
||||
// Pasamos canEdit y canDelete a las columnas por si tu DataTable tiene acciones por fila
|
||||
const columns = createColumns({ canEdit, canDelete });
|
||||
|
||||
// --- Lifecycle ---
|
||||
onMount(() => {
|
||||
|
||||
@@ -393,21 +393,23 @@
|
||||
</Table.Root>
|
||||
</div>
|
||||
|
||||
<!-- Footer de Tabla -->
|
||||
{#if filteredFdaList.length > 0}
|
||||
<div class="flex items-center justify-between border-t bg-muted/30 px-4 py-3">
|
||||
<span class="text-sm text-muted-foreground">
|
||||
Mostrando {filteredFdaList.length} registros
|
||||
</span>
|
||||
{#if searchQuery}
|
||||
<Badge variant="secondary" class="gap-2">
|
||||
Filtro: "{searchQuery}"
|
||||
<button onclick={() => (searchQuery = '')} class="hover:text-destructive"> x </button>
|
||||
</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Root>
|
||||
{#if filteredFdaList.length > 0}
|
||||
<div class="flex items-center justify-between border-t bg-muted/30 px-4 py-3">
|
||||
<span class="text-sm text-muted-foreground">
|
||||
Mostrando {filteredFdaList.length} registros
|
||||
</span>
|
||||
{#if searchQuery}
|
||||
<Badge variant="secondary" class="gap-2">
|
||||
Filtro: "{searchQuery}"
|
||||
<button onclick={() => (searchQuery = '')} class="hover:text-destructive">
|
||||
×
|
||||
</button>
|
||||
</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Root>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user