mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: template variables
This commit is contained in:
+2
-1
@@ -190,7 +190,8 @@
|
||||
selectedRepository = null;
|
||||
}
|
||||
|
||||
$: console.log(domain);
|
||||
$: console.log(data.template);
|
||||
$: console.log(variables);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
||||
+29
-35
@@ -11,7 +11,7 @@
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
import { Fieldset, Layout, Popover, Icon, Accordion } from '@appwrite.io/pink-svelte';
|
||||
import { IconInfo } from '@appwrite.io/pink-icons-svelte';
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
import { onMount, type SvelteComponent } from 'svelte';
|
||||
|
||||
export let variables: Partial<Models.TemplateVariable>[] = [];
|
||||
export let templateVariables: Models.TemplateVariable[] = [];
|
||||
@@ -28,6 +28,14 @@
|
||||
{ requiredVariables: [], optionalVariables: [] }
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
templateVariables.forEach((variable) => {
|
||||
variables[variable.name] = {
|
||||
value: variable.value ?? ''
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
function selectComponent(variableType: string): typeof SvelteComponent<unknown> {
|
||||
switch (variableType) {
|
||||
case 'password':
|
||||
@@ -60,23 +68,16 @@
|
||||
{#each requiredVariables as variable}
|
||||
<Layout.Stack gap="s" direction="row">
|
||||
<Layout.Stack gap="s" direction="row">
|
||||
<div style="flex-basis:1; width: 100%">
|
||||
<InputText
|
||||
id={variable.name}
|
||||
value={variable.name}
|
||||
readonly />
|
||||
</div>
|
||||
<div style="flex-basis:1;width: 100%">
|
||||
<svelte:component
|
||||
this={selectComponent(variable.type)}
|
||||
id={variable.name}
|
||||
placeholder={variable.placeholder ?? 'Enter value'}
|
||||
required={variable.required}
|
||||
autocomplete={false}
|
||||
minlength={variable.type === 'password' ? 0 : null}
|
||||
showPasswordButton={variable.type === 'password'}
|
||||
bind:value={variables[variable.name].value} />
|
||||
</div>
|
||||
<InputText id={variable.name} value={variable.name} readonly />
|
||||
<svelte:component
|
||||
this={selectComponent(variable.type)}
|
||||
id={variable.name}
|
||||
placeholder={variable.placeholder ?? 'Enter value'}
|
||||
required={variable.required}
|
||||
autocomplete={false}
|
||||
minlength={variable.type === 'password' ? 0 : null}
|
||||
showPasswordButton={variable.type === 'password'}
|
||||
bind:value={variables[variable.name].value} />
|
||||
</Layout.Stack>
|
||||
<Popover placement="bottom-end" let:toggle>
|
||||
<Button
|
||||
@@ -103,23 +104,16 @@
|
||||
{#each optionalVariables as variable}
|
||||
<Layout.Stack gap="s" direction="row">
|
||||
<Layout.Stack gap="s" direction="row">
|
||||
<div style="flex-basis:1; width: 100%">
|
||||
<InputText
|
||||
id={variable.name}
|
||||
value={variable.name}
|
||||
readonly />
|
||||
</div>
|
||||
<div style="flex-basis:1;width: 100%">
|
||||
<svelte:component
|
||||
this={selectComponent(variable.type)}
|
||||
id={variable.name}
|
||||
placeholder={variable.placeholder ?? 'Enter value'}
|
||||
required={variable.required}
|
||||
autocomplete={false}
|
||||
minlength={variable.type === 'password' ? 0 : null}
|
||||
showPasswordButton={variable.type === 'password'}
|
||||
bind:value={variables[variable.name].value} />
|
||||
</div>
|
||||
<InputText id={variable.name} value={variable.name} readonly />
|
||||
<svelte:component
|
||||
this={selectComponent(variable.type)}
|
||||
id={variable.name}
|
||||
placeholder={variable.placeholder ?? 'Enter value'}
|
||||
required={variable.required}
|
||||
autocomplete={false}
|
||||
minlength={variable.type === 'password' ? 0 : null}
|
||||
showPasswordButton={variable.type === 'password'}
|
||||
bind:value={variables[variable.name].value} />
|
||||
</Layout.Stack>
|
||||
<Popover placement="bottom-end" let:toggle>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user