Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

more work on wizard

Browse Source
This commit is contained in:
Arman
2022-07-26 14:59:10 +02:00
parent f5257c6290
commit 7cbcb6ce38
2 changed files with 139 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+122 -57
View File
@@ -8,10 +8,15 @@
InputText,
InputEmail,
InputNumber,
InputSelect,
Button
} from '$lib/elements/forms';
import { collection } from './store';
import { attributeList, type Attributes } from './store';
import { sdkForProject } from '$lib/stores/sdk';
import { page } from '$app/stores';
import { onMount } from 'svelte';
$: attributeList.load($page.params.collection);
export let showCreate = false;
@@ -19,37 +24,80 @@
{ title: 'Create data', current: true, completed: false },
{ title: 'Set permissions', current: false, completed: false }
];
let currentStep = 0;
const comp = (type: string) => {
switch (type) {
case 'boolean':
return InputCheckbox;
case 'email':
return InputEmail;
case 'float':
return InputNumber;
case 'integer':
return InputNumber;
default:
return InputText;
}
};
let newDocument = {};
let read: string[];
let write: string[];
onMount(async () => {
console.log($attributeList);
await attributeList.load($page.params.collection);
$attributeList.attributes.forEach((attr) => {
newDocument[attr.key] = attr.default;
});
});
const create = async () => {
await sdkForProject.databases.createDocument(
$collection.$id,
'unique()',
newDocument,
read,
write
);
console.log(newDocument);
// await sdkForProject.databases.createDocument(
// $page.params.collection,
// 'unique()',
// newDocument,
// read,
// write
// );
};
const comp = (attr: Attributes) => {
if (attr.array) {
if (attr.type === 'string')
switch (attr?.format) {
case 'email':
return InputEmail;
case 'enum':
return InputSelect;
default:
return InputText;
}
else {
switch (attr?.type) {
case 'boolean':
return InputSelect;
case 'double':
return InputNumber;
case 'integer':
return InputNumber;
default:
return InputText;
}
}
} else {
if (attr.type === 'string')
switch (attr?.format) {
case 'email':
return InputEmail;
case 'enum':
return InputSelect;
default:
return InputText;
}
else {
switch (attr?.type) {
case 'boolean':
return InputCheckbox;
case 'double':
return InputNumber;
case 'integer':
return InputNumber;
default:
return InputText;
}
}
}
};
const nextStep = () => {
@@ -60,7 +108,6 @@
};
const prevStep = () => {
steps[currentStep].current = false;
currentStep--;
steps[currentStep].current = true;
steps[currentStep].completed = false;
@@ -82,36 +129,54 @@
<h1 class="heading-level-6">Create document data</h1>
<p>Provide document data based on attributes you created earlier.</p>
</header>
<div class="form-content">
<FormList>
{#each $collection.attributes as attribute}
{#if attribute.array}
<li class="form-item is-multiple">
<div class="form-item-part u-stretch">
<svelte:component
this={comp(attribute.type)}
label={attribute.key}
id={attribute.key}
required={attribute.required}
bind:value={newDocument[attribute.key]} />
</div>
<div class="form-item-part u-cross-child-end">
<Button text>
<span class="icon-x" aria-hidden="true" />
</Button>
</div>
</li>
{:else}
<svelte:component
this={comp(attribute.type)}
label={attribute.key}
id={attribute.key}
required={attribute.required}
bind:value={newDocument[attribute.key]} />
{/if}
{/each}
</FormList>
</div>
{#if $attributeList?.total}
<div class="form-content">
<FormList>
{#each $attributeList.attributes as attribute}
{#if attribute?.array}
<li class="form-item is-multiple">
<div class="form-item-part u-stretch">
<svelte:component
this={comp(attribute)}
label={attribute.key}
id={attribute.key}
required={attribute.required}
placeholder={attribute.key}
options={attribute.type === 'boolean'
? [
{ value: true, label: 'True' },
{ value: false, label: 'False' }
]
: attribute?.elements?.map((n) => {
return { value: n, label: n };
})}
bind:value={newDocument[attribute.key]} />
</div>
<div class="form-item-part u-cross-child-end">
<Button text>
<span class="icon-x" aria-hidden="true" />
</Button>
</div>
</li>
{:else}
<svelte:component
this={comp(attribute)}
label={attribute.key}
id={attribute.key}
required={attribute.required}
placeholder={attribute.key}
minlength={attribute?.min}
maxlength={attribute?.max}
step={attribute.type === 'double' ? 0.1 : 1}
bind:value={newDocument[attribute.key]}
options={attribute?.elements?.map((n) => {
return { value: n, label: n };
})} />
{/if}
{/each}
</FormList>
</div>
{/if}
<div class="form-footer">
<div class="u-flex u-main-end u-gap-12">
src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
+17
View File
@@ -83,13 +83,30 @@ function createIndexListStore() {
}
};
}
function createAttributeListStore() {
const { subscribe, set } = writable<Models.AttributeList>(
browser ? JSON.parse(sessionStorage.getItem('attributeList')) : null
);
return {
subscribe,
set,
load: async (collectionId: string) => {
const response = await sdkForProject.databases.listAttributes(collectionId);
set(response);
}
};
}
export const collection = createCollection();
export const documentList = createDocumentListStore();
export const indexList = createIndexListStore();
export const attributeList = createAttributeListStore();
if (browser) {
collection.subscribe((n) => sessionStorage?.setItem('collection', JSON.stringify(n ?? '')));
documentList.subscribe((n) => sessionStorage?.setItem('documentList', JSON.stringify(n ?? '')));
indexList.subscribe((n) => sessionStorage?.setItem('indexList', JSON.stringify(n ?? '')));
attributeList.subscribe((n) =>
sessionStorage?.setItem('attributeList', JSON.stringify(n ?? ''))
);
}