From d516169dee7cf2a07d3b53ee51d582f9ec4a5bf9 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:53:18 +0100
Subject: [PATCH] pagination controls

---
 .../toolbar/PaginationControls.svelte         | 149 ++++++++++++++++++
 src/lib/components/toolbar/ToolBar.svelte     | 134 +---------------
 2 files changed, 156 insertions(+), 127 deletions(-)

diff --git a/src/lib/components/toolbar/PaginationControls.svelte b/src/lib/components/toolbar/PaginationControls.svelte
index e69de29..fea258d 100644
--- a/src/lib/components/toolbar/PaginationControls.svelte
+++ b/src/lib/components/toolbar/PaginationControls.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+  import type { AppConfig } from "$lib/types/config";
+  import { configStore } from "$lib/stores/config";
+
+  export let itemsPerPage: number;
+  export let currentPage: number;
+  export let totalPages: number;
+  export let totalResults: number;
+
+  const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
+
+  function changePage(page: number) {
+    if (page >= 1 && page <= totalPages) {
+      currentPage = page;
+    }
+  }
+
+  function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
+    configStore.updateConfig({
+      behavior: {
+        ...$configStore.behavior,
+        [key]: value,
+      },
+    });
+  }
+</script>
+
+<div class="pagination-controls">
+  <select
+    class="select-input"
+    bind:value={itemsPerPage}
+    on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
+    aria-label="Items per page"
+  >
+    {#each itemsPerPageOptions as option}
+      <option value={option}>{option} per page</option>
+    {/each}
+  </select>
+
+  <div class="pagination">
+    <button
+      class="btn-page"
+      disabled={currentPage === 1}
+      on:click={() => changePage(1)}
+    >
+      ««
+    </button>
+    <button
+      class="btn-page"
+      disabled={currentPage === 1}
+      on:click={() => changePage(currentPage - 1)}
+    >
+      «
+    </button>
+    <div class="page-info">
+      <span>Page {currentPage} of {totalPages}</span>
+      <span class="results-info">({totalResults} processes)</span>
+    </div>
+    <button
+      class="btn-page"
+      disabled={currentPage === totalPages}
+      on:click={() => changePage(currentPage + 1)}
+    >
+      »
+    </button>
+    <button
+      class="btn-page"
+      disabled={currentPage === totalPages}
+      on:click={() => changePage(totalPages)}
+    >
+      »»
+    </button>
+  </div>
+</div>
+
+<style>
+  .pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .select-input {
+    padding: 6px 12px;
+    font-size: 12px;
+    color: var(--text);
+    background: var(--surface0);
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    cursor: pointer;
+    appearance: none;
+    padding-right: 24px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+
+  .select-input:hover {
+    background-color: var(--surface1);
+  }
+
+  .select-input:focus {
+    outline: none;
+    border-color: var(--blue);
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .btn-page {
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--text);
+    background: var(--surface0);
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .btn-page:hover:not(:disabled) {
+    background: var(--surface1);
+  }
+
+  .btn-page:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .page-info {
+    font-size: 12px;
+    color: var(--subtext0);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .page-info span {
+    display: block;
+  }
+
+  .results-info {
+    color: var(--overlay0);
+  }
+</style>
diff --git a/src/lib/components/toolbar/ToolBar.svelte b/src/lib/components/toolbar/ToolBar.svelte
index a615e2f..0073ab3 100644
--- a/src/lib/components/toolbar/ToolBar.svelte
+++ b/src/lib/components/toolbar/ToolBar.svelte
@@ -13,6 +13,7 @@
   import StatusFilter from "./StatusFilter.svelte";
   import SearchBox from "./SearchBox.svelte";
   import RefreshControls from "./RefreshControls.svelte";
+  import PaginationControls from "./PaginationControls.svelte";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -28,7 +29,6 @@
   export let refreshRate: number;
   export let isFrozen: boolean;
 
-  const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
   let showColumnMenu = false;
   const statusOptions = [
     { value: "all", label: "All Statuses" },
@@ -38,12 +38,6 @@
     })),
   ];
 
-  function changePage(page: number) {
-    if (page >= 1 && page <= totalPages) {
-      currentPage = page;
-    }
-  }
-
   function handleColumnVisibilityChange(columnId: string, visible: boolean) {
     configStore.updateConfig({
       appearance: {
@@ -72,53 +66,12 @@
 
     <div class="toolbar-spacer"></div>
 
-    <div class="pagination-controls">
-      <select
-        class="select-input"
-        bind:value={itemsPerPage}
-        on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
-        aria-label="Items per page"
-      >
-        {#each itemsPerPageOptions as option}
-          <option value={option}>{option} per page</option>
-        {/each}
-      </select>
-
-      <div class="pagination">
-        <button
-          class="btn-page"
-          disabled={currentPage === 1}
-          on:click={() => changePage(1)}
-        >
-          ««
-        </button>
-        <button
-          class="btn-page"
-          disabled={currentPage === 1}
-          on:click={() => changePage(currentPage - 1)}
-        >
-          «
-        </button>
-        <div class="page-info">
-          <span>Page {currentPage} of {totalPages}</span>
-          <span class="results-info">({totalResults} processes)</span>
-        </div>
-        <button
-          class="btn-page"
-          disabled={currentPage === totalPages}
-          on:click={() => changePage(currentPage + 1)}
-        >
-          »
-        </button>
-        <button
-          class="btn-page"
-          disabled={currentPage === totalPages}
-          on:click={() => changePage(totalPages)}
-        >
-          »»
-        </button>
-      </div>
-    </div>
+    <PaginationControls
+      bind:itemsPerPage
+      bind:currentPage
+      {totalPages}
+      {totalResults}
+    />
     <div class="toolbar-spacer"></div>
 
     <div class="column-toggle">
@@ -255,79 +208,6 @@
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
   }
 
-  .pagination-controls {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .select-input {
-    padding: 6px 12px;
-    font-size: 12px;
-    color: var(--text);
-    background: var(--surface0);
-    border: 1px solid var(--surface1);
-    border-radius: 6px;
-    cursor: pointer;
-    appearance: none;
-    padding-right: 24px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-  }
-
-  .select-input:hover {
-    background-color: var(--surface1);
-  }
-
-  .select-input:focus {
-    outline: none;
-    border-color: var(--blue);
-  }
-
-  .pagination {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .btn-page {
-    padding: 6px 10px;
-    font-size: 12px;
-    color: var(--text);
-    background: var(--surface0);
-    border: 1px solid var(--surface1);
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .btn-page:hover:not(:disabled) {
-    background: var(--surface1);
-  }
-
-  .btn-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .page-info {
-    font-size: 12px;
-    color: var(--subtext0);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex-shrink: 0;
-  }
-
-  .page-info span {
-    display: block;
-  }
-
-  .results-info {
-    color: var(--overlay0);
-  }
-
   .column-toggle {
     position: relative;
   }