refactor: InspectGroups more self-sufficient
This commit is contained in:
parent
ef81e1c7b9
commit
25644e5cd4
2 changed files with 42 additions and 41 deletions
|
@ -198,9 +198,6 @@
|
||||||
(entry) => ![ATTR_IN].includes(entry.attribute)
|
(entry) => ![ATTR_IN].includes(entry.attribute)
|
||||||
)) || [];
|
)) || [];
|
||||||
|
|
||||||
$: groups = ($entity?.attr[ATTR_IN] || []).map(
|
|
||||||
(e) => [e.value.c as string, e.address] as [string, string]
|
|
||||||
);
|
|
||||||
$: tagged = $entity?.attr[`~${ATTR_IN}`] || [];
|
$: tagged = $entity?.attr[`~${ATTR_IN}`] || [];
|
||||||
|
|
||||||
let attributesUsed: UpEntry[] = [];
|
let attributesUsed: UpEntry[] = [];
|
||||||
|
@ -372,15 +369,12 @@
|
||||||
</div>
|
</div>
|
||||||
<NotesEditor {address} {editable} on:change={onChange} />
|
<NotesEditor {address} {editable} on:change={onChange} />
|
||||||
{#if !$error}
|
{#if !$error}
|
||||||
{#if groups.length}
|
|
||||||
<InspectGroups
|
<InspectGroups
|
||||||
{address}
|
{entity}
|
||||||
{groups}
|
|
||||||
{editable}
|
{editable}
|
||||||
on:highlighted={(ev) => (highlightedType = ev.detail)}
|
on:highlighted={(ev) => (highlightedType = ev.detail)}
|
||||||
on:change={() => revalidate()}
|
on:change={() => revalidate()}
|
||||||
/>
|
/>
|
||||||
{/if}
|
|
||||||
<div class="attributes">
|
<div class="attributes">
|
||||||
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
|
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
|
||||||
<EntryView
|
<EntryView
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import UpObject from "./display/UpObject.svelte";
|
import UpObjectDisplay from "./display/UpObject.svelte";
|
||||||
import Selector from "./utils/Selector.svelte";
|
import Selector from "./utils/Selector.svelte";
|
||||||
import IconButton from "./utils/IconButton.svelte";
|
import IconButton from "./utils/IconButton.svelte";
|
||||||
import type { IValue } from "upend/types";
|
import type { IValue } from "upend/types";
|
||||||
|
@ -7,12 +7,17 @@
|
||||||
import { ATTR_IN } from "upend/constants";
|
import { ATTR_IN } from "upend/constants";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import { i18n } from "../i18n";
|
import { i18n } from "../i18n";
|
||||||
|
import type { UpObject } from "upend";
|
||||||
|
import type { Readable } from "svelte/store";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
export let address: string;
|
export let entity: Readable<UpObject>;
|
||||||
export let groups: [string, string][];
|
|
||||||
export let editable = false;
|
export let editable = false;
|
||||||
|
|
||||||
|
$: groups = ($entity?.attr[ATTR_IN] || []).map(
|
||||||
|
(e) => [e.value.c as string, e.address] as [string, string]
|
||||||
|
);
|
||||||
|
|
||||||
let groupToAdd: IValue | undefined;
|
let groupToAdd: IValue | undefined;
|
||||||
async function addGroup() {
|
async function addGroup() {
|
||||||
if (!groupToAdd) {
|
if (!groupToAdd) {
|
||||||
|
@ -20,7 +25,7 @@
|
||||||
}
|
}
|
||||||
await api.putEntry([
|
await api.putEntry([
|
||||||
{
|
{
|
||||||
entity: address,
|
entity: $entity.address,
|
||||||
attribute: ATTR_IN,
|
attribute: ATTR_IN,
|
||||||
value: {
|
value: {
|
||||||
t: "Address",
|
t: "Address",
|
||||||
|
@ -38,37 +43,39 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="groups labelborder">
|
{#if groups.length || editable}
|
||||||
<header><h3>{$i18n.t("Groups")}</h3></header>
|
<section class="groups labelborder">
|
||||||
<div class="content">
|
<header><h3>{$i18n.t("Groups")}</h3></header>
|
||||||
{#each groups as [groupAddress, groupEntryAddress]}
|
<div class="content">
|
||||||
<div
|
{#each groups as [groupAddress, groupEntryAddress]}
|
||||||
class="tag"
|
<div
|
||||||
on:mouseenter={() => dispatch("highlighted", groupAddress)}
|
class="tag"
|
||||||
on:mouseleave={() => dispatch("highlighted", undefined)}
|
on:mouseenter={() => dispatch("highlighted", groupAddress)}
|
||||||
>
|
on:mouseleave={() => dispatch("highlighted", undefined)}
|
||||||
<UpObject address={groupAddress} link />
|
>
|
||||||
{#if editable}
|
<UpObjectDisplay address={groupAddress} link />
|
||||||
<IconButton
|
{#if editable}
|
||||||
name="x-circle"
|
<IconButton
|
||||||
on:click={() => removeGroup(groupEntryAddress)}
|
name="x-circle"
|
||||||
|
on:click={() => removeGroup(groupEntryAddress)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{#if editable}
|
||||||
|
<div class="selector">
|
||||||
|
<Selector
|
||||||
|
type="value"
|
||||||
|
valueTypes={["Address"]}
|
||||||
|
bind:value={groupToAdd}
|
||||||
|
on:input={addGroup}
|
||||||
|
placeholder="Choose an entity..."
|
||||||
/>
|
/>
|
||||||
{/if}
|
</div>
|
||||||
</div>
|
{/if}
|
||||||
{/each}
|
</div>
|
||||||
{#if editable}
|
</section>
|
||||||
<div class="selector">
|
{/if}
|
||||||
<Selector
|
|
||||||
type="value"
|
|
||||||
valueTypes={["Address"]}
|
|
||||||
bind:value={groupToAdd}
|
|
||||||
on:input={addGroup}
|
|
||||||
placeholder="Choose an entity..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@use "./util";
|
@use "./util";
|
||||||
|
|
Loading…
Reference in a new issue