From b7bf85e9c5285bb8ba69f50a57cbc8c52b5b45b8 Mon Sep 17 00:00:00 2001
From: Ykrej <stellan125@gmail.com>
Date: Fri, 20 Jun 2025 12:12:36 -0700
Subject: [PATCH 1/4] feat: added range filter for capacity

---
 src/routes/components/RangeFilter.svelte     | 71 ++++++++++++++++++++
 src/routes/components/ServerPartsGrid.svelte |  5 ++
 2 files changed, 76 insertions(+)
 create mode 100644 src/routes/components/RangeFilter.svelte

diff --git a/src/routes/components/RangeFilter.svelte b/src/routes/components/RangeFilter.svelte
new file mode 100644
index 0000000..50510e9
--- /dev/null
+++ b/src/routes/components/RangeFilter.svelte
@@ -0,0 +1,71 @@
+<script lang="ts" generics="TData">
+  import type { GridApi } from 'ag-grid-community'
+
+  const uid = $props.id()
+
+  let {
+    gridApi,
+    column,
+    placeholder,
+  }: {
+    gridApi: GridApi<TData>
+    column: string
+    placeholder?: string
+  } = $props()
+
+  let min: number | null = $state(null)
+  let max: number | null = $state(null)
+
+  $effect(() => {
+    const conditions = []
+
+    if (typeof min === 'number')
+      conditions.push({
+        filterType: 'number',
+        type: 'greaterThanOrEqual',
+        filter: min * 1000,
+      })
+
+    if (typeof max === 'number')
+      conditions.push({
+        filterType: 'number',
+        type: 'lessThanOrEqual',
+        filter: max * 1000,
+      })
+
+    let filter
+    if (conditions.length)
+      filter = {
+        filterType: 'number',
+        operator: 'AND',
+        conditions,
+      }
+
+    gridApi
+      .setColumnFilterModel(column, filter)
+      .then(() => gridApi.onFilterChanged())
+  })
+</script>
+
+<div>
+  <div>
+    <input
+      type="number"
+      id={`${uid}-min`}
+      placeholder={placeholder ?? ''}
+      class="w-12"
+      bind:value={min}
+    />
+    <label for={`${uid}-min`} class="flex-grow">Minimum</label>
+  </div>
+  <div>
+    <input
+      type="number"
+      id={`${uid}-max`}
+      placeholder={placeholder ?? ''}
+      class="w-12"
+      bind:value={max}
+    />
+    <label for={`${uid}-max`} class="flex-grow">Maximum</label>
+  </div>
+</div>
diff --git a/src/routes/components/ServerPartsGrid.svelte b/src/routes/components/ServerPartsGrid.svelte
index 52efa3f..3aa4bec 100644
--- a/src/routes/components/ServerPartsGrid.svelte
+++ b/src/routes/components/ServerPartsGrid.svelte
@@ -6,6 +6,7 @@
   import CheckBoxFilter from './CheckBoxFilter.svelte'
   import { mount } from 'svelte'
   import CellLink from './CellLink.svelte'
+  import RangeFilter from './RangeFilter.svelte'
 
   const uid = $props.id()
   const { rowData } = $props()
@@ -130,6 +131,10 @@
           <CheckBoxFilter {gridApi} {rowData} {column} field={column} />
         </div>
       {/each}
+      <div class="m-1 rounded-sm border-1 bg-gray-50 px-1 drop-shadow-md">
+        <span>Capacity</span>
+        <RangeFilter {gridApi} column="capacityGb" placeholder="TB" />
+      </div>
     {:else}
       <Spinner class="justify-items-end" />
     {/if}

From 16b6ba5228a52da57136c5e59566b2a1e9f4cb06 Mon Sep 17 00:00:00 2001
From: Ykrej <stellan125@gmail.com>
Date: Fri, 20 Jun 2025 12:18:10 -0700
Subject: [PATCH 2/4] feat: added value getter for RangeFilter

---
 src/routes/components/RangeFilter.svelte     |  8 ++++++--
 src/routes/components/ServerPartsGrid.svelte | 14 +++++++++++---
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/routes/components/RangeFilter.svelte b/src/routes/components/RangeFilter.svelte
index 50510e9..eb10049 100644
--- a/src/routes/components/RangeFilter.svelte
+++ b/src/routes/components/RangeFilter.svelte
@@ -7,12 +7,16 @@
     gridApi,
     column,
     placeholder,
+    valueGetter,
   }: {
     gridApi: GridApi<TData>
     column: string
     placeholder?: string
+    valueGetter?: (value: number) => number
   } = $props()
 
+  valueGetter = valueGetter ?? ((value: number) => value)
+
   let min: number | null = $state(null)
   let max: number | null = $state(null)
 
@@ -23,14 +27,14 @@
       conditions.push({
         filterType: 'number',
         type: 'greaterThanOrEqual',
-        filter: min * 1000,
+        filter: valueGetter(min),
       })
 
     if (typeof max === 'number')
       conditions.push({
         filterType: 'number',
         type: 'lessThanOrEqual',
-        filter: max * 1000,
+        filter: valueGetter(max),
       })
 
     let filter
diff --git a/src/routes/components/ServerPartsGrid.svelte b/src/routes/components/ServerPartsGrid.svelte
index 3aa4bec..d79142b 100644
--- a/src/routes/components/ServerPartsGrid.svelte
+++ b/src/routes/components/ServerPartsGrid.svelte
@@ -11,6 +11,9 @@
   const uid = $props.id()
   const { rowData } = $props()
 
+  const filterDivClass =
+    'm-1 rounded-sm border-1 bg-gray-50 px-1 drop-shadow-md'
+
   let gridApi: GridApi | undefined = $state()
 
   const columnDefs: ColDef[] = [
@@ -126,14 +129,19 @@
   <div class="h-screen w-48 flex-none">
     {#if gridApi}
       {#each checkboxFilterDefs as { label, column } (`${uid}-${column}`)}
-        <div class="m-1 rounded-sm border-1 bg-gray-50 px-1 drop-shadow-md">
+        <div class={filterDivClass}>
           <span>{label}</span>
           <CheckBoxFilter {gridApi} {rowData} {column} field={column} />
         </div>
       {/each}
-      <div class="m-1 rounded-sm border-1 bg-gray-50 px-1 drop-shadow-md">
+      <div class={filterDivClass}>
         <span>Capacity</span>
-        <RangeFilter {gridApi} column="capacityGb" placeholder="TB" />
+        <RangeFilter
+          {gridApi}
+          column="capacityGb"
+          placeholder="TB"
+          valueGetter={(value) => value * 1000}
+        />
       </div>
     {:else}
       <Spinner class="justify-items-end" />

From 3e3d2c1e619ac3d71f94e1ca2532d986d73415c5 Mon Sep 17 00:00:00 2001
From: Ykrej <stellan125@gmail.com>
Date: Fri, 20 Jun 2025 12:20:05 -0700
Subject: [PATCH 3/4] feat: added warranty days filter

---
 src/routes/components/ServerPartsGrid.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/routes/components/ServerPartsGrid.svelte b/src/routes/components/ServerPartsGrid.svelte
index d79142b..c2631ab 100644
--- a/src/routes/components/ServerPartsGrid.svelte
+++ b/src/routes/components/ServerPartsGrid.svelte
@@ -143,6 +143,15 @@
           valueGetter={(value) => value * 1000}
         />
       </div>
+      <div class={filterDivClass}>
+        <span>Warranty Months</span>
+        <RangeFilter
+          {gridApi}
+          column="warrantyDays"
+          placeholder="Months"
+          valueGetter={(value) => value * 30}
+        />
+      </div>
     {:else}
       <Spinner class="justify-items-end" />
     {/if}

From df295e413be095ed5133ac85f5aa5ecbdd1ab36b Mon Sep 17 00:00:00 2001
From: Ykrej <stellan125@gmail.com>
Date: Fri, 20 Jun 2025 12:21:20 -0700
Subject: [PATCH 4/4] refactor: updated style

---
 src/routes/components/RangeFilter.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/components/RangeFilter.svelte b/src/routes/components/RangeFilter.svelte
index eb10049..19ae376 100644
--- a/src/routes/components/RangeFilter.svelte
+++ b/src/routes/components/RangeFilter.svelte
@@ -57,19 +57,19 @@
       type="number"
       id={`${uid}-min`}
       placeholder={placeholder ?? ''}
-      class="w-12"
+      class="w-16"
       bind:value={min}
     />
-    <label for={`${uid}-min`} class="flex-grow">Minimum</label>
+    <label for={`${uid}-min`}>Minimum</label>
   </div>
   <div>
     <input
       type="number"
       id={`${uid}-max`}
       placeholder={placeholder ?? ''}
-      class="w-12"
+      class="w-16"
       bind:value={max}
     />
-    <label for={`${uid}-max`} class="flex-grow">Maximum</label>
+    <label for={`${uid}-max`}>Maximum</label>
   </div>
 </div>