From 596fc19b29995392040eeb0908592480078c9503 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:43:15 +0100
Subject: [PATCH] status filter

---
 .../components/toolbar/ColumnToggle.svelte    |  0
 .../toolbar/PaginationControls.svelte         |  0
 .../components/toolbar/RefreshControls.svelte |  0
 src/lib/components/toolbar/SearchBox.svelte   |  0
 .../components/toolbar/StatusFilter.svelte    | 68 +++++++++++++++++++
 .../components/{ => toolbar}/ToolBar.svelte   | 16 +----
 src/lib/components/toolbar/index.ts           |  6 ++
 src/lib/constants/toolbar.ts                  |  9 +++
 src/lib/types/toolbar.ts                      | 28 ++++++++
 src/routes/+page.svelte                       |  2 +-
 10 files changed, 115 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/toolbar/ColumnToggle.svelte
 create mode 100644 src/lib/components/toolbar/PaginationControls.svelte
 create mode 100644 src/lib/components/toolbar/RefreshControls.svelte
 create mode 100644 src/lib/components/toolbar/SearchBox.svelte
 create mode 100644 src/lib/components/toolbar/StatusFilter.svelte
 rename src/lib/components/{ => toolbar}/ToolBar.svelte (96%)
 create mode 100644 src/lib/components/toolbar/index.ts
 create mode 100644 src/lib/constants/toolbar.ts
 create mode 100644 src/lib/types/toolbar.ts

diff --git a/src/lib/components/toolbar/ColumnToggle.svelte b/src/lib/components/toolbar/ColumnToggle.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/toolbar/PaginationControls.svelte b/src/lib/components/toolbar/PaginationControls.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/toolbar/RefreshControls.svelte b/src/lib/components/toolbar/RefreshControls.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/toolbar/SearchBox.svelte b/src/lib/components/toolbar/SearchBox.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/toolbar/StatusFilter.svelte b/src/lib/components/toolbar/StatusFilter.svelte
new file mode 100644
index 0000000..e234844
--- /dev/null
+++ b/src/lib/components/toolbar/StatusFilter.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { statusMap } from "$lib/utils";
+  import type { AppConfig } from "$lib/types/config";
+  import { configStore } from "$lib/stores/config";
+
+  export let statusFilter: string = "all";
+
+  const statusOptions = [
+    { value: "all", label: "All Statuses" },
+    ...Object.values(statusMap).map((status) => ({
+      value: status.label,
+      label: status.label,
+    })),
+  ];
+
+  function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
+    configStore.updateConfig({
+      behavior: {
+        ...$configStore.behavior,
+        [key]: value,
+      },
+    });
+  }
+</script>
+
+<div class="toolbar-group">
+  <select
+    bind:value={statusFilter}
+    on:change={() => updateBehaviorConfig("defaultStatusFilter", statusFilter)}
+    class="select-input"
+  >
+    {#each statusOptions as option}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .select-input {
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    background: var(--surface0);
+    color: var(--text);
+    font-size: 13px;
+    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);
+  }
+
+  .select-input:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+</style>
diff --git a/src/lib/components/ToolBar.svelte b/src/lib/components/toolbar/ToolBar.svelte
similarity index 96%
rename from src/lib/components/ToolBar.svelte
rename to src/lib/components/toolbar/ToolBar.svelte
index 80c16ff..419d7b6 100644
--- a/src/lib/components/ToolBar.svelte
+++ b/src/lib/components/toolbar/ToolBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AppInfo from "./AppInfo.svelte";
+  import AppInfo from "../AppInfo.svelte";
   import { statusMap } from "$lib/utils";
   import Fa from "svelte-fa";
   import {
@@ -10,6 +10,7 @@
   } from "@fortawesome/free-solid-svg-icons";
   import { configStore } from "$lib/stores/config";
   import type { AppConfig } from "$lib/types/config";
+  import StatusFilter from "./StatusFilter.svelte";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -87,18 +88,7 @@
         {/if}
       </div>
     </div>
-    <div class="toolbar-group">
-      <select
-        bind:value={statusFilter}
-        on:change={() =>
-          updateBehaviorConfig("defaultStatusFilter", statusFilter)}
-        class="select-input"
-      >
-        {#each statusOptions as option}
-          <option value={option.value}>{option.label}</option>
-        {/each}
-      </select>
-    </div>
+    <StatusFilter bind:statusFilter />
 
     <div class="toolbar-spacer"></div>
 
diff --git a/src/lib/components/toolbar/index.ts b/src/lib/components/toolbar/index.ts
new file mode 100644
index 0000000..880daaa
--- /dev/null
+++ b/src/lib/components/toolbar/index.ts
@@ -0,0 +1,6 @@
+export { default as ToolBar } from "./ToolBar.svelte";
+export { default as SearchBox } from "./SearchBox.svelte";
+export { default as StatusFilter } from "./StatusFilter.svelte";
+export { default as PaginationControls } from "./PaginationControls.svelte";
+export { default as ColumnToggle } from "./ColumnToggle.svelte";
+export { default as RefreshControls } from "./RefreshControls.svelte";
diff --git a/src/lib/constants/toolbar.ts b/src/lib/constants/toolbar.ts
new file mode 100644
index 0000000..5c63397
--- /dev/null
+++ b/src/lib/constants/toolbar.ts
@@ -0,0 +1,9 @@
+export const ITEMS_PER_PAGE_OPTIONS = [15, 25, 50, 100, 250, 500];
+
+export const REFRESH_RATE_OPTIONS = [
+  { value: 1000, label: "1s" },
+  { value: 2000, label: "2s" },
+  { value: 5000, label: "5s" },
+  { value: 10000, label: "10s" },
+  { value: 30000, label: "30s" },
+];
diff --git a/src/lib/types/toolbar.ts b/src/lib/types/toolbar.ts
new file mode 100644
index 0000000..6d4e9f1
--- /dev/null
+++ b/src/lib/types/toolbar.ts
@@ -0,0 +1,28 @@
+export interface ColumnDefinition {
+  id: string;
+  label: string;
+  visible: boolean;
+  required?: boolean;
+}
+
+export interface StatusOption {
+  value: string;
+  label: string;
+}
+
+export interface RefreshRateOption {
+  value: number;
+  label: string;
+}
+
+export interface ToolBarProps {
+  searchTerm: string;
+  statusFilter: string;
+  itemsPerPage: number;
+  currentPage: number;
+  totalPages: number;
+  totalResults: number;
+  columns: ColumnDefinition[];
+  refreshRate: number;
+  isFrozen: boolean;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 25c7bf5..eb9b360 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
   import { invoke } from "@tauri-apps/api/core";
   import { onMount, onDestroy } from "svelte";
   import { StatsBar } from "$lib/components/stats";
-  import ToolBar from "$lib/components/ToolBar.svelte";
+  import { ToolBar } from "$lib/components/toolbar";
   import { ProcessTable } from "$lib/components/process";
   import { ProcessDetailsModal } from "$lib/components/modals";
   import { KillProcessModal } from "$lib/components/modals";