@furystack/shades-common-components 12.4.0 → 12.5.0

package/src/components/data-grid/filters/date-filter.spec.tsx

@@ -0,0 +1,181 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { FilterableFindOptions } from '../data-grid.js'
+import { DateFilter } from './date-filter.js'
+
+describe('DateFilter', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): ObservableValue<FilterableFindOptions> => {
+    return new ObservableValue<FilterableFindOptions>(options)
+  }
+
+  const renderDateFilter = async (
+    findOptions: ObservableValue<FilterableFindOptions>,
+    field = 'createdAt',
+    onClose = vi.fn(),
+  ) => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <DateFilter field={field} findOptions={findOptions} onClose={onClose} />,
+    })
+    await flushUpdates()
+    return { injector, onClose }
+  }
+
+  it('should render mode segmented control and date input', async () => {
+    const findOptions = createFindOptions()
+    await usingAsync((await renderDateFilter(findOptions)).injector, async () => {
+      const control = document.querySelector('shade-segmented-control')
+      expect(control).not.toBeNull()
+
+      const input = document.querySelector('[data-testid="date-filter-value"]')
+      expect(input).not.toBeNull()
+    })
+  })
+
+  it('should apply "before" filter on submit', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderDateFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="date-filter-value"]') as HTMLInputElement
+      input.value = '2025-06-15T10:30'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      const filter = findOptions.getValue().filter?.createdAt as Record<string, Date>
+      expect(filter.$lt).toBeInstanceOf(Date)
+      expect(filter.$lt.toISOString()).toBe(new Date('2025-06-15T10:30').toISOString())
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should apply "after" filter when mode is changed', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderDateFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const afterButton = document.querySelector(
+        'shade-segmented-control button[data-value="after"]',
+      ) as HTMLButtonElement
+      afterButton?.click()
+      await flushUpdates()
+
+      const input = document.querySelector('[data-testid="date-filter-value"]') as HTMLInputElement
+      input.value = '2025-01-01T00:00'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      const filter = findOptions.getValue().filter?.createdAt as Record<string, Date>
+      expect(filter.$gt).toBeInstanceOf(Date)
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should apply "between" filter with both dates', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderDateFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const betweenButton = document.querySelector(
+        'shade-segmented-control button[data-value="between"]',
+      ) as HTMLButtonElement
+      betweenButton?.click()
+      await flushUpdates()
+
+      const startInput = document.querySelector('[data-testid="date-filter-value"]') as HTMLInputElement
+      startInput.value = '2025-01-01T00:00'
+      startInput.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const endInput = document.querySelector('[data-testid="date-filter-value-end"]') as HTMLInputElement
+      endInput.value = '2025-12-31T23:59'
+      endInput.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      const filter = findOptions.getValue().filter?.createdAt as Record<string, Date>
+      expect(filter.$gte).toBeInstanceOf(Date)
+      expect(filter.$lte).toBeInstanceOf(Date)
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should clear filter when Clear button is clicked', async () => {
+    const findOptions = createFindOptions({ filter: { createdAt: { $lt: new Date() } } })
+    const { injector, onClose } = await renderDateFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
+      clearButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter?.createdAt).toBeUndefined()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should remove filter when submitting empty date', async () => {
+    const findOptions = createFindOptions({ filter: { createdAt: { $lt: new Date() } } })
+    const { injector, onClose } = await renderDateFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="date-filter-value"]') as HTMLInputElement
+      input.value = ''
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter?.createdAt).toBeUndefined()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should preserve filters on other fields', async () => {
+    const findOptions = createFindOptions({
+      filter: { createdAt: { $lt: new Date() }, name: { $regex: 'keep' } },
+    })
+    const { injector } = await renderDateFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
+      clearButton?.click()
+      await flushUpdates()
+
+      const updatedFilter = findOptions.getValue().filter
+      expect(updatedFilter?.createdAt).toBeUndefined()
+      expect(updatedFilter?.name).toEqual({ $regex: 'keep' })
+    })
+  })
+
+  it('should reset skip to 0 when applying filter', async () => {
+    const findOptions = createFindOptions({ skip: 20 })
+    const { injector } = await renderDateFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const input = document.querySelector('[data-testid="date-filter-value"]') as HTMLInputElement
+      input.value = '2025-06-15T10:30'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+
+      const form = document.querySelector('form') as HTMLFormElement
+      form.dispatchEvent(new Event('submit', { bubbles: true }))
+      await flushUpdates()
+
+      expect(findOptions.getValue().skip).toBe(0)
+    })
+  })
+})

package/src/components/data-grid/filters/date-filter.tsx

@@ -0,0 +1,162 @@
+import { createComponent, Shade } from '@furystack/shades'
+import type { ObservableValue } from '@furystack/utils'
+import { SegmentedControl } from '../../button-group.js'
+import { Button } from '../../button.js'
+import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js'
+import { Icon } from '../../icons/icon.js'
+import type { FilterableFindOptions } from '../data-grid.js'
+import { filterBaseCss, filterInputCss } from './filter-styles.js'
+
+type DateMode = 'before' | 'after' | 'between'
+
+export const DateFilter = Shade<{
+  field: string
+  findOptions: ObservableValue<FilterableFindOptions>
+  onClose: () => void
+}>({
+  shadowDomName: 'data-grid-date-filter',
+  css: {
+    ...filterBaseCss,
+    '& input[type="datetime-local"]': filterInputCss,
+  },
+  render: ({ props, useObservable, useState }) => {
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+
+    const currentFilter = findOptions.filter?.[props.field] as
+      | { $lt?: Date; $gt?: Date; $gte?: Date; $lte?: Date }
+      | undefined
+
+    const detectMode = (): DateMode => {
+      if (currentFilter?.$gte && currentFilter?.$lte) return 'between'
+      if (currentFilter?.$lt) return 'before'
+      if (currentFilter?.$gt) return 'after'
+      return 'before'
+    }
+
+    const toLocalDateTimeString = (date?: Date) => {
+      if (!date) return ''
+      const d = date instanceof Date ? date : new Date(date)
+      if (isNaN(d.getTime())) return ''
+      const pad = (n: number) => n.toString().padStart(2, '0')
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+    }
+
+    const getInitialValue = (): string => {
+      if (currentFilter?.$gte) return toLocalDateTimeString(currentFilter.$gte)
+      if (currentFilter?.$lt) return toLocalDateTimeString(currentFilter.$lt)
+      if (currentFilter?.$gt) return toLocalDateTimeString(currentFilter.$gt)
+      return ''
+    }
+
+    const getInitialSecondValue = (): string => {
+      if (currentFilter?.$lte) return toLocalDateTimeString(currentFilter.$lte)
+      return ''
+    }
+
+    const [selectedMode, setSelectedMode] = useState<DateMode>('selectedMode', detectMode())
+    let dateValue = getInitialValue()
+    let secondDateValue = getInitialSecondValue()
+
+    const applyFilter = () => {
+      const filter = { ...findOptions.filter }
+      if (!dateValue) {
+        delete filter[props.field]
+        setFindOptions({ ...findOptions, filter, skip: 0 })
+        props.onClose()
+        return
+      }
+
+      let filterValue: Record<string, Date>
+      switch (selectedMode) {
+        case 'before':
+          filterValue = { $lt: new Date(dateValue) }
+          break
+        case 'after':
+          filterValue = { $gt: new Date(dateValue) }
+          break
+        case 'between':
+          filterValue = {
+            $gte: new Date(dateValue),
+            ...(secondDateValue ? { $lte: new Date(secondDateValue) } : {}),
+          }
+          break
+        default:
+          throw new Error(`Invalid date mode: ${selectedMode as unknown as string}`)
+      }
+
+      filter[props.field] = filterValue
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    const clearFilter = () => {
+      const filter = { ...findOptions.filter }
+      delete filter[props.field]
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    return (
+      <form
+        onsubmit={(ev: Event) => {
+          ev.preventDefault()
+          applyFilter()
+        }}
+      >
+        <div className="filter-row">
+          <SegmentedControl
+            size="small"
+            value={selectedMode}
+            onValueChange={(v) => setSelectedMode(v as DateMode)}
+            options={[
+              { value: 'before', label: 'Before' },
+              { value: 'after', label: 'After' },
+              { value: 'between', label: 'Between' },
+            ]}
+          />
+        </div>
+        <div className="filter-row">
+          <input
+            data-testid="date-filter-value"
+            type="datetime-local"
+            value={dateValue}
+            autofocus
+            oninput={(ev: Event) => {
+              dateValue = (ev.target as HTMLInputElement).value
+            }}
+          />
+        </div>
+        <div className="filter-row" style={{ display: selectedMode === 'between' ? 'flex' : 'none' }}>
+          <input
+            data-testid="date-filter-value-end"
+            type="datetime-local"
+            value={secondDateValue}
+            oninput={(ev: Event) => {
+              secondDateValue = (ev.target as HTMLInputElement).value
+            }}
+          />
+        </div>
+        <div className="filter-actions">
+          <Button
+            type="button"
+            variant="outlined"
+            size="small"
+            onclick={clearFilter}
+            startIcon={<Icon icon={closeIcon} size={14} />}
+          >
+            Clear
+          </Button>
+          <Button
+            type="submit"
+            variant="outlined"
+            size="small"
+            color="primary"
+            startIcon={<Icon icon={searchIcon} size={14} />}
+          >
+            Apply
+          </Button>
+        </div>
+      </form>
+    )
+  },
+})

package/src/components/data-grid/filters/enum-filter.spec.tsx

@@ -0,0 +1,168 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { FilterableFindOptions } from '../data-grid.js'
+import { EnumFilter } from './enum-filter.js'
+
+const enumValues = [
+  { label: 'Admin', value: 'admin' },
+  { label: 'User', value: 'user' },
+  { label: 'Guest', value: 'guest' },
+]
+
+describe('EnumFilter', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const createFindOptions = (options: Partial<FilterableFindOptions> = {}): ObservableValue<FilterableFindOptions> => {
+    return new ObservableValue<FilterableFindOptions>(options)
+  }
+
+  const renderEnumFilter = async (
+    findOptions: ObservableValue<FilterableFindOptions>,
+    field = 'role',
+    values = enumValues,
+    onClose = vi.fn(),
+  ) => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <EnumFilter field={field} values={values} findOptions={findOptions} onClose={onClose} />,
+    })
+    await flushUpdates()
+    return { injector, onClose }
+  }
+
+  it('should render mode control and checkboxes for each value', async () => {
+    const findOptions = createFindOptions()
+    await usingAsync((await renderEnumFilter(findOptions)).injector, async () => {
+      const control = document.querySelector('shade-segmented-control')
+      expect(control).not.toBeNull()
+
+      const checkboxes = document.querySelectorAll('shade-checkbox')
+      expect(checkboxes.length).toBe(3)
+    })
+  })
+
+  it('should apply $in filter when values are selected and Apply is clicked', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderEnumFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]')
+      const adminCheckbox = checkboxes[0] as HTMLInputElement
+      adminCheckbox.checked = true
+      adminCheckbox.dispatchEvent(new Event('change', { bubbles: true }))
+
+      const applyButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Apply')
+      applyButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ role: { $in: ['admin'] } })
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should apply $nin filter when exclude mode is selected', async () => {
+    const findOptions = createFindOptions()
+    const { injector, onClose } = await renderEnumFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const excludeButton = document.querySelector(
+        'shade-segmented-control button[data-value="exclude"]',
+      ) as HTMLButtonElement
+      excludeButton?.click()
+      await flushUpdates()
+
+      const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]')
+      const guestCheckbox = checkboxes[2] as HTMLInputElement
+      guestCheckbox.checked = true
+      guestCheckbox.dispatchEvent(new Event('change', { bubbles: true }))
+
+      const applyButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Apply')
+      applyButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter).toEqual({ role: { $nin: ['guest'] } })
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should remove filter when no values are selected', async () => {
+    const findOptions = createFindOptions({ filter: { role: { $in: ['admin'] } } })
+    const { injector, onClose } = await renderEnumFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]')
+      const adminCheckbox = checkboxes[0] as HTMLInputElement
+      adminCheckbox.checked = false
+      adminCheckbox.dispatchEvent(new Event('change', { bubbles: true }))
+
+      const applyButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Apply')
+      applyButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter?.role).toBeUndefined()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should clear filter when Clear button is clicked', async () => {
+    const findOptions = createFindOptions({ filter: { role: { $in: ['admin', 'user'] } } })
+    const { injector, onClose } = await renderEnumFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
+      clearButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().filter?.role).toBeUndefined()
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should preserve filters on other fields', async () => {
+    const findOptions = createFindOptions({ filter: { role: { $in: ['admin'] }, name: { $regex: 'keep' } } })
+    const { injector } = await renderEnumFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const clearButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Clear')
+      clearButton?.click()
+      await flushUpdates()
+
+      const updatedFilter = findOptions.getValue().filter
+      expect(updatedFilter?.role).toBeUndefined()
+      expect(updatedFilter?.name).toEqual({ $regex: 'keep' })
+    })
+  })
+
+  it('should reset skip to 0 when applying filter', async () => {
+    const findOptions = createFindOptions({ skip: 20 })
+    const { injector } = await renderEnumFilter(findOptions)
+    await usingAsync(injector, async () => {
+      const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]')
+      const checkbox = checkboxes[0] as HTMLInputElement
+      checkbox.checked = true
+      checkbox.dispatchEvent(new Event('change', { bubbles: true }))
+
+      const applyButton = Array.from(document.querySelectorAll('button')).find((b) => b.textContent?.trim() === 'Apply')
+      applyButton?.click()
+      await flushUpdates()
+
+      expect(findOptions.getValue().skip).toBe(0)
+    })
+  })
+
+  it('should pre-check existing $in filter values', async () => {
+    const findOptions = createFindOptions({ filter: { role: { $in: ['admin', 'guest'] } } })
+    await usingAsync((await renderEnumFilter(findOptions)).injector, async () => {
+      const checkboxes = document.querySelectorAll('shade-checkbox input[type="checkbox"]')
+      expect((checkboxes[0] as HTMLInputElement).checked).toBe(true)
+      expect((checkboxes[1] as HTMLInputElement).checked).toBe(false)
+      expect((checkboxes[2] as HTMLInputElement).checked).toBe(true)
+    })
+  })
+})

package/src/components/data-grid/filters/enum-filter.tsx

@@ -0,0 +1,119 @@
+import { createComponent, Shade } from '@furystack/shades'
+import type { ObservableValue } from '@furystack/utils'
+import { SegmentedControl } from '../../button-group.js'
+import { Button } from '../../button.js'
+import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js'
+import { Icon } from '../../icons/icon.js'
+import { Checkbox } from '../../inputs/checkbox.js'
+import type { FilterableFindOptions } from '../data-grid.js'
+import { filterBaseCss } from './filter-styles.js'
+
+type EnumMode = 'include' | 'exclude'
+
+export const EnumFilter = Shade<{
+  field: string
+  values: Array<{ label: string; value: string }>
+  findOptions: ObservableValue<FilterableFindOptions>
+  onClose: () => void
+}>({
+  shadowDomName: 'data-grid-enum-filter',
+  css: {
+    ...filterBaseCss,
+    '& .filter-mode': {
+      marginBottom: '8px',
+    },
+    '& .filter-checkboxes': {
+      maxHeight: '200px',
+      overflowY: 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2px',
+      marginBottom: '8px',
+    },
+    '& shade-checkbox': {
+      marginBottom: '0',
+    },
+  },
+  render: ({ props, useObservable, useState }) => {
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+
+    const currentFilter = findOptions.filter?.[props.field] as { $in?: string[]; $nin?: string[] } | undefined
+    const isExcludeMode = !!currentFilter?.$nin
+    const currentSelected = currentFilter?.$in ?? currentFilter?.$nin ?? []
+
+    const [mode, setMode] = useState<EnumMode>('mode', isExcludeMode ? 'exclude' : 'include')
+    const selected = new Set<string>(currentSelected)
+
+    const applyFilter = () => {
+      const filter = { ...findOptions.filter }
+      if (selected.size === 0) {
+        delete filter[props.field]
+      } else {
+        const operator = mode === 'include' ? '$in' : '$nin'
+        filter[props.field] = { [operator]: Array.from(selected) }
+      }
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    const clearFilter = () => {
+      const filter = { ...findOptions.filter }
+      delete filter[props.field]
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    return (
+      <div>
+        <div className="filter-mode">
+          <SegmentedControl
+            size="small"
+            value={mode}
+            onValueChange={(v) => setMode(v as EnumMode)}
+            options={[
+              { value: 'include', label: 'Include' },
+              { value: 'exclude', label: 'Exclude' },
+            ]}
+          />
+        </div>
+        <div className="filter-checkboxes">
+          {props.values.map(({ label, value }) => (
+            <Checkbox
+              checked={selected.has(value)}
+              labelTitle={label}
+              onchange={(ev: Event) => {
+                const isChecked = (ev.target as HTMLInputElement).checked
+                if (isChecked) {
+                  selected.add(value)
+                } else {
+                  selected.delete(value)
+                }
+              }}
+            />
+          ))}
+        </div>
+        <div className="filter-actions">
+          <Button
+            type="button"
+            variant="outlined"
+            size="small"
+            onclick={clearFilter}
+            startIcon={<Icon icon={closeIcon} size={14} />}
+          >
+            Clear
+          </Button>
+          <Button
+            type="button"
+            variant="outlined"
+            size="small"
+            color="primary"
+            onclick={applyFilter}
+            startIcon={<Icon icon={searchIcon} size={14} />}
+          >
+            Apply
+          </Button>
+        </div>
+      </div>
+    )
+  },
+})