Limpieza y correcion de warnings en ultimos cambios
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { helpApi, type HelpArticle } from '$lib/api/help';
|
||||
import { helpStore } from '$lib/stores/help.svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
// Nota: Estas librerías deben ser instaladas: npm install marked dompurify @types/dompurify
|
||||
// Si no están, fallará el import. El usuario debe instalarlas.
|
||||
@@ -133,96 +134,100 @@
|
||||
</Sheet.Trigger>
|
||||
<Sheet.Content side="right" class="w-[400px] sm:w-[540px]">
|
||||
<Sheet.Header>
|
||||
<Sheet.Title class="flex items-center gap-2">
|
||||
{#if selectedArticle}
|
||||
<Button variant="ghost" size="icon" onclick={() => (selectedArticle = null)}>
|
||||
<ChevronLeft size={20} />
|
||||
</Button>
|
||||
{/if}
|
||||
Base de Conocimientos
|
||||
</Sheet.Title>
|
||||
</Sheet.Header>
|
||||
<Sheet.Title class="flex items-center gap-2">
|
||||
{#if selectedArticle}
|
||||
<Button variant="ghost" size="icon" onclick={() => (selectedArticle = null)}>
|
||||
<ChevronLeft size={20} />
|
||||
</Button>
|
||||
{/if}
|
||||
<span>Base de Conocimientos</span>
|
||||
</Sheet.Title>
|
||||
</Sheet.Header>
|
||||
|
||||
<div class="mt-6 flex h-[calc(100vh-120px)] flex-col">
|
||||
{#if !selectedArticle}
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium">Artículos Disponibles</h3>
|
||||
{#if isAdmin}
|
||||
<Button variant="outline" size="sm" onclick={startCreate}>
|
||||
<Plus size={16} class="mr-2" /> Agregar Nuevo
|
||||
</Button>
|
||||
<div class="mt-6 flex h-[calc(100vh-120px)] flex-col">
|
||||
{#if !selectedArticle}
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium">Artículos Disponibles</h3>
|
||||
{#if isAdmin}
|
||||
<Button variant="outline" size="sm" onclick={startCreate}>
|
||||
<Plus size={16} class="mr-2" /> <span>Agregar Nuevo</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isLoading}
|
||||
<p class="py-10 text-center text-sm text-muted-foreground">Cargando...</p>
|
||||
{:else if articles.length === 0}
|
||||
<p class="py-10 text-center text-sm text-muted-foreground">
|
||||
No hay artículos de ayuda disponibles.
|
||||
</p>
|
||||
{/if}
|
||||
<div class="grid gap-2">
|
||||
{#each articles as article (article.uuid)}
|
||||
<button
|
||||
onclick={() => selectArticle(article)}
|
||||
class="flex flex-col items-start rounded-lg border p-4 text-left transition-colors hover:bg-accent"
|
||||
>
|
||||
<span class="font-semibold">{article.title}</span>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
Última edición: {browser ? new Date(article.updated_at).toLocaleDateString() : article.updated_at.split('T')[0]}
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-1 flex-col gap-4">
|
||||
{#if isEditing}
|
||||
<div class="space-y-4">
|
||||
<input
|
||||
bind:value={editTitle}
|
||||
class="w-full rounded-md border bg-transparent p-2 text-xl font-bold"
|
||||
placeholder="Título del artículo"
|
||||
/>
|
||||
<textarea
|
||||
bind:value={editContent}
|
||||
class="min-h-[400px] w-full flex-1 rounded-md border bg-transparent p-4 font-mono text-sm focus:ring-1 focus:ring-primary focus:outline-none"
|
||||
placeholder="Escribe en Markdown..."
|
||||
></textarea>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
isEditing = false;
|
||||
if (isCreating) selectedArticle = null;
|
||||
isCreating = false;
|
||||
}}
|
||||
>
|
||||
<X size={16} class="mr-2" /> <span>Cancelar</span>
|
||||
</Button>
|
||||
<Button onclick={saveChanges}>
|
||||
<Save size={16} class="mr-2" /> <span>Guardar Cambios</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-bold">{selectedArticle.title}</h2>
|
||||
{#if isAdmin}
|
||||
<Button variant="outline" size="sm" onclick={startEdit}>
|
||||
<Edit2 size={16} class="mr-2" /> <span>Editar</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="prose prose-sm max-w-none border-t pt-4 dark:prose-invert">
|
||||
{#if browser}
|
||||
{@html renderMarkdown(selectedArticle.content)}
|
||||
{:else}
|
||||
<div class="whitespace-pre-wrap">{selectedArticle.content}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isLoading}
|
||||
<p class="py-10 text-center text-sm text-muted-foreground">Cargando...</p>
|
||||
{:else if articles.length === 0}
|
||||
<p class="py-10 text-center text-sm text-muted-foreground">
|
||||
No hay artículos de ayuda disponibles.
|
||||
</p>
|
||||
{/if}
|
||||
<div class="grid gap-2">
|
||||
{#each articles as article}
|
||||
<button
|
||||
onclick={() => selectArticle(article)}
|
||||
class="flex flex-col items-start rounded-lg border p-4 text-left transition-colors hover:bg-accent"
|
||||
>
|
||||
<span class="font-semibold">{article.title}</span>
|
||||
<span class="text-xs text-muted-foreground"
|
||||
>Última edición: {new Date(article.updated_at).toLocaleDateString()}</span
|
||||
>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-1 flex-col gap-4">
|
||||
{#if isEditing}
|
||||
<div class="space-y-4">
|
||||
<input
|
||||
bind:value={editTitle}
|
||||
class="w-full rounded-md border bg-transparent p-2 text-xl font-bold"
|
||||
placeholder="Título del artículo"
|
||||
/>
|
||||
<textarea
|
||||
bind:value={editContent}
|
||||
class="min-h-[400px] w-full flex-1 rounded-md border bg-transparent p-4 font-mono text-sm focus:ring-1 focus:ring-primary focus:outline-none"
|
||||
placeholder="Escribe en Markdown..."
|
||||
></textarea>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
isEditing = false;
|
||||
if (isCreating) selectedArticle = null;
|
||||
isCreating = false;
|
||||
}}
|
||||
>
|
||||
<X size={16} class="mr-2" /> Cancelar
|
||||
</Button>
|
||||
<Button onclick={saveChanges}>
|
||||
<Save size={16} class="mr-2" /> Guardar Cambios
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-bold">{selectedArticle.title}</h2>
|
||||
{#if isAdmin}
|
||||
<Button variant="outline" size="sm" onclick={startEdit}>
|
||||
<Edit2 size={16} class="mr-2" /> Editar
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="prose prose-sm max-w-none border-t pt-4 dark:prose-invert">
|
||||
{@html renderMarkdown(selectedArticle.content)}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Sheet.Content>
|
||||
</Sheet.Root>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user