mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: document creation
This commit is contained in:
Arman
+111
-50
@@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { Wizard } from '$lib/layout';
|
||||
import { Steps, Alert } from '$lib/components';
|
||||
import { Form, Button, InputTags } from '$lib/elements/forms';
|
||||
import { Steps, Alert, InnerModal } from '$lib/components';
|
||||
import { Form, Button, InputTags, InputText } from '$lib/elements/forms';
|
||||
import { Pill } from '$lib/elements';
|
||||
import { attributeList } from './store';
|
||||
import { sdkForProject } from '$lib/stores/sdk';
|
||||
import { page } from '$app/stores';
|
||||
@@ -14,33 +15,59 @@
|
||||
export let showCreate = false;
|
||||
|
||||
let newDocument = {};
|
||||
let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
|
||||
let currentStep = 0;
|
||||
let read: string[];
|
||||
let write: string[];
|
||||
let id: string;
|
||||
let showCustomId = false;
|
||||
let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
|
||||
let currentStep = 0;
|
||||
|
||||
onMount(async () => {
|
||||
await attributeList.load($page.params.collection);
|
||||
$attributeList.attributes.forEach((attr) => (newDocument[attr.key] = [null]));
|
||||
initializeDocument();
|
||||
});
|
||||
|
||||
const initializeDocument = () => {
|
||||
$attributeList.attributes.forEach((attr) => {
|
||||
if (attr.array) {
|
||||
newDocument[attr.key] = [null];
|
||||
} else {
|
||||
newDocument[attr.key] = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const create = async () => {
|
||||
try {
|
||||
// await sdkForProject.databases.createDocument(
|
||||
// $page.params.collection,
|
||||
// 'unique()',
|
||||
// newDocument,
|
||||
// read,
|
||||
// write
|
||||
// );
|
||||
console.log('test');
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
message: error.message,
|
||||
type: 'error'
|
||||
});
|
||||
if (currentStep < steps.length - 1) {
|
||||
currentStep++;
|
||||
} else {
|
||||
try {
|
||||
await sdkForProject.databases.createDocument(
|
||||
$page.params.collection,
|
||||
id ?? 'unique()',
|
||||
newDocument,
|
||||
read,
|
||||
write
|
||||
);
|
||||
addNotification({
|
||||
message: 'Document has been created',
|
||||
type: 'success'
|
||||
});
|
||||
showCreate = false;
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
message: error.message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$: if (!showCreate) {
|
||||
initializeDocument();
|
||||
currentStep = 0;
|
||||
read = write = [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<Wizard title="Create document" bind:show={showCreate}>
|
||||
@@ -53,16 +80,17 @@
|
||||
<h1 class="heading-level-6">Create document data</h1>
|
||||
<p>Provide document data based on attributes you created earlier.</p>
|
||||
</header>
|
||||
{#each $attributeList?.attributes?.filter((a) => a.status === 'available') as attribute}
|
||||
{#if attribute.array}
|
||||
<ul class="form-list">
|
||||
<ul class="form-list">
|
||||
{#each $attributeList?.attributes?.filter((a) => a.status === 'available') as attribute}
|
||||
{@const label = attribute.required ? `${attribute.key}*` : attribute.key}
|
||||
{#if attribute.array}
|
||||
{#each newDocument[attribute.key] as _v, index}
|
||||
<li class="form-item is-multiple">
|
||||
<div class="form-item-part u-stretch">
|
||||
<Attribute
|
||||
{attribute}
|
||||
id={`${attribute.key}-${index}`}
|
||||
label={index === 0 ? attribute.key : ''}
|
||||
label={index === 0 ? label : ''}
|
||||
bind:value={newDocument[attribute.key][index]} />
|
||||
</div>
|
||||
<div class="form-item-part u-cross-child-end">
|
||||
@@ -83,7 +111,7 @@
|
||||
<Attribute
|
||||
{attribute}
|
||||
id={`${attribute.key}-0`}
|
||||
label={attribute.key}
|
||||
{label}
|
||||
bind:value={newDocument[attribute.key][0]} />
|
||||
</div>
|
||||
<div class="form-item-part u-cross-child-end">
|
||||
@@ -93,33 +121,66 @@
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<Button
|
||||
text
|
||||
on:click={() => {
|
||||
if (
|
||||
newDocument[attribute.key][
|
||||
newDocument[attribute.key].length - 1
|
||||
] !== null
|
||||
) {
|
||||
newDocument[attribute.key].push(null);
|
||||
newDocument = newDocument;
|
||||
}
|
||||
}}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text"> Add Attribute</span>
|
||||
</Button>
|
||||
<Button
|
||||
text
|
||||
disabled={newDocument[attribute.key][
|
||||
newDocument[attribute.key].length - 1
|
||||
] === null}
|
||||
on:click={() => {
|
||||
{
|
||||
newDocument[attribute.key].push(null);
|
||||
newDocument = newDocument;
|
||||
}
|
||||
}}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text"> Add attribute</span>
|
||||
</Button>
|
||||
{:else}
|
||||
<ul class="form-list">
|
||||
<Attribute
|
||||
{attribute}
|
||||
id={attribute.key}
|
||||
{label}
|
||||
bind:value={newDocument[attribute.key]} />
|
||||
</ul>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if !showCustomId}
|
||||
<div>
|
||||
<Pill button on:click={() => (showCustomId = !showCustomId)}
|
||||
><span class="icon-pencil" aria-hidden="true" /><span class="text">
|
||||
Document ID
|
||||
</span></Pill>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="form-list">
|
||||
<Attribute
|
||||
{attribute}
|
||||
id={attribute.key}
|
||||
label={attribute.key}
|
||||
bind:value={newDocument[attribute.key]} />
|
||||
</ul>
|
||||
<InnerModal bind:show={showCustomId}>
|
||||
<svelte:fragment slot="title">User ID</svelte:fragment>
|
||||
Enter a custom document ID. Leave blank for a randomly generated one.
|
||||
<svelte:fragment slot="content">
|
||||
<div class="form">
|
||||
<InputText
|
||||
id="id"
|
||||
label="Custom ID"
|
||||
showLabel={false}
|
||||
placeholder="Enter ID"
|
||||
autofocus={true}
|
||||
bind:value={id} />
|
||||
|
||||
<div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
|
||||
<span
|
||||
class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
|
||||
aria-hidden="true" />
|
||||
<span class="text u-line-height-1-5"
|
||||
>Allowed characters: alphanumeric, hyphen, non-leading
|
||||
underscore, period</span>
|
||||
</div>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</InnerModal>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
{:else if currentStep === 1}
|
||||
<header class="form-header">
|
||||
<h1 class="heading-level-6">Set Permissions</h1>
|
||||
@@ -156,13 +217,13 @@
|
||||
<div class="u-flex u-main-end u-gap-12">
|
||||
{#if currentStep === 0}
|
||||
<Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
|
||||
<Button on:click={() => currentStep++}>Next</Button>
|
||||
<Button submit>Next</Button>
|
||||
{:else if currentStep === steps.length - 1}
|
||||
<Button secondary on:click={() => currentStep--}>Back</Button>
|
||||
<Button submit>Create</Button>
|
||||
{:else}
|
||||
<Button secondary on:click={() => currentStep--}>Back</Button>
|
||||
<Button on:click={() => currentStep++}>Next</Button>
|
||||
<Button submit>Next</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+3
-4
@@ -95,13 +95,12 @@
|
||||
|
||||
<Button
|
||||
text
|
||||
disabled={$doc[attribute.key][$doc[attribute.key].length - 1] === null}
|
||||
on:click={() => {
|
||||
if ($doc[attribute.key][$doc[attribute.key].length - 1] !== null) {
|
||||
doc.addAttribute(attribute.key);
|
||||
}
|
||||
doc.addAttribute(attribute.key);
|
||||
}}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text"> Add Attribute</span>
|
||||
<span class="text"> Add attribute</span>
|
||||
</Button>
|
||||
{:else}
|
||||
<ul class="form-list">
|
||||
|
||||
Reference in New Issue
Block a user