From 38421684edd03b094ff746bb2040a2cd4f9fc13f Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Fri, 11 Aug 2023 18:38:45 +0200 Subject: [PATCH] Various fix (#2032) * fix(frontend): Before legacy code + add confirmation modal when removing a user + fix folder stats * fix(frontend): Add Date type narrowing * fix(frontend): Add missing fullscreen in ScriptEditorDrawer * fix(frontend): Check if we have un-saved changes before navigating to the homepage * fix(frontend): correctly use the keyed each * fix(frontend): add DateTimeInput * fix(frontend): add DateTimeInput * fix(frontend): add DateTimeInput * fix(frontend): code cleanup * fix(frontend): Set default time to 00:00 --- frontend/src/lib/components/ArgInput.svelte | 3 +- .../src/lib/components/DateTimeInput.svelte | 22 +++++ .../lib/components/LightweightArgInput.svelte | 3 +- .../lib/components/StringTypeNarrowing.svelte | 4 +- .../src/lib/components/TableSimple.svelte | 88 ++++++------------- .../details/DetailPageHeader.svelte | 4 +- .../flows/content/ScriptEditorDrawer.svelte | 1 + .../settings/WorkspaceUserSettings.svelte | 42 +++++++-- .../components/sidebar/WorkspaceMenu.svelte | 50 +++++++++-- .../(root)/(logged)/folders/+page.svelte | 2 +- .../(root)/(logged)/groups/+page.svelte | 2 +- .../(root)/(logged)/variables/+page.svelte | 3 +- 12 files changed, 141 insertions(+), 83 deletions(-) create mode 100644 frontend/src/lib/components/DateTimeInput.svelte diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte index 58d3a5de62..5e6d68aef5 100644 --- a/frontend/src/lib/components/ArgInput.svelte +++ b/frontend/src/lib/components/ArgInput.svelte @@ -26,6 +26,7 @@ import { twMerge } from 'tailwind-merge' import ArgEnum from './ArgEnum.svelte' import ArrayTypeNarrowing from './ArrayTypeNarrowing.svelte' + import DateTimeInput from './DateTimeInput.svelte' export let label: string = '' export let value: any @@ -379,7 +380,7 @@ {:else if inputCat == 'date'} - + {:else if inputCat == 'sql' || inputCat == 'yaml'}
+ export let value: string | undefined = undefined + + export let autofocus: boolean = false + + let dateFromValue = value ? new Date(value) : undefined + let date = dateFromValue ? dateFromValue.toISOString().split('T')[0] : undefined + let time = dateFromValue ? dateFromValue.toISOString().split('T')[1] : '00:00' + + $: { + if (date && time) { + let newDate = new Date(`${date}T${time}`) + value = newDate.toISOString() + } + } + + +
+ + + +
diff --git a/frontend/src/lib/components/LightweightArgInput.svelte b/frontend/src/lib/components/LightweightArgInput.svelte index 4d24c96f86..8997de2285 100644 --- a/frontend/src/lib/components/LightweightArgInput.svelte +++ b/frontend/src/lib/components/LightweightArgInput.svelte @@ -17,6 +17,7 @@ import { X } from 'lucide-svelte' import LightweightResourcePicker from './LightweightResourcePicker.svelte' import LightweightObjectResourceInput from './LightweightObjectResourceInput.svelte' + import DateTimeInput from './DateTimeInput.svelte' export let css: ComponentCustomCSS<'schemaformcomponent'> | undefined = undefined export let label: string = '' @@ -311,7 +312,7 @@ {/each} {:else if inputCat == 'date'} - + {:else if inputCat == 'base64'} - import { createEventDispatcher } from 'svelte' - // A table suitable if you can pass data as a list of row objects + import Cell from './table/Cell.svelte' + import DataTable from './table/DataTable.svelte' + import Head from './table/Head.svelte' + export let headers: string[] | undefined export let data: any[] | undefined // Object containing the data export let keys: string[] - export let defaultText: string = 'No data to display' - export let paginated = false - export let twTextSize: string = 'text-sm md:text-base' - - const dispatch = createEventDispatcher() -
-
- - - - {#if headers} - {#each headers as header, i} - - {/each} - {/if} - - - - {#if data && keys && data.length > 0} - {#each data as row} - - {#each keys as key, i} - - {/each} - +
+ + +
+ {#if headers} + {#each headers as header, i} + {header} {/each} - {:else if data} - {defaultText} - {:else} - Loading... {/if} - -
{header}
- {row[key] ?? ''}
-
+ + + + {#if data && keys && data.length > 0} + {#each data as row} + + {#each keys as key, i} + + {row[key] ?? ''} + + {/each} + + {/each} + {:else} + Loading... + {/if} + +
-{#if paginated} -
- - -
-{/if} diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte index f422bf766d..3479217b33 100644 --- a/frontend/src/lib/components/details/DetailPageHeader.svelte +++ b/frontend/src/lib/components/details/DetailPageHeader.svelte @@ -63,7 +63,7 @@ {...btn.buttonProps} startIcon={{ icon: btn.buttonProps.startIcon }} on:click={btn.buttonProps.onClick} - btnClasses="hidden md:block" + btnClasses="hidden md:flex items-center gap-1" > {btn.label} @@ -72,7 +72,7 @@ startIcon={{ icon: btn.buttonProps.startIcon }} on:click={btn.buttonProps.onClick} iconOnly - btnClasses="block md:hidden" + btnClasses="flex md:hidden items-center gap-1" > {btn.label} diff --git a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte index 7c491160f5..8b692bae18 100644 --- a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte +++ b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte @@ -80,6 +80,7 @@ title="Script Editor" noPadding forceOverflowVisible + fullScreen on:close={() => { scriptEditorDrawer.closeDrawer() }} diff --git a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte index 3cced1aaf0..250070d958 100644 --- a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte +++ b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte @@ -19,6 +19,7 @@ import SearchItems from '../SearchItems.svelte' import Cell from '../table/Cell.svelte' import Row from '../table/Row.svelte' + import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte' let users: User[] | undefined = undefined let invites: WorkspaceInvite[] = [] @@ -59,6 +60,8 @@ } } + let deleteConfirmedCallback: (() => void) | undefined = undefined + async function removeAllInvitesFromDomain() { await Promise.all( invites @@ -221,13 +224,15 @@ btnClasses="text-red-500" size="xs" spacingSize="xs2" - on:click={async () => { - await UserService.deleteUser({ - workspace: $workspaceStore ?? '', - username - }) - sendUserToast('User removed') - listUsers() + on:click={() => { + deleteConfirmedCallback = async () => { + await UserService.deleteUser({ + workspace: $workspaceStore ?? '', + username + }) + sendUserToast('User removed') + listUsers() + } }} > Remove @@ -360,8 +365,10 @@ }) loadSettings() listInvites() - }}>Unset auto-invite from {auto_invite_domain} domain + Unset auto-invite from {auto_invite_domain} domain +
{/if} @@ -369,3 +376,22 @@ {#if !allowedAutoDomain}
{domain} domain not allowed for auto-invite
{/if} + + { + deleteConfirmedCallback = undefined + }} + on:confirmed={() => { + if (deleteConfirmedCallback) { + deleteConfirmedCallback() + } + deleteConfirmedCallback = undefined + }} +> +
+ Are you sure you want to remove ? +
+ diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte index 8834cbedc0..0383881eb8 100644 --- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte +++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte @@ -6,8 +6,49 @@ import Menu from '../common/menu/Menu.svelte' import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons' import { Icon } from 'svelte-awesome' - + import { goto } from '$app/navigation' + import { dirtyStore } from '../common/confirmationModal/dirtyStore' + import { page } from '$app/stores' export let isCollapsed: boolean = false + + function waitForNextUpdate(store) { + return new Promise((resolve) => { + let firstEmission = true + store.subscribe((value) => { + if (firstEmission) { + firstEmission = false + return + } + resolve(value) + }) + }) + } + + async function toggleSwitchWorkspace(id: string) { + if ($workspaceStore === id) { + return + } + + const editPages = ['/scripts/edit/', '/flows/edit/', '/apps/edit/'] + const isOnEditPage = editPages.some((editPage) => $page.route.id?.includes(editPage) ?? false) + + // Check if we have unsaved changes + const wasDirty = $dirtyStore + // Try to go to the home page + + // If we weren't dirty, we can directly switch workspaces + if (!wasDirty && !isOnEditPage) { + switchWorkspace(id) + } else { + await goto('/') + + const shouldSwitch = await waitForNextUpdate(dirtyStore) + + if (shouldSwitch) { + switchWorkspace(id) + } + } + } @@ -36,11 +77,8 @@ {$workspaceStore === workspace.id ? 'cursor-default bg-surface-selected' : 'cursor-pointer hover:bg-surface-hover'}" - on:click={() => { - if ($workspaceStore === workspace.id) { - return - } - switchWorkspace(workspace.id) + on:click={async () => { + await toggleSwitchWorkspace(workspace.id) close() }} > diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte index 94024865fb..54f46af2a6 100644 --- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte @@ -127,7 +127,7 @@ {/if} - {#each folders as { name, extra_perms, owners, canWrite }} + {#each folders as { name, extra_perms, owners, canWrite } (name)} { diff --git a/frontend/src/routes/(root)/(logged)/groups/+page.svelte b/frontend/src/routes/(root)/(logged)/groups/+page.svelte index 075ea65069..c5b21981e7 100644 --- a/frontend/src/routes/(root)/(logged)/groups/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/groups/+page.svelte @@ -109,7 +109,7 @@ {/each} {:else} - {#each groups as { name, summary, extra_perms, canWrite }} + {#each groups as { name, summary, extra_perms, canWrite } (name)} diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte index 2ec904e70b..b84c82fe4e 100644 --- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte @@ -366,10 +366,9 @@ {/each} {:else} {/if}