feat: add overview

This commit is contained in:
Arman
2022-07-18 17:38:16 +02:00
parent b37209fd6d
commit 9d58246728
10 changed files with 117 additions and 58 deletions
+6 -4
View File
@@ -78,11 +78,13 @@
<div class="modal-content">
<slot />
</div>
<div class="modal-footer">
<div class="u-flex u-main-end u-gap-12">
<slot name="footer" />
{#if $$slots.footer}
<div class="modal-footer">
<div class="u-flex u-main-end u-gap-12">
<slot name="footer" />
</div>
</div>
</div>
{/if}
</section>
</div>
{/if}
@@ -1,7 +1,7 @@
<script lang="ts">
import { Modal } from '$lib/components';
import { option, options } from './attributes/store';
import { Button, InputText, FormList } from '$lib/elements/forms';
import { InputText, FormList } from '$lib/elements/forms';
import type { Attributes } from './store';
export let showOverview = false;
@@ -26,12 +26,8 @@
disabled />
{#if selectedAttribute}
<svelte:component this={$option.component} disabled={true} />
<svelte:component this={$option.component} overview={true} {selectedAttribute} />
{/if}
</FormList>
<svelte:fragment slot="footer">
<Button secondary on:click={() => (showOverview = false)}>Cancel</Button>
<Button submit>Create</Button>
</svelte:fragment>
</Modal>
{/if}
@@ -4,14 +4,16 @@
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { collection } from '../store';
import type { Models } from '@aw-labs/appwrite-console';
export let submitted = false;
export let id: string;
export let disabled = false;
export let overview = false;
export let selectedAttribute: Models.AttributeBoolean;
const dispatch = createEventDispatcher();
let def: boolean,
let xdefault: boolean,
required = false,
array = false;
@@ -22,7 +24,7 @@
$collection.$id,
id,
required,
def ? def : undefined,
xdefault ? xdefault : undefined,
array
);
dispatch('created', attribute);
@@ -37,8 +39,12 @@
$: if (submitted) {
submit();
}
$: if (overview) {
({ required, array, xdefault } = selectedAttribute);
}
</script>
<InputSwitch id="required" label="Required" bind:value={required} {disabled} />
<InputSwitch id="array" label="Array" bind:value={array} {disabled} />
<InputSwitch id="default" label="Default" bind:value={def} {disabled} />
<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
<InputSwitch id="default" label="Default" bind:value={xdefault} disabled={overview} />
@@ -4,10 +4,14 @@
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { collection } from '../store';
import type { Models } from '@aw-labs/appwrite-console';
export let id: string;
export let submitted = false;
let def: string,
export let overview = false;
export let selectedAttribute: Models.AttributeEmail;
let xdefault: string,
required = false,
array = false;
@@ -19,7 +23,7 @@
$collection.$id,
id,
required,
def ? def : undefined,
xdefault ? xdefault : undefined,
array
);
dispatch('created', attribute);
@@ -34,8 +38,12 @@
$: if (submitted) {
submit();
}
$: if (overview) {
({ required, array, xdefault } = selectedAttribute);
}
</script>
<InputSwitch id="required" label="Required" bind:value={required} />
<InputSwitch id="required" label="Array" bind:value={array} />
<InputText id="default" label="Default" bind:value={def} />
<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
@@ -4,10 +4,13 @@
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { collection } from '../store';
import type { Models } from '@aw-labs/appwrite-console';
export let id: string;
export let submitted = false;
let def = '',
export let overview = false;
export let selectedAttribute: Models.AttributeEnum;
let xdefault = '',
elements: string[],
required = false,
array = false;
@@ -21,7 +24,7 @@
id,
elements,
required,
def ? def : undefined,
xdefault ? xdefault : undefined,
array
);
dispatch('created', attribute);
@@ -42,9 +45,17 @@
$: if (submitted) {
submit();
}
$: if (overview) {
({ required, array, elements, xdefault } = selectedAttribute);
}
</script>
<InputTags id="elements" label="Elements" bind:tags={elements} placeholder="Add elements here" />
<InputSelect id="default" label="Default" bind:options bind:value={def} />
<InputSwitch id="required" label="Required" bind:value={required} />
<InputSwitch id="required" label="Array" bind:value={array} />
<InputTags
id="elements"
label="Elements"
bind:tags={elements}
placeholder="Add elements here"
readonly={overview} />
<InputSelect id="default" label="Default" bind:options bind:value={xdefault} disabled={overview} />
<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
@@ -4,14 +4,17 @@
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { collection } from '../store';
import type { Models } from '@aw-labs/appwrite-console';
const dispatch = createEventDispatcher();
export let id: string;
export let submitted = false;
export let overview = false;
export let selectedAttribute: Models.AttributeFloat;
let min: number,
max: number,
def: number,
xdefault: number,
required = false,
array = false;
@@ -24,7 +27,7 @@
required,
min,
max,
def ? def : undefined,
xdefault ? xdefault : undefined,
array
);
dispatch('created', attribute);
@@ -39,11 +42,15 @@
$: if (submitted) {
submit();
}
$: if (overview) {
({ required, array, min, max, xdefault } = selectedAttribute);
}
</script>
<InputNumber id="min" label="Min" bind:value={min} />
<InputNumber id="max" label="Max" bind:value={max} />
<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
<InputSwitch id="required" label="Required" bind:value={required} />
<InputSwitch id="array" label="Array" bind:value={array} />
<InputNumber id="default" label="Default" bind:value={def} />
<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
@@ -4,14 +4,17 @@
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { collection } from '../store';
import type { Models } from '@aw-labs/appwrite-console';
const dispatch = createEventDispatcher();
export let id: string;
export let id: string = null;
export let submitted = false;
export let overview = false;
export let selectedAttribute: Models.AttributeInteger;
let min: number,
max: number,
def: number,
xdefault: number,
required = false,
array = false;
@@ -24,7 +27,7 @@
required,
min,
max,
def ? def : undefined,
xdefault ? xdefault : undefined,
array
);
dispatch('created', attribute);
@@ -39,11 +42,16 @@
$: if (submitted) {
submit();
}
$: if (overview) {
//TODO: fix xdefault
({ required, array, min, max, xdefault } = selectedAttribute);
}
</script>
<InputNumber id="min" label="Min" bind:value={min} />
<InputNumber id="max" label="Max" bind:value={max} />
<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
<InputSwitch id="required" label="Required" bind:value={required} />
<InputSwitch id="array" label="Array" bind:value={array} />
<InputNumber id="default" label="Default" bind:value={def} />
<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
@@ -4,10 +4,13 @@
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { collection } from '../store';
import type { Models } from '@aw-labs/appwrite-console';
export let id: string;
export let submitted = false;
let def: string,
export let overview = false;
export let selectedAttribute: Models.AttributeIp;
let xdefault: string,
required = false,
array = false;
@@ -19,7 +22,7 @@
$collection.$id,
id,
required,
def ? def : undefined,
xdefault ? xdefault : undefined,
array
);
dispatch('created', attribute);
@@ -34,8 +37,12 @@
$: if (submitted) {
submit();
}
$: if (overview) {
({ required, array, xdefault } = selectedAttribute);
}
</script>
<InputSwitch id="required" label="Required" bind:value={required} />
<InputSwitch id="required" label="Array" bind:value={array} />
<InputText id="default" label="Default" bind:value={def} />
<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
@@ -4,10 +4,13 @@
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { collection } from '../store';
import type { Models } from '@aw-labs/appwrite-console';
export let id: string;
export let submitted = false;
let def: string,
export let overview = false;
export let selectedAttribute: Models.AttributeString;
let xdefault: string,
size = 255,
required = false,
array = false;
@@ -21,7 +24,7 @@
id,
size,
required,
def ? def : undefined,
xdefault ? xdefault : undefined,
array
);
dispatch('created', attribute);
@@ -36,9 +39,13 @@
$: if (submitted) {
submit();
}
$: if (overview) {
({ required, array, size, xdefault } = selectedAttribute);
}
</script>
<InputNumber id="size" label="Size" bind:value={size} required />
<InputSwitch id="required" label="Required" bind:value={required} />
<InputSwitch id="required" label="Array" bind:value={array} />
<InputText id="default" label="Default" bind:value={def} />
<InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
@@ -4,10 +4,13 @@
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { collection } from '../store';
import type { Models } from '@aw-labs/appwrite-console';
export let id: string;
export let submitted = false;
let def: string,
export let overview = false;
export let selectedAttribute: Models.AttributeUrl;
let xdefault: string,
required = false,
array = false;
@@ -19,7 +22,7 @@
$collection.$id,
id,
required,
def ? def : undefined,
xdefault ? xdefault : undefined,
array
);
dispatch('created', attribute);
@@ -34,8 +37,12 @@
$: if (submitted) {
submit();
}
$: if (overview) {
({ required, array, xdefault } = selectedAttribute);
}
</script>
<InputSwitch id="required" label="Required" bind:value={required} />
<InputSwitch id="required" label="Array" bind:value={array} />
<InputText id="default" label="Default" bind:value={def} />
<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />