@furystack/shades-common-components 12.3.0 → 12.5.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,7 +61,7 @@ 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')
@@ -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()
@@ -109,11 +109,11 @@ 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')
+      expect(pager?.textContent).toContain('Page')
     })
   })
 
@@ -129,11 +129,13 @@ 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 sections = Array.from(pager?.querySelectorAll('.pager-section') ?? [])
+      const pageSection = sections.find((s) => s.textContent?.includes('Page'))
+      expect(pageSection).toBeUndefined()
     })
   })
 
@@ -149,13 +151,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 pageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('Goto page')
+        const parent = s.closest('.pager-section')
+        return parent?.textContent?.includes('Page')
       })
 
       expect(pageSelect).toBeDefined()
@@ -176,13 +178,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 pageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('Goto page')
+        const parent = s.closest('.pager-section')
+        return parent?.textContent?.includes('Page')
       })
 
       expect(pageSelect).toBeDefined()
@@ -190,7 +192,7 @@ describe('DataGridFooter', () => {
       pageSelect!.value = '2'
       pageSelect!.dispatchEvent(new Event('change', { bubbles: true }))
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const updatedOptions = findOptions.getValue()
       expect(updatedOptions.skip).toBe(20)
@@ -209,13 +211,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 +225,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 +244,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 +258,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)
@@ -276,13 +278,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 pageSelect = selects.find((s) => {
-        const parent = s.parentElement
-        return parent?.textContent?.includes('Goto page')
+        const parent = s.closest('.pager-section')
+        return parent?.textContent?.includes('Page')
       })
 
       expect(pageSelect).toBeDefined()
@@ -302,13 +304,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()
@@ -328,22 +330,22 @@ 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 pageSelect = selects.find((s) => s.closest('.pager-section')?.textContent?.includes('Page'))
       let pageOptions = pageSelect?.querySelectorAll('option')
 
       expect(pageOptions?.length).toBe(5)
 
       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'))
+      pageSelect = selects.find((s) => s.closest('.pager-section')?.textContent?.includes('Page'))
       pageOptions = pageSelect?.querySelectorAll('option')
 
       expect(pageOptions?.length).toBe(10)

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

@@ -20,11 +20,24 @@ 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 }) => {
@@ -48,8 +61,8 @@ export const DataGridFooter: <T>(props: {
     return (
       <div className="pager">
         {currentEntriesPerPage !== Infinity && (
-          <div>
-            Goto page
+          <div className="pager-section">
+            <span>Page</span>
             <select
               onchange={(ev) => {
                 const value = parseInt((ev.target as HTMLInputElement).value, 10)
@@ -62,10 +75,11 @@ export const DataGridFooter: <T>(props: {
                 </option>
               ))}
             </select>
+            <span>of {pages.length}</span>
           </div>
         )}
-        <div>
-          Show
+        <div className="pager-section">
+          <span>Rows per page</span>
           <select
             onchange={(ev) => {
               const value = parseInt((ev.currentTarget as HTMLInputElement).value, 10)
@@ -78,11 +92,10 @@ export const DataGridFooter: <T>(props: {
           >
             {dataGridItemsPerPage.map((no) => (
               <option value={no.toString()} selected={no === currentEntriesPerPage}>
-                {no.toString()}
+                {no === Infinity ? 'All' : no.toString()}
               </option>
             ))}
           </select>
-          items per page
         </div>
       </div>
     )