-
Notifications
You must be signed in to change notification settings - Fork 137
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #199 from appwrite/chore-unbundle-document-settings
feat: unbundle document settings
- Loading branch information
Showing
6 changed files
with
320 additions
and
254 deletions.
There are no files selected for viewing
264 changes: 10 additions & 254 deletions
264
...ect-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
31
...project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
66
...project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
Oops, something went wrong.
4cf33b4There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
console – ./
console-git-main-appwrite.vercel.app
svelte-console.vercel.app
console-appwrite.vercel.app
brand-new-console.torsten.appwrite.org