2023-07-29 11:21:34 +02:00
|
|
|
<script lang="ts">
|
2023-07-29 19:26:00 +02:00
|
|
|
import UpObjectDisplay from "./display/UpObject.svelte";
|
2023-07-29 11:21:34 +02:00
|
|
|
import Selector from "./utils/Selector.svelte";
|
|
|
|
import IconButton from "./utils/IconButton.svelte";
|
|
|
|
import type { IValue } from "upend/types";
|
|
|
|
import api from "../lib/api";
|
|
|
|
import { ATTR_IN } from "upend/constants";
|
|
|
|
import { createEventDispatcher } from "svelte";
|
|
|
|
import { i18n } from "../i18n";
|
2023-07-29 19:26:00 +02:00
|
|
|
import type { UpObject } from "upend";
|
|
|
|
import type { Readable } from "svelte/store";
|
2023-07-29 11:21:34 +02:00
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
|
2023-07-29 19:26:00 +02:00
|
|
|
export let entity: Readable<UpObject>;
|
2023-07-29 11:21:34 +02:00
|
|
|
export let editable = false;
|
|
|
|
|
2023-07-29 19:26:00 +02:00
|
|
|
$: groups = ($entity?.attr[ATTR_IN] || []).map(
|
|
|
|
(e) => [e.value.c as string, e.address] as [string, string]
|
|
|
|
);
|
|
|
|
|
2023-07-29 11:21:34 +02:00
|
|
|
let groupToAdd: IValue | undefined;
|
|
|
|
async function addGroup() {
|
|
|
|
if (!groupToAdd) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
await api.putEntry([
|
|
|
|
{
|
2023-07-29 19:26:00 +02:00
|
|
|
entity: $entity.address,
|
2023-07-29 11:21:34 +02:00
|
|
|
attribute: ATTR_IN,
|
|
|
|
value: {
|
|
|
|
t: "Address",
|
|
|
|
c: String(groupToAdd.c),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
dispatch("change");
|
|
|
|
groupToAdd = undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
async function removeGroup(groupAddress: string) {
|
|
|
|
await api.deleteEntry(groupAddress);
|
|
|
|
dispatch("change");
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2023-07-29 19:26:00 +02:00
|
|
|
{#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..."
|
2023-07-29 11:21:34 +02:00
|
|
|
/>
|
2023-07-29 19:26:00 +02:00
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
{/if}
|
2023-07-29 11:21:34 +02:00
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
@use "./util";
|
|
|
|
|
|
|
|
.groups {
|
|
|
|
margin: 0.25rem 0;
|
|
|
|
.content {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
gap: 0.5rem 0.5rem;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.selector {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|