Skip to content

Commit 4fc400b

Browse files
stnguyen90stnguyen90
committed
Add provider details route
1 parent 7b9ae16 commit 4fc400b

12 files changed

Lines changed: 785 additions & 1 deletion

File tree

‎src/lib/constants.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ export enum Dependencies {
4242
MIGRATIONS = 'dependency:migrations',
4343
COLLECTIONS = 'dependency:collections',
4444
RUNTIMES = 'dependency:runtimes',
45-
CONSOLE_VARIABLES = 'dependency:console_variables'
45+
CONSOLE_VARIABLES = 'dependency:console_variables',
46+
MESSAGING_PROVIDER = 'dependency:messaging_provider'
4647
}
4748

4849
export const scopes: {

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/+layout.svelte‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<svelte:head>
2+
<title>Provider - Appwrite</title>
3+
</svelte:head>
4+
5+
<slot />

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/+layout.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { LayoutLoad } from './$types';
2+
import Breadcrumbs from './breadcrumbs.svelte';
3+
import Header from './header.svelte';
4+
import { sdk } from '$lib/stores/sdk';
5+
import { Dependencies } from '$lib/constants';
6+
import { error } from '@sveltejs/kit';
7+
8+
export const load: LayoutLoad = async ({ params, depends }) => {
9+
depends(Dependencies.MESSAGING_PROVIDER);
10+
11+
const response = await sdk.forProject.client.call(
12+
'GET',
13+
new URL(sdk.forProject.client.config.endpoint + '/messaging/providers/' + params.provider),
14+
{
15+
'X-Appwrite-Project': sdk.forProject.client.config.project,
16+
'content-type': 'application/json',
17+
'X-Appwrite-Mode': 'admin'
18+
}
19+
);
20+
21+
console.log(response);
22+
23+
try {
24+
return {
25+
header: Header,
26+
breadcrumbs: Breadcrumbs,
27+
provider: response
28+
};
29+
} catch (e) {
30+
throw error(e.code, e.message);
31+
}
32+
};

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script lang="ts">
2+
import { Container } from '$lib/layout';
3+
import DangerZone from './dangerZone.svelte';
4+
import UpdateName from './updateName.svelte';
5+
import UpdateStatus from './updateStatus.svelte';
6+
</script>
7+
8+
<Container>
9+
<UpdateStatus />
10+
<UpdateName />
11+
<DangerZone />
12+
</Container>

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/breadcrumbs.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { Breadcrumbs } from '$lib/layout';
3+
import { organization } from '$lib/stores/organization';
4+
import { project } from '$routes/console/project-[project]/store';
5+
import { provider } from './store';
6+
7+
$: breadcrumbs = [
8+
{
9+
href: `/console/organization-${$organization.$id}`,
10+
title: $organization.name
11+
},
12+
{
13+
href: `/console/project-${$project.$id}`,
14+
title: $project.name
15+
},
16+
{
17+
href: `/console/project-${$project.$id}/messaging`,
18+
title: 'Messaging'
19+
},
20+
{
21+
href: `/console/project-${$project.$id}/messaging/providers/provider-${$provider?.$id}`,
22+
title: $provider?.name
23+
}
24+
];
25+
</script>
26+
27+
<Breadcrumbs {breadcrumbs} />

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/dangerZone.svelte‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script lang="ts" context="module">
2+
import { get } from 'svelte/store';
3+
4+
let showDelete = writable(false);
5+
6+
export const promptDeleteUser = (id: string) => {
7+
showDelete.set(true);
8+
goto(`/console/project-${get(project).$id}/auth/user-${id}`);
9+
};
10+
</script>
11+
12+
<script lang="ts">
13+
import { CardGrid, BoxAvatar, Heading } from '$lib/components';
14+
import { Button } from '$lib/elements/forms';
15+
import { writable } from 'svelte/store';
16+
import { provider } from './store';
17+
import { goto } from '$app/navigation';
18+
import { toLocaleDateTime } from '$lib/helpers/date';
19+
import { project } from '$routes/console/project-[project]/store';
20+
import DeleteProvider from './deleteProvider.svelte';
21+
</script>
22+
23+
<CardGrid danger>
24+
<div>
25+
<Heading tag="h6" size="7">Delete provider</Heading>
26+
</div>
27+
<p>The provider's instance will be permanently deleted. This action is irreversible.</p>
28+
<svelte:fragment slot="aside">
29+
<BoxAvatar>
30+
<svelte:fragment slot="title">
31+
<h6 class="u-bold u-trim-1">{$provider.name}</h6>
32+
</svelte:fragment>
33+
<p>
34+
Last updated: {toLocaleDateTime($provider.$updatedAt)}
35+
</p>
36+
</BoxAvatar>
37+
</svelte:fragment>
38+
39+
<svelte:fragment slot="actions">
40+
<Button secondary on:click={() => ($showDelete = true)} event="delete_messaging_provider"
41+
>Delete</Button>
42+
</svelte:fragment>
43+
</CardGrid>
44+
45+
<DeleteProvider bind:showDelete={$showDelete} />

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<script lang="ts">
2+
import { goto } from '$app/navigation';
3+
import { base } from '$app/paths';
4+
import { page } from '$app/stores';
5+
import { Modal } from '$lib/components';
6+
import { Button } from '$lib/elements/forms';
7+
import { addNotification } from '$lib/stores/notifications';
8+
import { sdk } from '$lib/stores/sdk';
9+
import { provider } from './store';
10+
import { project } from '../../../store';
11+
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
12+
13+
export let showDelete = false;
14+
15+
const deleteProvider = async () => {
16+
try {
17+
await sdk.forProject.client.call(
18+
'DELETE',
19+
new URL(
20+
sdk.forProject.client.config.endpoint + '/messaging/providers/' + $provider.$id
21+
),
22+
{
23+
'X-Appwrite-Project': sdk.forProject.client.config.project,
24+
'content-type': 'application/json',
25+
'X-Appwrite-Mode': 'admin'
26+
}
27+
);
28+
showDelete = false;
29+
addNotification({
30+
type: 'success',
31+
message: `${$provider.name} has been deleted`
32+
});
33+
trackEvent(Submit.MessagingProviderDelete);
34+
await goto(`${base}/console/project-${$page.params.project}/messaging/providers`);
35+
} catch (error) {
36+
addNotification({
37+
type: 'error',
38+
message: error.message
39+
});
40+
trackError(error, Submit.MessagingProviderDelete);
41+
}
42+
};
43+
</script>
44+
45+
<Modal
46+
title="Delete provider"
47+
bind:show={showDelete}
48+
onSubmit={deleteProvider}
49+
icon="exclamation"
50+
state="warning"
51+
headerDivider={false}>
52+
<p data-private>
53+
Are you sure you want to delete <b>{$provider.name}</b> from '{$project.name}'?
54+
</p>
55+
<svelte:fragment slot="footer">
56+
<Button text on:click={() => (showDelete = false)}>Cancel</Button>
57+
<Button secondary submit>Delete</Button>
58+
</svelte:fragment>
59+
</Modal>

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/header.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
import { Id } from '$lib/components';
4+
import { Cover, CoverTitle } from '$lib/layout';
5+
import { provider } from './store';
6+
7+
const projectId = $page.params.project;
8+
</script>
9+
10+
<Cover>
11+
<svelte:fragment slot="header">
12+
<CoverTitle href={`/console/project-${projectId}/messaging/providers`}>
13+
{$provider?.name ? $provider?.name : '-'}
14+
</CoverTitle>
15+
<Id value={$provider?.$id} event="provider">{$provider?.$id}</Id>
16+
</svelte:fragment>
17+
</Cover>

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { derived } from 'svelte/store';
2+
import { page } from '$app/stores';
3+
import type { Provider } from '../../store';
4+
5+
export const provider = derived(
6+
page,
7+
// TODO: Set actual type
8+
($page) => $page.data.provider as Provider
9+
);

‎src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateName.svelte‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script lang="ts">
2+
import { CardGrid, Heading } from '$lib/components';
3+
import { Button, Form, InputText } from '$lib/elements/forms';
4+
import { onMount } from 'svelte';
5+
import { provider } from './store';
6+
7+
let providerName: string = null;
8+
onMount(async () => {
9+
providerName ??= $provider.name;
10+
});
11+
12+
async function updateName() {
13+
// TODO: switch on provider and update name
14+
// try {
15+
// await sdk.forProject.users.updateName($provider.$id, providerName);
16+
// await invalidate(Dependencies.USER);
17+
// addNotification({
18+
// message: 'Name has been updated',
19+
// type: 'success'
20+
// });
21+
// trackEvent(Submit.UserUpdateName);
22+
// } catch (error) {
23+
// addNotification({
24+
// message: error.message,
25+
// type: 'error'
26+
// });
27+
// trackError(error, Submit.UserUpdateName);
28+
// }
29+
}
30+
</script>
31+
32+
<Form onSubmit={updateName}>
33+
<CardGrid>
34+
<Heading tag="h6" size="7">Name</Heading>
35+
36+
<svelte:fragment slot="aside">
37+
<ul data-private>
38+
<InputText
39+
id="name"
40+
label="Name"
41+
placeholder="Enter name"
42+
autocomplete={false}
43+
bind:value={providerName} />
44+
</ul>
45+
</svelte:fragment>
46+
47+
<svelte:fragment slot="actions">
48+
<Button disabled={providerName === $provider.name} submit>Update</Button>
49+
</svelte:fragment>
50+
</CardGrid>
51+
</Form>

0 commit comments

Comments
 (0)