feat(webui): AddModal allows upload directly to groups

(addresses #21)
main
Tomáš Mládek 2024-04-21 21:43:19 +02:00
parent 1118a5cfeb
commit 426c584215
1 changed files with 52 additions and 4 deletions

View File

@ -18,18 +18,22 @@
import { i18n } from '$lib/i18n';
import { selected } from '$lib/components/EntitySelect.svelte';
import Modal from '$lib/components/layout/Modal.svelte';
import Selector, { type SelectorValue } from '$lib/components/utils/Selector.svelte';
import { ATTR_IN } from '@upnd/upend/constants';
let files: File[] = [];
let URLs: string[] = [];
let uploading = false;
let abortController: AbortController | undefined;
let destination: Address | undefined;
let progress: Record<string, number> = {};
let totalProgress: number | undefined;
let filesElement: HTMLDivElement;
$: visible = files.length + URLs.length > 0;
$: visible = files.length + URLs.length > 0 || destination;
addEmitter.on('files', (ev) => {
ev.forEach((file) => {
@ -40,6 +44,14 @@
});
});
function onDestinationSelected(ev: CustomEvent<SelectorValue | undefined>) {
if (ev.detail?.t === 'Address') {
destination = ev.detail.c;
} else {
destination = undefined;
}
}
async function upload() {
uploading = true;
@ -59,6 +71,16 @@
},
timeout: -1
});
if (destination) {
await api.putEntry({
entity: address,
attribute: ATTR_IN,
value: {
t: 'Address',
c: destination
}
});
}
addresses.push(address);
if (!uploading) {
@ -91,6 +113,7 @@
URLs = [];
progress = {};
uploading = false;
destination = undefined;
}
function onKeydown(event: KeyboardEvent) {
@ -154,9 +177,19 @@
{/if}
</div>
<div class="controls">
<IconButton small disabled={uploading} name="upload" on:click={upload}>
{$i18n.t('Upload')}
</IconButton>
<div class="controls-destination">
<div class="label"><Icon plain name="download" /> {$i18n.t('Destination')}</div>
<Selector
types={['Address', 'NewAddress']}
placeholder={$i18n.t('Choose automatically') || ''}
on:input={onDestinationSelected}
/>
</div>
<div class="controls-submit">
<IconButton small disabled={uploading} name="upload" on:click={upload}>
{$i18n.t('Upload')}
</IconButton>
</div>
</div>
{#if uploading}
<div class="progress">
@ -260,8 +293,23 @@
.controls {
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
margin-top: 0.5rem;
gap: 1rem;
}
.controls-destination {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 1rem;
flex-grow: 3;
}
.controls-submit {
margin: 0 1rem;
}
.progress {