thm
/
upend
1
0
Fork 0
Code Issues 75 Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: InspectGroups more self-sufficient

feat/type-attributes
Tomáš Mládek 2023-07-29 19:26:00 +02:00
parent ef81e1c7b9
commit 25644e5cd4
2 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webui/src/components/Inspect.svelte
View File

@ -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

75
webui/src/components/InspectGroups.svelte
View File

@ -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";