Skip to content

Fix design issues for topics modal #837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 21, 2024
Merged

Fix design issues for topics modal #837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc55a6b
feat(messaging): fix total on topics page
stnguyen90 Feb 21, 2024
4bd21f5
fix(messaging): move topics modal description closer to header
stnguyen90 Feb 21, 2024
ccfe6b9
fix(messaging): reduce space before pagination in topics modal
stnguyen90 Feb 21, 2024
041ec1f
fix(messaging): add dividers between topics in topics modal
stnguyen90 Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/routes/console/project-[project]/messaging/topics/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
]);
4 changes: 4 additions & 0 deletions src/routes/console/project-[project]/messaging/topics/table.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
51 changes: 30 additions & 21 deletions src/routes/console/project-[project]/messaging/topicsModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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.
Expand All @@ -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>
Expand Down