@furystack/shades-common-components 7.0.0 → 8.0.1

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

@@ -1,33 +1,33 @@
-import type { FindOptions } from '@furystack/core'
+import type { FilterType, FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import type { CollectionService } from '../../services/collection-service.js'
 import { Input } from '../inputs/input.js'
 import { Form } from '../form.js'
 import { Button } from '../button.js'
-import { ObservableValue } from '@furystack/utils'
+import { ObservableValue, sleepAsync } from '@furystack/utils'
 import { collapse, expand } from '../animations.js'
 
 export interface DataGridHeaderProps<T, K extends keyof T> {
-  collectionService: CollectionService<T>
   field: K
+  findOptions: ObservableValue<FindOptions<T, K[]>>
 }
 
-export interface DataGridHeaderState<T> {
-  querySettings: FindOptions<T, any>
+export interface DataGridHeaderState<T, K extends keyof T> {
+  findOptions: FindOptions<T, K[]>
   isSearchOpened: boolean
   updateSearchValue: (value: string) => void
 }
 
-export const OrderButton = Shade<{ collectionService: CollectionService<any>; field: string }>({
+export const OrderButton = Shade<{
+  field: string
+  findOptions: ObservableValue<FindOptions<any, any[]>>
+}>({
   shadowDomName: 'data-grid-order-button',
   render: ({ props, useObservable }) => {
-    const [currentQuerySettings, setQuerySettings] = useObservable(
-      'currentQuerySettings',
-      props.collectionService.querySettings,
-    )
-    const currentOrder = Object.keys(currentQuerySettings.order || {})[0]
-    const currentOrderDirection = Object.values(currentQuerySettings.order || {})[0]
+    const [findOptions, onFindOptionsChange] = useObservable('findOptions', props.findOptions, {})
+
+    const currentOrder = Object.keys(findOptions.order || {})[0]
+    const currentOrderDirection = Object.values(findOptions.order || {})[0]
     return (
       <Button
         title="Change order"
@@ -46,8 +46,8 @@ export const OrderButton = Shade<{ collectionService: CollectionService<any>; fi
             newDirection = currentOrderDirection === 'ASC' ? 'DESC' : 'ASC'
           }
           newOrder[props.field] = newDirection
-          setQuerySettings({
-            ...currentQuerySettings,
+          onFindOptionsChange({
+            ...findOptions,
             order: newOrder,
           })
         }}
@@ -58,22 +58,21 @@ export const OrderButton = Shade<{ collectionService: CollectionService<any>; fi
   },
 })
 
-const SearchButton = Shade<{ service: CollectionService<any>; fieldName: string; onclick: () => void }>({
+const SearchButton = Shade<{
+  fieldName: string
+  onclick: () => void
+  findOptions: ObservableValue<FindOptions<any, any[]>>
+}>({
   shadowDomName: 'data-grid-search-button',
-  render: ({ props, useObservable, element }) => {
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, {
-      onChange: (currentQueryState) => {
-        const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
-
-        const button = element.querySelector('button') as HTMLInputElement
-        button.innerHTML = currentValue ? '🔍' : '🔎'
-        button.style.textShadow = currentValue
-          ? '1px 1px 20px rgba(235,225,45,0.9), 1px 1px 12px rgba(235,225,45,0.9), 0px 0px 3px  rgba(255,200,145,0.6)'
-          : 'none'
+  render: ({ props, useObservable }) => {
+    const [findOptions] = useObservable('currentValue', props.findOptions, {
+      filter: (newValue) => {
+        return !!newValue.filter?.[props.fieldName]
       },
     })
 
-    const filterValue = (queryState.filter as any)?.[props.fieldName]?.$regex || ''
+    const filterValue =
+      (findOptions.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>)?.$regex || ''
 
     return (
       <Button
@@ -95,20 +94,23 @@ const SearchButton = Shade<{ service: CollectionService<any>; fieldName: string;
 const SearchForm = Shade<{
   onSubmit: (newValue: string) => void
   onClear: () => void
-  service: CollectionService<any>
   fieldName: string
+  findOptions: ObservableValue<FindOptions<any, any[]>>
 }>({
   shadowDomName: 'data-grid-search-form',
-  render: ({ props, useObservable, element }) => {
+  render: ({ props, useObservable }) => {
     type SearchSubmitType = { searchValue: string }
 
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, {
-      onChange: (currentQueryState) => {
-        const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
-        ;(element.querySelector('input') as HTMLInputElement).value = currentValue
+    const [findOptions] = useObservable('currentValue', props.findOptions, {
+      filter: (newValue, lastValue) => {
+        const newFilter = newValue.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>
+        const lastFilter = lastValue.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>
+        return newFilter?.$regex !== lastFilter?.$regex
       },
     })
 
+    const currentValue = (findOptions.filter?.[props.fieldName] as any)?.$regex || ''
+
     return (
       <Form<SearchSubmitType>
         className="search-form"
@@ -131,7 +133,7 @@ const SearchForm = Shade<{
           autofocus
           labelTitle={`${props.fieldName}`}
           name="searchValue"
-          value={(queryState.filter?.[props.fieldName] as any)?.$regex || ''}
+          value={currentValue}
           labelProps={{
             style: { padding: '0px 2em' },
           }}
@@ -140,7 +142,9 @@ const SearchForm = Shade<{
           <Button
             type="reset"
             style={{ padding: '4px', margin: '0' }}
-            onclick={() => {
+            onclick={(ev) => {
+              ev.preventDefault()
+              ev.stopPropagation()
               props.onClear()
             }}
           >
@@ -158,6 +162,7 @@ const SearchForm = Shade<{
 export const DataGridHeader: <T, K extends keyof T>(
   props: DataGridHeaderProps<T, K>,
   children: ChildrenList,
+  findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>,
 ) => JSX.Element<any> = Shade<DataGridHeaderProps<any, any>>({
   shadowDomName: 'data-grid-header',
   render: ({ props, element, useObservable }) => {
@@ -170,25 +175,34 @@ export const DataGridHeader: <T, K extends keyof T>(
           expand(headerContent)
         } else {
           searchForm.style.display = 'flex'
-          expand(searchForm).then(() => searchForm.querySelector('input')?.focus())
+          expand(searchForm).then(async () => {
+            await sleepAsync(100)
+            searchForm.querySelector('input')?.focus()
+          })
           collapse(headerContent)
         }
       },
     })
+
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions, {
+      filter: (newValue, oldValue) => {
+        return newValue.filter?.[props.field] !== oldValue.filter?.[props.field]
+      },
+    })
+
     const updateSearchValue = (value?: string) => {
-      const currentSettings = props.collectionService.querySettings.getValue()
       if (value) {
         const newSettings: FindOptions<unknown, any> = {
-          ...currentSettings,
+          ...findOptions,
           filter: {
-            ...currentSettings.filter,
+            ...findOptions.filter,
             [props.field]: { $regex: value },
           },
         }
-        props.collectionService.querySettings.setValue(newSettings)
+        setFindOptions(newSettings)
       } else {
-        const { [props.field]: _, ...newFilter } = currentSettings.filter || {}
-        props.collectionService.querySettings.setValue({ ...currentSettings, filter: newFilter })
+        const { [props.field]: _, ...newFilter } = findOptions.filter || {}
+        setFindOptions({ ...findOptions, filter: newFilter })
       }
 
       setIsSearchOpened(false)
@@ -199,8 +213,8 @@ export const DataGridHeader: <T, K extends keyof T>(
         <SearchForm
           onSubmit={updateSearchValue}
           onClear={updateSearchValue}
-          service={props.collectionService}
           fieldName={props.field}
+          findOptions={props.findOptions}
         />
         <div
           className="header-content"
@@ -223,11 +237,11 @@ export const DataGridHeader: <T, K extends keyof T>(
               onclick={() => {
                 setIsSearchOpened(true)
               }}
-              service={props.collectionService}
+              findOptions={props.findOptions}
               fieldName={props.field}
             />
 
-            <OrderButton collectionService={props.collectionService} field={props.field} />
+            <OrderButton field={props.field} findOptions={props.findOptions} />
           </div>
         </div>
       </>

package/src/services/click-away-service.spec.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from 'vitest'
+import { ClickAwayService } from './click-away-service.js'
+
+describe('ClickAwayService', () => {
+  it('Should be constructed and disposed', () => {
+    const service = new ClickAwayService(document.createElement('div'), () => {})
+    service.dispose()
+  })
+
+  it('Should call onClickAway when clicking outside the element', () => {
+    const onClickAway = vi.fn()
+    const div = document.createElement('div')
+    const service = new ClickAwayService(div, onClickAway)
+
+    document.body.appendChild(div)
+    document.body.click()
+
+    expect(onClickAway).toBeCalled()
+
+    service.dispose()
+  })
+
+  it('Should not call onClickAway when clicking inside the element', () => {
+    const onClickAway = vi.fn()
+    const div = document.createElement('div')
+    const service = new ClickAwayService(div, onClickAway)
+
+    document.body.appendChild(div)
+    div.click()
+
+    expect(onClickAway).not.toBeCalled()
+
+    service.dispose()
+  })
+})

package/src/services/collection-service.spec.ts

@@ -7,31 +7,25 @@ const testEntries = [{ foo: 1 }, { foo: 2 }, { foo: 3 }]
 describe('CollectionService', () => {
   describe('Selection', () => {
     it('Should add and remove selection', async () => {
-      await usingAsync(
-        new CollectionService({
-          defaultSettings: {},
-          loader: async () => ({ count: 3, entries: testEntries }),
-        }),
-        async (collectionService) => {
-          await collectionService.getEntries({})
-          testEntries.forEach((entry) => {
-            expect(collectionService.isSelected(entry)).toBe(false)
-          })
+      await usingAsync(new CollectionService({}), async (collectionService) => {
+        collectionService.data.setValue({ count: 3, entries: testEntries })
+        testEntries.forEach((entry) => {
+          expect(collectionService.isSelected(entry)).toBe(false)
+        })
 
-          collectionService.addToSelection(testEntries[0])
+        collectionService.addToSelection(testEntries[0])
 
-          expect(collectionService.isSelected(testEntries[0])).toBe(true)
-          expect(collectionService.isSelected(testEntries[1])).toBe(false)
-          expect(collectionService.isSelected(testEntries[2])).toBe(false)
+        expect(collectionService.isSelected(testEntries[0])).toBe(true)
+        expect(collectionService.isSelected(testEntries[1])).toBe(false)
+        expect(collectionService.isSelected(testEntries[2])).toBe(false)
 
-          collectionService.removeFromSelection(testEntries[0])
+        collectionService.removeFromSelection(testEntries[0])
 
-          expect(collectionService.isSelected(testEntries[0])).toBe(false)
+        expect(collectionService.isSelected(testEntries[0])).toBe(false)
 
-          collectionService.toggleSelection(testEntries[1])
-          expect(collectionService.isSelected(testEntries[1])).toBe(true)
-        },
-      )
+        collectionService.toggleSelection(testEntries[1])
+        expect(collectionService.isSelected(testEntries[1])).toBe(true)
+      })
     })
   })
 })

package/src/services/collection-service.ts

@@ -1,31 +1,16 @@
-import type { PartialResult, FindOptions } from '@furystack/core'
-import { Lock } from 'semaphore-async-await'
 import type { Disposable } from '@furystack/utils'
-import { debounce, ObservableValue } from '@furystack/utils'
+import { ObservableValue } from '@furystack/utils'
 
 export interface CollectionData<T> {
   entries: T[]
   count: number
 }
 
-export type EntryLoader<T> = <TFields extends Array<keyof T>>(
-  searchOptions: FindOptions<T, TFields>,
-) => Promise<CollectionData<PartialResult<T, TFields>>>
-
 export interface CollectionServiceOptions<T> {
-  /**
-   * A method used to retrieve the entries from the data source
-   */
-  loader: EntryLoader<T>
-  /**
-   * The default filter / top / skip / etc... options
-   */
-  defaultSettings: FindOptions<T, Array<keyof T>>
   /**
    * An optional field that can be used for quick search
    */
   searchField?: keyof T
-
   /**
    * @param entry The clicked entry
    * optional callback for row clicks
@@ -38,19 +23,15 @@ export interface CollectionServiceOptions<T> {
    */
 
   onRowDoubleClick?: (entry: T) => void
-
-  /**
-   * An optional debounce interval in milliseconds
-   */
-  debounceMs?: number
 }
 
 export class CollectionService<T> implements Disposable {
   public dispose() {
-    this.querySettings.dispose()
     this.data.dispose()
-    this.error.dispose()
-    this.isLoading.dispose()
+    this.selection.dispose()
+    this.searchTerm.dispose()
+    this.hasFocus.dispose()
+    this.focusedEntry.dispose()
   }
 
   public isSelected = (entry: T) => this.selection.getValue().includes(entry)
@@ -67,18 +48,8 @@ export class CollectionService<T> implements Disposable {
     this.isSelected(entry) ? this.removeFromSelection(entry) : this.addToSelection(entry)
   }
 
-  private readonly loadLock = new Lock()
-
-  public getEntries: EntryLoader<T>
-
   public data = new ObservableValue<CollectionData<T>>({ count: 0, entries: [] })
 
-  public error = new ObservableValue<unknown | undefined>(undefined)
-
-  public isLoading = new ObservableValue<boolean>(false)
-
-  public querySettings: ObservableValue<FindOptions<T, Array<keyof T>>>
-
   public focusedEntry = new ObservableValue<T | undefined>(undefined)
 
   public selection = new ObservableValue<T[]>([])
@@ -193,35 +164,9 @@ export class CollectionService<T> implements Disposable {
     this.focusedEntry.setValue(entry)
   }
 
-  constructor(private options: CollectionServiceOptions<T>) {
-    this.querySettings = new ObservableValue<FindOptions<T, Array<keyof T>>>(this.options.defaultSettings)
-
-    const loader = this.options.debounceMs
-      ? debounce(this.options.loader, this.options.debounceMs)
-      : this.options.loader
-
-    this.getEntries = async (opt) => {
-      await this.loadLock.acquire()
-      try {
-        this.error.setValue(undefined)
-        this.isLoading.setValue(true)
-        const result = await loader(opt)
-        this.data.setValue(result)
-        return result
-      } catch (error) {
-        this.error.setValue(error)
-        throw error
-      } finally {
-        this.loadLock.release()
-        this.isLoading.setValue(false)
-      }
-    }
-
-    this.querySettings.subscribe((val) => this.getEntries(val))
-    this.getEntries(this.querySettings.getValue())
-  }
+  constructor(private options: CollectionServiceOptions<T> = {}) {}
 
-  public async handleRowDoubleClick(entry: T) {
+  public handleRowDoubleClick(entry: T) {
     this.options.onRowDoubleClick?.(entry)
   }
 }