thm
/
upend
1
0
Fork 0
Code Issues 73 Pull Requests Packages Projects Releases 5 Wiki Activity

wip
ci/woodpecker/push/woodpecker Pipeline was successful Details

fix/notes-editor
Tomáš Mládek 2024-02-02 12:57:12 +01:00
parent 947fd2d98c
commit 1f63d26d94
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
webui/src/lib/components/utils/NotesEditor.svelte
View File

@ -5,16 +5,20 @@
import type { AttributeCreate, AttributeUpdate } from '$lib/types/base'; import type { AttributeCreate, AttributeUpdate } from '$lib/types/base';
import type { UpEntry } from '@upnd/upend'; import type { UpEntry } from '@upnd/upend';
import LabelBorder from './LabelBorder.svelte'; import LabelBorder from './LabelBorder.svelte';
import { i18n } from '$lib/i18n';
import { format } from 'date-fns';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let address: string; export let address: string;
let lastSaved: Date | undefined;
$: ({ entity } = useEntity(address)); $: ({ entity } = useEntity(address));
let noteEntry: UpEntry | undefined; let noteEntry: UpEntry | undefined;
let notes: string | undefined = undefined; let notes: string | undefined = undefined;
$: { $: {
if ($entity?.attr['NOTE']?.length && $entity?.attr['NOTE'][0]?.value?.c) { if ($entity?.attr['NOTE']?.[0]?.value?.c) {
noteEntry = $entity?.attr['NOTE'][0]; noteEntry = $entity?.attr['NOTE'][0];
notes = String(noteEntry.value.c); notes = String(noteEntry.value.c);
} else { } else {
@ -41,14 +45,27 @@
value: { t: 'String', c: contentEl.innerText } value: { t: 'String', c: contentEl.innerText }
} as AttributeCreate); } as AttributeCreate);
} }
lastSaved = new Date();
}, 500); }, 500);
function onInput() {
lastSaved = undefined;
update();
}
</script> </script>
<LabelBorder hide={!notes?.length}> <LabelBorder hide={!notes?.length}>
<span slot="header">Notes</span> <span slot="header">Notes</span>
<div class="notes" contenteditable on:input={update} bind:this={contentEl}> <div class="notes" contenteditable on:input={onInput} bind:this={contentEl}>
{notes ? notes : ''} {notes ? notes : ''}
</div> </div>
<div class="status">
{#if lastSaved}
{$i18n.t('Last saved at {{time}}', { time: format(lastSaved, 'HH:mm') })}
{:else}
{$i18n.t('Waiting for changes...')}
{/if}
</div>
</LabelBorder> </LabelBorder>
<style lang="scss"> <style lang="scss">