72 lines
1.7 KiB
Svelte
72 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { debounce } from "lodash";
|
|
import { createEventDispatcher } from "svelte";
|
|
import { useEntity } from "../../lib/entity";
|
|
import type { AttributeCreate, AttributeUpdate } from "../../types/base";
|
|
import type { UpEntry } from "upend";
|
|
const dispatch = createEventDispatcher();
|
|
|
|
export let address: string;
|
|
export let editable: boolean;
|
|
|
|
$: ({ entity } = useEntity(address));
|
|
|
|
let noteEntry: UpEntry | undefined;
|
|
let notes: string | undefined = undefined;
|
|
$: {
|
|
if ($entity?.attr["NOTE"]?.length && $entity?.attr["NOTE"][0]?.value?.c) {
|
|
noteEntry = $entity?.attr["NOTE"][0];
|
|
notes = String(noteEntry.value.c);
|
|
} else {
|
|
noteEntry = undefined;
|
|
notes = undefined;
|
|
}
|
|
}
|
|
|
|
let contentEl: HTMLDivElement;
|
|
|
|
const update = debounce(() => {
|
|
if (noteEntry) {
|
|
dispatch("change", {
|
|
type: "update",
|
|
address: noteEntry.address,
|
|
attribute: "NOTE",
|
|
value: { t: "String", c: contentEl.innerText },
|
|
} as AttributeUpdate);
|
|
} else {
|
|
dispatch("change", {
|
|
type: "create",
|
|
address: address,
|
|
attribute: "NOTE",
|
|
value: { t: "String", c: contentEl.innerText },
|
|
} as AttributeCreate);
|
|
}
|
|
}, 500);
|
|
</script>
|
|
|
|
{#if notes || editable}
|
|
<section class="notes labelborder">
|
|
<header>
|
|
<h3>Notes</h3>
|
|
</header>
|
|
<div
|
|
class="content"
|
|
contenteditable={editable ? "true" : "false"}
|
|
on:input={update}
|
|
bind:this={contentEl}
|
|
>
|
|
{notes ? notes : ""}
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
@use "../util";
|
|
|
|
.content {
|
|
background: var(--background);
|
|
border-radius: 4px;
|
|
padding: 0.5em !important;
|
|
}
|
|
</style>
|