mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Add messaging topics route
This commit is contained in:
Steven Nguyen
@@ -0,0 +1,160 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableRowLink,
|
||||
TableCellHead,
|
||||
TableCellText,
|
||||
TableCell,
|
||||
TableCellHeadCheck,
|
||||
TableScroll,
|
||||
TableCellCheck
|
||||
} from '$lib/elements/table';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import {
|
||||
Empty,
|
||||
EmptySearch,
|
||||
SearchQuery,
|
||||
PaginationWithLimit,
|
||||
Heading,
|
||||
Id,
|
||||
ViewSelector
|
||||
} from '$lib/components';
|
||||
import Create from './create.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { toLocaleDateTime } from '$lib/helpers/date';
|
||||
import { Container } from '$lib/layout';
|
||||
import { base } from '$app/paths';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
import type { PageData } from './$types';
|
||||
import { columns, showCreate } from './store';
|
||||
import { View } from '$lib/helpers/load';
|
||||
import Filters from '$lib/components/filters/filters.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
let selected: string[] = [];
|
||||
|
||||
const project = $page.params.project;
|
||||
const topicCreated = async (event: CustomEvent<Models.Team<Record<string, unknown>>>) => {
|
||||
await goto(`${base}/console/project-${project}/messaging/topics/topic-${event.detail.$id}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<div class="u-flex u-flex-vertical">
|
||||
<div class="u-flex u-main-space-between">
|
||||
<Heading tag="h2" size="5">Topics</Heading>
|
||||
<div class="is-only-mobile">
|
||||
<Button on:click={() => ($showCreate = true)} event="create_topic">
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text">Create topic</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO: fix width of search input in mobile -->
|
||||
<SearchQuery search={data.search} placeholder="Search by name or ID">
|
||||
<div class="u-flex u-gap-16 is-not-mobile">
|
||||
<Filters query={data.query} {columns} />
|
||||
<ViewSelector
|
||||
view={View.Table}
|
||||
{columns}
|
||||
hideView
|
||||
allowNoColumns
|
||||
showColsTextMobile />
|
||||
<Button on:click={() => ($showCreate = true)} event="create_topic">
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text">Create topic</span>
|
||||
</Button>
|
||||
</div>
|
||||
</SearchQuery>
|
||||
<div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
|
||||
<div class="u-flex-basis-50-percent">
|
||||
<!-- TODO: fix width -->
|
||||
<ViewSelector
|
||||
view={View.Table}
|
||||
{columns}
|
||||
hideView
|
||||
allowNoColumns
|
||||
showColsTextMobile />
|
||||
</div>
|
||||
<div class="u-flex-basis-50-percent">
|
||||
<!-- TODO: fix width -->
|
||||
<Filters query={data.query} {columns} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if data.topics.total}
|
||||
<TableScroll>
|
||||
<TableHeader>
|
||||
<TableCellHeadCheck
|
||||
bind:selected
|
||||
pageItemsIds={data.topics.topics.map((d) => d.$id)} />
|
||||
{#each $columns as column}
|
||||
{#if column.show}
|
||||
<TableCellHead width={column.width}>{column.title}</TableCellHead>
|
||||
{/if}
|
||||
{/each}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{#each data.topics.topics as topic (topic.$id)}
|
||||
<TableRowLink
|
||||
href={`${base}/console/project-${project}/messaging/topics/topic-${topic.$id}`}>
|
||||
<TableCellCheck bind:selectedIds={selected} id={topic.$id} />
|
||||
|
||||
{#each $columns as column (column.id)}
|
||||
{#if column.show}
|
||||
{#if column.id === '$id'}
|
||||
{#key $columns}
|
||||
<TableCell title={column.title} width={column.width}>
|
||||
<Id value={topic.$id}>{topic.$id}</Id>
|
||||
</TableCell>
|
||||
{/key}
|
||||
{:else if column.type === 'datetime'}
|
||||
<TableCellText title={column.title} width={column.width}>
|
||||
{#if !topic[column.id]}
|
||||
-
|
||||
{:else}
|
||||
{toLocaleDateTime(topic[column.id])}
|
||||
{/if}
|
||||
</TableCellText>
|
||||
{:else}
|
||||
<TableCellText title={column.title} width={column.width}>
|
||||
{topic[column.id]}
|
||||
</TableCellText>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</TableRowLink>
|
||||
{/each}
|
||||
</TableBody>
|
||||
</TableScroll>
|
||||
|
||||
<PaginationWithLimit
|
||||
name="Topics"
|
||||
limit={data.limit}
|
||||
offset={data.offset}
|
||||
total={data.topics.total} />
|
||||
<!-- TODO: remove data.search != 'empty' when the API is ready with data -->
|
||||
{:else if data.search && data.search != 'empty'}
|
||||
<EmptySearch>
|
||||
<div class="u-text-center">
|
||||
<b>Sorry, we couldn't find '{data.search}'</b>
|
||||
<p>There are no topics that match your search.</p>
|
||||
</div>
|
||||
<Button secondary href={`/console/project-${$page.params.project}/messaging/topics`}>
|
||||
Clear Search
|
||||
</Button>
|
||||
</EmptySearch>
|
||||
{:else}
|
||||
<!-- TODO: update docs link -->
|
||||
<Empty
|
||||
single
|
||||
on:click={() => ($showCreate = true)}
|
||||
href="https://appwrite.io/docs/references/cloud/client-web/teams"
|
||||
target="topic" />
|
||||
{/if}
|
||||
</Container>
|
||||
|
||||
<!-- TODO: handle create -->
|
||||
<Create bind:showCreate={$showCreate} on:created={topicCreated} />
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Query } from '@appwrite.io/console';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
|
||||
import { PAGE_LIMIT } from '$lib/constants';
|
||||
import { queryParamToMap, queries } from '$lib/components/filters/store';
|
||||
|
||||
// TODO: remove when sdk has the model
|
||||
export type Topic = {
|
||||
$id: string;
|
||||
$createdAt: string;
|
||||
$updatedAt: string;
|
||||
providerId: string;
|
||||
name: string;
|
||||
total: number;
|
||||
description: string;
|
||||
};
|
||||
|
||||
export const load = async ({ url, route }) => {
|
||||
const page = getPage(url);
|
||||
const search = getSearch(url);
|
||||
const limit = getLimit(url, route, PAGE_LIMIT);
|
||||
const offset = pageToOffset(page, limit);
|
||||
const query = getQuery(url);
|
||||
|
||||
const parsedQueries = queryParamToMap(query || '[]');
|
||||
queries.set(parsedQueries);
|
||||
|
||||
const payload = {
|
||||
queries: [
|
||||
Query.limit(limit),
|
||||
Query.offset(offset),
|
||||
Query.orderDesc(''),
|
||||
...parsedQueries.values()
|
||||
]
|
||||
};
|
||||
|
||||
if (search) {
|
||||
payload['search'] = search;
|
||||
}
|
||||
|
||||
// TODO: remove when the API is ready with data
|
||||
// This allows us to mock w/ data and when search returns 0 results
|
||||
const topics: { topics: Topic[]; total: number } = await sdk.forProject.client.call(
|
||||
'GET',
|
||||
new URL(sdk.forProject.client.config.endpoint + '/messaging/topics'),
|
||||
{
|
||||
'X-Appwrite-Project': sdk.forProject.client.config.project,
|
||||
'content-type': 'application/json',
|
||||
'X-Appwrite-Mode': 'admin'
|
||||
},
|
||||
payload
|
||||
);
|
||||
|
||||
return {
|
||||
offset,
|
||||
limit,
|
||||
search,
|
||||
query,
|
||||
page,
|
||||
topics
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
<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';
|
||||
|
||||
export let showCreate = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let name: string, id: string, error: string;
|
||||
let showCustomId = false;
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
$: if (!showCreate) {
|
||||
showCustomId = false;
|
||||
error = null;
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { Column } from '$lib/helpers/types';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export let showCreate = writable(false);
|
||||
|
||||
export const columns = writable<Column[]>([
|
||||
{ id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
|
||||
{ id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
|
||||
{ id: 'total', title: 'Subscribers', type: 'integer', show: true, width: 140 },
|
||||
{ id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
|
||||
]);
|
||||
Reference in New Issue
Block a user