mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: executions, form items, form items part
This commit is contained in:
Arman
@@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
export let fullWidth = false;
|
||||
export let isMultiple = false;
|
||||
</script>
|
||||
|
||||
<li class="form-item" class:u-width-full-line={fullWidth}>
|
||||
<li class="form-item" class:is-multiple={isMultiple} class:u-width-full-line={fullWidth}>
|
||||
<slot />
|
||||
</li>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<script lang="ts">
|
||||
export let fullWidth = false;
|
||||
export let alignEnd = false;
|
||||
</script>
|
||||
|
||||
<div class="form-item-part" class:u-cross-child-end={alignEnd} class:u-stretch={fullWidth}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -1,5 +1,6 @@
|
||||
export { default as Form } from './form.svelte';
|
||||
export { default as FormItem } from './formItem.svelte';
|
||||
export { default as FormItemPart } from './formItemPart.svelte';
|
||||
export { default as FormList } from './formList.svelte';
|
||||
export { default as Button } from './button.svelte';
|
||||
export { default as InputDomain } from './inputDomain.svelte';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { FormItem, Helper, Label } from '.';
|
||||
import { FormItem, FormItemPart, Helper, Label } from '.';
|
||||
import NullCheckbox from './nullCheckbox.svelte';
|
||||
import TextCounter from './textCounter.svelte';
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
export let fullWidth = false;
|
||||
export let maxlength: number = null;
|
||||
export let tooltip: string = null;
|
||||
export let isMultiple = false;
|
||||
|
||||
let element: HTMLInputElement;
|
||||
let error: string;
|
||||
@@ -65,9 +66,11 @@
|
||||
type $$Events = {
|
||||
input: Event & { target: HTMLInputElement };
|
||||
};
|
||||
|
||||
$: wrapper = isMultiple ? FormItemPart : FormItem;
|
||||
</script>
|
||||
|
||||
<FormItem {fullWidth}>
|
||||
<svelte:component this={wrapper} {fullWidth}>
|
||||
{#if label}
|
||||
<Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
|
||||
{label}
|
||||
@@ -110,4 +113,4 @@
|
||||
{#if error}
|
||||
<Helper type="warning">{error}</Helper>
|
||||
{/if}
|
||||
</FormItem>
|
||||
</svelte:component>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
|
||||
import { CardGrid, Heading } from '$lib/components';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import { Button, Form } from '$lib/elements/forms';
|
||||
import { Button, Form, FormItem, FormItemPart, InputText } from '$lib/elements/forms';
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { onMount } from 'svelte';
|
||||
@@ -21,11 +21,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
let prefs: [string, unknown][] = null;
|
||||
let prefs: [string, string][] = null;
|
||||
let arePrefsDisabled = true;
|
||||
|
||||
onMount(async () => {
|
||||
prefs = Object.entries($team.prefs);
|
||||
prefs = Object.entries($team.prefs as Record<string, string>);
|
||||
if (!prefs?.length) {
|
||||
prefs.push(['', '']);
|
||||
}
|
||||
@@ -66,30 +66,25 @@
|
||||
<ul class="form-list">
|
||||
{#if prefs}
|
||||
{#each prefs as [key, value], index}
|
||||
<li class="form-item is-multiple">
|
||||
<div class="form-item-part u-stretch">
|
||||
<label class="label" for={`key-${index}`}>Key</label>
|
||||
<div class="input-text-wrapper">
|
||||
<input
|
||||
id={`key-${key}`}
|
||||
placeholder="Enter key"
|
||||
type="text"
|
||||
class="input-text"
|
||||
bind:value={key} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item-part u-stretch">
|
||||
<label class="label" for={`value-${index}`}> Value </label>
|
||||
<div class="input-text-wrapper">
|
||||
<input
|
||||
id={`value-${value}`}
|
||||
placeholder="Enter value"
|
||||
type="text"
|
||||
class="input-text"
|
||||
bind:value />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item-part u-cross-child-end">
|
||||
<FormItem isMultiple>
|
||||
<InputText
|
||||
id={`key-${index}`}
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={key}
|
||||
placeholder="Enter key"
|
||||
label="Key"
|
||||
required />
|
||||
|
||||
<InputText
|
||||
id={`value-${index}`}
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value
|
||||
placeholder="Enter value"
|
||||
label="Value"
|
||||
required />
|
||||
<FormItemPart alignEnd>
|
||||
<Button
|
||||
text
|
||||
disabled={(!key || !value) && index === 0}
|
||||
@@ -103,8 +98,8 @@
|
||||
}}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
</FormItemPart>
|
||||
</FormItem>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
|
||||
import { CardGrid, Heading } from '$lib/components';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import { Button, Form } from '$lib/elements/forms';
|
||||
import { Button, Form, FormItem, FormItemPart, InputText } from '$lib/elements/forms';
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { onMount } from 'svelte';
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
let prefs: [string, unknown][] = null;
|
||||
let prefs: [string, string][] = null;
|
||||
let arePrefsDisabled = true;
|
||||
|
||||
onMount(async () => {
|
||||
@@ -63,30 +63,25 @@
|
||||
<ul class="form-list">
|
||||
{#if prefs}
|
||||
{#each prefs as [key, value], index}
|
||||
<li class="form-item is-multiple">
|
||||
<div class="form-item-part u-stretch">
|
||||
<label class="label" for={`key-${index}`}>Key</label>
|
||||
<div class="input-text-wrapper">
|
||||
<input
|
||||
id={`key-${key}`}
|
||||
placeholder="Enter key"
|
||||
type="text"
|
||||
class="input-text"
|
||||
bind:value={key} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item-part u-stretch">
|
||||
<label class="label" for={`value-${index}`}> Value </label>
|
||||
<div class="input-text-wrapper">
|
||||
<input
|
||||
id={`value-${value}`}
|
||||
placeholder="Enter value"
|
||||
type="text"
|
||||
class="input-text"
|
||||
bind:value />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item-part u-cross-child-end">
|
||||
<FormItem isMultiple>
|
||||
<InputText
|
||||
id={`key-${index}`}
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value={key}
|
||||
placeholder="Enter key"
|
||||
label="Key"
|
||||
required />
|
||||
|
||||
<InputText
|
||||
id={`value-${index}`}
|
||||
isMultiple
|
||||
fullWidth
|
||||
bind:value
|
||||
placeholder="Enter value"
|
||||
label="Value"
|
||||
required />
|
||||
<FormItemPart alignEnd>
|
||||
<Button
|
||||
text
|
||||
disabled={(!key || !value) && index === 0}
|
||||
@@ -100,8 +95,8 @@
|
||||
}}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
</FormItemPart>
|
||||
</FormItem>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
@@ -38,7 +38,6 @@
|
||||
import Activate from './activate.svelte';
|
||||
import { calculateTime } from '$lib/helpers/timeConversion';
|
||||
import { Pill } from '$lib/elements';
|
||||
import { tooltip } from '$lib/actions/tooltip';
|
||||
import RedeployModal from './redeployModal.svelte';
|
||||
import DeploymentSource from './deploymentSource.svelte';
|
||||
import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import { Modal } from '$lib/components';
|
||||
import Collapsible from '$lib/components/collapsible.svelte';
|
||||
import CollapsibleItem from '$lib/components/collapsibleItem.svelte';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { Button, FormItem, FormItemPart } from '$lib/elements/forms';
|
||||
import { FormList } from '$lib/elements/forms';
|
||||
import InputSelect from '$lib/elements/forms/inputSelect.svelte';
|
||||
import InputText from '$lib/elements/forms/inputText.svelte';
|
||||
@@ -22,6 +22,7 @@
|
||||
let method = 'GET';
|
||||
let body = '';
|
||||
let headers: [string, string][] = [['', '']];
|
||||
let error: string = null;
|
||||
|
||||
const methodOptions = [
|
||||
{ label: 'GET', value: 'GET' },
|
||||
@@ -65,12 +66,9 @@
|
||||
message: `Function has been executed`
|
||||
});
|
||||
trackEvent(Submit.ExecutionCreate);
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
});
|
||||
trackError(error, Submit.ExecutionCreate);
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
trackError(e, Submit.ExecutionCreate);
|
||||
} finally {
|
||||
submitting = false;
|
||||
}
|
||||
@@ -84,7 +82,13 @@
|
||||
afterNavigate(close);
|
||||
</script>
|
||||
|
||||
<Modal headerDivider={false} bind:show size="big" onSubmit={handleSubmit} on:close={close}>
|
||||
<Modal
|
||||
headerDivider={false}
|
||||
bind:show
|
||||
size="big"
|
||||
onSubmit={handleSubmit}
|
||||
on:close={close}
|
||||
bind:error>
|
||||
<svelte:fragment slot="header">Execute function</svelte:fragment>
|
||||
<p class="text">
|
||||
Manually execute your function. <a
|
||||
@@ -115,41 +119,32 @@
|
||||
Customize your execution with headers or body. To customize parameters, add
|
||||
them to path.
|
||||
</p>
|
||||
|
||||
<Label
|
||||
tooltip="Headers should contain alphanumeric characters (a-z, A-Z, and 0-9) and hyphens only (- and _).">
|
||||
Headers
|
||||
</Label>
|
||||
<div>
|
||||
<Label
|
||||
tooltip="Headers should contain alphanumeric characters (a-z, A-Z, and 0-9) and hyphens only (- and _).">
|
||||
Headers
|
||||
</Label>
|
||||
</div>
|
||||
<div class="form u-grid u-gap-16">
|
||||
<ul class="form-list">
|
||||
{#if headers}
|
||||
{#each headers as [name, value], index}
|
||||
<li class="form-item is-multiple">
|
||||
<div class="form-item-part u-stretch">
|
||||
<label class="label" for={`key-${index}`}>Name</label>
|
||||
<div class="input-text-wrapper">
|
||||
<input
|
||||
id={`key-${name}`}
|
||||
placeholder="Enter Name"
|
||||
type="text"
|
||||
class="input-text"
|
||||
bind:value={name} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item-part u-stretch">
|
||||
<label class="label" for={`value-${index}`}>
|
||||
Value
|
||||
</label>
|
||||
<div class="input-text-wrapper">
|
||||
<input
|
||||
id={`value-${value}`}
|
||||
placeholder="Enter value"
|
||||
type="text"
|
||||
class="input-text"
|
||||
bind:value />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item-part u-cross-child-end">
|
||||
<FormItem isMultiple>
|
||||
<InputText
|
||||
isMultiple
|
||||
fullWidth
|
||||
label="Name"
|
||||
placeholder="Enter Name"
|
||||
id={`key-${index}`}
|
||||
bind:value={name} />
|
||||
<InputText
|
||||
isMultiple
|
||||
fullWidth
|
||||
label="Value"
|
||||
placeholder="Enter value"
|
||||
id={`value-${index}`}
|
||||
bind:value />
|
||||
<FormItemPart alignEnd>
|
||||
<Button
|
||||
text
|
||||
disabled={(!name || !value) && index === 0}
|
||||
@@ -163,8 +158,8 @@
|
||||
}}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
</FormItemPart>
|
||||
</FormItem>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user