Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: unbundle document settings #199

Merged
merged 3 commits into from
Jan 10, 2023
Merged

feat: unbundle document settings #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4dbfb83
feat: unbundled document settings
ArmanNik Nov 25, 2022
b0c3378
Merge branch 'main' of github.com:appwrite/appwrite-console-poc into …
ArmanNik Nov 25, 2022
7f315c1
fix: add missing class
ArmanNik Nov 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
264 changes: 10 additions & 254 deletions ...ect-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,263 +1,19 @@
<script lang="ts">
import { CardGrid, Box, Heading } from '$lib/components';
import { Container } from '$lib/layout';
import { Button, InputText, InputSwitch, Helper } from '$lib/elements/forms';
import { Permissions } from '$lib/components/permissions';
import { collection } from '../store';
import { toLocaleDateTime } from '$lib/helpers/date';
import { sdkForProject } from '$lib/stores/sdk';
import { addNotification } from '$lib/stores/notifications';
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { symmetricDifference } from '$lib/helpers/array';
import Delete from './deleteCollection.svelte';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import FormList from '$lib/elements/forms/formList.svelte';
import { trackEvent } from '$lib/actions/analytics';
const databaseId = $page.params.database;
let showDelete = false;
let showError: false | 'name' | 'size' = false,
errorMessage = 'Something went wrong',
errorType: 'error' | 'warning' | 'success' = 'error';
let enabled: boolean = null,
collectionName: string = null,
collectionDocumentSecurity: boolean = null,
collectionPermissions: string[] = null,
arePermsDisabled = true;
onMount(() => {
enabled ??= $collection.enabled;
collectionName ??= $collection.name;
collectionPermissions ??= $collection.$permissions;
collectionDocumentSecurity ??= $collection.documentSecurity;
});
$: if (
collectionPermissions &&
symmetricDifference(collectionPermissions, $collection.$permissions).length
) {
arePermsDisabled = false;
} else arePermsDisabled = true;
function addError(location: typeof showError, message: string, type: typeof errorType) {
showError = location;
errorMessage = message;
errorType = type;
}
async function toggleCollection() {
try {
await sdkForProject.databases.updateCollection(
databaseId,
$collection.$id,
$collection.name,
$collection.$permissions,
$collection.documentSecurity,
enabled
);
invalidate(Dependencies.COLLECTION);
addNotification({
message: `${$collection.name} has been updated`,
type: 'success'
});
trackEvent('submit_collection_update_enabled');
} catch (error) {
addNotification({
message: error.message,
type: 'error'
});
}
}
async function updateName() {
try {
await sdkForProject.databases.updateCollection(
databaseId,
$collection.$id,
collectionName,
$collection.$permissions,
$collection.documentSecurity,
$collection.enabled
);
invalidate(Dependencies.COLLECTION);
showError = false;
addNotification({
message: 'Name has been updated',
type: 'success'
});
trackEvent('submit_collection_update_name');
} catch (error) {
addError('name', error.message, 'error');
}
}
async function updatePermissions() {
try {
await sdkForProject.databases.updateCollection(
databaseId,
$collection.$id,
$collection.name,
collectionPermissions,
$collection.documentSecurity,
$collection.enabled
);
invalidate(Dependencies.COLLECTION);
arePermsDisabled = true;
addNotification({
message: 'Permissions have been updated',
type: 'success'
});
trackEvent('submit_collection_update_permissions');
} catch (error) {
addNotification({
message: error.message,
type: 'error'
});
}
}
async function updateSecurity() {
try {
await sdkForProject.databases.updateCollection(
databaseId,
$collection.$id,
$collection.name,
$collection.$permissions,
collectionDocumentSecurity,
$collection.enabled
);
invalidate(Dependencies.COLLECTION);
arePermsDisabled = true;
addNotification({
message: 'Security has been updated',
type: 'success'
});
trackEvent('submit_collection_update_security');
} catch (error) {
addNotification({
message: error.message,
type: 'error'
});
}
}
import DangerZone from './dangerZone.svelte';
import UpdateName from './updateName.svelte';
import UpdatePermissions from './updatePermissions.svelte';
import UpdateSecurity from './updateSecurity.svelte';
import UpdateStatus from './updateStatus.svelte';
</script>

<Container>
{#if $collection}
<CardGrid>
<Heading tag="h2" size="7">{$collection.name}</Heading>

<svelte:fragment slot="aside">
<ul>
<InputSwitch
id="toggle"
label={enabled ? 'Enabled' : 'Disabled'}
bind:value={enabled} />
</ul>
<div>
<p>Created: {toLocaleDateTime($collection.$createdAt)}</p>
<p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
</div>
</svelte:fragment>

<svelte:fragment slot="actions">
<Button disabled={enabled === $collection.enabled} on:click={toggleCollection}>
Update
</Button>
</svelte:fragment>
</CardGrid>

<CardGrid>
<Heading tag="h6" size="7">Update Name</Heading>

<svelte:fragment slot="aside">
<ul>
<InputText
id="name"
label="Name"
placeholder="Enter name"
autocomplete={false}
bind:value={collectionName} />
{#if showError === 'name'}
<Helper type={errorType}>{errorMessage}</Helper>
{/if}
</ul>
</svelte:fragment>

<svelte:fragment slot="actions">
<Button
disabled={collectionName === $collection.name || !collectionName}
on:click={updateName}>Update</Button>
</svelte:fragment>
</CardGrid>

<CardGrid>
<Heading tag="h6" size="7">Update Permissions</Heading>
<p class="text">
Choose who can access your collection and documents. For more information, check out
the <a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</p>
<svelte:fragment slot="aside">
{#if collectionPermissions}
<Permissions bind:permissions={collectionPermissions} withCreate />
{/if}
</svelte:fragment>
<svelte:fragment slot="actions">
<Button disabled={arePermsDisabled} on:click={updatePermissions}>Update</Button>
</svelte:fragment>
</CardGrid>

<CardGrid>
<Heading tag="h6" size="7">Update Document Security</Heading>
<svelte:fragment slot="aside">
<FormList>
<InputSwitch
bind:value={collectionDocumentSecurity}
id="security"
label="Document Security" />
</FormList>
<p class="text">
When document security is enabled, users will be able to access documents for
which they have been granted <b>either Document or Collection permissions</b>.
</p>
<p class="text">
If document security is disabled, users can access documents <b
>only if they have Collection permissions</b
>. Document permissions will be ignored.
</p>
</svelte:fragment>
<svelte:fragment slot="actions">
<Button
disabled={collectionDocumentSecurity === $collection.documentSecurity}
on:click={updateSecurity}>Update</Button>
</svelte:fragment>
</CardGrid>

<CardGrid danger>
<Heading tag="h6" size="7">Delete Collection</Heading>
<p>
The collection will be permanently deleted, including all the documents within it.
This action is irreversible.
</p>
<svelte:fragment slot="aside">
<Box>
<svelte:fragment slot="title">
<h6 class="u-bold u-trim-1">{$collection.name}</h6>
</svelte:fragment>
<p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
</Box>
</svelte:fragment>

<svelte:fragment slot="actions">
<Button secondary on:click={() => (showDelete = true)}>Delete</Button>
</svelte:fragment>
</CardGrid>
<UpdateStatus />
<UpdateName />
<UpdatePermissions />
<UpdateSecurity />
<DangerZone />
{/if}
</Container>

<Delete bind:showDelete />
31 changes: 31 additions & 0 deletions ...project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script lang="ts">
import { Box, CardGrid, Heading } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { toLocaleDateTime } from '$lib/helpers/date';
import { collection } from '../store';
import Delete from './deleteCollection.svelte';
let showDelete = false;
</script>

<CardGrid danger>
<Heading tag="h6" size="7">Delete Collection</Heading>
<p>
The collection will be permanently deleted, including all the documents within it. This
action is irreversible.
</p>
<svelte:fragment slot="aside">
<Box>
<svelte:fragment slot="title">
<h6 class="u-bold u-trim-1">{$collection.name}</h6>
</svelte:fragment>
<p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
</Box>
</svelte:fragment>

<svelte:fragment slot="actions">
<Button secondary on:click={() => (showDelete = true)}>Delete</Button>
</svelte:fragment>
</CardGrid>

<Delete bind:showDelete />
66 changes: 66 additions & 0 deletions ...project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<script lang="ts">
import { invalidate } from '$app/navigation';
import { page } from '$app/stores';
import { trackEvent } from '$lib/actions/analytics';
import { CardGrid, Heading } from '$lib/components';
import { Dependencies } from '$lib/constants';
import { Button, Form, InputText } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
import { sdkForProject } from '$lib/stores/sdk';
import { onMount } from 'svelte';
import { collection } from '../store';
const databaseId = $page.params.database;
let collectionName: string = null;
onMount(() => {
collectionName ??= $collection.name;
});
async function updateName() {
try {
await sdkForProject.databases.updateCollection(
databaseId,
$collection.$id,
collectionName,
$collection.$permissions,
$collection.documentSecurity,
$collection.enabled
);
invalidate(Dependencies.COLLECTION);
addNotification({
message: 'Name has been updated',
type: 'success'
});
trackEvent('submit_collection_update_name');
} catch (error) {
addNotification({
message: error.message,
type: 'error'
});
}
}
</script>

<Form on:submit={updateName}>
<CardGrid>
<Heading tag="h6" size="7">Update Name</Heading>

<svelte:fragment slot="aside">
<ul>
<InputText
id="name"
label="Name"
placeholder="Enter name"
autocomplete={false}
bind:value={collectionName} />
</ul>
</svelte:fragment>

<svelte:fragment slot="actions">
<Button disabled={collectionName === $collection.name || !collectionName} submit
>Update</Button>
</svelte:fragment>
</CardGrid>
</Form>
Loading