From db71f46c75ca52b0f49de9177ca9830f88c671e2 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 23 Sep 2022 12:25:59 +0200
Subject: [PATCH] feat: execute step

---
 .../functions/selectTeams.svelte              | 86 ++++++++++++++++++
 .../functions/selectUsers.svelte              | 87 +++++++++++++++++++
 .../functions/wizard/step2.svelte             | 66 +++++++++++++-
 3 files changed, 235 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/console/project-[project]/functions/selectTeams.svelte
 create mode 100644 src/routes/console/project-[project]/functions/selectUsers.svelte

diff --git a/src/routes/console/project-[project]/functions/selectTeams.svelte b/src/routes/console/project-[project]/functions/selectTeams.svelte
new file mode 100644
index 000000000..77960eedf
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/selectTeams.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { InputSearch, Button } from '$lib/elements/forms';
+    import { Modal, Avatar } from '$lib/components';
+    import { teamsList } from '../authentication/store';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { createFunction } from './wizard/store';
+
+    export let showTeams = false;
+
+    let search: string;
+    let offset = 0;
+    let limit = 5;
+
+    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 64, 64).toString();
+
+    function handleCheck(id: string) {
+        if ($createFunction.execute.includes(`team:${id}`)) {
+            $createFunction.execute = $createFunction.execute.filter(
+                (item) => item !== `team:${id}`
+            );
+        } else {
+            $createFunction.execute.push(`team:${id}`);
+        }
+        $createFunction = $createFunction;
+    }
+
+    $: teamsList.load(search, limit, offset ?? 0);
+    $: if (search) offset = 0;
+</script>
+
+<Modal bind:show={showTeams} size="big">
+    <svelte:fragment slot="header">Select teams</svelte:fragment>
+    <InputSearch bind:value={search} placeholder="Search" />
+    {#if $teamsList?.total}
+        <div class="table-wrapper">
+            <div class="table is-remove-outer-styles">
+                <ul class="table-thead">
+                    {#each $teamsList.teams as team}
+                        <li class="table-row">
+                            <div class="u-flex u-gap-12 u-cross-center">
+                                <input
+                                    type="checkbox"
+                                    name="team"
+                                    checked={$createFunction.execute.includes(`team:${team.$id}`)}
+                                    id={team.$id}
+                                    on:change={() => {
+                                        handleCheck(team.$id);
+                                    }} />
+                                <label for={team.$id} class="u-flex u-gap-12 u-cross-center">
+                                    <Avatar size={32} src={getAvatar(team.name)} name={team.name} />
+                                    <div>
+                                        <p class="text">
+                                            {team.name ?? '-'}
+                                        </p>
+                                        <span class="text u-small">team:{team.$id}</span>
+                                    </div>
+                                </label>
+                            </div>
+                        </li>
+                    {/each}
+                </ul>
+            </div>
+        </div>
+        <div class="u-flex u-main-space-between">
+            <p class="text u-small">Total results: {$teamsList?.total}</p>
+
+            <div class="u-flex u-gap-12">
+                <Button text on:click={() => (offset = offset - limit)} disabled={offset === 0}>
+                    <span class="icon-cheveron-left" />
+                    Prev
+                </Button>
+                <Button
+                    text
+                    on:click={() => (offset = offset + limit)}
+                    disabled={offset + limit >= $teamsList.total}>
+                    Next
+                    <span class="icon-cheveron-right" />
+                </Button>
+            </div>
+        </div>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showTeams = false)}>Cancel</Button>
+        <Button submit>Add</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/selectUsers.svelte b/src/routes/console/project-[project]/functions/selectUsers.svelte
new file mode 100644
index 000000000..2fce94ec5
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/selectUsers.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+    import { InputSearch, Button } from '$lib/elements/forms';
+    import { Modal, Avatar } from '$lib/components';
+    import { usersList } from '../authentication/store';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { createFunction } from './wizard/store';
+
+    export let showUsers = false;
+
+    let search: string;
+    let offset = 0;
+    let limit = 5;
+
+    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 64, 64).toString();
+
+    function handleCheck(id: string) {
+        if ($createFunction.execute.includes(`user:${id}`)) {
+            $createFunction.execute = $createFunction.execute.filter(
+                (item) => item !== `user:${id}`
+            );
+        } else {
+            $createFunction.execute.push(`user:${id}`);
+        }
+        $createFunction = $createFunction;
+    }
+
+    $: usersList.load(search, limit, offset ?? 0);
+    $: if (search) offset = 0;
+</script>
+
+<Modal bind:show={showUsers} size="big">
+    <svelte:fragment slot="header">Select Users</svelte:fragment>
+    <InputSearch bind:value={search} placeholder="Search" />
+    {#if $usersList?.total}
+        <div class="table-wrapper">
+            <div class="table is-remove-outer-styles">
+                <ul class="table-thead">
+                    {#each $usersList.users as user}
+                        <li class="table-row">
+                            <div class="u-flex u-gap-12 u-cross-center">
+                                <input
+                                    type="checkbox"
+                                    name="user"
+                                    checked={$createFunction.execute.includes(`user:${user.$id}`)}
+                                    id={user.$id}
+                                    on:change={() => {
+                                        handleCheck(user.$id);
+                                    }} />
+                                <label for={user.$id} class="u-flex u-gap-12 u-cross-center">
+                                    <Avatar size={32} src={getAvatar(user.name)} name={user.name} />
+                                    <div>
+                                        <p class="text">
+                                            {user.name ?? user.email ?? user.phone ?? '-'}
+                                        </p>
+                                        <span class="text u-small">user:{user.$id}</span>
+                                    </div>
+                                </label>
+                            </div>
+                        </li>
+                    {/each}
+                </ul>
+            </div>
+        </div>
+
+        <div class="u-flex u-main-space-between">
+            <p class="text u-small">Total results: {$usersList?.total}</p>
+
+            <div class="u-flex u-gap-12">
+                <Button text on:click={() => (offset = offset - limit)} disabled={offset === 0}>
+                    <span class="icon-cheveron-left" />
+                    Prev
+                </Button>
+                <Button
+                    text
+                    on:click={() => (offset = offset + limit)}
+                    disabled={offset + limit >= $usersList.total}>
+                    Next
+                    <span class="icon-cheveron-right" />
+                </Button>
+            </div>
+        </div>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showUsers = false)}>Cancel</Button>
+        <Button submit>Add</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/wizard/step2.svelte b/src/routes/console/project-[project]/functions/wizard/step2.svelte
index 4fc035b21..c31e8cc21 100644
--- a/src/routes/console/project-[project]/functions/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step2.svelte
@@ -2,7 +2,9 @@
     import { WizardStep } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { DropList, DropListItem } from '$lib/components';
-    // import { createFunction } from './store';
+    import { createFunction } from './store';
+    import SelectUsers from '../selectUsers.svelte';
+    import SelectTeams from '../selectTeams.svelte';
 
     let showDropdown = false;
     let showUsers = false;
@@ -20,6 +22,41 @@
 
     ROLE
 
+    <div class="table-with-scroll">
+        <div class="table-wrapper">
+            <div class="table is-remove-outer-styles">
+                <ul class="table-thead">
+                    {#each $createFunction.execute as id}
+                        <li class="table-row">
+                            <div class="table-col" data-title="Name">
+                                <span class="text">blahblahkey</span>
+                            </div>
+                            <div class="table-col" data-title="Name">
+                                <span class="text">{id}</span>
+                            </div>
+                            <div
+                                class="table-col u-overflow-visible"
+                                data-title="options"
+                                style="--p-col-width:40">
+                                <button
+                                    class="button is-text is-only-icon"
+                                    aria-label="delete id"
+                                    on:click={() => {
+                                        $createFunction.execute = $createFunction.execute.filter(
+                                            (item) => item !== id
+                                        );
+                                        $createFunction = $createFunction;
+                                    }}>
+                                    <span class="icon-trash" aria-hidden="true" />
+                                </button>
+                            </div>
+                        </li>
+                    {/each}
+                </ul>
+            </div>
+        </div>
+    </div>
+
     <DropList bind:show={showDropdown} position="bottom" arrow={false}>
         <Button text on:click={() => (showDropdown = !showDropdown)}>
             <span class="icon-plus" aria-hidden="true" />
@@ -27,11 +64,32 @@
         </Button>
 
         <svelte:fragment slot="list">
-            <DropListItem>Any</DropListItem>
-            <DropListItem>All guests</DropListItem>
-            <DropListItem>All users</DropListItem>
+            <DropListItem
+                on:click={() => {
+                    $createFunction.execute.push('role:any');
+                    $createFunction = $createFunction;
+                }}>
+                Any
+            </DropListItem>
+            <DropListItem
+                on:click={() => {
+                    $createFunction.execute.push('role:guest');
+                    $createFunction = $createFunction;
+                }}>
+                All guests
+            </DropListItem>
+            <DropListItem
+                on:click={() => {
+                    $createFunction.execute.push('role:member');
+                    $createFunction = $createFunction;
+                }}>
+                All users
+            </DropListItem>
             <DropListItem on:click={() => (showUsers = true)}>Select users</DropListItem>
             <DropListItem on:click={() => (showTeams = true)}>Select teams</DropListItem>
         </svelte:fragment>
     </DropList>
 </WizardStep>
+
+<SelectUsers {showUsers} />
+<SelectTeams {showTeams} />