fix: replace worker tags to listen multiselect (#5997)

* rename all multiselects to Legacy

* move Select

* Separate SelectDropdown

* fix click outside for select with portal

* multiselect v0

* multiselect clear btn

* move filterText logic to SelectDropdown

* ui nits

* console.log

* draggable

* Draggable multiselect

* multiselect search

* nit refacto

* autofocus multiselect input

* Replace in AppMultiSelectV2

* search icon

* app multi select nits

* arginput update multiselect

* fix autofocus scrolling up

* replace High priority tags multiselect

* autoscaling config editor multiselect replace

* fix clear btn not in border

* replace multiselect in cron input

* replace multiselect in savedinputs

* replace EventHandlerItem multiselect

* select dropdown shadow

* more multiselect migration

* hover opacity on drag

* TokensTable UI fixes + replace multiselect

* ai settings replace multiselect

* DefaultTags Multiselect replace

* prevent multiselect from opening on drag

* nit

* app multiselect css + simplify

* console log

* safeSelectItems cleanup

* Remove svelte-multiselect

* clip when wrap not allowed

* hide duplicate app components

* CSS works better  with multiselect in app editor

* allowOverflow

* allowClear

* replace tags to listen to with a multiselect

* fix custom createText messed up with search
This commit is contained in:
Diego Imbert
2025-06-19 15:00:13 +02:00
committed by GitHub
parent 4666b9a75d
commit 88b37889fa
@@ -1,11 +1,9 @@
<script lang="ts">
import { X, Plus, Trash } from 'lucide-svelte'
import { Button } from './common'
import { superadmin } from '$lib/stores'
import { createEventDispatcher } from 'svelte'
import { defaultTags, nativeTags } from './worker_group'
import Select from './select/Select.svelte'
import { safeSelectItems } from './select/utils.svelte'
import MultiSelect from './select/MultiSelect.svelte'
import { superadmin } from '$lib/stores'
const dispatch = createEventDispatcher()
type Props = {
@@ -16,85 +14,21 @@
let {
worker_tags = $bindable([]),
customTags = $bindable([]),
disabled = $bindable(false)
disabled: _disabled = $bindable(false)
}: Props = $props()
let newTag = $state('')
let createdTags: string[] = $state([])
let disabled = $derived(_disabled || !$superadmin)
</script>
<div class="flex gap-2 gap-y-2 flex-wrap pb-3">
{#if worker_tags?.length === 0}
<div class="text-xs text-secondary">No tags selected</div>
{/if}
{#each worker_tags as tag}
<div
class="flex items-center gap-1 px-2 py-1 rounded-full border border-primary text-2xs text-primary bg-surface-primary"
>
<span>{tag}</span>
{#if $superadmin && !disabled}
<Button
class="p-1 rounded-full hover:bg-surface-hover transition"
aria-label="Remove tag"
on:click={() => {
worker_tags = worker_tags?.filter((t) => t !== tag) ?? []
dispatch('dirty')
dispatch('deletePriorityTag', tag)
}}
>
<X size={12} />
</Button>
{/if}
</div>
{/each}
</div>
{#if $superadmin}
<div class="max-w-md space-y-2">
<Select
items={safeSelectItems(
[...(customTags ?? []), ...createdTags, ...defaultTags, ...nativeTags].filter(
(x) => !worker_tags?.includes(x)
)
)}
{disabled}
bind:value={newTag}
onFocus={() => dispatch('focus')}
onCreateItem={(c) => (createdTags.push(c), (createdTags = [...createdTags]), (newTag = c))}
createText="Press Enter to use this tag"
/>
<div class="flex gap-2">
<Button
variant="contained"
color="light"
size="xs"
startIcon={{ icon: Plus }}
disabled={disabled || newTag == '' || worker_tags?.includes(newTag)}
on:click={() => {
worker_tags = [...(worker_tags ?? []), newTag.replaceAll(' ', '_')]
newTag = ''
dispatch('dirty')
}}
>
Add tag
</Button>
<Button
variant="contained"
color="red"
size="xs"
startIcon={{ icon: Trash }}
disabled={disabled || worker_tags.length === 0}
on:click={() => {
worker_tags = worker_tags.filter((tag) => {
dispatch('deletePriorityTag', tag)
return false
})
dispatch('dirty')
}}
>
Remove all selected tags
</Button>
</div>
</div>
{/if}
<MultiSelect
items={safeSelectItems([...(customTags ?? []), ...worker_tags, ...defaultTags, ...nativeTags])}
bind:value={
() => worker_tags,
(w) => ((worker_tags = w.map((s) => s.replaceAll(' ', '_'))), dispatch('dirty'))
}
{disabled}
class={disabled ? 'border-0' : ''}
allowClear={!disabled}
onCreateItem={(c) => worker_tags.push(c)}
createText="Press Enter to use this tag"
/>