fix: show only element if single in required vars.

This commit is contained in:
ItzNotABug
2024-07-31 16:52:35 +05:30
parent ef7dc5b602
commit 9ce2d7b703
@@ -63,12 +63,51 @@
</svelte:fragment>
{#if $template?.variables?.length}
{#if requiredVariables?.length}
<Collapsible>
<CollapsibleItem open={true}>
<svelte:fragment slot="title">Required variables</svelte:fragment>
<svelte:fragment slot="subtitle">
<span class="inline-tag">{requiredVariables.length}</span>
</svelte:fragment>
{#if requiredVariables?.length === 1}
<div class="collapsible-item">
<div class="collapsible-wrapper">
<div class="collapsible-button">
<div>
<span class="text">Required variables</span>
<span class="collapsible-button-optional">
<span class="inline-tag">{requiredVariables.length}</span>
</span>
</div>
</div>
<div class="collapsible-content">
<FormList>
{#each requiredVariables as variable}
{#if variable.name === 'APPWRITE_API_KEY'}
<AppwriteVariable appwriteVariable={variable} />
{:else}
<div>
<svelte:component
this={selectComponent(variable.type)}
id={variable.name}
label={variable.name}
placeholder={variable.placeholder ?? 'Enter value'}
required={variable.required}
autocomplete={false}
minlength={variable.type === 'password' ? 0 : null}
showPasswordButton={variable.type === 'password'}
bind:value={$templateConfig.variables[variable.name]} />
<Helper type="neutral">
{@html variable.description}
</Helper>
</div>
{/if}
{/each}
</FormList>
</div>
</div>
</div>
{:else if requiredVariables?.length > 1}
<Collapsible>
<CollapsibleItem open={true}>
<svelte:fragment slot="title">Required variables</svelte:fragment>
<svelte:fragment slot="subtitle">
<span class="inline-tag">{requiredVariables.length}</span>
</svelte:fragment>
<FormList>
{#each requiredVariables as variable}
@@ -94,7 +133,8 @@
{/each}
</FormList>
</CollapsibleItem>
</Collapsible>
</Collapsible>
{/if}
{/if}
{#if optionalVariables?.length}
@@ -137,3 +177,9 @@
</Card>
{/if}
</WizardStep>
<style>
.collapsible-button div {
padding: 3px 0;
}
</style>