[ui] add group remove feature
parent
4f426bca6f
commit
f9e5c19d21
|
@ -12,6 +12,7 @@
|
||||||
import type { AttributeChange } from "../types/base";
|
import type { AttributeChange } from "../types/base";
|
||||||
import Selector from "./utils/Selector.svelte";
|
import Selector from "./utils/Selector.svelte";
|
||||||
import type { IValue } from "upend/types";
|
import type { IValue } from "upend/types";
|
||||||
|
import IconButton from "./utils/IconButton.svelte";
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let index: number | undefined;
|
export let index: number | undefined;
|
||||||
|
@ -101,7 +102,7 @@
|
||||||
|
|
||||||
$: groups = ($entity?.backlinks || [])
|
$: groups = ($entity?.backlinks || [])
|
||||||
.filter((e) => e.attribute === "HAS")
|
.filter((e) => e.attribute === "HAS")
|
||||||
.map((e) => e.entity)
|
.map((e) => [e.address, e.entity])
|
||||||
.sort(); // TODO
|
.sort(); // TODO
|
||||||
|
|
||||||
async function onChange(ev: CustomEvent<AttributeChange>) {
|
async function onChange(ev: CustomEvent<AttributeChange>) {
|
||||||
|
@ -161,6 +162,11 @@
|
||||||
revalidate();
|
revalidate();
|
||||||
groupToAdd = undefined;
|
groupToAdd = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function removeGroup(address: string) {
|
||||||
|
await fetch(`/api/obj/${address}`, { method: "DELETE" });
|
||||||
|
revalidate();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="inspect">
|
<div class="inspect">
|
||||||
|
@ -175,8 +181,16 @@
|
||||||
<section class="groups labelborder">
|
<section class="groups labelborder">
|
||||||
<header><h3>Groups</h3></header>
|
<header><h3>Groups</h3></header>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{#each groups as address}
|
{#each groups as [entryAddress, address]}
|
||||||
|
<div class="group">
|
||||||
<UpObject {address} link />
|
<UpObject {address} link />
|
||||||
|
{#if editable}
|
||||||
|
<IconButton
|
||||||
|
name="x-circle"
|
||||||
|
on:click={() => removeGroup(entryAddress)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{#if editable}
|
{#if editable}
|
||||||
<div class="selector">
|
<div class="selector">
|
||||||
|
@ -255,6 +269,12 @@
|
||||||
gap: 0.5rem 0.5rem;
|
gap: 0.5rem 0.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.selector {
|
.selector {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue