kalugin66/windmill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make form properties disablable

Browse Source
This commit is contained in:
Ruben Fiszel
2024-09-28 18:10:42 +02:00
parent 56db1d9196
commit 0779d47c1d
7 changed files with 58 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/DateInput.svelte
View File

@@ -8,6 +8,7 @@
export let minDate: string | undefined = undefined
export let maxDate: string | undefined = undefined
export let dateFormat: string | undefined = 'dd-MM-yyyy'
export let disabled: boolean = false
let date: string | undefined = computeDate(value)
@@ -71,6 +72,7 @@
<div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
<!-- svelte-ignore a11y-autofocus -->
<input
{disabled}
type="date"
bind:value={date}
{autofocus}

1
frontend/src/lib/components/EditableSchemaForm.svelte
View File

@@ -448,6 +448,7 @@
{itemPicker}
{lightweightMode}
bind:nullable={schema.properties[argName].nullable}
bind:disabled={schema.properties[argName].disabled}
type={schema.properties[argName].type}
bind:oneOf={schema.properties[argName].oneOf}
bind:format={schema.properties[argName].format}

42
frontend/src/lib/components/LightweightArgInput.svelte
View File

@@ -36,6 +36,9 @@
export let type: string | undefined = undefined
export let oneOf: SchemaProperty[] | undefined = undefined
export let required = false
//todo
// export let nullable = false
export let disabled: boolean = false
export let pattern: undefined | string = undefined
export let valid = required ? false : true
export let enum_: EnumType = undefined
@@ -258,7 +261,7 @@
<div class="flex space-x-1">
{#if inputCat == 'number'}
{#if extra['min'] != undefined && extra['max'] != undefined}
<Range bind:value min={extra['min']} max={extra['max']} {defaultValue} />
<Range bind:value min={extra['min']} max={extra['max']} {defaultValue} {disabled} />
{:else if extra?.currency}
<CurrencyInput
inputClasses={{
@@ -270,6 +273,7 @@
bind:value
currency={extra?.currency}
locale={extra?.currencyLocale ?? 'en-US'}
{disabled}
/>
{:else}
<input
@@ -284,6 +288,7 @@
bind:value
min={extra['min']}
max={extra['max']}
{disabled}
/>
{/if}
{:else if inputCat == 'boolean'}
@@ -295,6 +300,7 @@
? ''
: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
bind:checked={value}
{disabled}
/>
{#if type == 'boolean' && value == undefined}
<span>&nbsp; Not set</span>
@@ -308,6 +314,7 @@
bind:selected={value}
options={itemsType?.multiselect ?? []}
selectedOptionsDraggable={true}
{disabled}
/>
</div>
{:else if Array.isArray(itemsType?.enum) && Array.isArray(value)}
@@ -317,6 +324,7 @@
bind:selected={value}
options={itemsType?.enum ?? []}
selectedOptionsDraggable={true}
{disabled}
/>
</div>
{:else if Array.isArray(enum_) && Array.isArray(value)}
@@ -326,6 +334,7 @@
bind:selected={value}
options={enum_ ?? []}
selectedOptionsDraggable={true}
{disabled}
/>
</div>
{:else}
@@ -334,13 +343,14 @@
{#each value ?? [] as v, i}
<div class="flex flex-row max-w-md mt-1 w-full">
{#if itemsType?.type == 'number'}
<input type="number" bind:value={v} />
<input type="number" bind:value={v} {disabled} />
{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
<input
type="file"
class="my-6"
on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
multiple={false}
{disabled}
/>
{:else if Array.isArray(itemsType?.enum)}
<select
@@ -349,6 +359,7 @@
}}
class="px-6"
bind:value={v}
{disabled}
>
{#each itemsType?.enum ?? [] as e}
<option>{e}</option>
@@ -358,16 +369,18 @@
<LightweightResourcePicker
bind:value={v}
resourceType={itemsType?.resourceType}
{disabled}
/>
{:else if itemsType?.type === 'object' && itemsType?.properties}
<div class="p-8 border rounded-md w-full">
<LightweightSchemaForm
schema={getSchemaFromProperties(itemsType?.properties)}
bind:args={v}
{disabled}
/>
</div>
{:else}
<input type="text" bind:value={v} />
<input type="text" bind:value={v} {disabled} />
{/if}
<button
transition:fade|local={{ duration: 100 }}
@@ -379,6 +392,7 @@
value = undefined
}
}}
{disabled}
>
<X size={14} />
</button>
@@ -398,6 +412,7 @@
addItemByItemsType()
}}
startIcon={{ icon: Plus }}
{disabled}
>
Add
</Button>
@@ -430,13 +445,13 @@
/>
</div>
{:else if inputCat == 'resource-object'}
<LightweightObjectResourceInput {format} bind:value />
<LightweightObjectResourceInput {format} bind:value {disabled} />
{:else if inputCat == 'object' && oneOf && oneOf.length >= 2}
<div class="flex flex-col gap-2 w-full">
{#if oneOf && oneOf.length >= 2}
<ToggleButtonGroup bind:selected={oneOfSelected}>
<ToggleButtonGroup bind:selected={oneOfSelected} {disabled}>
{#each oneOf as obj}
<ToggleButton value={obj.title} label={obj.title} />
<ToggleButton value={obj.title} label={obj.title} {disabled} />
{/each}
</ToggleButtonGroup>
@@ -455,6 +470,7 @@
type: 'object'
}}
bind:args={value}
{disabled}
/>
</div>
{/if}
@@ -472,6 +488,7 @@
type: 'object'
}}
bind:args={value}
{disabled}
/>
</div>
{:else}
@@ -487,6 +504,7 @@
: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}"
placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
bind:value={rawValue}
{disabled}
/>
{/if}
{:else if inputCat == 'enum'}
@@ -496,6 +514,7 @@
}}
class="px-6"
bind:value
{disabled}
>
{#each enum_ ?? [] as e}
<option value={e}>{extra?.['enumLabels']?.[e] ?? e}</option>
@@ -504,9 +523,9 @@
{:else if inputCat == 'date'}
{#key defaultChange}
{#if format === 'date'}
<DateInput bind:value dateFormat={extra['dateFormat']} />
<DateInput bind:value dateFormat={extra['dateFormat']} {disabled} />
{:else}
<DateTimeInput useDropdown bind:value />
<DateTimeInput useDropdown bind:value {disabled} />
{/if}
{/key}
{:else if inputCat == 'base64'}
@@ -515,6 +534,7 @@
type="file"
on:change={(x) => fileChanged(x, (val) => (value = val))}
multiple={false}
{disabled}
/>
{#if value?.length}
<div class="text-2xs text-tertiary mt-1"
@@ -531,6 +551,7 @@
resourceType={format.split('-').length > 1
? format.substring('resource-'.length)
: undefined}
{disabled}
/>
</div>
{:else if inputCat == 'email'}
@@ -542,6 +563,7 @@
: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
placeholder={placeholder ?? defaultValue ?? ''}
bind:value
{disabled}
/>
{:else if inputCat == 'currency'}
<input
@@ -551,12 +573,13 @@
: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
placeholder={placeholder ?? defaultValue ?? ''}
bind:value
{disabled}
/>
{:else if inputCat == 'string'}
<div class="flex flex-col w-full">
<div class="flex flex-row w-full items-center justify-between">
{#if extra?.['password'] == true}
<Password bind:password={value} />
<Password bind:password={value} {disabled} />
{:else}
<textarea
rows={extra?.['minRows'] || 1}
@@ -573,6 +596,7 @@
on:pointerdown|stopPropagation={(e) => {
dispatch('inputClicked', e)
}}
{disabled}
/>
{/if}
</div>

3
frontend/src/lib/components/LightweightObjectResourceInput.svelte
View File

@@ -4,7 +4,7 @@
export let format: string
export let value: any
export let disablePortal = false
export let disabled: boolean = false
function isString(value: any) {
return typeof value === 'string' || value instanceof String
}
@@ -34,6 +34,7 @@
<div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
<LightweightResourcePicker
{disabled}
{disablePortal}
on:change={(e) => {
path = e.detail

2
frontend/src/lib/components/LightweightSchemaForm.svelte
View File

@@ -15,6 +15,7 @@
export let isValid: boolean = true
export let defaultValues: Record<string, any> = {}
export let dynamicEnums: Record<string, any> = {}
export let disabled: boolean = false
let inputCheck: { [id: string]: boolean } = {}
let errors: { [id: string]: string } = {}
@@ -102,6 +103,7 @@
on:inputClicked
{displayType}
{css}
disabled={disabled || schema.properties[argName].disabled}
/>
{/if}
{/each}

7
frontend/src/lib/components/SchemaForm.svelte
View File

@@ -184,6 +184,9 @@
extra={schema.properties[argName]}
title={schema.properties[argName].title}
placeholder={schema.properties[argName].placeholder}
disabled={disabledArgs.includes(argName) ||
disabled ||
schema.properties[argName].disabled}
>
<svelte:fragment slot="actions">
<slot name="actions" />
@@ -240,7 +243,9 @@
bind:order={schema.properties[argName].order}
nestedRequired={schema.properties[argName]?.required}
itemsType={schema.properties[argName].items}
disabled={disabledArgs.includes(argName) || disabled}
disabled={disabledArgs.includes(argName) ||
disabled ||
schema.properties[argName].disabled}
{compact}
{variableEditor}
{itemPicker}

12
frontend/src/lib/components/schema/FlowPropertyEditor.svelte
View File

@@ -30,6 +30,7 @@
export let variableEditor: VariableEditor | undefined = undefined
export let itemPicker: ItemPicker | undefined = undefined
export let nullable: boolean = false
export let disabled: boolean = false
export let defaultValue: any = undefined
export let propsNames: any = []
export let showExpr: string | undefined = undefined
@@ -336,6 +337,7 @@
{contentEncoding}
{format}
{extra}
{disabled}
/>
{:else}
<ArgInput
@@ -350,6 +352,7 @@
{contentEncoding}
{format}
{extra}
{disabled}
{nullable}
{variableEditor}
compact
@@ -386,6 +389,15 @@
disabled={required}
/>
{/if}
<Toggle
options={{
right: 'Disabled',
rightTooltip: 'Do not let user modify this field'
}}
lightMode
size="xs"
bind:checked={disabled}
/>
</div>
{#if displayWebhookWarning && !(type === 'object' && oneOf && oneOf.length >= 2)}