diff --git a/webui/src/components/Inspect.svelte b/webui/src/components/Inspect.svelte index c00b2d0..b421091 100644 --- a/webui/src/components/Inspect.svelte +++ b/webui/src/components/Inspect.svelte @@ -10,6 +10,8 @@ import Spinner from "./utils/Spinner.svelte"; import NotesEditor from "./utils/NotesEditor.svelte"; import type { AttributeChange } from "../types/base"; + import Selector from "./utils/Selector.svelte"; + import type { IValue } from "upend/types"; export let address: string; export let index: number | undefined; @@ -99,7 +101,8 @@ $: groups = ($entity?.backlinks || []) .filter((e) => e.attribute === "HAS") - .map((e) => e.entity); + .map((e) => e.entity) + .sort(); // TODO async function onChange(ev: CustomEvent) { const change = ev.detail; @@ -137,6 +140,27 @@ } revalidate(); } + + let groupToAdd: IValue | undefined; + async function addGroup() { + if (!groupToAdd) { + return; + } + await fetch(`/api/obj`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + entity: String(groupToAdd.c), + attribute: "HAS", + value: { + t: "Address", + c: address, + }, + }), + }); + revalidate(); + groupToAdd = undefined; + }
@@ -154,6 +178,16 @@ {#each groups as address} {/each} + {#if editable} +
+ +
+ {/if}
@@ -214,8 +248,16 @@ } .groups { - display: flex; margin: 0.25rem 0; + .content { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 0.5rem; + align-items: center; + } + .selector { + width: 100%; + } } .attributes { diff --git a/webui/src/components/utils/Selector.svelte b/webui/src/components/utils/Selector.svelte index d0b91e0..7fdfc92 100644 --- a/webui/src/components/utils/Selector.svelte +++ b/webui/src/components/utils/Selector.svelte @@ -1,15 +1,36 @@