@operato/data-grist 8.0.0-beta.0 → 8.0.0-beta.2

package/src/filters/filter-select.ts

@@ -1,68 +0,0 @@
-import '@operato/input/ox-checkbox.js'
-
-import { html } from 'lit'
-import { until } from 'lit/directives/until.js'
-
-import { FilterConfigObject, FilterOperator, FilterSelectRenderer, SelectOption, SelectOptionObject } from '../types'
-import { OxFiltersForm } from './filters-form'
-import { DataGridHeader } from '../data-grid/data-grid-header'
-
-function buildOptions(options: SelectOption[], operator?: FilterOperator) {
-  const selectOptionObjects = options.map(option => {
-    switch (typeof option) {
-      case 'string':
-        return {
-          display: option,
-          value: option
-        }
-      case 'object':
-        return {
-          display: option.display || option.name,
-          value: option.value
-        }
-      default:
-        return option
-    }
-  }) as SelectOptionObject[]
-
-  return operator === 'in'
-    ? html`
-        ${selectOptionObjects
-          ?.filter(option => !!option)
-          .map(
-            ({ value, display, name }) => html` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `
-          )}
-      `
-    : html`
-        ${selectOptionObjects?.map(
-          ({ value, display, name }) => html` <div option value=${value}>${display || name}&nbsp;</div> `
-        )}
-      `
-}
-
-export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
-  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
-  const filter = column.filter as FilterConfigObject
-  const operator = filter?.operator
-  const form = owner as OxFiltersForm | DataGridHeader
-
-  var options = filter?.options || column.record.options || []
-
-  if (typeof options === 'function') {
-    if (!filter?.options) {
-      console.warn(
-        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'
-      )
-    }
-
-    options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, owner)
-
-    if (options instanceof Promise) {
-      return html`${until(options.then(options => buildOptions(options, operator)))}`
-    } else {
-      return buildOptions((options || []) as SelectOption[], operator)
-    }
-  } else {
-    return buildOptions((options || []) as SelectOption[], operator)
-  }
-}

package/src/filters/filter-styles.ts

@@ -1,119 +0,0 @@
-import { css } from 'lit'
-
-export const FilterStyles = css`
-  :host {
-    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface));
-
-    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
-    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));
-    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
-    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));
-    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));
-    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
-    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));
-    --ox-filters-input-background-color: transparent;
-
-    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
-    --ox-filters-input-padding: var(--spacing-small, 4px);
-
-    --ox-select-padding: var(--ox-filters-input-padding);
-    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
-  }
-
-  label {
-    color: var(--ox-filters-label-color, var(--md-sys-color-on-primary-container));
-  }
-
-  span {
-    font-weight: var(--md-sys-typescale-label-medium-weight);
-    text-transform: capitalize;
-  }
-
-  input::placeholder {
-    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));
-    opacity: 0.6;
-  }
-
-  input,
-  ox-input-search,
-  [filter-input] {
-    padding: var(--ox-filters-input-padding);
-  }
-
-  ox-select,
-  ox-input-search,
-  input,
-  [filter-input] {
-    border: none;
-    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));
-    font: var(--ox-filters-input-font);
-    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface));
-    background-color: var(--ox-filters-input-background-color, transparent);
-    vertical-align: middle;
-  }
-
-  ox-select:focus,
-  input:focus,
-  [filter-input]:focus {
-    outline: none;
-    border-bottom: var(--ox-filters-input-focus-border, var(--md-sys-color-outline-variant));
-    color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));
-  }
-
-  ox-select {
-    min-width: 90px;
-    max-width: 170px;
-  }
-
-  ox-input-search {
-    max-width: 150px;
-  }
-
-  input[type='number'] {
-    max-width: 90px;
-  }
-
-  input[type*='date'],
-  input[type*='time'],
-  input[type='week'],
-  input[type='month'] {
-    max-width: 170px;
-  }
-
-  [filter-input] {
-    min-width: 140px;
-    max-width: 170px;
-  }
-
-  @media only screen and (max-width: 460px) {
-    :host {
-      --ox-filters-form-label-font: bold 13px var(--theme-font);
-      --ox-filters-input-font: normal 16px var(--theme-font);
-    }
-
-    ox-input-barcode {
-      max-width: unset;
-      flex: 1;
-    }
-
-    ox-input-search {
-      max-width: unset;
-    }
-
-    ox-select {
-      max-width: unset;
-    }
-
-    ox-checkbox {
-      max-width: unset;
-    }
-
-    input[type='number'] {
-      max-width: unset;
-    }
-
-    input {
-      flex: 1;
-    }
-  }
-`

package/src/filters/filters-form.ts

@@ -1,476 +0,0 @@
-import '@operato/input/ox-checkbox.js'
-import '@operato/input/ox-select.js'
-import '@operato/popup/ox-popup-list.js'
-import '@operato/input/ox-input-search.js'
-
-import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'
-import { customElement, property, queryAsync, state } from 'lit/decorators.js'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-import { PagePreferenceProvider } from '@operato/p13n'
-import { getDefaultValue } from '@operato/time-calculator'
-
-import { FilterConfigObject, FilterPreference } from '../types.js'
-import { DataGrist } from '../data-grist'
-import { ColumnConfig, FilterOperator, FilterValue, GristConfig, PersonalGristPreference } from '../types'
-import { FilterStyles } from './filter-styles'
-import { getFilterRenderer } from './registry'
-
-export type QueryFilterRangeValue = [from: number, to: number]
-
-export type QueryFilter = {
-  name: string
-  operator: FilterOperator
-  value: any
-}
-
-@customElement('ox-filters-form')
-export class OxFiltersForm extends LitElement {
-  static styles = [
-    MDTypeScaleStyles,
-    FilterStyles,
-    css`
-      :host {
-        display: flex;
-        padding: var(--spacing-small);
-      }
-
-      form {
-        flex: 1;
-
-        display: flex;
-        flex-flow: row wrap;
-        gap: var(--ox-filters-form-gap);
-      }
-
-      form > * {
-        display: flex;
-        align-items: center;
-        gap: var(--input-intra-gap, 7px);
-      }
-
-      label span {
-        display: block;
-      }
-
-      @media only screen and (max-width: 460px) {
-        form {
-          flex-direction: column;
-          flex-flow: column;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) value: FilterValue[] = []
-  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false
-  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true
-  @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true
-
-  @state() personalConfigProvider?: PagePreferenceProvider
-  @state() personalConfig?: PersonalGristPreference
-  @state() personalFilters?: FilterPreference[]
-
-  @state() config!: GristConfig
-  @state() filterColumns: ColumnConfig[] = []
-  @state() searchColumns: ColumnConfig[] = []
-
-  @queryAsync('form') form!: HTMLFormElement
-
-  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}
-  private objectValue?: object
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    const grist = this.closest('ox-grist') as DataGrist
-
-    if (grist) {
-      this.config = grist.compiledConfig
-      this.personalConfigProvider = grist.personalConfigProvider
-
-      grist.addEventListener('config-change', (e: Event) => {
-        this.config = (e as CustomEvent).detail
-      })
-
-      grist.addEventListener('fetch-params-change', (e: Event) => {
-        const { filters, from } = (e as CustomEvent).detail || {}
-        if (from === 'filters-form') {
-          return
-        }
-
-        this.value = filters
-      })
-
-      this.renderRoot.addEventListener('change', async (e: Event) => {
-        const { target, detail: value } = e as CustomEvent
-        const name = (target as HTMLInputElement).name
-        const { filter } = this.filterColumns.find(filter => filter.name == name) || {}
-
-        if (this.autoUpdateTargetsOnChange[name]) {
-          /* 일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함. */
-          ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {
-            const target = this.renderRoot.querySelector(`[name='${name}']`)
-            if (target) {
-              ;(target as HTMLInputElement).value = ''
-            }
-          })
-
-          await this.updateObjectValues()
-          this.requestUpdate()
-        }
-
-        const onchange = typeof filter == 'object' ? filter.onchange : null
-        const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true
-
-        keepGoing &&
-          this.dispatchEvent(
-            new CustomEvent('fetch-params-change', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                filters: await this.getQueryFilters(),
-                from: 'filters-form'
-              }
-            })
-          )
-      })
-    }
-  }
-
-  buildDefaultValue(operator: FilterOperator, defaultValue: any) {
-    if (defaultValue === undefined) {
-      return
-    }
-    if (operator == 'between') {
-      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
-    } else {
-      return getDefaultValue(defaultValue, this)
-    }
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
-      this.personalConfig = await this.personalConfigProvider.load()
-    } else if (changes.has('config') || changes.has('personalConfig')) {
-      this.applyUpdatedConfiguration()
-    }
-  }
-
-  render(): TemplateResult {
-    const searchValue =
-      (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\%(.*)\%$/)?.[1] || ''
-
-    return this.empty
-      ? html``
-      : html`
-          <form
-            class="md-typescale-body-medium-prominent"
-            @submit=${(e: Event) => {
-              e.stopPropagation()
-              e.preventDefault()
-
-              const grist = this.closest('ox-grist') as DataGrist
-
-              grist && grist.fetch()
-            }}
-          >
-            ${this.filterColumns
-              .filter(column => !(column.filter as FilterConfigObject).hidden)
-              .map((column: ColumnConfig) => {
-                const { name, header, label, filter } = column
-
-                const type = (filter as FilterConfigObject).type
-
-                if (type == 'search') {
-                  return html`
-                    <ox-input-search name="search" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>
-                  `
-                }
-
-                const operator = (filter as FilterConfigObject).operator
-                const filterLabel = (filter as FilterConfigObject).label
-
-                const labelText =
-                  filterLabel !== undefined
-                    ? filterLabel
-                    : typeof label === 'object' && label.renderer
-                      ? label.renderer(column)
-                      : header.renderer(column) || name
-
-                const idx = operator === 'between' ? 1 : 0
-                const renderer = getFilterRenderer(
-                  operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
-                    ? 'text'
-                    : type
-                )[idx]
-                const value =
-                  this.value?.find(filter => filter.name == name)?.value ??
-                  this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)
-
-                if (!renderer) {
-                  return html``
-                }
-
-                return type === 'boolean' || type === 'checkbox'
-                  ? renderer(column, value, this)
-                  : type !== 'select' && labelText
-                    ? html`<label filter-title ?between=${operator === 'between'}
-                        ><span>${labelText}</span> ${renderer(column, value, this)}
-                      </label> `
-                    : type !== 'select' && !labelText
-                      ? renderer(column, value, this)
-                      : operator === 'in'
-                        ? html`
-                            <ox-select
-                              name=${name}
-                              placeholder=${labelText}
-                              .value=${value}
-                              @change=${(e: CustomEvent) =>
-                                e.target?.dispatchEvent(
-                                  new CustomEvent('filter-change', {
-                                    detail: {
-                                      name,
-                                      operator,
-                                      value: e.detail
-                                    }
-                                  })
-                                )}
-                            >
-                              <ox-popup-list multiple attr-selected="checked" with-search>
-                                ${renderer(column, value, this)}
-                              </ox-popup-list>
-                            </ox-select>
-                          `
-                        : html`
-                            <ox-select
-                              name=${name}
-                              placeholder=${labelText}
-                              .value=${value}
-                              @change=${(e: CustomEvent) =>
-                                e.target?.dispatchEvent(
-                                  new CustomEvent('filter-change', {
-                                    detail: {
-                                      name,
-                                      operator,
-                                      value: e.detail
-                                    }
-                                  })
-                                )}
-                            >
-                              <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
-                            </ox-select>
-                          `
-              })}
-          </form>
-          <slot name="setting"></slot>
-        `
-  }
-
-  applyUpdatedConfiguration() {
-    if (!this.config) {
-      return
-    }
-
-    const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)
-
-    this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {
-      const filter = columnConfig.filter as FilterConfigObject
-      return filter!.operator !== 'search'
-    })
-    this.searchColumns = filters.filter(columnConfig => {
-      const filter = columnConfig.filter as FilterConfigObject
-      return filter!.operator === 'search'
-    })
-
-    if (this.searchColumns.length > 0 && !this.withoutSearch) {
-      this.filterColumns.unshift({ name: 'search', filter: { type: 'search' } } as any)
-    }
-
-    if (!this.personalConfig) {
-      this.personalFilters = this.filterColumns.map(column => {
-        return { name: column.name }
-      })
-    } else {
-      const { filters: personalFilters = [] } = this.personalConfig
-
-      if (personalFilters) {
-        const xfilters = this.filterColumns.map(column => {
-          return personalFilters.find(pFilter => pFilter.name == column.name) || { name: column.name }
-        })
-
-        function reorderList(a: FilterPreference[], b: FilterPreference[]): FilterPreference[] {
-          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
-          const result = new Array(a.length)
-
-          // b 배열에 없는 아이템은 원래 위치로 채움
-          a.forEach((item, index) => {
-            if (!item.name || !b.find(bi => bi.name == item.name)) {
-              result[index] = item
-            }
-          })
-
-          b.forEach(item => {
-            const ai = a.find(ai => ai.name == item.name)
-            if (ai) {
-              result[result.findIndex(slot => slot === undefined)] = ai
-            }
-          })
-
-          return result
-        }
-
-        // 배열 재정렬 실행
-        this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterPreference[]
-
-        this.filterColumns = this.personalFilters
-          .map(filter => {
-            const column = this.filterColumns.find(column => column.name == filter.name)
-            if (column?.filter) {
-              ;(column.filter as FilterConfigObject)!.hidden = filter.hidden
-            }
-            return column
-          })
-          .filter(Boolean) as ColumnConfig[]
-      }
-    }
-
-    const grist = this.closest('ox-grist') as DataGrist
-
-    this.value = (grist?.filters || []).map(filter => {
-      return {
-        ...filter,
-        value: this.buildDefaultValue(filter!.operator, filter!.value)
-      }
-    })
-
-    this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0
-
-    this.autoUpdateTargetsOnChange = {}
-    this.filterColumns
-      ?.filter(({ filter }) => {
-        return typeof filter == 'object' && filter.boundTo && filter.boundTo.length > 0
-      })
-      .map(({ name, filter }) => {
-        const boundTo = (filter as FilterConfigObject).boundTo
-
-        boundTo!.forEach(to => {
-          const origin = this.autoUpdateTargetsOnChange[to] || []
-          if (name && !origin.includes(name)) {
-            this.autoUpdateTargetsOnChange[to] = [...origin, name]
-          }
-        })
-      })
-  }
-
-  async getQueryFilters(): Promise<QueryFilter[]> {
-    const form = await this.form
-    if (!form) return []
-
-    const formData = new FormData(form)
-    const search: string | undefined = formData.get('search')?.toString()
-
-    var filters = this.filterColumns
-      .filter(column => column.name !== 'search' && !(column.filter as FilterConfigObject)!.hidden)
-      .map((column: ColumnConfig) => {
-        const { name, type, filter } = column
-        const operator = (filter as FilterConfigObject).operator
-
-        var value = formData.getAll(name)
-        if (value.length == 0) {
-          return
-        }
-
-        if (-1 === value.findIndex(v => v !== '')) {
-          return
-        }
-
-        const filterValue = value.map(v => {
-          const value = v.toString()
-
-          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */
-          switch (type) {
-            case 'integer':
-            case 'float':
-            case 'number':
-            case 'progress':
-            case 'checkbox':
-            case 'boolean':
-              return !value ? undefined : JSON.parse(value)
-            default:
-              return value
-          }
-        })
-
-        return {
-          name,
-          operator,
-          value: filterValue.length === 1 ? filterValue[0] : filterValue
-        }
-      })
-      .filter(result => result !== undefined) as QueryFilter[]
-
-    if (search) {
-      filters = filters.concat(
-        this.searchColumns.map((column: ColumnConfig) => {
-          const { name } = column
-
-          return {
-            name,
-            operator: 'search',
-            value: `%${search}%`
-          }
-        })
-      )
-    }
-
-    return filters
-  }
-
-  public setInputValue(name: string, value: any) {
-    const input = this.renderRoot.querySelector(`form [name="${name}"]`) as HTMLInputElement
-    if (input) {
-      input.value = value
-      input.dispatchEvent(new Event('change', { bubbles: true }))
-    }
-  }
-
-  public getInputValue(name: string): any {
-    const input = this.renderRoot.querySelector(`form [name="${name}"]`) as HTMLInputElement
-    return input?.value
-  }
-
-  private async updateObjectValues() {
-    const form = await this.form
-    if (!form) return []
-
-    const formData = new FormData(form)
-
-    const object = {} as any
-    formData.forEach((value, key) => {
-      const prev = object[key]
-
-      if (key in object) {
-        object[key] = prev instanceof Array ? [...prev, value] : [prev, value]
-      } else {
-        object[key] = value
-      }
-    })
-
-    this.objectValue = object
-  }
-
-  public getFormObjectValue() {
-    return this.objectValue
-  }
-
-  reset() {
-    this.form
-      .then((form: HTMLFormElement) => {
-        form.reset()
-      })
-      .catch((error: any) => {
-        console.error('Error resetting the form:', error)
-      })
-  }
-}

package/src/filters/index.ts

@@ -1,10 +0,0 @@
-export * from './registry'
-
-export * from './filter-select'
-export * from './filter-input'
-export * from './filter-checkbox'
-export * from './filter-range-date'
-export * from './filter-range-number'
-export * from './filter-select-buttons'
-
-export * from './filters-form'