-
Notifications
You must be signed in to change notification settings - Fork 158
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
52fb6b0
commit 4de6350
Showing
11 changed files
with
277 additions
and
77 deletions.
There are no files selected for viewing
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
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
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
120 changes: 58 additions & 62 deletions
120
src/routes/console/project-[project]/messaging/providers/create.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,68 +1,64 @@ | ||
| <script lang="ts"> | ||
| import { Submit, trackEvent, trackError } from '$lib/actions/analytics'; | ||
| import { Modal, CustomId } from '$lib/components'; | ||
| import { Pill } from '$lib/elements'; | ||
| import { InputText, Button, FormList } from '$lib/elements/forms'; | ||
| import { addNotification } from '$lib/stores/notifications'; | ||
| import { sdk } from '$lib/stores/sdk'; | ||
| import { ID } from '@appwrite.io/console'; | ||
| import { createEventDispatcher } from 'svelte'; | ||
| import { onDestroy } from 'svelte'; | ||
| import { Wizard } from '$lib/layout'; | ||
| import type { WizardStepsType } from '$lib/layout/wizard.svelte'; | ||
| import Step1 from './wizard/step1.svelte'; | ||
| import Step2 from './wizard/step2.svelte'; | ||
| import Step3 from './wizard/step3.svelte'; | ||
| import Step4 from './wizard/step4.svelte'; | ||
| export let showCreate = false; | ||
| const dispatch = createEventDispatcher(); | ||
| let name: string, id: string, error: string; | ||
| let showCustomId = false; | ||
| async function create() { | ||
| // try { | ||
| // await sdk.forProject.databases.createDocument( | ||
| // databaseId, | ||
| // collectionId, | ||
| // $createDocument.id ?? ID.unique(), | ||
| // $createDocument.document, | ||
| // $createDocument.permissions | ||
| // ); | ||
| // await invalidate(Dependencies.DOCUMENTS); | ||
| // addNotification({ | ||
| // message: 'Document has been created', | ||
| // type: 'success' | ||
| // }); | ||
| // trackEvent(Submit.DocumentCreate, { | ||
| // customId: !!$createDocument.id | ||
| // }); | ||
| // createDocument.reset(); | ||
| // wizard.hide(); | ||
| // } catch (error) { | ||
| // addNotification({ | ||
| // message: error.message, | ||
| // type: 'error' | ||
| // }); | ||
| // trackError(error, Submit.DocumentCreate); | ||
| // } | ||
| } | ||
| const create = async () => { | ||
| try { | ||
| const team = await sdk.forProject.teams.create(id ?? ID.unique(), name); | ||
| name = ''; | ||
| showCreate = false; | ||
| showCustomId = false; | ||
| addNotification({ | ||
| type: 'success', | ||
| message: `${team.name} has been created` | ||
| }); | ||
| trackEvent(Submit.TeamCreate, { | ||
| customId: !!id | ||
| }); | ||
| dispatch('created', team); | ||
| } catch (e) { | ||
| error = e.message; | ||
| trackError(e, Submit.TeamCreate); | ||
| } | ||
| }; | ||
| onDestroy(() => { | ||
| console.log('destroy'); | ||
| }); | ||
| $: if (!showCreate) { | ||
| showCustomId = false; | ||
| error = null; | ||
| } | ||
| const stepsComponents: WizardStepsType = new Map(); | ||
| stepsComponents.set(1, { | ||
| label: 'Proivder', | ||
| component: Step1 | ||
| }); | ||
| stepsComponents.set(2, { | ||
| label: 'Initialize', | ||
| component: Step2 | ||
| // optional: true | ||
| }); | ||
| stepsComponents.set(3, { | ||
| label: 'Configure', | ||
| component: Step3 | ||
| // optional: true | ||
| }); | ||
| stepsComponents.set(4, { | ||
| label: 'Finalize', | ||
| component: Step4 | ||
| // optional: true | ||
| }); | ||
| </script> | ||
|
|
||
| <Modal title="Create team" {error} size="big" bind:show={showCreate} onSubmit={create}> | ||
| <FormList> | ||
| <InputText | ||
| id="name" | ||
| label="Name" | ||
| placeholder="Enter name" | ||
| autofocus={true} | ||
| required | ||
| bind:value={name} /> | ||
| {#if !showCustomId} | ||
| <div> | ||
| <Pill button on:click={() => (showCustomId = !showCustomId)} | ||
| ><span class="icon-pencil" aria-hidden="true" /> | ||
| <span class="text"> Team ID </span> | ||
| </Pill> | ||
| </div> | ||
| {:else} | ||
| <CustomId bind:show={showCustomId} name="Team" bind:id /> | ||
| {/if} | ||
| </FormList> | ||
| <svelte:fragment slot="footer"> | ||
| <Button secondary on:click={() => (showCreate = false)}>Cancel</Button> | ||
| <Button submit>Create</Button> | ||
| </svelte:fragment> | ||
| </Modal> | ||
| <Wizard title="Create provider" steps={stepsComponents} on:finish={create} /> |
38 changes: 38 additions & 0 deletions
38
src/routes/console/project-[project]/messaging/providers/createProviderDropdown.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,38 @@ | ||
| <script lang="ts"> | ||
| import { DropList, DropListItem } from '$lib/components'; | ||
| import { Button } from '$lib/elements/forms'; | ||
| import { wizard } from '$lib/stores/wizard'; | ||
| import { providers } from './store'; | ||
| import Create from './create.svelte'; | ||
| import { providerType } from './wizard/store'; | ||
| export let showCreateDropdown = false; | ||
| function openWizard() { | ||
| wizard.start(Create); | ||
| } | ||
| </script> | ||
|
|
||
| <DropList bind:show={showCreateDropdown} scrollable> | ||
| <slot> | ||
| <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_provider"> | ||
| <span class="icon-plus" aria-hidden="true" /> | ||
| <span class="text">Create provider</span> | ||
| </Button> | ||
| </slot> | ||
| <svelte:fragment slot="list"> | ||
| {#each Object.entries(providers) as [type, provider]} | ||
| <DropListItem | ||
| icon={provider.icon} | ||
| on:click={() => { | ||
| console.log(type); | ||
| if (type !== 'email' && type !== 'sms' && type !== 'push') return; | ||
| $providerType = type; | ||
| showCreateDropdown = false; | ||
| openWizard(); | ||
| }}> | ||
| {provider.name} | ||
| </DropListItem> | ||
| {/each} | ||
| </svelte:fragment> | ||
| </DropList> |
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
23 changes: 23 additions & 0 deletions
23
src/routes/console/project-[project]/messaging/providers/wizard/step1.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,23 @@ | ||
| <script lang="ts"> | ||
| import { WizardStep } from '$lib/layout'; | ||
| import { providerType, provider } from './store'; | ||
| import { LabelCard } from '$lib/components'; | ||
| import { providers } from '../store'; | ||
| </script> | ||
|
|
||
| <WizardStep> | ||
| <svelte:fragment slot="title">Provider</svelte:fragment> | ||
| <svelte:fragment slot="subtitle"> | ||
| Select a provider you would like to enable for sending {providers[$providerType].text}. | ||
| </svelte:fragment> | ||
| <div class="grid-box"> | ||
| {#each Object.entries(providers[$providerType].providers) as [value, option]} | ||
| <LabelCard name="provider" {value} bind:group={$provider} imageIcon={option.imageIcon}> | ||
| <svelte:fragment slot="title">{option.title}</svelte:fragment> | ||
| {#if option.description} | ||
| {option.description} | ||
| {/if} | ||
| </LabelCard> | ||
| {/each} | ||
| </div> | ||
| </WizardStep> |
Oops, something went wrong.