diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte index 2a94214ba2..3973754924 100644 --- a/frontend/src/lib/components/ItemPicker.svelte +++ b/frontend/src/lib/components/ItemPicker.svelte @@ -60,72 +60,70 @@ {#each new Array(6) as _} {/each} - {:else} - {#if !items?.length} -
- {@html noItemMessage} -
- {:else if filteredItems?.length} - - {:else} -
- {@html emptySearchMessage} -
- {/if} + {#if extraField != 'description'} +
{obj['description'] ?? ''}
+ {/if} + + + {#if buttons} +
+ {#each Object.entries(buttons) as [name, button]} + + {/each} +
+ {/if} + + {/each} + + {:else} +
+ {@html emptySearchMessage} +
{/if} diff --git a/frontend/src/lib/components/SearchItems.svelte b/frontend/src/lib/components/SearchItems.svelte index 806d263229..eac04b84eb 100644 --- a/frontend/src/lib/components/SearchItems.svelte +++ b/frontend/src/lib/components/SearchItems.svelte @@ -2,18 +2,18 @@ import uFuzzy from '@leeoniya/ufuzzy' export let filter: string = '' - export let items: any[] + export let items: any[] | undefined export let f: (item: any) => string - export let filteredItems: (any & { marked: string })[] + export let filteredItems: (any & { marked: string })[] | undefined export let opts: uFuzzy.Options = {} let uf = new uFuzzy(opts) - $: plaintextItems = items.map((item) => f(item)) + $: plaintextItems = items?.map((item) => f(item)) ?? [] $: plaintextItems && filter != undefined && setTimeout(() => filterItems(), 0) function filterItems() { - if (filter.length == 0) { + if (items == undefined || filter.length == 0) { filteredItems = items return } diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte index 519dfe383f..4fdded8e67 100644 --- a/frontend/src/routes/index.svelte +++ b/frontend/src/routes/index.svelte @@ -18,6 +18,7 @@ Button, Drawer, DrawerContent, + Skeleton, Tab, Tabs, ToggleButton, @@ -63,9 +64,9 @@ type TableFlow = TableItem type TableApp = TableItem - let scripts: TableScript[] = [] - let flows: TableFlow[] = [] - let apps: TableApp[] = [] + let scripts: TableScript[] | undefined + let flows: TableFlow[] | undefined + let apps: TableApp[] | undefined let filteredItems: (TableScript | TableFlow | TableApp)[] = [] @@ -143,24 +144,37 @@ new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? []) ).sort() - let combinedItems: (TableScript | TableFlow | TableApp)[] = [] + let combinedItems: (TableScript | TableFlow | TableApp)[] | undefined = undefined - $: combinedItems = [ - ...flows.map((x) => ({ ...x, type: 'flow' as 'flow', time: new Date(x.edited_at).getTime() })), - ...scripts.map((x) => ({ - ...x, - type: 'script' as 'script', - time: new Date(x.created_at).getTime() - })), - ...apps.map((x) => ({ ...x, type: 'app' as 'app', time: new Date(x.edited_at).getTime() })) - ].sort((a, b) => (a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1)) + $: combinedItems = + flows == undefined || scripts == undefined || apps == undefined + ? undefined + : [ + ...flows.map((x) => ({ + ...x, + type: 'flow' as 'flow', + time: new Date(x.edited_at).getTime() + })), + ...scripts.map((x) => ({ + ...x, + type: 'script' as 'script', + time: new Date(x.created_at).getTime() + })), + ...apps.map((x) => ({ + ...x, + type: 'app' as 'app', + time: new Date(x.edited_at).getTime() + })) + ].sort((a, b) => + a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1 + ) $: preFilteredItems = ownerFilter != undefined - ? combinedItems.filter( + ? combinedItems?.filter( (x) => x.path.startsWith(ownerFilter ?? '') && (x.type == itemKind || itemKind == 'all') ) - : combinedItems.filter((x) => x.type == itemKind || itemKind == 'all') + : combinedItems?.filter((x) => x.type == itemKind || itemKind == 'all') let ownerFilter: string | undefined = undefined @@ -220,8 +234,8 @@ start[ia] - start[ib] || // alphabetic cmp(haystack[idx[ia]], haystack[idx[ib]]) + - (preFilteredItems[idx[ib]].starred ? 100 : 0) - - (preFilteredItems[idx[ia]].starred ? 100 : 0) + (preFilteredItems?.[idx[ib]]?.starred ? 100 : 0) - + (preFilteredItems?.[idx[ia]]?.starred ? 100 : 0) ) return sortResult } @@ -448,7 +462,13 @@ {/if}
- {#if filteredItems.length === 0} + {#if filteredItems == undefined} +
+ + {#each new Array(6) as _} + + {/each} + {:else if filteredItems.length === 0}
No items found
@@ -487,7 +507,7 @@ {/if}
- {pluralize(items.length, 'item')} + {pluralize(items?.length ?? 0, 'item')} {`(${start} - ${end})`} {/if}
diff --git a/frontend/src/routes/workspace_settings.svelte b/frontend/src/routes/workspace_settings.svelte index d985b491ba..c46e940112 100644 --- a/frontend/src/routes/workspace_settings.svelte +++ b/frontend/src/routes/workspace_settings.svelte @@ -24,14 +24,14 @@ import { goto } from '$app/navigation' import InviteUser from '$lib/components/InviteUser.svelte' import ScriptPicker from '$lib/components/ScriptPicker.svelte' - import { Button } from '$lib/components/common' + import { Button, Skeleton } from '$lib/components/common' import Tooltip from '$lib/components/Tooltip.svelte' import { faScroll, faWind } from '@fortawesome/free-solid-svg-icons' import SearchItems from '$lib/components/SearchItems.svelte' - let users: User[] = [] + let users: User[] | undefined = undefined let invites: WorkspaceInvite[] = [] - let filteredUsers: User[] = [] + let filteredUsers: User[] | undefined = undefined let userFilter = '' let scriptPath: string let initialPath: string @@ -120,44 +120,56 @@ jobs & flows (2w) - {#each filteredUsers as { email, username, is_admin, usage } (email)} - - {email} - {username} - {is_admin ? 'admin' : 'user'} - {usage?.jobs} - {usage?.flows} - {msToSec(usage?.duration_ms)}s - + {email} + {username} + {is_admin ? 'admin' : 'user'} + {usage?.jobs} + {usage?.flows} + {msToSec(usage?.duration_ms)}s + + - + - - - - - {/each} + + {/each} + {:else} + {#each new Array(6) as _} + + {#each new Array(4) as _} + + + + {/each} + + {/each} + {/if}