fix: template variables

This commit is contained in:
Arman
2025-02-12 18:06:23 +01:00
parent 4e040b4f1a
commit 2dcd6fef43
2 changed files with 31 additions and 36 deletions
@@ -190,7 +190,8 @@
selectedRepository = null;
}
$: console.log(domain);
$: console.log(data.template);
$: console.log(variables);
</script>
<svelte:head>
@@ -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