From 426c584215762c0b5f5656980f0c4bfa49785075 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 21 Apr 2024 21:43:19 +0200
Subject: [PATCH] feat(webui): AddModal allows upload directly to groups

(addresses #21)
---
 webui/src/lib/components/AddModal.svelte | 56 ++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 4 deletions(-)

diff --git a/webui/src/lib/components/AddModal.svelte b/webui/src/lib/components/AddModal.svelte
index 58754b0..3d7220e 100644
--- a/webui/src/lib/components/AddModal.svelte
+++ b/webui/src/lib/components/AddModal.svelte
@@ -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 {