You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.8 KiB
52 lines
1.8 KiB
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
import type { CatalogEditorStore } from './catalog-editor.svelte.js'
|
|
|
|
const editor = getContext<CatalogEditorStore>('catalog-editor')
|
|
const cat = $derived(editor.cat)
|
|
|
|
const stats = $derived({
|
|
objs: cat.objs.length,
|
|
secs: cat.objs.reduce((n, o) => n + o.secs.length, 0),
|
|
atts: cat.objs.reduce((n, o) =>
|
|
n + o.atts.length + o.secs.reduce((m, s) => m + s.atts.length, 0), 0),
|
|
opts: cat.opts.length,
|
|
})
|
|
</script>
|
|
|
|
<div class="p-6 max-w-2xl flex flex-col gap-6">
|
|
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-sm font-semibold text-gray-200">Configuración del catálogo</h2>
|
|
<span class="text-xs text-gray-700 font-mono">{cat.id}</span>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-4 gap-3">
|
|
{#each [
|
|
{ label: 'Objetos', value: stats.objs },
|
|
{ label: 'Secciones', value: stats.secs },
|
|
{ label: 'Atributos', value: stats.atts },
|
|
{ label: 'Opciones', value: stats.opts },
|
|
] as s}
|
|
<div class="flex flex-col items-center gap-1 p-3 rounded-lg bg-gray-900 border border-gray-800">
|
|
<span class="text-xl font-bold text-indigo-400">{s.value}</span>
|
|
<span class="text-xs text-gray-600">{s.label}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Nombre -->
|
|
<section class="flex flex-col gap-3">
|
|
<h3 class="section-title">Identificación</h3>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-xs text-gray-500">Nombre del catálogo</label>
|
|
<input type="text" value={cat.name}
|
|
oninput={e => editor.renameCat(e.currentTarget.value)}
|
|
placeholder="Mi catálogo"
|
|
class="field-input" />
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|