@operato/data-grist 0.2.35 → 0.2.36

package/src/data-grist.ts

@@ -88,37 +88,44 @@ export class DataGrist extends LitElement implements DataConsumer {
   @state() private _showSpinner: boolean = false
 
   private dataProvider?: DataProvider
-  private pulltorefreshHandle?: any
-  private headroom?: Headroom
+  private _pulltorefreshHandle?: any
+  private _headroom?: Headroom
+  private _resizeObserver = new ResizeObserver(entries => {
+    this._adjustPaddingTop()
+  })
 
   @query('slot[name=headroom]') head!: HTMLElement
   @query('#grist') grist!: DataGrid | DataList | DataCard
   @queryAsync('#wrap') private wrap!: Promise<HTMLElement>
 
-  connectedCallback() {
+  async connectedCallback() {
     super.connectedCallback()
 
     this.dataProvider = new DataProvider(this)
+
+    await this.updateComplete
+    this._resizeObserver.observe(this.head)
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
 
     this.dataProvider?.dispose()
-    this.resetPullToRefresh()
+    this._resetPullToRefresh()
+    this._resizeObserver.unobserve(this.head)
   }
 
-  private resetPullToRefresh() {
-    if (this.pulltorefreshHandle) {
-      this.pulltorefreshHandle()
-      delete this.pulltorefreshHandle
+  private _resetPullToRefresh() {
+    if (this._pulltorefreshHandle) {
+      this._pulltorefreshHandle()
+      delete this._pulltorefreshHandle
     }
   }
 
-  private async setPullToRefresh() {
-    this.resetPullToRefresh()
+  private async _setPullToRefresh() {
+    this._resetPullToRefresh()
     if (this.fetchHandler) {
-      this.pulltorefreshHandle = pulltorefresh({
+      this._pulltorefreshHandle = pulltorefresh({
         container: await this.wrap,
         scrollable: this.grist.pullToRefreshTarget,
         refresh: () => {
@@ -128,17 +135,20 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
-  setHeadroom() {
-    this.headroom?.destroy()
+  private _adjustPaddingTop() {
+    this.grist.style.paddingTop = this.head.clientHeight + 'px'
+  }
+
+  private _setHeadroom() {
+    this._headroom?.destroy()
 
     if (this.grist && this.head) {
-      var originPaddingTop = parseFloat(getComputedStyle(this.grist, null).getPropertyValue('padding-top'))
-      this.grist.style.paddingTop = this.head.clientHeight + originPaddingTop + 'px'
+      this._adjustPaddingTop()
 
-      this.headroom = new Headroom(this.head, {
+      this._headroom = new Headroom(this.head, {
         scroller: this.grist
       })
-      this.headroom.init()
+      this._headroom.init()
     }
   }
 
@@ -228,7 +238,7 @@ export class DataGrist extends LitElement implements DataConsumer {
 
     if (changes.has('mode')) {
       needToSetPullToRefresh = true
-      this.setHeadroom()
+      this._setHeadroom()
     }
 
     if (changes.has('selectedRecords')) {
@@ -251,7 +261,7 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
 
     if (needToSetPullToRefresh) {
-      await this.setPullToRefresh()
+      await this._setPullToRefresh()
     }
   }
 
@@ -355,7 +365,7 @@ export class DataGrist extends LitElement implements DataConsumer {
   /**
    * Forced internal data to be reflected on the screen
    * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
-Therefore, it will be deprecated.
+   * Therefore, it will be deprecated.
    * @deprecated
    * @method
    */

package/src/data-list/data-list-field.ts

@@ -61,14 +61,14 @@ export class DataListField extends LitElement {
 
     var {
       label,
-      record: { renderer: recordRenderer }
+      record: { renderer: fieldRenderer }
     } = column
 
     if (typeof label == 'object') {
       let { renderer: labelRenderer } = label
-      return html`<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`
+      return html`<label>${labelRenderer()}</label>${fieldRenderer(value, column, record, rowIndex, this)}`
     } else {
-      return html`${recordRenderer(value, column, record, rowIndex, this)}`
+      return html`${fieldRenderer(value, column, record, rowIndex, this)}`
     }
   }
 }

package/src/data-list/data-list-gutter.ts

@@ -1,12 +1,12 @@
 import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
 import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 
 @customElement('ox-list-gutter')
-class DataListGutter extends LitElement {
+export class DataListGutter extends LitElement {
   static styles = [
     css`
       :host {
@@ -46,7 +46,7 @@ class DataListGutter extends LitElement {
     return this.hasAttribute('editing')
   }
 
-  render() {
+  render(): TemplateResult {
     if (!this.column) {
       return html``
     }

package/src/data-report/data-report-field.ts

@@ -1,5 +1,5 @@
 import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
 import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { customElement, property } from 'lit/decorators.js'
 
@@ -52,7 +52,7 @@ export class DataReportField extends LitElement {
   @property({ type: Number }) columnIndex: number = -1
   @property({ type: Object }) value: any
 
-  render() {
+  render(): TemplateResult {
     if (!this.column) {
       return html``
     }

package/src/filters/index.ts

@@ -0,0 +1,3 @@
+export * from './registry'
+
+export * from './list-select'

package/src/filters/list-select.ts

@@ -0,0 +1,14 @@
+import '@operato/popup'
+
+import { FilterSelectRenderer } from '../types'
+import { html } from 'lit-html'
+
+export const ListSelect: FilterSelectRenderer = (column, owner) => {
+  const options = column.filter?.options
+
+  return html`
+    <ox-popup-list .config=${column} multiple attr-selected="checked" popup>
+      ${options?.map((option: string) => html` <ox-checkbox option value="${option}">${option}</ox-checkbox> `)}
+    </ox-popup-list>
+  `
+}

package/src/filters/registry.ts

@@ -0,0 +1,48 @@
+import { FilterSelectRenderer } from '../types'
+import { ListSelect } from './list-select'
+
+var RENDERERS: {
+  [name: string]: FilterSelectRenderer
+} = {
+  string: ListSelect,
+  text: ListSelect,
+  email: ListSelect,
+  tel: ListSelect,
+  password: ListSelect,
+  integer: ListSelect,
+  float: ListSelect,
+  number: ListSelect,
+  select: ListSelect,
+  boolean: ListSelect,
+  checkbox: ListSelect,
+  month: ListSelect,
+  week: ListSelect,
+  date: ListSelect,
+  time: ListSelect,
+  datetime: ListSelect,
+  color: ListSelect,
+  progress: ListSelect,
+  link: ListSelect,
+  image: ListSelect,
+  json5: ListSelect
+}
+
+export function registerRenderer(type: string, renderer: FilterSelectRenderer) {
+  RENDERERS[type] = renderer
+}
+
+export function unregisterRenderer(type: string): void {
+  delete RENDERERS[type]
+}
+
+export function getRenderers(): { [name: string]: FilterSelectRenderer } {
+  return { ...RENDERERS }
+}
+
+export function getRenderer(type: string | FilterSelectRenderer): FilterSelectRenderer {
+  if (typeof type == 'function') {
+    return type
+  }
+
+  return RENDERERS[type || 'text'] || ListSelect
+}

package/src/index.ts

@@ -7,3 +7,6 @@ export * from './renderers'
 export * from './handlers'
 export * from './formatters'
 export * from './gutters'
+
+export * from './interfaces'
+export * from './search-form'

package/src/interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from './ox-search-field'
+export * from './ox-grist-search-form'

package/src/interfaces/ox-grist-search-form.ts

@@ -0,0 +1,7 @@
+export type QueryFilterRangeValue = [from: number, to: number]
+
+export type QueryFilter = {
+  name: string
+  operator?: string
+  value: any
+}

package/src/interfaces/ox-search-field.ts

@@ -0,0 +1,52 @@
+export type OXSearchFieldType = 'select' | 'checkbox' | 'text' | 'number'
+
+export interface OXFieldOptionProps {
+  name?: string
+  value: string
+}
+
+export interface OXBasicFieldProps {
+  name: string
+  type?: OXSearchFieldType
+  hidden?: boolean
+  id?: string
+  placeholder?: string
+  handlers?: Record<string, (event: Event) => void>
+  defaultValue?: any
+  operator?: string
+}
+
+export interface OXTextFieldProps extends OXBasicFieldProps {
+  defaultValue?: string
+}
+
+export interface OXNumberFieldProps extends OXBasicFieldProps {
+  min?: number
+  max?: number
+  step: number
+  defaultValue?: number
+}
+
+export interface OXObjectFieldProps extends OXBasicFieldProps {
+  field: string
+  queryName: string
+  defaultValue?: Record<string, any>
+}
+
+export interface OXSelectFieldProps extends OXBasicFieldProps {
+  searchEnable?: boolean
+  options: OXFieldOptionProps[]
+  defaultValue?: any
+}
+
+export interface OXCheckboxFieldProps extends OXBasicFieldProps {
+  indeterminate?: boolean
+  defaultValue?: boolean
+}
+
+export type OXSearchFieldProps =
+  | OXTextFieldProps
+  | OXNumberFieldProps
+  | OXObjectFieldProps
+  | OXSelectFieldProps
+  | OXCheckboxFieldProps

package/src/search-form/index.ts

@@ -0,0 +1,7 @@
+export * from './ox-search-form'
+export * from './ox-grist-search-form'
+export * from './ox-basic-field'
+export * from './ox-checkbox-field'
+export * from './ox-number-field'
+export * from './ox-select-field'
+export * from './ox-text-field'

package/src/search-form/ox-basic-field.ts

@@ -0,0 +1,86 @@
+import { css, LitElement } from 'lit-element'
+
+import { OXBasicFieldProps } from '../interfaces/ox-search-field'
+
+export abstract class OXBasicField extends LitElement {
+  static styles = [
+    css`
+      input,
+      select {
+        background-color: transparent;
+        border: none;
+        box-sizing: border-box;
+        outline: none;
+        padding: 4px 9px;
+        font-size: var(--fontsize-default, 14px);
+        color: var(--primary-text-color, #476172);
+        font-weight: bold;
+      }
+    `
+  ]
+
+  field!: OXBasicFieldProps
+
+  private form: HTMLFormElement | null = null
+  value?: any
+
+  abstract setDefaultValue(defaultValue: unknown): void
+
+  get input(): HTMLInputElement | HTMLSelectElement {
+    if (!this.field.name) throw new Error('No name property provided')
+    const input: HTMLInputElement | null = this.renderRoot.querySelector(
+      `input[name=${this.field.name}],select[name=${this.field.name}]`
+    )
+    if (!input) throw new Error('Failed to find input element')
+
+    return input
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.form = this.findFormElement()
+    this.form?.addEventListener('formdata', this.appendFormData.bind(this))
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.form?.removeEventListener('formdata', this.appendFormData.bind(this))
+    this.form = null
+  }
+
+  override firstUpdated(): void {
+    const { handlers } = this.field || {}
+
+    this.registerBasicEventHandlers()
+    if (handlers) this.registerCustomEventHandlers(handlers)
+    if (this.field.defaultValue !== undefined) this.setDefaultValue(this.field.defaultValue)
+  }
+
+  private findFormElement(): HTMLFormElement | null {
+    const rootNode: HTMLElement = this.getRootNode() as HTMLElement
+    const forms: HTMLFormElement[] = Array.from(rootNode.querySelectorAll('form'))
+
+    return forms.find((form: HTMLFormElement) => form.contains(this)) || null
+  }
+
+  private registerCustomEventHandlers(handlers: Record<string, (event: Event) => void>): void {
+    const eventNames: string[] = Object.keys(handlers)
+    if (!eventNames.length) return
+
+    eventNames.forEach((eventName: string) => this.input.addEventListener(eventName, handlers[eventName]))
+  }
+
+  private registerBasicEventHandlers(): void {
+    this.input.onkeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Enter') this.submit()
+    }
+  }
+
+  private appendFormData({ formData }: FormDataEvent): void {
+    formData.append(this.field.name, this.value)
+  }
+
+  private submit(): void {
+    if (this.form) this.dispatchEvent(new CustomEvent('submit-field', { composed: true, bubbles: true }))
+  }
+}

package/src/search-form/ox-checkbox-field.ts

@@ -0,0 +1,57 @@
+import { css, html, TemplateResult } from 'lit'
+import { ifDefined } from 'lit-html/directives/if-defined.js'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OXCheckboxFieldProps } from '..'
+import { OXBasicField } from './ox-basic-field'
+
+@customElement('ox-checkbox-field')
+export class OXCheckboxField extends OXBasicField {
+  @property({ type: Object }) field!: OXCheckboxFieldProps
+  @property({ type: Boolean }) value?: boolean
+
+  static styles = [
+    css`
+      label {
+        font-size: var(--fontsize-default, 14px);
+        color: var(--primary-text-color, #476172);
+      }
+    `
+  ]
+
+  setDefaultValue(defaultValue: boolean): void {
+    this.value = defaultValue
+  }
+
+  render(): TemplateResult {
+    const { name, hidden, placeholder, id } = this.field
+
+    return html`<label ?hidden=${hidden}>
+      <input
+        id=${ifDefined(id)}
+        type="checkbox"
+        name=${name}
+        .checked=${Boolean(this.value)}
+        @click=${this.onClickHandler.bind(this)}
+      />
+      ${placeholder || name}
+    </label>`
+  }
+
+  private onClickHandler(): void {
+    const checkbox: HTMLInputElement = this.input as HTMLInputElement
+
+    if (!this.field.indeterminate) {
+      this.value = !this.value
+    } else {
+      if (this.value === false) {
+        this.value = undefined
+        checkbox.indeterminate = true
+      } else if (this.value === undefined) {
+        this.value = true
+      } else {
+        this.value = false
+      }
+    }
+  }
+}

package/src/search-form/ox-grist-search-form.ts

@@ -0,0 +1,200 @@
+import { ColumnConfig, GristConfig } from '../types'
+import { LitElement, TemplateResult, html } from 'lit'
+import {
+  OXBasicFieldProps,
+  OXCheckboxFieldProps,
+  OXNumberFieldProps,
+  OXSearchFieldProps,
+  OXSearchFieldTypes,
+  OXSearchForm,
+  OXSelectFieldProps,
+  OXTextFieldProps,
+  QueryFilter
+} from '..'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('ox-grist-search-form')
+export class OXGristSearchForm extends LitElement {
+  @property({ type: Object }) config!: GristConfig
+  @property({ type: String }) defaultOperator: string = 'eq'
+
+  private timeout?: NodeJS.Timeout
+
+  render(): TemplateResult {
+    const fields: OXSearchFieldProps[] = this.convertToSearchFields(this.config)
+
+    return html` <ox-search-form .fields=${fields}></ox-search-form> `
+  }
+
+  private convertToSearchFields(config: GristConfig): OXSearchFieldProps[] {
+    const supportingTypes: string[] = ['string', 'integer', 'number', 'float', 'select', 'boolean', 'checkbox']
+
+    return config.columns
+      .filter((columnConfig: ColumnConfig) => supportingTypes.indexOf(columnConfig.type) >= 0)
+      .map((columnConfig: ColumnConfig) => {
+        let fieldProps: OXBasicFieldProps = {
+          name: columnConfig.name,
+          hidden: Boolean(columnConfig.hidden),
+          placeholder: typeof columnConfig.label === 'string' ? columnConfig.label : columnConfig.name
+        }
+
+        switch (columnConfig.type) {
+          case 'string':
+            return {
+              ...fieldProps,
+              type: 'text'
+            } as OXTextFieldProps
+
+          case 'integer':
+            return {
+              ...fieldProps,
+              type: 'number',
+              min: columnConfig.record?.options?.min || undefined,
+              max: columnConfig.record?.options?.max || undefined
+            } as OXNumberFieldProps
+
+          case 'number':
+            return {
+              ...fieldProps,
+              type: 'number',
+              min: columnConfig.record?.options?.min || undefined,
+              max: columnConfig.record?.options?.max || undefined
+            } as OXNumberFieldProps
+
+          case 'float':
+            return {
+              ...fieldProps,
+              type: 'number',
+              min: columnConfig.record?.options?.min || undefined,
+              max: columnConfig.record?.options?.max || undefined
+            } as OXNumberFieldProps
+
+          case 'select':
+            return {
+              ...fieldProps,
+              type: 'select',
+              searchEnable: true,
+              options: columnConfig.record?.options.map((option: string | Record<string, any>) => {
+                if (typeof option === 'string') {
+                  return { value: option }
+                } else if (option.display && option.value) {
+                  return {
+                    name: option.display,
+                    value: option.value
+                  }
+                } else {
+                  throw new Error('Unexpected option property')
+                }
+              })
+            } as OXSelectFieldProps
+
+          case 'boolean':
+            return {
+              ...fieldProps,
+              type: 'checkbox',
+              indeterminate: true
+            } as OXCheckboxFieldProps
+
+          case 'checkbox':
+            return {
+              ...fieldProps,
+              type: 'checkbox',
+              indeterminate: true
+            } as OXCheckboxFieldProps
+
+          default:
+            throw new Error('Non-supported type of column config')
+        }
+      })
+
+    // return searchFields
+    //   .filter((searchField: string) => fieldMap.has(searchField))
+    //   .map((searchField: string) => {
+    //     const columnConfig: ColumnConfig | undefined = fieldMap.get(searchField)
+    //     if (!columnConfig) throw new Error('No matched column config')
+
+    //     let fieldProps: OXBasicFieldProps = {
+    //       name: columnConfig.name,
+    //       hidden: Boolean(columnConfig.hidden),
+    //       label: typeof columnConfig.label === 'string' ? columnConfig.label : undefined
+    //     }
+
+    //     switch (columnConfig.type) {
+    //       case 'string':
+    //         return {
+    //           ...fieldProps,
+    //           type: 'text'
+    //         } as OXTextFieldProps
+
+    //       case 'integer':
+    //         return {
+    //           ...fieldProps,
+    //           type: 'number',
+    //           min: columnConfig.record?.options?.min || undefined,
+    //           max: columnConfig.record?.options?.max || undefined
+    //         } as OXNumberFieldProps
+
+    //       case 'number':
+    //         return {
+    //           ...fieldProps,
+    //           type: 'number',
+    //           min: columnConfig.record?.options?.min || undefined,
+    //           max: columnConfig.record?.options?.max || undefined
+    //         } as OXNumberFieldProps
+
+    //       case 'float':
+    //         return {
+    //           ...fieldProps,
+    //           type: 'number',
+    //           min: columnConfig.record?.options?.min || undefined,
+    //           max: columnConfig.record?.options?.max || undefined
+    //         } as OXNumberFieldProps
+
+    //       case 'select':
+    //         return {
+    //           ...fieldProps,
+    //           type: 'select',
+    //           searchEnable: true,
+    //           options: columnConfig.record?.options.map((option: Record<string, any>) => ({
+    //             name: option.display,
+    //             value: option.value
+    //           }))
+    //         } as OXSelectFieldProps
+
+    //       case 'boolean':
+    //         return {
+    //           ...fieldProps,
+    //           type: 'checkbox',
+    //           indeterminate: true
+    //         } as OXCheckboxFieldProps
+
+    //       case 'checkbox':
+    //         return {
+    //           ...fieldProps,
+    //           type: 'checkbox',
+    //           indeterminate: true
+    //         } as OXCheckboxFieldProps
+
+    //       default:
+    //         throw new Error('Non-supported type of column config')
+    //     }
+    //   })
+  }
+
+  get queryFilters(): QueryFilter[] {
+    const searchForm: OXSearchForm | null = this.renderRoot.querySelector<OXSearchForm>('ox-search-form')
+    if (!searchForm) throw new Error('Failed to find search form')
+
+    const searchFields: OXSearchFieldTypes[] = searchForm.searchFields
+
+    return searchFields
+      .filter(({ value }: OXSearchFieldTypes) => value !== null && value !== undefined && value !== '')
+      .map((searchField: OXSearchFieldTypes) => {
+        return {
+          name: searchField.field.name,
+          operator: searchField.field.operator || this.defaultOperator,
+          value: searchField.value
+        }
+      })
+  }
+}