Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #837 from appwrite/feat-messaging-topics-modal

Browse Source 
Fix design issues for topics modal
This commit is contained in:
Torsten Dittmann
2024-02-21 10:36:24 +01:00
committed by GitHub
parent 44edd461c6 041ec1fae1
commit 83c35aab2e
3 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/console/project-[project]/messaging/topics/store.ts
+4 -1
View File
@@ -6,6 +6,9 @@ export const 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: 'emailTotal', title: 'Email Subscribers', type: 'integer', show: false, width: 140 },
{ id: 'smsTotal', title: 'SMS Subscribers', type: 'integer', show: false, width: 140 },
{ id: 'pushTotal', title: 'Push Subscribers', type: 'integer', show: false, width: 140 },
{ id: 'total', title: 'Subscribers', type: 'integer', show: true, filter: false, width: 140 },
{ id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
]);
src/routes/console/project-[project]/messaging/topics/table.svelte
+4
View File
@@ -90,6 +90,10 @@
{toLocaleDateTime(topic[column.id])}
{/if}
</TableCellText>
{:else if column.id === 'total'}
<TableCellText title={column.title} width={column.width}>
{topic.emailTotal + topic.smsTotal + topic.pushTotal}
</TableCellText>
{:else}
<TableCellText title={column.title} width={column.width}>
{topic[column.id]}
src/routes/console/project-[project]/messaging/topicsModal.svelte
+30 -21
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { EmptySearch, Modal, PaginationInline } from '$lib/components';
import { Button, FormList, InputCheckbox, InputSearch } from '$lib/elements/forms';
import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
import { sdk } from '$lib/stores/sdk';
import { Query, type Models } from '@appwrite.io/console';
import { createEventDispatcher } from 'svelte';
@@ -79,7 +80,7 @@
}
</script>
<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big">
<Modal {title} bind:show onSubmit={submit} on:close={reset} headerDivider={false} size="big">
<p class="text">
Select existing topics you want to send this message to its subscribers. The message will be
sent only to {$providerType} targets.
@@ -91,27 +92,35 @@
bind:value={search} />
{#if Object.keys(topicResultsById).length > 0}
<FormList>
{#each Object.entries(topicResultsById) as [topicId, topic]}
<InputCheckbox
id={topicId}
disabled={!!topicsById[topicId]}
checked={!!selected[topicId]}
on:change={(event) => onTopicSelection(event, topic)}>
<svelte:fragment slot="description">
<span class="title">
<span class="u-line-height-1-5">
<span class="body-text-2 u-bold" data-private>
{topic.name}
</span>
<span class="collapsible-button-optional">
({getTotal(topic)} subscribers)
</span>
</span></span>
</svelte:fragment>
</InputCheckbox>
{/each}
<Table noMargin noStyles>
<TableBody>
{#each Object.entries(topicResultsById) as [topicId, topic]}
<TableRow>
<TableCell>
<InputCheckbox
id={topicId}
disabled={!!topicsById[topicId]}
checked={!!selected[topicId]}
on:change={(event) => onTopicSelection(event, topic)}>
<svelte:fragment slot="description">
<span class="title">
<span class="u-line-height-1-5">
<span class="body-text-2 u-bold" data-private>
{topic.name}
</span>
<span class="collapsible-button-optional">
({getTotal(topic)} subscribers)
</span>
</span></span>
</svelte:fragment>
</InputCheckbox>
</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
</FormList>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<div class="u-flex u-main-space-between">
<p class="text">Total results: {totalResults}</p>
<PaginationInline limit={5} bind:offset sum={totalResults} hidePages />
</div>