diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ad5a1e9c67..cf15265867 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -125,7 +125,6 @@ "postcss-load-config": "^4.0.1", "prettier": "^3.1.0", "prettier-plugin-svelte": "^3.3.3", - "simple-svelte-autocomplete": "^2.5.1", "style-to-object": "^0.4.1", "stylelint-config-recommended": "^13.0.0", "svelte": "^5.0.0", @@ -11151,12 +11150,6 @@ "simple-concat": "^1.0.0" } }, - "node_modules/simple-svelte-autocomplete": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/simple-svelte-autocomplete/-/simple-svelte-autocomplete-2.5.2.tgz", - "integrity": "sha512-6+kZP3XQGb7zs0djTWoFv8tQorBZdv64YfCKrlsYIYBCFsEeikSiNsBSSYw1Om+LYmFeMEOAYSSKoEw+qpnBXQ==", - "dev": true - }, "node_modules/sirv": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index e2c05397ce..f673bb7f2b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -50,7 +50,6 @@ "postcss-load-config": "^4.0.1", "prettier": "^3.1.0", "prettier-plugin-svelte": "^3.3.3", - "simple-svelte-autocomplete": "^2.5.1", "style-to-object": "^0.4.1", "stylelint-config-recommended": "^13.0.0", "svelte": "^5.0.0", diff --git a/frontend/src/lib/components/DBTableEditor.svelte b/frontend/src/lib/components/DBTableEditor.svelte index 0cb4404843..bd9e108590 100644 --- a/frontend/src/lib/components/DBTableEditor.svelte +++ b/frontend/src/lib/components/DBTableEditor.svelte @@ -262,7 +262,6 @@ ? o.split('.')[1] : o }))} - clearable={false} /> diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte index c12aecf9c7..5ae36a7e24 100644 --- a/frontend/src/lib/components/FolderEditor.svelte +++ b/frontend/src/lib/components/FolderEditor.svelte @@ -7,7 +7,6 @@ GranularAclService, GroupService } from '$lib/gen' - import AutoComplete from 'simple-svelte-autocomplete' import TableCustom from './TableCustom.svelte' import { Alert, Button, Drawer, DrawerContent } from './common' import Skeleton from './common/skeleton/Skeleton.svelte' @@ -19,6 +18,7 @@ import Label from './Label.svelte' import { sendUserToast } from '$lib/toast' import { createEventDispatcher } from 'svelte' + import Select from './Select.svelte' export let name: string let can_write = false @@ -193,14 +193,11 @@ {#key ownerKind} - !perms?.map((y) => y.owner_name).includes('u/' + x)) : groups.filter((x) => !perms?.map((y) => y.owner_name).includes('g/' + x))} - bind:selectedItem={ownerItem} - /> + ({ value: u, label: u }))} bind:value={username} /> diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte index 6f0f9d287f..6f55ee7b91 100644 --- a/frontend/src/lib/components/Select.svelte +++ b/frontend/src/lib/components/Select.svelte @@ -15,7 +15,7 @@ value = $bindable(), filterText: _filterTextBind = $bindable(undefined), class: className = '', - clearable = true, + clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', @@ -23,11 +23,14 @@ disablePortal = false, loading = false, autofocus, + RightIcon, + createText, groupBy, sortBy, onFocus, onBlur, - onClear + onClear, + onCreateItem }: { items?: Item[] value: Value | undefined @@ -42,11 +45,14 @@ disablePortal?: boolean loading?: boolean autofocus?: boolean + RightIcon?: any + createText?: string groupBy?: (item: Item) => string sortBy?: (a: Item, b: Item) => number onFocus?: () => void onBlur?: () => void onClear?: () => void + onCreateItem?: (value: string) => void } = $props() let disabled = $derived(_disabled || loading) @@ -76,7 +82,9 @@ if (!open) filterText = '' }) - let processedItems: (Item & { __select_group?: string; label: string })[] = $derived.by(() => { + type ProcessedItem = Item & { __select_group?: string; __is_create?: true; label: string } + + let processedItems: ProcessedItem[] = $derived.by(() => { let items2 = items?.map((item) => ({ ...item, @@ -97,12 +105,23 @@ if (sortBy) { items2 = items2?.sort(sortBy) } + if (onCreateItem && filterText && !items2.some((item) => item.label === filterText)) { + items2.push({ + label: createText ?? `Add new: "${filterText}"`, + value: filterText, + __is_create: true + } as any) + } return items2 }) let valueEntry = $derived(value && processedItems?.find((item) => item.value === value)) - function setValue(item: Item) { - value = item.value + function setValue(item: ProcessedItem) { + if (item.__is_create && onCreateItem) { + onCreateItem(item.value) + } else { + value = item.value + } filterText = '' open = false } @@ -173,14 +192,17 @@ onfocus={() => onFocus?.()} onblur={() => onBlur?.()} > - {#if clearable && !disabled && value} + {#if loading} +
+ +
+ {:else if clearable && !disabled && value}
- {/if} - {#if loading} + {:else if RightIcon}
- +
{/if} @@ -195,7 +217,7 @@ '!bg-surface text-ellipsis', open ? '' : 'cursor-pointer', valueEntry && !loading ? '!placeholder-primary' : '', - clearable && !disabled && value ? '!pr-8' : '', + (clearable || RightIcon) && !disabled && value ? '!pr-8' : '', inputClass ?? '' )} autocomplete="off" diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte index e71df84f56..eac1b0fefd 100644 --- a/frontend/src/lib/components/ShareModal.svelte +++ b/frontend/src/lib/components/ShareModal.svelte @@ -5,7 +5,6 @@ import { GroupService, UserService, GranularAclService } from '$lib/gen' import { createEventDispatcher } from 'svelte' - import AutoComplete from 'simple-svelte-autocomplete' import { userStore, workspaceStore } from '$lib/stores' import { Alert, Button, Drawer } from './common' import DrawerContent from './common/drawer/DrawerContent.svelte' @@ -14,6 +13,7 @@ import { isOwner } from '$lib/utils' import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte' import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte' + import Select from './Select.svelte' const dispatch = createEventDispatcher() @@ -137,11 +137,11 @@ {#key ownerKind} - x.toString()) + .map((x) => ({ value: x, label: x }))} + bind:value={owner} /> {/key} diff --git a/frontend/src/lib/components/TagsToListenTo.svelte b/frontend/src/lib/components/TagsToListenTo.svelte index c80d12b2bb..38daa68ea9 100644 --- a/frontend/src/lib/components/TagsToListenTo.svelte +++ b/frontend/src/lib/components/TagsToListenTo.svelte @@ -3,8 +3,8 @@ import { Button } from './common' import { superadmin } from '$lib/stores' import { createEventDispatcher } from 'svelte' - import AutoComplete from 'simple-svelte-autocomplete' import { defaultTags, nativeTags } from './worker_group' + import Select from './Select.svelte' const dispatch = createEventDispatcher() type Props = { @@ -50,24 +50,14 @@ {#if $superadmin}
- !worker_tags?.includes(x) - )} + ({ value: w.id, label: w.id }))} + onCreateItem={(c) => (workspaceTag = c)} placeholder="Workspace ID" /> {/if} diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte index 5b3a9c7bbe..cc5fc7aafc 100644 --- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte +++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte @@ -1,3 +1,18 @@ + + {#if !resourceIsTextFile} @@ -155,55 +139,18 @@
{/if} {#if resourceIsTextFile} -
- - {#if autocompleteExtension} - { - if (a == 'Choose another extension') { - formatExtension = '' - autocompleteExtension = false - } - }} - itemFilterFunction={(listItem, searchWords) => { - if (searchWords.length == 0 || listItem === 'Choose another extension') { - return true - } - return numberOfMatches(listItem, searchWords) > 0 - }} - noResultsText="No matches, try the 'Choose another extension' option" - bind:selectedItem={formatExtension} - inputClassName="!h-[32px] py-1 !text-xs !w-64" - hideArrow - className={'!font-bold'} - dropdownClassName="!font-normal !w-64 !max-w-64" - maxItemsToShowInList={8} - moreItemsText={null} - lock={true} - /> - {:else} - - { - if (event.key === 'Enter') { - if (formatExtension && !suggestedFileExtensions.includes(formatExtension)) - suggestedFileExtensions.push(formatExtension) - - autocompleteExtension = true - } - }} - /> - {/if} -
+