feat(data-stores): inline field editing for code, name, type; hide preview column

Row is no longer a giant click target. Code, Name, and Type cells now use
AE_Field_Editor for inline editing (pencil in edit_mode). Edit button opens
the full modal for everything else. Preview column hidden (kept in markup).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-17 16:19:51 -04:00
parent 726338cb1f
commit f2b4b9802d

View File

@@ -26,6 +26,7 @@ import { db_core } from '$lib/ae_core/db_core';
import { ae_util } from '$lib/ae_utils/ae_utils';
import type { ae_DataStore } from '$lib/types/ae_types';
import AE_DataStore_Form from '$lib/elements/element_data_store_form.svelte';
import AE_Field_Editor from '$lib/elements/element_ae_obj_field_editor_new.svelte';
let account_map = new SvelteMap<string, string>();
@@ -208,6 +209,8 @@ async function do_rename_apply() {
}
// ── Helpers ───────────────────────────────────────────────────────────────────
const ds_type_options = { text: 'Text', html: 'HTML', json: 'JSON', sql: 'SQL', md: 'Markdown' };
function type_badge(type: string | null | undefined) {
switch (type) {
case 'json': return 'preset-tonal-warning';
@@ -514,7 +517,7 @@ function content_preview(ds: ae_DataStore): string {
<th class="px-3 py-2">Type</th>
<th class="px-3 py-2">Account</th>
<th class="px-3 py-2">For</th>
<th class="px-3 py-2 hidden md:table-cell">Preview</th>
<th class="hidden px-3 py-2">Preview</th>
<th class="px-3 py-2 hidden lg:table-cell">
<button type="button" class="flex items-center gap-1 hover:opacity-100" onclick={() => toggle_sort('updated_on')}>
Updated
@@ -530,21 +533,41 @@ function content_preview(ds: ae_DataStore): string {
</thead>
<tbody>
{#each results as ds (ds.id ?? ds.data_store_id)}
<tr
class="border-surface-500/10 hover:bg-surface-500/5 cursor-pointer border-b transition-colors"
onclick={() => open_edit(ds)}>
{@const ds_id = ds.id ?? ds.data_store_id}
<tr class="border-surface-500/10 hover:bg-surface-500/5 border-b transition-colors">
<td class="px-3 py-2">
<AE_Field_Editor
object_type="data_store"
object_id={ds_id}
field_name="code"
current_value={ds.code ?? ''}
placeholder="store_code"
on_success={() => do_search(false)}>
<span class="font-mono" class:opacity-40={!ds.enable}>{ds.code}</span>
{#if !ds.enable}
<span class="badge preset-tonal-error ml-1 text-[9px]">off</span>
{/if}
{#if ds.hide}
<span class="badge preset-tonal-surface ml-1 text-[9px]">hidden</span>
{/if}
{#if !ds.enable}<span class="badge preset-tonal-error ml-1 text-[9px]">off</span>{/if}
{#if ds.hide}<span class="badge preset-tonal-surface ml-1 text-[9px]">hidden</span>{/if}
</AE_Field_Editor>
</td>
<td class="max-w-40 truncate px-3 py-2">{ds.name ?? '—'}</td>
<td class="px-3 py-2">
<AE_Field_Editor
object_type="data_store"
object_id={ds_id}
field_name="name"
current_value={ds.name ?? ''}
placeholder="Display name"
on_success={() => do_search(false)} />
</td>
<td class="px-3 py-2">
<AE_Field_Editor
object_type="data_store"
object_id={ds_id}
field_name="type"
current_value={ds.type ?? 'text'}
field_type="select"
select_options={ds_type_options}
on_success={() => do_search(false)}>
<span class="badge {type_badge(ds.type)} font-mono text-[9px] uppercase">{ds.type ?? '?'}</span>
</AE_Field_Editor>
</td>
<td class="px-3 py-2 font-mono opacity-60" title={ds.account_id ?? 'global'}>
{#if ds.account_id}
@@ -563,7 +586,7 @@ function content_preview(ds: ae_DataStore): string {
{/if}
</td>
<td class="hidden max-w-48 truncate px-3 py-2 opacity-40 md:table-cell">
<td class="hidden px-3 py-2 opacity-40">
{content_preview(ds)}
</td>
<td class="hidden px-3 py-2 opacity-50 lg:table-cell whitespace-nowrap">
@@ -573,7 +596,7 @@ function content_preview(ds: ae_DataStore): string {
<button
type="button"
class="btn btn-sm preset-tonal-primary text-xs"
onclick={(e) => { e.stopPropagation(); open_edit(ds); }}>
onclick={() => open_edit(ds)}>
Edit
</button>
</td>