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

View File

@ -198,9 +198,6 @@
(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}`] || [];
let attributesUsed: UpEntry[] = [];
@ -372,15 +369,12 @@
</div>
<NotesEditor {address} {editable} on:change={onChange} />
{#if !$error}
{#if groups.length}
<InspectGroups
{address}
{groups}
{entity}
{editable}
on:highlighted={(ev) => (highlightedType = ev.detail)}
on:change={() => revalidate()}
/>
{/if}
<div class="attributes">
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
<EntryView

View File

@ -1,5 +1,5 @@
<script lang="ts">
import UpObject from "./display/UpObject.svelte";
import UpObjectDisplay from "./display/UpObject.svelte";
import Selector from "./utils/Selector.svelte";
import IconButton from "./utils/IconButton.svelte";
import type { IValue } from "upend/types";
@ -7,12 +7,17 @@
import { ATTR_IN } from "upend/constants";
import { createEventDispatcher } from "svelte";
import { i18n } from "../i18n";
import type { UpObject } from "upend";
import type { Readable } from "svelte/store";
const dispatch = createEventDispatcher();
export let address: string;
export let groups: [string, string][];
export let entity: Readable<UpObject>;
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;
async function addGroup() {
if (!groupToAdd) {
@ -20,7 +25,7 @@
}
await api.putEntry([
{
entity: address,
entity: $entity.address,
attribute: ATTR_IN,
value: {
t: "Address",
@ -38,37 +43,39 @@
}
</script>
<section class="groups labelborder">
<header><h3>{$i18n.t("Groups")}</h3></header>
<div class="content">
{#each groups as [groupAddress, groupEntryAddress]}
<div
class="tag"
on:mouseenter={() => dispatch("highlighted", groupAddress)}
on:mouseleave={() => dispatch("highlighted", undefined)}
>
<UpObject address={groupAddress} link />
{#if editable}
<IconButton
name="x-circle"
on:click={() => removeGroup(groupEntryAddress)}
{#if groups.length || editable}
<section class="groups labelborder">
<header><h3>{$i18n.t("Groups")}</h3></header>
<div class="content">
{#each groups as [groupAddress, groupEntryAddress]}
<div
class="tag"
on:mouseenter={() => dispatch("highlighted", groupAddress)}
on:mouseleave={() => dispatch("highlighted", undefined)}
>
<UpObjectDisplay address={groupAddress} link />
{#if editable}
<IconButton
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>
{/each}
{#if editable}
<div class="selector">
<Selector
type="value"
valueTypes={["Address"]}
bind:value={groupToAdd}
on:input={addGroup}
placeholder="Choose an entity..."
/>
</div>
{/if}
</div>
</section>
</div>
{/if}
</div>
</section>
{/if}
<style lang="scss">
@use "./util";