From 7e9d4349af4300c7aa7b6684fde008450aa210ec 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 22:02:24 +0200
Subject: [PATCH] feat(webui): upload to groups via EntityList

(finishes #21)
---
 webui/src/lib/components/AddModal.svelte      |  7 +++
 .../lib/components/widgets/EntityList.svelte  | 60 ++++++++++++-------
 2 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/webui/src/lib/components/AddModal.svelte b/webui/src/lib/components/AddModal.svelte
index 3d7220e..d443de7 100644
--- a/webui/src/lib/components/AddModal.svelte
+++ b/webui/src/lib/components/AddModal.svelte
@@ -1,10 +1,12 @@
 <script context="module" lang="ts">
 	import mitt from 'mitt';
+	import type { Address } from '@upnd/upend/types';
 
 	export type AddEvents = {
 		choose: void;
 		files: File[];
 		urls: string[];
+		destination: Address;
 	};
 	export const addEmitter = mitt<AddEvents>();
 </script>
@@ -44,6 +46,10 @@
 		});
 	});
 
+	addEmitter.on('destination', (ev) => {
+		destination = ev;
+	});
+
 	function onDestinationSelected(ev: CustomEvent<SelectorValue | undefined>) {
 		if (ev.detail?.t === 'Address') {
 			destination = ev.detail.c;
@@ -180,6 +186,7 @@
 			<div class="controls-destination">
 				<div class="label"><Icon plain name="download" /> {$i18n.t('Destination')}</div>
 				<Selector
+					initial={destination ? { t: 'Address', c: destination } : undefined}
 					types={['Address', 'NewAddress']}
 					placeholder={$i18n.t('Choose automatically') || ''}
 					on:input={onDestinationSelected}
diff --git a/webui/src/lib/components/widgets/EntityList.svelte b/webui/src/lib/components/widgets/EntityList.svelte
index 3364f42..8a998fc 100644
--- a/webui/src/lib/components/widgets/EntityList.svelte
+++ b/webui/src/lib/components/widgets/EntityList.svelte
@@ -11,6 +11,7 @@
 	import Selector, { type SelectorValue } from '../utils/Selector.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import type { WidgetChange } from '$lib/types/base';
+	import { addEmitter } from '$lib/components/AddModal.svelte';
 	import debug from 'debug';
 	const dispatch = createEventDispatcher();
 	const dbg = debug(`kestrel:EntityList`);
@@ -202,26 +203,39 @@
 		{#if address}
 			<div class="add">
 				{#if adding}
-					<Selector
-						bind:this={addSelector}
-						placeholder={$i18n.t('Search database or paste an URL') || ''}
-						types={['Address', 'NewAddress']}
-						on:input={addEntity}
-						on:focus={(ev) => {
-							if (!ev.detail) {
-								adding = false;
-							}
-						}}
-					/>
+					<div class="main">
+						<Selector
+							bind:this={addSelector}
+							placeholder={$i18n.t('Add or create an entry') || ''}
+							types={['Address', 'NewAddress']}
+							on:input={addEntity}
+							on:focus={(ev) => {
+								if (!ev.detail) {
+									adding = false;
+								}
+							}}
+						/>
+					</div>
 				{:else}
-					<IconButton
-						name="plus-circle"
-						outline
-						subdued
-						on:click={() => {
-							adding = true;
-						}}
-					/>
+					<div class="main">
+						<IconButton
+							name="plus-circle"
+							outline
+							subdued
+							on:click={() => {
+								adding = true;
+							}}
+						/>
+					</div>
+					{#if address}
+						<IconButton
+							outline
+							subdued
+							name="upload"
+							title={$i18n.t('Upload a file') || ''}
+							on:click={() => addEmitter.emit('destination', address || '')}
+						/>
+					{/if}
 				{/if}
 			</div>
 		{/if}
@@ -318,7 +332,13 @@
 
 	.add {
 		display: flex;
-		flex-direction: column;
+		gap: 0.5em;
+
+		& .main {
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+		}
 	}
 
 	.entitylist.style-grid .add {