Skip to content

Commit 5ec3593

Browse files
stnguyen90stnguyen90
committed
Add messaging overview route
1 parent 9bb5629 commit 5ec3593

12 files changed

Lines changed: 863 additions & 0 deletions

File tree

‎src/lib/commandCenter/commands.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const groups = [
1717
'platforms',
1818
'databases',
1919
'functions',
20+
'messaging',
2021
'storage',
2122
'domains',
2223
'webhooks',

‎src/lib/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,5 @@ export { default as SvgIcon } from './svgIcon.svelte';
6060
export { default as MigrationBox } from './migrationBox.svelte';
6161
export { default as FloatingActionBar } from './floatingActionBar.svelte';
6262
export { default as LoadingDots } from './loadingDots.svelte';
63+
export { default as Provider } from './provider.svelte';
64+
export { default as ProviderType } from './providerType.svelte';

‎src/lib/components/provider.svelte‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<script context="module" lang="ts">
2+
export enum Providers {
3+
Twilio = 'twilio',
4+
Msg91 = 'msg91',
5+
Telesign = 'telesign',
6+
Textmagic = 'textmagic',
7+
Vonage = 'vonage',
8+
Mailgun = 'mailgun',
9+
Sendgrid = 'sendgrid',
10+
FCM = 'fcm',
11+
APNS = 'apns',
12+
MQTT = 'mqtt'
13+
}
14+
</script>
15+
16+
<script lang="ts">
17+
import { base } from '$app/paths';
18+
import { app } from '$lib/stores/app';
19+
20+
export let provider: Providers;
21+
export let name: string = '';
22+
export let noIcon = false;
23+
24+
let icon = '';
25+
let displayName = name || provider.charAt(0).toUpperCase() + provider.slice(1);
26+
27+
switch (provider) {
28+
case Providers.FCM:
29+
icon = 'firebase';
30+
displayName = name || 'FCM';
31+
break;
32+
case Providers.APNS:
33+
icon = 'apple';
34+
displayName = name || 'APNS';
35+
break;
36+
case Providers.MQTT:
37+
icon = 'mqtt';
38+
displayName = name || 'MQTT';
39+
break;
40+
case Providers.Sendgrid:
41+
icon = 'sendgrid';
42+
break;
43+
case Providers.Mailgun:
44+
icon = 'mailgun';
45+
break;
46+
case Providers.Twilio:
47+
icon = 'twilio';
48+
break;
49+
case Providers.Telesign:
50+
icon = 'telesign';
51+
break;
52+
case Providers.Msg91:
53+
icon = 'msg91';
54+
displayName = name || 'MSG91';
55+
break;
56+
case Providers.Textmagic:
57+
icon = 'textmagic';
58+
displayName = name || 'TextMagic';
59+
break;
60+
case Providers.Vonage:
61+
icon = 'vonage';
62+
break;
63+
}
64+
</script>
65+
66+
{#if icon === ''}
67+
Invalid provider
68+
{:else}
69+
<div class="u-inline-flex u-cross-center u-gap-8">
70+
{#if !noIcon}
71+
<div class="avatar is-size-small">
72+
<img
73+
style:--p-text-size="1rem"
74+
src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
75+
alt={displayName} />
76+
</div>
77+
{/if}
78+
<slot>
79+
{displayName}
80+
</slot>
81+
</div>
82+
{/if}

‎src/lib/components/providerType.svelte‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script context="module" lang="ts">
2+
export enum ProviderTypes {
3+
Email = 'email',
4+
Sms = 'sms',
5+
Push = 'push'
6+
}
7+
</script>
8+
9+
<script lang="ts">
10+
export let type: ProviderTypes;
11+
export let noIcon = false;
12+
13+
let icon = '';
14+
let text = '';
15+
16+
switch (type) {
17+
case ProviderTypes.Email:
18+
icon = 'icon-mail';
19+
text = 'Email';
20+
break;
21+
case ProviderTypes.Sms:
22+
icon = 'icon-annotation';
23+
text = 'SMS';
24+
break;
25+
case ProviderTypes.Push:
26+
icon = 'icon-device-mobile';
27+
text = 'Push';
28+
break;
29+
}
30+
</script>
31+
32+
{#if text === ''}
33+
Invalid provider type
34+
{:else}
35+
<div class="u-inline-flex u-cross-center u-gap-8">
36+
{#if !noIcon}
37+
<div class="avatar is-size-small">
38+
<span class={icon} style:--p-text-size="1rem" aria-hidden="true" />
39+
</div>
40+
{/if}
41+
{text}
42+
</div>
43+
{/if}

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<script lang="ts">
2+
import { goto } from '$app/navigation';
3+
import { page } from '$app/stores';
4+
import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
5+
import { project } from '../store';
6+
import { showCreate } from './store';
7+
8+
// TODO: finalize the commands
9+
10+
$: $registerCommands([
11+
{
12+
label: 'Create message',
13+
callback: () => {
14+
if (!$page.url.pathname.endsWith('messaging')) {
15+
goto(`/console/project-${$project.$id}/messaging`);
16+
}
17+
$showCreate = true;
18+
},
19+
keys: $page.url.pathname.endsWith('messaging') ? ['c'] : ['c', 'm'],
20+
icon: 'plus',
21+
group: 'messaging'
22+
},
23+
{
24+
label: 'Go to topics',
25+
callback() {
26+
goto(`/console/project-${$project.$id}/messaging/topics`);
27+
},
28+
keys: ['g', 't'],
29+
disabled:
30+
$page.url.pathname.endsWith('topics') || $page.url.pathname.includes('message-'),
31+
group: 'navigation',
32+
rank: 10
33+
},
34+
{
35+
label: 'Go to providers',
36+
callback() {
37+
goto(`/console/project-${$project.$id}/messaging/providers`);
38+
},
39+
keys: ['g', 'p'],
40+
disabled:
41+
$page.url.pathname.endsWith('topics') || $page.url.pathname.includes('message-'),
42+
group: 'navigation',
43+
rank: 10
44+
}
45+
// {
46+
// label: 'Find messages',
47+
// callback: () => {
48+
// addSubPanel(BucketsPanel);
49+
// },
50+
// group: 'messaging',
51+
// rank: -1
52+
// }
53+
]);
54+
55+
$: $updateCommandGroupRanks({ messaging: 200, navigation: 100 });
56+
</script>
57+
58+
<svelte:head>
59+
<title>Messaging - Appwrite</title>
60+
</svelte:head>
61+
62+
<slot />

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Breadcrumbs from './breadcrumbs.svelte';
2+
import Header from './header.svelte';
3+
import type { LayoutLoad } from './$types';
4+
5+
export const load: LayoutLoad = async () => {
6+
return {
7+
header: Header,
8+
breadcrumbs: Breadcrumbs
9+
};
10+
};

0 commit comments

Comments
 (0)