From 47d3a2b393fef916143ac1a4667d026ce4306f3e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 22 Mar 2023 12:23:00 +0100
Subject: [PATCH 1/4] feat: create paginator component

---
 src/lib/components/index.ts         |  1 +
 src/lib/components/paginator.svelte | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/lib/components/paginator.svelte

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 54b2251a5..acffa839f 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,6 +1,7 @@
 export { default as Modal } from './modal.svelte';
 export { default as Pagination } from './pagination.svelte';
 export { default as PaginationInline } from './paginationInline.svelte';
+export { default as Paginator } from './paginator.svelte';
 export { default as Card } from './card.svelte';
 export { default as CardGrid } from './cardGrid.svelte';
 export { default as CardContainer } from './cardContainer.svelte';
diff --git a/src/lib/components/paginator.svelte b/src/lib/components/paginator.svelte
new file mode 100644
index 000000000..a22673377
--- /dev/null
+++ b/src/lib/components/paginator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import PaginationInline from './paginationInline.svelte';
+
+    export let items = [];
+    export let limit = 5;
+
+    let offset = 0;
+
+    $: paginatedItems = items.slice(offset, offset + limit);
+</script>
+
+<div class="container">
+    <slot {paginatedItems} />
+</div>
+
+<div class="u-flex u-margin-block-start-32 u-main-space-between">
+    <p class="text">Total results: {items?.length}</p>
+    <PaginationInline {limit} bind:offset sum={items?.length} hidePages />
+</div>

From 33739017281071ca18e9f95e7c5f0b9bec6c4b5d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 22 Mar 2023 13:16:12 +0100
Subject: [PATCH 2/4] refactor: use new component

---
 src/lib/components/paginator.svelte        |   4 +-
 src/lib/components/permissions/team.svelte |  70 +++++++-------
 src/lib/components/permissions/user.svelte | 104 ++++++++++-----------
 3 files changed, 87 insertions(+), 91 deletions(-)

diff --git a/src/lib/components/paginator.svelte b/src/lib/components/paginator.svelte
index a22673377..b1634d47f 100644
--- a/src/lib/components/paginator.svelte
+++ b/src/lib/components/paginator.svelte
@@ -9,9 +9,7 @@
     $: paginatedItems = items.slice(offset, offset + limit);
 </script>
 
-<div class="container">
-    <slot {paginatedItems} />
-</div>
+<slot {paginatedItems} />
 
 <div class="u-flex u-margin-block-start-32 u-main-space-between">
     <p class="text">Total results: {items?.length}</p>
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 86670c14b..6c638d205 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -3,7 +3,7 @@
     import { createEventDispatcher } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
+    import { AvatarInitials, EmptySearch, Modal, PaginationInline, Paginator } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
 
@@ -74,41 +74,39 @@
         placeholder="Search by name or ID"
         bind:value={search} />
     {#if results?.teams?.length}
-        <div class="table-wrapper">
-            <table class="table is-table-layout-auto is-remove-outer-styles">
-                <tbody class="table-tbody">
-                    {#each results.teams as team (team.$id)}
-                        {@const role = `team:${team.$id}`}
-                        {@const exists = $groups.has(role)}
-                        <tr class="table-row">
-                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
-                                <input
-                                    id={team.$id}
-                                    type="checkbox"
-                                    class="icon-check"
-                                    aria-label="Create"
-                                    checked={exists || selected.has(role)}
-                                    disabled={exists}
-                                    on:change={(event) => onSelection(event, role)} />
-                            </td>
-                            <td class="table-col" data-title="Team">
-                                <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
-                                    <AvatarInitials size={32} name={team.name} />
-                                    <div class="u-line-height-1-5">
-                                        <div class="body-text-2">{team.name}</div>
-                                        <div class="u-x-small">{team.$id}</div>
-                                    </div>
-                                </label>
-                            </td>
-                        </tr>
-                    {/each}
-                </tbody>
-            </table>
-        </div>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {results?.total}</p>
-            <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
-        </div>
+        <Paginator items={results.teams} let:paginatedItems>
+            <div class="table-wrapper">
+                <table class="table is-table-layout-auto is-remove-outer-styles">
+                    <tbody class="table-tbody">
+                        {#each paginatedItems as team (team.$id)}
+                            {@const role = `team:${team.$id}`}
+                            {@const exists = $groups.has(role)}
+                            <tr class="table-row">
+                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                    <input
+                                        id={team.$id}
+                                        type="checkbox"
+                                        class="icon-check"
+                                        aria-label="Create"
+                                        checked={exists || selected.has(role)}
+                                        disabled={exists}
+                                        on:change={(event) => onSelection(event, role)} />
+                                </td>
+                                <td class="table-col" data-title="Team">
+                                    <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
+                                        <AvatarInitials size={32} name={team.name} />
+                                        <div class="u-line-height-1-5">
+                                            <div class="body-text-2">{team.name}</div>
+                                            <div class="u-x-small">{team.$id}</div>
+                                        </div>
+                                    </label>
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        </Paginator>
     {:else if search}
         <EmptySearch hidePages>
             <div class="common-section">
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index c074af4fd..c2668fb56 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
+    import { AvatarInitials, EmptySearch, Modal, PaginationInline, Paginator } from '..';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
@@ -67,67 +67,67 @@
         placeholder="Search by name, email, phone or ID"
         bind:value={search} />
     {#if results?.users?.length}
-        <div class="table-wrapper">
-            <table class="table is-table-layout-auto is-remove-outer-styles">
-                <tbody class="table-tbody">
-                    {#each results.users as user (user.$id)}
-                        {@const role = `user:${user.$id}`}
-                        {@const exists = $groups.has(role)}
-                        <tr class="table-row">
-                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
-                                <input
-                                    id={user.$id}
-                                    type="checkbox"
-                                    class="icon-check"
-                                    aria-label="Create"
-                                    checked={exists || selected.has(role)}
-                                    disabled={exists}
-                                    on:change={(event) => onSelection(event, role)} />
-                            </td>
-                            <td class="table-col" data-title="User">
-                                <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
-                                    {#if user.email || user.phone}
-                                        {#if user.name}
-                                            <AvatarInitials size={32} name={user.name} />
-                                            <div class="u-line-height-1-5">
-                                                <div class="body-text-2">
-                                                    {user.name}
+        <Paginator items={results.users} let:paginatedItems>
+            <div class="table-wrapper">
+                <table class="table is-table-layout-auto is-remove-outer-styles">
+                    <tbody class="table-tbody">
+                        {#each paginatedItems as user (user.$id)}
+                            {@const role = `user:${user.$id}`}
+                            {@const exists = $groups.has(role)}
+                            <tr class="table-row">
+                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                    <input
+                                        id={user.$id}
+                                        type="checkbox"
+                                        class="icon-check"
+                                        aria-label="Create"
+                                        checked={exists || selected.has(role)}
+                                        disabled={exists}
+                                        on:change={(event) => onSelection(event, role)} />
+                                </td>
+                                <td class="table-col" data-title="User">
+                                    <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
+                                        {#if user.email || user.phone}
+                                            {#if user.name}
+                                                <AvatarInitials size={32} name={user.name} />
+                                                <div class="u-line-height-1-5">
+                                                    <div class="body-text-2">
+                                                        {user.name}
+                                                    </div>
+                                                    <div class="u-x-small">{user.$id}</div>
                                                 </div>
-                                                <div class="u-x-small">{user.$id}</div>
-                                            </div>
+                                            {:else}
+                                                <div class="avatar is-size-small ">
+                                                    <span
+                                                        class="icon-minus-sm"
+                                                        aria-hidden="true" />
+                                                </div>
+                                                <div class="u-line-height-1-5">
+                                                    <div class="body-text-2">
+                                                        {user.email ? user.email : user.phone}
+                                                    </div>
+                                                    <div class="u-x-small">{user.$id}</div>
+                                                </div>
+                                            {/if}
                                         {:else}
                                             <div class="avatar is-size-small ">
-                                                <span class="icon-minus-sm" aria-hidden="true" />
+                                                <span class="icon-anonymous" aria-hidden="true" />
                                             </div>
                                             <div class="u-line-height-1-5">
                                                 <div class="body-text-2">
-                                                    {user.email ? user.email : user.phone}
+                                                    {user.name ? user.name : '-'}
                                                 </div>
                                                 <div class="u-x-small">{user.$id}</div>
                                             </div>
                                         {/if}
-                                    {:else}
-                                        <div class="avatar is-size-small ">
-                                            <span class="icon-anonymous" aria-hidden="true" />
-                                        </div>
-                                        <div class="u-line-height-1-5">
-                                            <div class="body-text-2">
-                                                {user.name ? user.name : '-'}
-                                            </div>
-                                            <div class="u-x-small">{user.$id}</div>
-                                        </div>
-                                    {/if}
-                                </label>
-                            </td>
-                        </tr>
-                    {/each}
-                </tbody>
-            </table>
-        </div>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {results?.total}</p>
-            <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
-        </div>
+                                    </label>
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        </Paginator>
     {:else if search}
         <EmptySearch hidePages>
             <div class="common-section">

From fd42323e8c6d1994c3b8f872c2e131b8aa70460c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 22 Mar 2023 13:35:46 +0100
Subject: [PATCH 3/4] fix: revert some changes

---
 src/lib/components/paginator.svelte        |   6 +-
 src/lib/components/permissions/team.svelte |  70 +++++++-------
 src/lib/components/permissions/user.svelte | 104 ++++++++++-----------
 3 files changed, 91 insertions(+), 89 deletions(-)

diff --git a/src/lib/components/paginator.svelte b/src/lib/components/paginator.svelte
index b1634d47f..61f58325b 100644
--- a/src/lib/components/paginator.svelte
+++ b/src/lib/components/paginator.svelte
@@ -3,7 +3,7 @@
 
     export let items = [];
     export let limit = 5;
-
+    let total = items?.length;
     let offset = 0;
 
     $: paginatedItems = items.slice(offset, offset + limit);
@@ -12,6 +12,6 @@
 <slot {paginatedItems} />
 
 <div class="u-flex u-margin-block-start-32 u-main-space-between">
-    <p class="text">Total results: {items?.length}</p>
-    <PaginationInline {limit} bind:offset sum={items?.length} hidePages />
+    <p class="text">Total results: {total}</p>
+    <PaginationInline {limit} bind:offset sum={total} hidePages />
 </div>
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 6c638d205..86670c14b 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -3,7 +3,7 @@
     import { createEventDispatcher } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { AvatarInitials, EmptySearch, Modal, PaginationInline, Paginator } from '..';
+    import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
 
@@ -74,39 +74,41 @@
         placeholder="Search by name or ID"
         bind:value={search} />
     {#if results?.teams?.length}
-        <Paginator items={results.teams} let:paginatedItems>
-            <div class="table-wrapper">
-                <table class="table is-table-layout-auto is-remove-outer-styles">
-                    <tbody class="table-tbody">
-                        {#each paginatedItems as team (team.$id)}
-                            {@const role = `team:${team.$id}`}
-                            {@const exists = $groups.has(role)}
-                            <tr class="table-row">
-                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
-                                    <input
-                                        id={team.$id}
-                                        type="checkbox"
-                                        class="icon-check"
-                                        aria-label="Create"
-                                        checked={exists || selected.has(role)}
-                                        disabled={exists}
-                                        on:change={(event) => onSelection(event, role)} />
-                                </td>
-                                <td class="table-col" data-title="Team">
-                                    <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
-                                        <AvatarInitials size={32} name={team.name} />
-                                        <div class="u-line-height-1-5">
-                                            <div class="body-text-2">{team.name}</div>
-                                            <div class="u-x-small">{team.$id}</div>
-                                        </div>
-                                    </label>
-                                </td>
-                            </tr>
-                        {/each}
-                    </tbody>
-                </table>
-            </div>
-        </Paginator>
+        <div class="table-wrapper">
+            <table class="table is-table-layout-auto is-remove-outer-styles">
+                <tbody class="table-tbody">
+                    {#each results.teams as team (team.$id)}
+                        {@const role = `team:${team.$id}`}
+                        {@const exists = $groups.has(role)}
+                        <tr class="table-row">
+                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                <input
+                                    id={team.$id}
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={exists || selected.has(role)}
+                                    disabled={exists}
+                                    on:change={(event) => onSelection(event, role)} />
+                            </td>
+                            <td class="table-col" data-title="Team">
+                                <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
+                                    <AvatarInitials size={32} name={team.name} />
+                                    <div class="u-line-height-1-5">
+                                        <div class="body-text-2">{team.name}</div>
+                                        <div class="u-x-small">{team.$id}</div>
+                                    </div>
+                                </label>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {results?.total}</p>
+            <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
+        </div>
     {:else if search}
         <EmptySearch hidePages>
             <div class="common-section">
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index c2668fb56..c074af4fd 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import { AvatarInitials, EmptySearch, Modal, PaginationInline, Paginator } from '..';
+    import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
@@ -67,67 +67,67 @@
         placeholder="Search by name, email, phone or ID"
         bind:value={search} />
     {#if results?.users?.length}
-        <Paginator items={results.users} let:paginatedItems>
-            <div class="table-wrapper">
-                <table class="table is-table-layout-auto is-remove-outer-styles">
-                    <tbody class="table-tbody">
-                        {#each paginatedItems as user (user.$id)}
-                            {@const role = `user:${user.$id}`}
-                            {@const exists = $groups.has(role)}
-                            <tr class="table-row">
-                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
-                                    <input
-                                        id={user.$id}
-                                        type="checkbox"
-                                        class="icon-check"
-                                        aria-label="Create"
-                                        checked={exists || selected.has(role)}
-                                        disabled={exists}
-                                        on:change={(event) => onSelection(event, role)} />
-                                </td>
-                                <td class="table-col" data-title="User">
-                                    <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
-                                        {#if user.email || user.phone}
-                                            {#if user.name}
-                                                <AvatarInitials size={32} name={user.name} />
-                                                <div class="u-line-height-1-5">
-                                                    <div class="body-text-2">
-                                                        {user.name}
-                                                    </div>
-                                                    <div class="u-x-small">{user.$id}</div>
+        <div class="table-wrapper">
+            <table class="table is-table-layout-auto is-remove-outer-styles">
+                <tbody class="table-tbody">
+                    {#each results.users as user (user.$id)}
+                        {@const role = `user:${user.$id}`}
+                        {@const exists = $groups.has(role)}
+                        <tr class="table-row">
+                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                <input
+                                    id={user.$id}
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={exists || selected.has(role)}
+                                    disabled={exists}
+                                    on:change={(event) => onSelection(event, role)} />
+                            </td>
+                            <td class="table-col" data-title="User">
+                                <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
+                                    {#if user.email || user.phone}
+                                        {#if user.name}
+                                            <AvatarInitials size={32} name={user.name} />
+                                            <div class="u-line-height-1-5">
+                                                <div class="body-text-2">
+                                                    {user.name}
                                                 </div>
-                                            {:else}
-                                                <div class="avatar is-size-small ">
-                                                    <span
-                                                        class="icon-minus-sm"
-                                                        aria-hidden="true" />
-                                                </div>
-                                                <div class="u-line-height-1-5">
-                                                    <div class="body-text-2">
-                                                        {user.email ? user.email : user.phone}
-                                                    </div>
-                                                    <div class="u-x-small">{user.$id}</div>
-                                                </div>
-                                            {/if}
+                                                <div class="u-x-small">{user.$id}</div>
+                                            </div>
                                         {:else}
                                             <div class="avatar is-size-small ">
-                                                <span class="icon-anonymous" aria-hidden="true" />
+                                                <span class="icon-minus-sm" aria-hidden="true" />
                                             </div>
                                             <div class="u-line-height-1-5">
                                                 <div class="body-text-2">
-                                                    {user.name ? user.name : '-'}
+                                                    {user.email ? user.email : user.phone}
                                                 </div>
                                                 <div class="u-x-small">{user.$id}</div>
                                             </div>
                                         {/if}
-                                    </label>
-                                </td>
-                            </tr>
-                        {/each}
-                    </tbody>
-                </table>
-            </div>
-        </Paginator>
+                                    {:else}
+                                        <div class="avatar is-size-small ">
+                                            <span class="icon-anonymous" aria-hidden="true" />
+                                        </div>
+                                        <div class="u-line-height-1-5">
+                                            <div class="body-text-2">
+                                                {user.name ? user.name : '-'}
+                                            </div>
+                                            <div class="u-x-small">{user.$id}</div>
+                                        </div>
+                                    {/if}
+                                </label>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {results?.total}</p>
+            <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
+        </div>
     {:else if search}
         <EmptySearch hidePages>
             <div class="common-section">

From 71b0aca6d627c4ce7ef30e8d895ceaa2a6d09b25 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 22 Mar 2023 16:32:49 +0100
Subject: [PATCH 4/4] fix: made total reactive

---
 src/lib/components/paginator.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/paginator.svelte b/src/lib/components/paginator.svelte
index 61f58325b..36849247a 100644
--- a/src/lib/components/paginator.svelte
+++ b/src/lib/components/paginator.svelte
@@ -3,9 +3,10 @@
 
     export let items = [];
     export let limit = 5;
-    let total = items?.length;
+
     let offset = 0;
 
+    $: total = items?.length;
     $: paginatedItems = items.slice(offset, offset + limit);
 </script>