Merge pull request #7901 from callezenwaka/add_pagitation

Add pagitation

packages/grid/frontend/src/lib/components/Filter.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let variant: 'gray' | 'primary-light' | 'primary-dark' = 'gray';
+  export let index: number;
+  export let filter: number;
+  export let filters: number[] = [];
+
+  const onChange = () => {
+    index = 0;
+    dispatch('setFilter');
+	}
+</script>
+
+<span class={variant}>
+  <button
+    type="button"
+    title="filter"
+    class="flex justify-center items-center"
+    style=""
+    aria-pressed="false"
+    aria-label="Search filters"
+  >
+    <div class="relative">
+      <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="fill: currentcolor; pointer-events: none; display: block; width: 24px; height: 24px;;">
+        <path d="M15 17h6v1h-6v-1zm-4 0H3v1h8v2h1v-5h-1v2zm3-9h1V3h-1v2H3v1h11v2zm4-3v1h3V5h-3zM6 14h1V9H6v2H3v1h3v2zm4-2h11v-1H10v1z"></path>
+      </svg>
+    </div>
+    <slot />
+    <div>
+      <select class={variant} bind:value={filter} on:change={onChange}>
+        {#each filters as filter (filter)}
+          <option value={filter}>{ filter }</option>
+        {/each}
+      </select>
+    </div>
+  </button>
+</span>
+
+<style lang="postcss">
+  span {
+    @apply h-5;
+  }
+  .gray {
+    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded-sm items-center inline-flex font-bold font-roboto text-xs leading-normal;
+  }
+
+  .primary-light {
+    @apply bg-primary-100 text-primary-600 px-1.5 py-0.5 rounded-sm items-center inline-flex font-bold font-roboto text-xs leading-normal w-fit;
+  }
+
+  .primary-dark {
+    @apply bg-gray-800 text-primary-200 px-1.5 py-0.5 rounded-sm items-center inline-flex font-bold font-roboto text-xs leading-normal w-fit;
+  }
+</style>

packages/grid/frontend/src/lib/components/Pagination.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let variant: 'gray' | 'primary-light' | 'primary-dark' = 'gray';
+  export let total: number;
+  export let page_size: number;
+  export let page_index: number;
+  export let page_row: number;
+
+  const pageNumbers = (total: number, max: number, current: number) => {
+    const half = Math.floor(max / 2);
+    let to = max;
+
+    if(current + half >= total) {
+      to = total;
+    } else if(current > half) {
+      to = current + half ;
+    }
+
+    let from = Math.max(to - max, 0);
+
+    return Array.from({length: Math.min(total, max)}, (_, i) => (i + 1) + from);
+  }
+
+  $: paginators = Math.ceil(total / page_size) || 0;
+  $: paginations = pageNumbers(total, page_row, page_index);
+
+  const handlePaginate = (index: number) => {
+		page_index = index;
+    dispatch('setPagination', page_index);
+	};
+
+  const handlePrev = () => {
+    if ((page_index - 1) < 0) return;
+    else dispatch('setPagination', page_index--);
+	};
+
+  const handleNext = () => {
+    if ((page_index + 1) >= paginators) return;
+    else dispatch('setPagination', page_index++);
+	};
+
+</script>
+
+<span class="flex gap-2.5">
+  <button
+    type="button"
+    title="Previous"
+    class={`${variant} pagination-button`}
+    style=""
+    style:cursor={(page_index) === 0 ? 'not-allowed' : 'pointer'}
+    aria-pressed="false"
+    aria-label="LEFT-POINTING ANGLE"
+    disabled='{(page_index) === 0}'
+    on:click={handlePrev}
+  >
+    &#10094;
+  </button>
+  {#each paginations as pagination}
+    <button
+      type="button"
+      title="Paginate"
+      class={`${variant} pagination-button ${(pagination - 1) === page_index ? 'primary-light' : ''}`}
+      style=""
+      aria-pressed="false"
+      aria-label="Paginate"
+      on:click={() => {handlePaginate(pagination - 1)}}
+    >
+      { pagination }
+    </button>
+  {/each}
+  <button
+    type="button"
+    title="Next"
+    class={`${variant} pagination-button`}
+    style=""
+    style:cursor={(page_index+1) === paginators ? 'not-allowed' : 'pointer'}
+    aria-pressed="false"
+    aria-label="RIGHT-POINTING ANGLE"
+    disabled='{(page_index+1) === paginators}'
+    on:click={handleNext}
+  >
+    &#10095;
+  </button>
+</span>
+
+<style lang="postcss">
+  span {
+    @apply h-5;
+  }
+  .gray {
+    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded-sm items-center inline-flex font-bold font-roboto text-xs leading-normal;
+  }
+
+  .primary-light {
+    @apply bg-primary-100 text-primary-600 px-1.5 py-0.5 rounded-sm items-center inline-flex font-bold font-roboto text-xs leading-normal w-fit;
+  }
+
+  .primary-dark {
+    @apply bg-gray-800 text-primary-200 px-1.5 py-0.5 rounded-sm items-center inline-flex font-bold font-roboto text-xs leading-normal w-fit;
+  }
+
+  .pagination-button {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    font-size: 1rem;
+    line-height: 1.25rem;
+    font-weight: 800;
+  }
+</style>

packages/grid/frontend/src/routes/(app)/users/+page.svelte

@@ -3,7 +3,9 @@
   import debounce from 'just-debounce-it';
   import { getAllUsers, getSelf, searchUsersByName } from '$lib/api/users';
   import Badge from '$lib/components/Badge.svelte';
+  import Filter from '$lib/components/Filter.svelte';
   import Search from '$lib/components/Search.svelte';
+  import Pagination from '$lib/components/Pagination.svelte';
   import UserListItem from '$lib/components/Users/UserListItem.svelte';
   import PlusIcon from '$lib/components/icons/PlusIcon.svelte';
   import UserNewModal from '$lib/components/Users/UserNewModal.svelte';
@@ -12,11 +14,16 @@
 
   let searchTerm = '';
   let userList: UserListView[] = [];
+  let total: number = 0;
+  let paginators: number[] = [1, 2, 3, 4, 5];
+  let page_size: number = 2, page_index: number = 0, page_row: number = 3;
 
   let openModal: string | null = null;
 
   onMount(async () => {
-    userList = await getAllUsers();
+    const results = await getAllUsers(page_size, page_index);
+    userList = results.users;
+    total = results.total;
   });
 
   const closeModal = () => {
@@ -28,12 +35,23 @@
   };
 
   const search = debounce(async () => {
-    if (searchTerm === '') userList = await getAllUsers();
-    else userList = await searchUsersByName(searchTerm);
+    if (searchTerm === '') {
+      const results = await getAllUsers(page_size);
+      userList = results.users;
+      total = results.total;
+    } else {
+      userList = await searchUsersByName(searchTerm);
+      // const results = await searchUsersByName(searchTerm, page_size);
+      // userList = results.users;
+      // total = results.total;
+      // console.log(userList)
+    }
   }, 300);
 
   const handleUpdate = async () => {
-    userList = await getAllUsers();
+    const results = await getAllUsers(page_size, page_index);
+    userList = results.users;
+    total = results.total;
   };
 </script>
 
@@ -52,7 +70,10 @@
       <Search type="text" placeholder="Search by name" bind:value={searchTerm} on:input={search} />
     </div>
     <div class="flex-shrink-0">
-      <Badge variant="gray">Total: {userList?.length || 0}</Badge>
+      <div class="flex gap-2.5">
+        <Badge variant="gray">Total: {total || 0}</Badge>
+        <Filter variant="gray" filters={paginators} bind:filter={page_size} bind:index={page_index} on:setFilter={handleUpdate}>Filter: </Filter>
+      </div>
     </div>
   </div>
   <div class="divide-y divide-gray-100">
@@ -62,6 +83,16 @@
       </a>
     {/each}
   </div>
+  <div class="flex justify-center items-center mb-8 divide-y divide-gray-100">
+    <Pagination
+      variant="gray"
+      total={total}
+      page_size={page_size}
+      page_row={page_row}
+      bind:page_index={page_index}
+      on:setPagination={handleUpdate}
+    ></Pagination>
+  </div>
 </div>
 <div class="fixed bottom-10 right-12">
   <button

packages/syft/src/syft/service/dataset/dataset.py

@@ -508,6 +508,16 @@ def _check_asset_must_contain_mock(asset_list: List[CreateAsset]) -> None:
         )
 
 
+@serializable()
+class DatasetPageView(SyftObject):
+    # version
+    __canonical_name__ = "DatasetPageView"
+    __version__ = SYFT_OBJECT_VERSION_1
+
+    datasets: List[Dataset]
+    total: int
+
+
 @serializable()
 class CreateDataset(Dataset):
     # version

packages/syft/src/syft/service/dataset/dataset_service.py

@@ -23,6 +23,7 @@
 from .dataset import Asset
 from .dataset import CreateDataset
 from .dataset import Dataset
+from .dataset import DatasetPageView
 from .dataset_stash import DatasetStash
 
 
@@ -64,7 +65,7 @@ def get_all(
         context: AuthedServiceContext,
         page_size: Optional[int] = 0,
         page_index: Optional[int] = 0,
-    ) -> Union[List[Dataset], SyftError]:
+    ) -> Union[DatasetPageView, List[Dataset], SyftError]:
         """Get a Dataset"""
         result = self.stash.get_all(context.credentials)
         if result.is_ok():
@@ -76,12 +77,14 @@ def get_all(
 
             # If chunk size is defined, then split list into evenly sized chunks
             if page_size:
+                total = len(results)
                 results = [
                     results[i : i + page_size]
                     for i in range(0, len(results), page_size)
                 ]
                 # Return the proper slice using chunk_index
                 results = results[page_index]
+                results = DatasetPageView(datasets=results, total=total)
 
             return results
         return SyftError(message=result.err())
@@ -103,12 +106,14 @@ def search(
             # If chunk size is defined, then split list into evenly sized chunks
 
             if page_size:
+                total = len(results)
                 results = [
                     results[i : i + page_size]
                     for i in range(0, len(results), page_size)
                 ]
                 # Return the proper slice using chunk_index
                 results = results[page_index]
+                results = DatasetPageView(datasets=results, total=total)
 
         return results
 

packages/syft/src/syft/service/user/user.py

@@ -170,6 +170,15 @@ def _coll_repr_(self) -> Dict[str, Any]:
         }
 
 
+@serializable()
+class UserViewPage(SyftObject):
+    __canonical_name__ = "UserViewPage"
+    __version__ = SYFT_OBJECT_VERSION_1
+
+    users: List[UserView]
+    total: int
+
+
 @transform(UserUpdate, User)
 def user_update_to_user() -> List[Callable]:
     return [

packages/syft/src/syft/service/user/user_service.py

@@ -30,6 +30,7 @@
 from .user import UserSearch
 from .user import UserUpdate
 from .user import UserView
+from .user import UserViewPage
 from .user import check_pwd
 from .user import salt_and_hash_password
 from .user_roles import DATA_OWNER_ROLE_LEVEL
@@ -98,19 +99,21 @@ def get_all(
         context: AuthedServiceContext,
         page_size: Optional[int] = 0,
         page_index: Optional[int] = 0,
-    ) -> Union[Optional[UserView], SyftError]:
+    ) -> Union[Optional[UserViewPage], Optional[UserView], SyftError]:
         result = self.stash.get_all(context.credentials)
         if result.is_ok():
             results = [user.to(UserView) for user in result.ok()]
 
             # If chunk size is defined, then split list into evenly sized chunks
             if page_size:
+                total = len(results)
                 results = [
                     results[i : i + page_size]
                     for i in range(0, len(results), page_size)
                 ]
                 # Return the proper slice using chunk_index
                 results = results[page_index]
+                results = UserViewPage(users=results, total=total)
 
             return results
 
@@ -144,7 +147,7 @@ def search(
         user_search: UserSearch,
         page_size: Optional[int] = 0,
         page_index: Optional[int] = 0,
-    ) -> Union[List[UserView], SyftError]:
+    ) -> Union[Optional[UserViewPage], List[UserView], SyftError]:
         kwargs = user_search.to_dict(exclude_empty=True)
 
         if len(kwargs) == 0:
@@ -162,11 +165,13 @@ def search(
 
         # If page size is defined, then split list into evenly sized chunks
         if page_size:
+            total = len(results)
             results = [
                 results[i : i + page_size] for i in range(0, len(results), page_size)
             ]
             # Return the proper slice using page_index
             results = results[page_index]
+            results = UserViewPage(users=results, total=total)
 
         return results