From ff2ae0aeab29569d9fa9c969d98e725f48d94138 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 1 Jun 2023 17:59:50 -0700
Subject: [PATCH] Add user labels to user list and detail pages

---
 src/lib/actions/analytics.ts                  |  1 +
 .../project-[project]/auth/+page.svelte       | 17 ++++
 .../auth/user-[user]/+page.svelte             |  2 +
 .../auth/user-[user]/updateLabels.svelte      | 98 +++++++++++++++++++
 4 files changed, 118 insertions(+)
 create mode 100644 src/routes/console/project-[project]/auth/user-[user]/updateLabels.svelte

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 84c178cc46..0fd6ea1fa9 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -118,6 +118,7 @@ export enum Submit {
     UserCreate = 'submit_user_create',
     UserDelete = 'submit_user_delete',
     UserUpdateEmail = 'submit_user_update_email',
+    UserUpdateLabels = 'submit_user_update_labels',
     UserUpdateName = 'submit_user_update_name',
     UserUpdatePassword = 'submit_user_update_password',
     UserUpdatePhone = 'submit_user_update_phone',
diff --git a/src/routes/console/project-[project]/auth/+page.svelte b/src/routes/console/project-[project]/auth/+page.svelte
index 0063f7ea1f..b5317a73a1 100644
--- a/src/routes/console/project-[project]/auth/+page.svelte
+++ b/src/routes/console/project-[project]/auth/+page.svelte
@@ -26,6 +26,7 @@
     import Create from './createUser.svelte';
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
+    import { tooltip } from '$lib/actions/tooltip';
 
     export let data: PageData;
 
@@ -49,6 +50,7 @@
                 <TableCellHead onlyDesktop>Identifiers</TableCellHead>
                 <TableCellHead onlyDesktop width={130}>Status</TableCellHead>
                 <TableCellHead onlyDesktop width={100}>ID</TableCellHead>
+                <TableCellHead onlyDesktop width={100}>Labels</TableCellHead>
                 <TableCellHead onlyDesktop>Joined</TableCellHead>
             </TableHeader>
             <TableBody>
@@ -102,6 +104,21 @@
                                 </Pill>
                             </Copy>
                         </TableCell>
+                        <TableCell onlyDesktop title="Labels">
+                            {#each user.labels.slice(0, 2) as label, i}
+                                {#if i == 0}
+                                    <span
+                                        use:tooltip={{
+                                            disabled: user.labels.length < 2,
+                                            content: user.labels.join(', ')
+                                        }}>
+                                        <Pill>{label}</Pill>
+                                    </span>
+                                {:else}
+                                    <Pill>+{user.labels.length - 1}</Pill>
+                                {/if}
+                            {/each}
+                        </TableCell>
                         <TableCellText onlyDesktop title="Joined">
                             {toLocaleDateTime(user.registration)}
                         </TableCellText>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/+page.svelte b/src/routes/console/project-[project]/auth/user-[user]/+page.svelte
index b48becb71b..04ef2f14a2 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/+page.svelte
@@ -2,6 +2,7 @@
     import { Container } from '$lib/layout';
     import DangerZone from './dangerZone.svelte';
     import UpdateEmail from './updateEmail.svelte';
+    import UpdateLabels from './updateLabels.svelte';
     import UpdateName from './updateName.svelte';
     import UpdatePassword from './updatePassword.svelte';
     import UpdatePhone from './updatePhone.svelte';
@@ -15,6 +16,7 @@
     <UpdateEmail />
     <UpdatePhone />
     <UpdatePassword />
+    <UpdateLabels />
     <UpdatePrefs />
     <DangerZone />
 </Container>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/updateLabels.svelte b/src/routes/console/project-[project]/auth/user-[user]/updateLabels.svelte
new file mode 100644
index 0000000000..c152633cb6
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/user-[user]/updateLabels.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    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 { 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', 'vip', 'subscriber'];
+    let labels = [...$user.labels];
+    let error = '';
+    $: isDisabled = !!error || JSON.stringify(labels) == JSON.stringify($user.labels);
+
+    async function updateLabels() {
+        try {
+            await sdk.forProject.users.updateLabels($user.$id, 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);
+        }
+    }
+
+    $: 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">User labels</Heading>
+        <p class="text">
+            Categorize and manage your users based on specific criteria by assigning them
+            customizable labels. Roles will be assigned to users based on the assigned labels.
+        </p>
+        <svelte:fragment slot="aside">
+            <ul class="common-section">
+                <InputTags
+                    id="user-labels"
+                    label="User labels"
+                    placeholder="Select or tyype user labels"
+                    bind:tags={labels} />
+                <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>
+                {#if error}
+                    <li>
+                        <Helper type="warning">{error}</Helper>
+                    </li>
+                {/if}
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={isDisabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>