Merge pull request #1 from sebadob/pagination-component

create a pagination component
sebadob · Jul 24, 2023 · 60a499a · 60a499a
2 parents f13c624 + 6eb345c
commit 60a499a
Show file tree

Hide file tree

Showing 15 changed files with 388 additions and 190 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,8 +24,8 @@
 		"eslint-plugin-svelte": "^2.32.2",
 		"jwt-decode": "^3.1.2",
 		"oauth-pkce": "^0.0.6",
-		"prettier": "^2.6.2",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier": "^3.0.0",
+		"prettier-plugin-svelte": "^3.0.0",
 		"sjcl": "^1.0.8",
 		"svelte": "^4.0.0",
 		"svelte-check": "^3.4.3",
@@ -34,4 +34,4 @@
 		"yup": "^1.0.2"
 	},
 	"type": "module"
-}
+}
diff --git a/frontend/src/components/admin/clients/Clients.svelte b/frontend/src/components/admin/clients/Clients.svelte
@@ -5,11 +5,13 @@
     import ClientTile from "./ClientTile.svelte";
     import ClientTileAddNew from "./ClientTileAddNew.svelte";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
+    import Pagination from "$lib/Pagination.svelte";
 
     let msg = '';
 
     let clients = [];
     let resClients = [];
+    let resClientsPaginated = [];
 
     let searchOptions = [
         {
@@ -76,6 +78,11 @@
         {/each}
     </div>
 
+    <Pagination
+            bind:items={resClients}
+            bind:resItems={resClientsPaginated}
+    />
+
     <div style="height: 20px"></div>
 </div>
 

diff --git a/frontend/src/components/admin/groups/GroupTileAddNew.svelte b/frontend/src/components/admin/groups/GroupTileAddNew.svelte
@@ -12,9 +12,7 @@
     export let onSave;
     let expandContainer;
 
-    let group = {
-        group: '',
-    }
+    let group = { group: '' };
 
     let err = '';
     let isLoading = false;
@@ -30,7 +28,7 @@
         timer = setTimeout(() => {
             onSave();
             success = false;
-            group = {};
+            group = { group: '' };
             expandContainer = false;
         }, 1500);
     }

diff --git a/frontend/src/components/admin/groups/Groups.svelte b/frontend/src/components/admin/groups/Groups.svelte
@@ -4,10 +4,12 @@
     import GroupTileAddNew from "./GroupTileAddNew.svelte";
     import GroupTile from "./GroupTile.svelte";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
+    import Pagination from "$lib/Pagination.svelte";
 
     let err = '';
     let groups = [];
     let resGroups = [];
+    let resClientsPaginated = [];
 
     let searchOptions = [
         {
@@ -70,6 +72,11 @@
         {/each}
     </div>
 
+    <Pagination
+            bind:items={resGroups}
+            bind:resItems={resClientsPaginated}
+    />
+
     <div style="height: 20px"></div>
 </div>
 

diff --git a/frontend/src/components/admin/roles/RoleTileAddNew.svelte b/frontend/src/components/admin/roles/RoleTileAddNew.svelte
@@ -12,9 +12,7 @@
     export let onSave;
     let expandContainer;
 
-    let role = {
-        role: '',
-    }
+    let role = { role: '' };
 
     let err = '';
     let isLoading = false;
@@ -29,7 +27,7 @@
     $: if (success) {
         timer = setTimeout(() => {
             success = false;
-            role = {};
+            role = { role: '' };
             expandContainer = false;
             onSave();
         }, 1500);

diff --git a/frontend/src/components/admin/roles/Roles.svelte b/frontend/src/components/admin/roles/Roles.svelte
@@ -4,10 +4,12 @@
     import RoleTile from "./RoleTile.svelte";
     import RoleTileAddNew from "./RoleTileAddNew.svelte";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
+    import Pagination from "$lib/Pagination.svelte";
 
     let err = '';
     let roles = [];
     let resRoles = [];
+    let resItemsPaginated = [];
 
     let searchOptions = [
         {
@@ -63,13 +65,18 @@
     <RoleTileAddNew onSave={onSave}/>
 
     <div id="roles">
-        {#each resRoles as role (role.id)}
+        {#each resItemsPaginated as role (role.id)}
             <div>
                 <RoleTile bind:role onSave={onSave}/>
             </div>
         {/each}
     </div>
 
+    <Pagination
+            bind:items={resRoles}
+            bind:resItems={resItemsPaginated}
+    />
+
     <div style="height: 20px"></div>
 </div>
 

diff --git a/frontend/src/components/admin/scopes/ScopeTileAddNew.svelte b/frontend/src/components/admin/scopes/ScopeTileAddNew.svelte
@@ -12,9 +12,7 @@
     export let onSave;
     let expandContainer;
 
-    let scope = {
-        scope: '',
-    }
+    let scope = { scope: '' };
 
     let err = '';
     let isLoading = false;
@@ -30,7 +28,7 @@
         timer = setTimeout(() => {
             onSave();
             success = false;
-            scope = {};
+            scope = { scope: '' };
             expandContainer = false;
         }, 1500);
     }

diff --git a/frontend/src/components/admin/scopes/Scopes.svelte b/frontend/src/components/admin/scopes/Scopes.svelte
@@ -4,11 +4,13 @@
     import ScopeTileAddNew from "./ScopeTileAddNew.svelte";
     import ScopeTile from "./ScopeTile.svelte";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
+    import Pagination from "$lib/Pagination.svelte";
 
     let attrs = [];
     let err = '';
     let scopes = [];
     let resScopes = [];
+    let resScopesPaginated = [];
     let refresh;
 
     let searchOptions = [
@@ -83,6 +85,11 @@
         {/each}
     </div>
 
+    <Pagination
+            bind:items={resScopes}
+            bind:resItems={resScopesPaginated}
+    />
+
     <div style="height: 20px"></div>
 </div>
 

diff --git a/frontend/src/components/admin/sessions/Sessions.svelte b/frontend/src/components/admin/sessions/Sessions.svelte
@@ -6,6 +6,7 @@
     import Loading from "$lib/Loading.svelte";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
     import Button from "$lib/Button.svelte";
+    import Pagination from "$lib/Pagination.svelte";
 
     let err = '';
     let sessions = [];

diff --git a/frontend/src/components/admin/userAttr/Attr.svelte b/frontend/src/components/admin/userAttr/Attr.svelte
@@ -4,10 +4,12 @@
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
     import UserAttrTileAddNew from "./AttrTileAddNew.svelte";
     import UserAttrTile from "./AttrTile.svelte";
+    import Pagination from "$lib/Pagination.svelte";
 
     let msg = '';
     let attr = [];
     let resAttr = [];
+    let resAttrPaginated = [];
 
     let searchOptions = [
         {
@@ -62,6 +64,11 @@
         {/each}
     </div>
 
+    <Pagination
+            bind:items={resAttr}
+            bind:resItems={resAttrPaginated}
+    />
+
     <div style="height: 20px"></div>
 </div>
 

diff --git a/frontend/src/components/admin/users/Users.svelte b/frontend/src/components/admin/users/Users.svelte
@@ -5,11 +5,13 @@
     import {globalGroups, globalGroupsNames, globalRoles, globalRolesNames,} from "../../../stores/admin.js";
     import UserTileAddNew from "./UserTileAddNew.svelte";
     import OrderSearchBar from "$lib/search/OrderSearchBar.svelte";
+    import Pagination from "$lib/Pagination.svelte";
 
     let msg = '';
 
     let users = [];
     let resUsers = [];
+    let resUsersPaginated = [];
 
     let searchOptions = [
         {
@@ -97,6 +99,11 @@
             </div>
         {/each}
     </div>
+
+    <Pagination
+            bind:items={resUsers}
+            bind:resItems={resUsersPaginated}
+    />
 </div>
 
 <style>