-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add user labels to user list and detail pages
- Loading branch information
1 parent
7fcf322
commit d6d960f
Showing
4 changed files
with
133 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
src/routes/console/project-[project]/auth/user-[user]/updateLabels.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <script lang="ts"> | ||
| import { onMount } from 'svelte'; | ||
| import { invalidate } from '$app/navigation'; | ||
| import { Submit, trackEvent, trackError } from '$lib/actions/analytics'; | ||
| import { CardGrid, Heading } from '$lib/components'; | ||
| import { Dependencies } from '$lib/constants'; | ||
| import { Button, Form, Helper, InputTags } from '$lib/elements/forms'; | ||
| import { symmetricDifference } from '$lib/helpers/array'; | ||
| import { addNotification } from '$lib/stores/notifications'; | ||
| import { sdk } from '$lib/stores/sdk'; | ||
| import { user } from './store'; | ||
| import { Pill } from '$lib/elements'; | ||
| const alphaNumericRegExp = /^[a-zA-Z0-9]+$/; | ||
| let suggestedLabels = ['admin', 'premium', 'mvp']; | ||
| let labels: string[] = []; | ||
| let error = ''; | ||
| onMount(async () => { | ||
| // TODO: Remove type cast when console SDK is updated | ||
| labels = [...($user as unknown as { labels: string[] }).labels]; | ||
| }); | ||
| async function updateLabels() { | ||
| try { | ||
| // TODO: Use SDK method when console SDK is updated | ||
| // await sdk.forProject.users.updateLabels($user.$id, labels); | ||
| const path = `/users/${$user.$id}/labels`; | ||
| await sdk.forProject.client.call( | ||
| 'PUT', | ||
| new URL(sdk.forConsole.client.config.endpoint + path), | ||
| { | ||
| 'content-type': 'application/json' | ||
| }, | ||
| { | ||
| labels: labels | ||
| } | ||
| ); | ||
| await invalidate(Dependencies.USER); | ||
| isDisabled = true; | ||
| addNotification({ | ||
| message: 'User labels have been updated', | ||
| type: 'success' | ||
| }); | ||
| trackEvent(Submit.UserUpdateLabels); | ||
| } catch (error) { | ||
| addNotification({ | ||
| message: error.message, | ||
| type: 'error' | ||
| }); | ||
| trackError(error, Submit.UserUpdateLabels); | ||
| } | ||
| } | ||
| // TODO: Remove type cast when console SDK is updated | ||
| $: isDisabled = | ||
| !!error || | ||
| !symmetricDifference(labels, ($user as unknown as { labels: string[] }).labels).length; | ||
| $: if (labels) { | ||
| const invalidLabels = []; | ||
| labels.forEach((label) => { | ||
| if (!alphaNumericRegExp.test(label)) { | ||
| invalidLabels.push(label); | ||
| } | ||
| }); | ||
| if (invalidLabels.length) { | ||
| error = `Invalid labels: ${invalidLabels.join(', ')}`; | ||
| } else { | ||
| error = ''; | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <Form onSubmit={updateLabels}> | ||
| <CardGrid> | ||
| <Heading tag="h6" size="7">Labels</Heading> | ||
| <p class="text"> | ||
| Categorize and manage your users based on specific criteria by assigning them | ||
| customizable labels. New label-based roles will be assigned. | ||
| </p> | ||
| <svelte:fragment slot="aside"> | ||
| <ul class="common-section"> | ||
| <InputTags | ||
| id="user-labels" | ||
| label="Labels" | ||
| placeholder="Select or tyype user labels" | ||
| bind:tags={labels} /> | ||
| <li> | ||
| <Helper type={error ? 'warning' : 'neutral'} | ||
| >{error ? error : 'Only alphanumeric characters are allowed'}</Helper> | ||
| </li> | ||
| <li class="u-flex u-gap-12 u-margin-block-start-8"> | ||
| {#each suggestedLabels as suggestedLabel} | ||
| <Pill | ||
| selected={labels.includes(suggestedLabel)} | ||
| button | ||
| on:click={() => { | ||
| if (!labels.includes(suggestedLabel)) { | ||
| labels = [...labels, suggestedLabel]; | ||
| } else { | ||
| labels = labels.filter((e) => e !== suggestedLabel); | ||
| } | ||
| }}> | ||
| <span class="icon-plus" aria-hidden="true" /> | ||
| {suggestedLabel} | ||
| </Pill> | ||
| {/each} | ||
| </li> | ||
| </ul> | ||
| </svelte:fragment> | ||
|
|
||
| <svelte:fragment slot="actions"> | ||
| <Button disabled={isDisabled} submit>Update</Button> | ||
| </svelte:fragment> | ||
| </CardGrid> | ||
| </Form> |