Feature/range filter

src/routes/components/RangeFilter.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" generics="TData">
+  import type { GridApi } from 'ag-grid-community'
+
+  const uid = $props.id()
+
+  let {
+    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)
+
+  $effect(() => {
+    const conditions = []
+
+    if (typeof min === 'number')
+      conditions.push({
+        filterType: 'number',
+        type: 'greaterThanOrEqual',
+        filter: valueGetter(min),
+      })
+
+    if (typeof max === 'number')
+      conditions.push({
+        filterType: 'number',
+        type: 'lessThanOrEqual',
+        filter: valueGetter(max),
+      })
+
+    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-16"
+      bind:value={min}
+    />
+    <label for={`${uid}-min`}>Minimum</label>
+  </div>
+  <div>
+    <input
+      type="number"
+      id={`${uid}-max`}
+      placeholder={placeholder ?? ''}
+      class="w-16"
+      bind:value={max}
+    />
+    <label for={`${uid}-max`}>Maximum</label>
+  </div>
+</div>

src/routes/components/ServerPartsGrid.svelte

@@ -6,10 +6,14 @@
   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()
 
+  const filterDivClass =
+    'm-1 rounded-sm border-1 bg-gray-50 px-1 drop-shadow-md'
+
   let gridApi: GridApi | undefined = $state()
 
   const columnDefs: ColDef[] = [
@@ -125,11 +129,29 @@
   <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={filterDivClass}>
+        <span>Capacity</span>
+        <RangeFilter
+          {gridApi}
+          column="capacityGb"
+          placeholder="TB"
+          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}