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

feat(webui): upload to groups via EntityList
ci/woodpecker/push/woodpecker Pipeline was successful Details 

(finishes #21)
main
Tomáš Mládek 2024-04-21 22:02:24 +02:00
parent 426c584215
commit 7e9d4349af
2 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webui/src/lib/components/AddModal.svelte
View File

@ -1,10 +1,12 @@
<script context="module" lang="ts"> <script context="module" lang="ts">
import mitt from 'mitt'; import mitt from 'mitt';
import type { Address } from '@upnd/upend/types';
export type AddEvents = { export type AddEvents = {
choose: void; choose: void;
files: File[]; files: File[];
urls: string[]; urls: string[];
destination: Address;
}; };
export const addEmitter = mitt<AddEvents>(); export const addEmitter = mitt<AddEvents>();
</script> </script>
@ -44,6 +46,10 @@
}); });
}); });
addEmitter.on('destination', (ev) => {
destination = ev;
});
function onDestinationSelected(ev: CustomEvent<SelectorValue | undefined>) { function onDestinationSelected(ev: CustomEvent<SelectorValue | undefined>) {
if (ev.detail?.t === 'Address') { if (ev.detail?.t === 'Address') {
destination = ev.detail.c; destination = ev.detail.c;
@ -180,6 +186,7 @@
<div class="controls-destination"> <div class="controls-destination">
<div class="label"><Icon plain name="download" /> {$i18n.t('Destination')}</div> <div class="label"><Icon plain name="download" /> {$i18n.t('Destination')}</div>
<Selector <Selector
initial={destination ? { t: 'Address', c: destination } : undefined}
types={['Address', 'NewAddress']} types={['Address', 'NewAddress']}
placeholder={$i18n.t('Choose automatically') || ''} placeholder={$i18n.t('Choose automatically') || ''}
on:input={onDestinationSelected} on:input={onDestinationSelected}

60
webui/src/lib/components/widgets/EntityList.svelte
View File

@ -11,6 +11,7 @@
import Selector, { type SelectorValue } from '../utils/Selector.svelte'; import Selector, { type SelectorValue } from '../utils/Selector.svelte';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import type { WidgetChange } from '$lib/types/base'; import type { WidgetChange } from '$lib/types/base';
import { addEmitter } from '$lib/components/AddModal.svelte';
import debug from 'debug'; import debug from 'debug';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const dbg = debug(`kestrel:EntityList`); const dbg = debug(`kestrel:EntityList`);
@ -202,26 +203,39 @@
{#if address} {#if address}
<div class="add"> <div class="add">
{#if adding} {#if adding}
<Selector <div class="main">
bind:this={addSelector} <Selector
placeholder={$i18n.t('Search database or paste an URL') || ''} bind:this={addSelector}
types={['Address', 'NewAddress']} placeholder={$i18n.t('Add or create an entry') || ''}
on:input={addEntity} types={['Address', 'NewAddress']}
on:focus={(ev) => { on:input={addEntity}
if (!ev.detail) { on:focus={(ev) => {
adding = false; if (!ev.detail) {
} adding = false;
}} }
/> }}
/>
</div>
{:else} {:else}
<IconButton <div class="main">
name="plus-circle" <IconButton
outline name="plus-circle"
subdued outline
on:click={() => { subdued
adding = true; 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} {/if}
</div> </div>
{/if} {/if}
@ -318,7 +332,13 @@
.add { .add {
display: flex; display: flex;
flex-direction: column; gap: 0.5em;
& .main {
display: flex;
flex-direction: column;
flex-grow: 1;
}
} }
.entitylist.style-grid .add { .entitylist.style-grid .add {