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.
90 lines
3.2 KiB
90 lines
3.2 KiB
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
import type { EditorStore } from '../../editor.svelte'
|
|
|
|
const editor = getContext<EditorStore>('editor')
|
|
|
|
const entities = $derived(Object.values(editor.collection.entities))
|
|
</script>
|
|
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-800">
|
|
<span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">
|
|
Entidades ({entities.length})
|
|
</span>
|
|
<button
|
|
onclick={() => editor.addEntity()}
|
|
class="text-gray-500 hover:text-indigo-400 transition-colors text-sm
|
|
w-6 h-6 flex items-center justify-center rounded hover:bg-indigo-500/10"
|
|
title="Nueva entidad"
|
|
>+</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
{#if entities.length === 0}
|
|
<div class="px-4 py-8 text-center text-gray-600 text-xs">
|
|
<p>Sin entidades</p>
|
|
<p class="mt-1 text-gray-700">
|
|
Una entidad es un producto configurable — apartamento, coche, habitación...
|
|
</p>
|
|
<button
|
|
onclick={() => editor.addEntity()}
|
|
class="mt-3 text-xs px-3 py-1.5 rounded border border-dashed border-gray-700
|
|
text-gray-500 hover:text-indigo-400 hover:border-indigo-700 transition-colors"
|
|
>
|
|
Crear entidad
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
<ul class="py-1">
|
|
{#each entities as entity (entity.id)}
|
|
<li>
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
onclick={() => editor.setActiveEntity(entity.id)}
|
|
onkeydown={(e) => e.key === 'Enter' && editor.setActiveEntity(entity.id)}
|
|
class="
|
|
w-full text-left px-4 py-2.5 flex items-center gap-2 text-sm cursor-pointer
|
|
transition-colors group
|
|
{editor.activeEntityId === entity.id
|
|
? 'bg-indigo-600/20 text-indigo-300'
|
|
: 'text-gray-400 hover:bg-gray-800 hover:text-gray-200'}
|
|
"
|
|
>
|
|
<!-- Indicador de error -->
|
|
{#if editor.validation.errors.some(e => e.path.startsWith(`entities.${entity.id}`))}
|
|
<span class="w-1.5 h-1.5 rounded-full bg-red-400 shrink-0"></span>
|
|
{:else if editor.validation.warnings.some(e => e.path.startsWith(`entities.${entity.id}`))}
|
|
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0"></span>
|
|
{:else}
|
|
<span class="w-1.5 h-1.5 rounded-full bg-transparent shrink-0"></span>
|
|
{/if}
|
|
|
|
<span class="flex-1 truncate">
|
|
{#if entity.name.es}
|
|
{entity.name.es}
|
|
{:else}
|
|
<span class="italic text-gray-600">Sin nombre</span>
|
|
{/if}
|
|
</span>
|
|
|
|
<!-- Nº grupos -->
|
|
<span class="text-xs text-gray-600 shrink-0">
|
|
{Object.keys(entity.groups).length}g
|
|
</span>
|
|
|
|
<!-- Botón eliminar -->
|
|
<button
|
|
onclick={(e) => { e.stopPropagation(); editor.deleteEntity(entity.id) }}
|
|
class="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400
|
|
transition-opacity text-xs px-1"
|
|
title="Eliminar entidad"
|
|
>✕</button>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</div>
|