mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-08-20 08:01:35 +00:00
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:
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user