@furystack/shades-common-components 12.4.0 → 12.6.0

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

@@ -0,0 +1,112 @@
+import { createComponent, Shade } from '@furystack/shades'
+import type { ObservableValue } from '@furystack/utils'
+import { Button } from '../../button.js'
+import { SegmentedControl } from '../../button-group.js'
+import { Icon } from '../../icons/icon.js'
+import { close as closeIcon, search as searchIcon } from '../../icons/icon-definitions.js'
+import type { FilterableFindOptions } from '../data-grid.js'
+import { filterBaseCss, filterInputCss } from './filter-styles.js'
+
+type StringOperator = '$regex' | '$startsWith' | '$endsWith' | '$eq'
+
+const operatorLabels: Record<StringOperator, string> = {
+  $regex: 'Contains',
+  $startsWith: 'Starts with',
+  $endsWith: 'Ends with',
+  $eq: 'Equals',
+}
+
+export const StringFilter = Shade<{
+  field: string
+  findOptions: ObservableValue<FilterableFindOptions>
+  onClose: () => void
+}>({
+  shadowDomName: 'data-grid-string-filter',
+  css: {
+    ...filterBaseCss,
+    '& input': filterInputCss,
+  },
+  render: ({ props, useObservable, useState }) => {
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions)
+
+    const currentFilter = findOptions.filter?.[props.field] as Record<string, string> | undefined
+    const currentOperator: StringOperator = currentFilter
+      ? ((Object.keys(currentFilter).find((k) => k in operatorLabels) as StringOperator) ?? '$regex')
+      : '$regex'
+    const currentValue = currentFilter?.[currentOperator] ?? ''
+
+    const applyFilter = (operator: StringOperator, value: string) => {
+      const filter = { ...findOptions.filter }
+      if (!value) {
+        delete filter[props.field]
+      } else {
+        filter[props.field] = { [operator]: value }
+      }
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    const clearFilter = () => {
+      const filter = { ...findOptions.filter }
+      delete filter[props.field]
+      setFindOptions({ ...findOptions, filter, skip: 0 })
+      props.onClose()
+    }
+
+    const [selectedOperator, setSelectedOperator] = useState<StringOperator>('selectedOperator', currentOperator)
+    let inputValue = currentValue
+
+    return (
+      <form
+        onsubmit={(ev: Event) => {
+          ev.preventDefault()
+          applyFilter(selectedOperator, inputValue)
+        }}
+      >
+        <div className="filter-row">
+          <SegmentedControl
+            size="small"
+            value={selectedOperator}
+            onValueChange={(v) => setSelectedOperator(v as StringOperator)}
+            options={(Object.keys(operatorLabels) as StringOperator[]).map((op) => ({
+              value: op,
+              label: operatorLabels[op],
+            }))}
+          />
+        </div>
+        <div className="filter-row">
+          <input
+            data-testid="string-filter-value"
+            type="text"
+            placeholder="Filter value..."
+            value={currentValue}
+            autofocus
+            oninput={(ev: Event) => {
+              inputValue = (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/footer.spec.tsx

@@ -1,7 +1,7 @@
 import type { FindOptions } from '@furystack/core'
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { CollectionService } from '../../services/collection-service.js'
 import { DataGridFooter, dataGridItemsPerPage } from './footer.js'
@@ -42,7 +42,7 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
       expect(footer).not.toBeNull()
@@ -61,12 +61,12 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const selects = footer?.querySelectorAll('select')
+      const rowsPerPageSelect = footer?.querySelector('.pager-section select')
 
-      expect(selects?.length).toBeGreaterThan(0)
+      expect(rowsPerPageSelect).not.toBeNull()
     })
   })
 
@@ -82,13 +82,13 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
       const selects = Array.from(footer?.querySelectorAll('select') ?? [])
       const itemsPerPageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('items per page')
+        const parent = s.closest('.pager-section')
+        return parent?.textContent?.includes('Rows per page')
       })
 
       expect(itemsPerPageSelect).toBeDefined()
@@ -97,7 +97,7 @@ describe('DataGridFooter', () => {
     })
   })
 
-  it('should show page selector when pagination is enabled', async () => {
+  it('should show Pagination component when pagination is enabled', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 100)
@@ -109,15 +109,15 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const pager = footer?.querySelector('.pager')
-      expect(pager?.textContent).toContain('Goto page')
+      const pagination = footer?.querySelector('shade-pagination')
+      expect(pagination).not.toBeNull()
     })
   })
 
-  it('should hide page selector when showing all items (Infinity)', async () => {
+  it('should hide Pagination when showing all items (Infinity)', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 50)
@@ -129,15 +129,15 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const pager = footer?.querySelector('.pager')
-      expect(pager?.textContent).not.toContain('Goto page')
+      const pagination = footer?.querySelector('shade-pagination')
+      expect(pagination).toBeNull()
     })
   })
 
-  it('should render correct number of page options based on data count and items per page', async () => {
+  it('should render page buttons in Pagination based on data count and items per page', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 100)
@@ -149,22 +149,20 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      const pageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('Goto page')
-      })
+      const pagination = footer?.querySelector('shade-pagination')
+      expect(pagination).not.toBeNull()
 
-      expect(pageSelect).toBeDefined()
-      const options = pageSelect?.querySelectorAll('option')
-      expect(options?.length).toBe(4)
+      const pageButtons = Array.from(pagination?.querySelectorAll('.pagination-item') ?? []).filter((btn) =>
+        btn.getAttribute('aria-label')?.startsWith('Go to page'),
+      )
+      expect(pageButtons.length).toBe(4)
     })
   })
 
-  it('should update findOptions when page is changed', async () => {
+  it('should update findOptions when page is changed via Pagination', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 100)
@@ -176,24 +174,19 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      const pageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('Goto page')
-      })
+      const pagination = footer?.querySelector('shade-pagination')
+      const nextButton = pagination?.querySelector('[aria-label="Go to next page"]') as HTMLButtonElement | null
 
-      expect(pageSelect).toBeDefined()
+      expect(nextButton).not.toBeNull()
+      nextButton!.click()
 
-      pageSelect!.value = '2'
-      pageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
-
-      await sleepAsync(50)
+      await flushUpdates()
 
       const updatedOptions = findOptions.getValue()
-      expect(updatedOptions.skip).toBe(20)
+      expect(updatedOptions.skip).toBe(10)
     })
   })
 
@@ -209,13 +202,13 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
       const selects = Array.from(footer?.querySelectorAll('select') ?? [])
       const itemsPerPageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('items per page')
+        const parent = s.closest('.pager-section')
+        return parent?.textContent?.includes('Rows per page')
       })
 
       expect(itemsPerPageSelect).toBeDefined()
@@ -223,7 +216,7 @@ describe('DataGridFooter', () => {
       itemsPerPageSelect!.value = '25'
       itemsPerPageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const updatedOptions = findOptions.getValue()
       expect(updatedOptions.top).toBe(25)
@@ -242,13 +235,13 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
       const selects = Array.from(footer?.querySelectorAll('select') ?? [])
       const itemsPerPageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('items per page')
+        const parent = s.closest('.pager-section')
+        return parent?.textContent?.includes('Rows per page')
       })
 
       expect(itemsPerPageSelect).toBeDefined()
@@ -256,7 +249,7 @@ describe('DataGridFooter', () => {
       itemsPerPageSelect!.value = '25'
       itemsPerPageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const updatedOptions = findOptions.getValue()
       expect(updatedOptions.top).toBe(25)
@@ -264,7 +257,7 @@ describe('DataGridFooter', () => {
     })
   })
 
-  it('should select the correct current page in the page selector', async () => {
+  it('should highlight the correct current page in Pagination', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const service = createService([], 100)
@@ -276,17 +269,14 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
-      const selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      const pageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('Goto page')
-      })
+      const pagination = footer?.querySelector('shade-pagination')
+      const selectedButton = pagination?.querySelector('.pagination-item[data-selected]')
 
-      expect(pageSelect).toBeDefined()
-      expect(pageSelect?.value).toBe('3')
+      expect(selectedButton).not.toBeNull()
+      expect(selectedButton?.textContent?.trim()).toBe('4')
     })
   })
 
@@ -302,13 +292,13 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const footer = document.querySelector('shade-data-grid-footer')
       const selects = Array.from(footer?.querySelectorAll('select') ?? [])
       const itemsPerPageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('items per page')
+        const parent = s.closest('.pager-section')
+        return parent?.textContent?.includes('Rows per page')
       })
 
       expect(itemsPerPageSelect).toBeDefined()
@@ -319,7 +309,7 @@ describe('DataGridFooter', () => {
   it('should react to data count changes', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
-      const service = createService([], 50)
+      const service = createService([], 30)
       const findOptions = createFindOptions(10, 0)
 
       initializeShadeRoot({
@@ -328,29 +318,95 @@ describe('DataGridFooter', () => {
         jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       let footer = document.querySelector('shade-data-grid-footer')
-      let selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      let pageSelect = selects.find((s) => s.parentElement?.textContent?.includes('Goto page'))
-      let pageOptions = pageSelect?.querySelectorAll('option')
+      let pagination = footer?.querySelector('shade-pagination')
+      let pageButtons = Array.from(pagination?.querySelectorAll('.pagination-item') ?? []).filter((btn) =>
+        btn.getAttribute('aria-label')?.startsWith('Go to page'),
+      )
+      expect(pageButtons.length).toBe(3)
 
-      expect(pageOptions?.length).toBe(5)
+      service.data.setValue({ entries: [], count: 50 })
 
-      service.data.setValue({ entries: [], count: 100 })
-
-      await sleepAsync(50)
+      await flushUpdates()
 
       footer = document.querySelector('shade-data-grid-footer')
-      selects = Array.from(footer?.querySelectorAll('select') ?? [])
-      pageSelect = selects.find((s) => s.parentElement?.textContent?.includes('Goto page'))
-      pageOptions = pageSelect?.querySelectorAll('option')
-
-      expect(pageOptions?.length).toBe(10)
+      pagination = footer?.querySelector('shade-pagination')
+      pageButtons = Array.from(pagination?.querySelectorAll('.pagination-item') ?? []).filter((btn) =>
+        btn.getAttribute('aria-label')?.startsWith('Go to page'),
+      )
+      expect(pageButtons.length).toBe(5)
     })
   })
 
   it('should export dataGridItemsPerPage constant', () => {
     expect(dataGridItemsPerPage).toEqual([10, 20, 25, 50, 100, Infinity])
   })
+
+  it('should render custom paginationOptions', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService()
+      const findOptions = createFindOptions()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} paginationOptions={[5, 15, 30]} />,
+      })
+
+      await flushUpdates()
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const itemsPerPageSelect = footer?.querySelector('.pager-section select')
+
+      expect(itemsPerPageSelect).not.toBeNull()
+      const options = itemsPerPageSelect?.querySelectorAll('option')
+      expect(options?.length).toBe(3)
+      expect(options?.[0]?.textContent).toBe('5')
+      expect(options?.[1]?.textContent).toBe('15')
+      expect(options?.[2]?.textContent).toBe('30')
+    })
+  })
+
+  it('should hide the rows-per-page selector when only one paginationOption is provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService([], 50)
+      const findOptions = createFindOptions(10, 0)
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} paginationOptions={[10]} />,
+      })
+
+      await flushUpdates()
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const pagerSection = footer?.querySelector('.pager-section')
+      expect(pagerSection).toBeNull()
+    })
+  })
+
+  it('should use default dataGridItemsPerPage when paginationOptions is not provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const service = createService()
+      const findOptions = createFindOptions()
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <DataGridFooter service={service} findOptions={findOptions} />,
+      })
+
+      await flushUpdates()
+
+      const footer = document.querySelector('shade-data-grid-footer')
+      const options = footer?.querySelectorAll('.pager-section select option')
+      expect(options?.length).toBe(dataGridItemsPerPage.length)
+    })
+  })
 })

package/src/components/data-grid/footer.tsx

@@ -3,12 +3,14 @@ import { Shade, createComponent } from '@furystack/shades'
 import type { ObservableValue } from '@furystack/utils'
 import type { CollectionService } from '../../services/collection-service.js'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import { Pagination } from '../pagination.js'
 
 export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
 export const DataGridFooter: <T>(props: {
   service: CollectionService<T>
   findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>
+  paginationOptions?: number[]
 }) => JSX.Element = Shade({
   shadowDomName: 'shade-data-grid-footer',
   css: {
@@ -20,15 +22,28 @@ export const DataGridFooter: <T>(props: {
       bottom: '0',
       display: 'flex',
       justifyContent: 'flex-end',
-      padding: '1em',
+      padding: '8px 12px',
       alignItems: 'center',
+      gap: '16px',
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+    '& .pager-section': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
     },
     '& select': {
-      margin: '0 1em',
+      padding: '4px 8px',
+      borderRadius: cssVariableTheme.shape.borderRadius.sm,
+      border: `1px solid ${cssVariableTheme.divider}`,
+      background: cssVariableTheme.background.default,
+      color: cssVariableTheme.text.primary,
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      cursor: 'pointer',
     },
   },
   render: ({ props, useObservable }) => {
-    const { service, findOptions } = props
+    const { service, findOptions, paginationOptions = dataGridItemsPerPage } = props
     const [currentData] = useObservable('dataUpdater', service.data)
     const [currentOptions, setCurrentOptions] = useObservable('optionsUpdater', findOptions, {
       filter: (newValue, oldValue) => {
@@ -41,49 +56,41 @@ export const DataGridFooter: <T>(props: {
     const currentPage = Math.ceil(skip) / (top || 1)
     const currentEntriesPerPage = top
 
-    const pages = new Array(Math.ceil(currentData.count / (currentOptions.top || Infinity)))
-      .fill(0)
-      .map((_, index) => index)
+    const pageCount = Math.ceil(currentData.count / (currentOptions.top || Infinity))
 
     return (
       <div className="pager">
-        {currentEntriesPerPage !== Infinity && (
-          <div>
-            Goto page
+        {currentEntriesPerPage !== Infinity && pageCount > 1 && (
+          <Pagination
+            count={pageCount}
+            page={currentPage + 1}
+            size="small"
+            onPageChange={(newPage) => {
+              setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * (newPage - 1) })
+            }}
+          />
+        )}
+        {paginationOptions.length > 1 && (
+          <div className="pager-section">
+            <span>Rows per page</span>
             <select
               onchange={(ev) => {
-                const value = parseInt((ev.target as HTMLInputElement).value, 10)
-                setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * value })
+                const value = parseInt((ev.currentTarget as HTMLInputElement).value, 10)
+                setCurrentOptions({
+                  ...currentOptions,
+                  top: value,
+                  skip: currentPage * value,
+                })
               }}
             >
-              {pages.map((index) => (
-                <option value={index.toString()} selected={currentPage === index}>
-                  {(index + 1).toString()}
+              {paginationOptions.map((no) => (
+                <option value={no.toString()} selected={no === currentEntriesPerPage}>
+                  {no === Infinity ? 'All' : no.toString()}
                 </option>
               ))}
             </select>
           </div>
         )}
-        <div>
-          Show
-          <select
-            onchange={(ev) => {
-              const value = parseInt((ev.currentTarget as HTMLInputElement).value, 10)
-              setCurrentOptions({
-                ...currentOptions,
-                top: value,
-                skip: currentPage * value,
-              })
-            }}
-          >
-            {dataGridItemsPerPage.map((no) => (
-              <option value={no.toString()} selected={no === currentEntriesPerPage}>
-                {no.toString()}
-              </option>
-            ))}
-          </select>
-          items per page
-        </div>
       </div>
     )
   },