Skip to content

Update user targets modal based on design feedback #848

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 22, 2024
Merged

Update user targets modal based on design feedback #848

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
bfade7c
feat(elements): allow setting size of checkbox to be smaller
stnguyen90 Feb 22, 2024
56b3dab
fix(messaging): design fixes
stnguyen90 Feb 22, 2024
7e9f1bd
fix(messaging): clarify selected/total targets in user targets modal
stnguyen90 Feb 22, 2024
0f1e0fd
fix(messaging): fix user targets modal title and description
stnguyen90 Feb 22, 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
3 changes: 3 additions & 0 deletions src/lib/elements/forms/inputCheckbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
element?: HTMLInputElement | undefined;
indeterminate?: boolean;
wrapperTag?: FormItemTag;
size?: 'small' | 'medium';
}

export let id: string;
Expand All @@ -20,6 +21,7 @@
export let disabled = false;
export let element: HTMLInputElement | undefined = undefined;
export let wrapperTag: FormItemTag = 'li';
export let size: $$Props['size'] = 'medium';
let error: string;

const handleInvalid = (event: Event) => {
Expand All @@ -44,6 +46,7 @@
{disabled}
{required}
{...$$restProps}
class:is-small={size === 'small'}
type="checkbox"
bind:this={element}
bind:checked
Expand Down
6 changes: 5 additions & 1 deletion src/routes/console/project-[project]/messaging/actions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,14 @@
dispatch('addTopics', e.detail);
}} />
<UserTargetsModal
title="Select targets"
{providerType}
bind:show={showUserTargets}
bind:targetsById={$targetsById}
on:update={(e) => {
showUserTargets = false;
dispatch('addTargets', e.detail);
}} />
}}>
<svelte:fragment slot="description"
>Select existing targets to which you want to send this message.</svelte:fragment>
</UserTargetsModal>
16 changes: 15 additions & 1 deletion src/routes/console/project-[project]/messaging/topics/topic-[topic]/subscribers/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,18 @@
{/if}
</Container>

<UserTargetsModal bind:show={showAdd} bind:targetsById={$targetsById} on:update={addTargets} />
<UserTargetsModal
title="Select subscribers"
bind:show={showAdd}
bind:targetsById={$targetsById}
on:update={addTargets}>
<svelte:fragment slot="description">
<p class="text">
Add subscribers to this topic by selecting the targets for directing messages. <a
href="https://appwrite.io/docs/products/messaging/topics"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more about subscribers.</a>
</p>
</svelte:fragment>
</UserTargetsModal>
140 changes: 70 additions & 70 deletions src/routes/console/project-[project]/messaging/userTargetsModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
import { createEventDispatcher } from 'svelte';
import ProviderType from './providerType.svelte';

export let title: string;
export let show: boolean;
export let targetsById: Record<string, Models.Target>;
export let providerType: MessagingProviderType = null;
export let title = 'Select subscribers';

const dispatch = createEventDispatcher();

Expand Down Expand Up @@ -118,82 +118,82 @@
</script>

<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big" headerDivider={false}>
<!-- TODO: Update docs link -->
<p class="text">
Add subscribers to this topic by selecting the targets for directing messages. <a
href="https://appwrite.io/docs"
target="_blank"
rel="noopener noreferrer"
class="link">Learn more about subscribers.</a>
</p>
<slot name="description" />

<InputSearch
autofocus
disabled={totalResults === 0 && !search}
placeholder="Search by name, email, phone or ID"
bind:value={search} />
{#if Object.keys(userResultsById).length > 0}
<Collapsible>
{#each Object.entries(userResultsById) as [userId, user] (userId)}
{@const selectedCount = user.targets.filter(
(target) => selected[target.$id]
).length}
<CollapsibleItem withIndentation>
<svelte:fragment slot="beforetitle">
<InputCheckbox
id={userId}
disabled={user.targets.length > 0 &&
user.targets.every((target) => targetsById[target.$id])}
checked={selectedCount > 0 && selectedCount === user.targets.length}
on:change={(event) => onUserSelection(event, userId)} />
</svelte:fragment>
<svelte:fragment slot="title">
<span class="u-line-height-1-5">
<span class="body-text-2 u-bold" data-private>
{#if user.name}
{user.name}
{:else if user.email}
{user.email}
{:else if user.phone}
{user.phone}
{:else}
{userId}
{/if}
<div class="u-sep-block-end">
<Collapsible>
{#each Object.entries(userResultsById) as [userId, user] (userId)}
{@const selectedCount = user.targets.filter(
(target) => selected[target.$id]
).length}
<CollapsibleItem withIndentation>
<svelte:fragment slot="beforetitle">
<InputCheckbox
id={userId}
size="small"
disabled={user.targets.length > 0 &&
user.targets.every((target) => targetsById[target.$id])}
checked={selectedCount > 0 && selectedCount === user.targets.length}
on:change={(event) => onUserSelection(event, userId)} />
</svelte:fragment>
<svelte:fragment slot="title">
<span class="u-line-height-1-5">
<span
class="body-text-1 u-bold"
style="color:hsl(var(--color-neutral-80))"
data-private>
{#if user.name}
{user.name}
{:else if user.email}
{user.email}
{:else if user.phone}
{user.phone}
{:else}
{userId}
{/if}
</span>
</span>
</span>
</svelte:fragment>
<svelte:fragment slot="subtitle">
({selectedCount} targets)
</svelte:fragment>
<FormList>
{#each user.targets as target}
<div class="u-flex">
<InputCheckbox
id={target.$id}
disabled={!!targetsById[target.$id]}
checked={!!selected[target.$id]}
on:change={(event) => onTargetSelection(event, target)}>
<svelte:fragment slot="description">
<div class="u-inline-flex u-gap-8">
<span class="inline-tag u-normal"
><ProviderType
type={target.providerType}
noIcon /></span>
{#if target.providerType !== MessagingProviderType.Push}
{target.identifier}
{:else}
<!-- TODO: Show device info -->
{target.name}
{/if}
</div>
</svelte:fragment>
</InputCheckbox>
</div>
{/each}
</FormList>
</CollapsibleItem>
{/each}
</Collapsible>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
</svelte:fragment>
<svelte:fragment slot="subtitle">
({selectedCount}/{user.targets.length} targets)
</svelte:fragment>
<FormList>
{#each user.targets as target}
<div class="u-flex">
<InputCheckbox
id={target.$id}
size="small"
disabled={!!targetsById[target.$id]}
checked={!!selected[target.$id]}
on:change={(event) => onTargetSelection(event, target)}>
<svelte:fragment slot="description">
<div class="u-inline-flex u-gap-8">
<span class="inline-tag u-normal u-x-small"
><ProviderType
type={target.providerType}
noIcon /></span>
{#if target.providerType !== MessagingProviderType.Push}
{target.identifier}
{:else}
{target.name}
{/if}
</div>
</svelte:fragment>
</InputCheckbox>
</div>
{/each}
</FormList>
</CollapsibleItem>
{/each}
</Collapsible>
</div>
<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
5 changes: 2 additions & 3 deletions src/routes/console/project-[project]/messaging/wizard/step2.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@

<WizardStep>
<svelte:fragment slot="title">Targets</svelte:fragment>
<!-- TODO: add support for topics -->
<svelte:fragment slot="subtitle">
Select targets to whom this message should be directed.
</svelte:fragment>
Expand Down Expand Up @@ -102,7 +101,7 @@
type="button"
aria-label="delete"
on:click={() => removeTopic(topicId)}>
<span class="icon-x" aria-hidden="true" />
<span class="icon-x u-font-size-20" aria-hidden="true" />
</button>
</div>
</TableCell>
Expand All @@ -125,7 +124,7 @@
type="button"
aria-label="delete"
on:click={() => removeTarget(targetId)}>
<span class="icon-x" aria-hidden="true" />
<span class="icon-x u-font-size-20" aria-hidden="true" />
</button>
</div>
</TableCell>
Expand Down
10 changes: 9 additions & 1 deletion src/routes/console/project-[project]/overview/keys/checkbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
<script lang="ts">
export let indeterminate = false;
export let checked = false;
export let fontSize: $$Props['fontSize'] = 'medium';

interface $$Props extends Partial<HTMLInputElement> {
indeterminate?: boolean;
checked?: boolean;
fontSize?: 'small' | 'medium';
}
</script>

<input type="checkbox" bind:checked {...$$restProps} bind:indeterminate on:change />
<input
class:is-small={fontSize === 'small'}
type="checkbox"
bind:checked
{...$$restProps}
bind:indeterminate
on:change />