@operato/form 1.0.0-beta.4 → 1.0.0-beta.40

package/src/filters/filter-range-number.ts

@@ -0,0 +1,62 @@
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from './types.js'
+
+export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) => {
+  const { name, operator } = filter
+  const [from, to] = value instanceof Array ? value : []
+
+  return html`
+    <input
+      name=${name}
+      type="number"
+      placeholder="minimum"
+      .value=${from}
+      from
+      @keyup=${(e: KeyboardEvent) => {
+        if (e.key !== 'Enter') {
+          return
+        }
+        ;(e.target as HTMLElement).dispatchEvent(
+          new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              name,
+              operator,
+              value: Array.from(
+                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')
+              ).map(input => (input as HTMLInputElement).value)
+            }
+          })
+        )
+      }}
+    />
+    ~
+    <input
+      name=${name}
+      type="number"
+      placeholder="maximum"
+      .value=${to}
+      to
+      @keyup=${(e: KeyboardEvent) => {
+        if (e.key !== 'Enter') {
+          return
+        }
+        ;(e.target as HTMLElement).dispatchEvent(
+          new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              name,
+              operator,
+              value: Array.from(
+                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')
+              ).map(input => (input as HTMLInputElement).value)
+            }
+          })
+        )
+      }}
+    />
+  `
+}

package/src/filters/filter-select.ts

@@ -0,0 +1,47 @@
+import '@operato/input/ox-checkbox.js'
+
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from './types.js'
+
+export const FilterSelect: FilterSelectRenderer = (filter, value, owner) => {
+  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+  var { name, type, operator, options = [] } = filter
+
+  if (typeof options === 'function') {
+    options = options.call(filter, owner)
+  }
+
+  options = options.map((option: any) => {
+    switch (typeof option) {
+      case 'string':
+        return {
+          display: option,
+          value: option
+        }
+      case 'object':
+        return {
+          display: option.display,
+          value: option.value
+        }
+      default:
+        return option
+    }
+  })
+
+  return operator === 'in'
+    ? html`
+        ${options
+          ?.filter((option: { display: string; value: any }) => !!option)
+          .map(
+            (option: { display: string; value: any }) =>
+              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+          )}
+      `
+    : html`
+        ${options?.map(
+          (option: { display: string; value: any }) =>
+            html` <div option value=${option.value}>${option.display}&nbsp;</div> `
+        )}
+      `
+}

package/src/filters/filter-styles.ts

@@ -0,0 +1,88 @@
+import { css } from 'lit'
+
+export const FilterStyles = css`
+  :host {
+    --ox-input-placeholder-color: var(--primary-color);
+
+    --ox-input-padding: var(--padding-narrow) var(--padding-default);
+    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);
+    --ox-input-focus-border: 1px solid var(--primary-color);
+    --ox-input-border-radius: var(--border-radius);
+    --ox-input-font: normal 14px var(--theme-font);
+    --ox-input-color: var(--primary-text-color);
+
+    --ox-filters-form-gap: var(--margin-wide);
+    --ox-filters-form-label-font: var(--label-font);
+    --ox-filters-form-label-color: var(--label-color);
+    --ox-select-padding: 0 var(--padding-narrow);
+  }
+
+  label {
+    font: var(--ox-filters-form-label-font);
+    color: var(--ox-filters-form-label-color);
+  }
+  span {
+    margin-right: var(--margin-narrow);
+    text-transform: capitalize;
+  }
+
+  input::placeholder {
+    color: var(--ox-input-placeholder-color);
+    opacity: 0.6;
+  }
+
+  ox-select,
+  input {
+    padding: var(--input-padding);
+    border: none;
+    border-bottom: var(--ox-input-border);
+    font: var(--ox-input-font);
+    color: var(--ox-input-color);
+  }
+
+  ox-select:focus,
+  input:focus {
+    outline: none;
+    border-bottom: var(--ox-input-focus-border);
+    color: var(--primary-color);
+  }
+  ox-select {
+    padding: var(--ox-select-padding);
+  }
+
+  input[type='number'] {
+    padding-right: var(--padding-narrow);
+    max-width: 90px;
+  }
+
+  input[type*='date'],
+  input[type*='time'],
+  input[type='week'],
+  input[type='month'] {
+    padding: 8px var(--padding-narrow) 8px var(--padding-default);
+    max-width: 170px;
+  }
+
+  @media only screen and (max-width: 460px) {
+    :host {
+      --ox-filters-form-label-font: bold 13px var(--theme-font);
+      --ox-input-font: normal 16px var(--theme-font);
+      --ox-filters-form-gap: var(--margin-narrow);
+    }
+
+    ox-checkbox {
+      margin-top: var(--margin-narrow);
+    }
+
+    input[from],
+    input[to] {
+      max-width: 44%;
+    }
+
+    input[type*='datetime'][from],
+    input[type*='datetime'][to] {
+      padding-right: var(--padding-narrow);
+      min-width: 91%;
+    }
+  }
+`

package/src/filters/index.ts

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

package/src/filters/ox-filters-form-base.ts

@@ -0,0 +1,261 @@
+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 json5 from 'json5'
+import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
+import { customElement, property, queryAsync } from 'lit/decorators.js'
+
+import { FilterStyles } from './filter-styles.js'
+import { getFilterRenderer } from './registry.js'
+import { FilterConfig, FilterOperator, FilterValue } from './types.js'
+
+export type QueryFilterRangeValue = [from: number, to: number]
+
+export type QueryFilter = {
+  name: string
+  operator: FilterOperator
+  value: any
+}
+
+@customElement('ox-filters-form-base')
+export class FiltersFormBase extends LitElement {
+  static styles = [
+    FilterStyles,
+    css`
+      :host {
+        display: flex;
+      }
+
+      form {
+        flex: 1;
+
+        display: flex;
+        flex-flow: row wrap;
+        gap: var(--ox-filters-form-gap);
+      }
+
+      form > * {
+        display: flex;
+        align-items: center;
+      }
+
+      @media only screen and (max-width: 460px) {
+        form {
+          flex-direction: column;
+        }
+
+        label,
+        label span,
+        ox-select {
+          display: block;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: FilterValue[] = []
+  @property({ type: Object }) filters: FilterConfig[] = []
+  @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
+
+  @queryAsync('form') form!: HTMLFormElement
+
+  private _popstateEventHandler?: EventListener
+  private _filtersChangeHandler?: EventListener
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    this.renderRoot.addEventListener('change', async (e: Event) => {
+      this.dispatchEvent(
+        new CustomEvent('filters-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            filters: await this.getQueryFilters(),
+            from: 'filters-form'
+          }
+        })
+      )
+    })
+  }
+
+  render(): TemplateResult {
+    return html`
+      <form
+        @submit=${(e: Event) => {
+          e.preventDefault()
+        }}
+      >
+        ${this.filters.map((filter: FilterConfig) => {
+          const { name, label, type, operator } = filter
+          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
+
+          if (!renderer) {
+            return html``
+          }
+
+          return type === 'search'
+            ? html`<ox-input-search name="search" .value=${value}></ox-input-search>`
+            : type !== 'select'
+            ? html` <label filter-title><span>${label}</span> ${renderer(filter, value, this)} </label> `
+            : operator === 'in'
+            ? html`
+                <ox-select
+                  name=${name}
+                  placeholder=${label}
+                  .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(filter, value, this)}
+                  </ox-popup-list>
+                </ox-select>
+              `
+            : html`
+                <ox-select
+                  name=${name}
+                  placeholder=${label}
+                  .value=${value}
+                  @change=${(e: CustomEvent) =>
+                    e.target?.dispatchEvent(
+                      new CustomEvent('filter-change', {
+                        detail: {
+                          name,
+                          operator,
+                          value: e.detail
+                        }
+                      })
+                    )}
+                >
+                  <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
+                </ox-select>
+              `
+        })}
+      </form>
+    `
+  }
+
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('urlParamsSensitive')) {
+      if (this.urlParamsSensitive) {
+        this._popstateEventHandler = () => {
+          const queryString = window.location.search
+          const urlParams = new URLSearchParams(queryString)
+          var filters = urlParams.get('filters')
+
+          if (filters) {
+            try {
+              this.value = json5.parse(filters)
+              this.dispatchEvent(
+                new CustomEvent('filters-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    filters: json5.parse(filters),
+                    from: 'url-parameter'
+                  }
+                })
+              )
+            } catch (e) {
+              console.error(`invalid filters params on URL query string : ${e}`)
+            }
+          }
+        }
+
+        //@ts-ignore
+        this._popstateEventHandler() // call for the first time
+
+        window.addEventListener('popstate', this._popstateEventHandler)
+
+        this._filtersChangeHandler = (e: Event) => {
+          const urlParams = new URLSearchParams(window.location.search)
+          const { filters, from } = (e as CustomEvent).detail || {}
+
+          if (from === 'url-parameter') {
+            return
+          }
+
+          if (filters.length > 0) {
+            urlParams.set('filters', json5.stringify(filters))
+          } else {
+            urlParams.delete('filters')
+          }
+          const queryString = String(urlParams)
+          const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`
+
+          history.pushState({}, document.title, url)
+        }
+
+        this.addEventListener('filters-change', this._filtersChangeHandler)
+      } else {
+        if (this._popstateEventHandler) {
+          window.removeEventListener('popstate', this._popstateEventHandler)
+        }
+        if (this._filtersChangeHandler) {
+          this.removeEventListener('popstate', this._filtersChangeHandler)
+        }
+      }
+    }
+  }
+
+  async getQueryFilters(): Promise<QueryFilter[]> {
+    const formData = new FormData(await this.form)
+
+    var filters = this.filters
+      .map((filter: FilterConfig) => {
+        const { name, type, operator } = filter
+
+        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[]
+
+    return filters
+  }
+}

package/src/filters/registry.ts

@@ -0,0 +1,54 @@
+import { FilterCheckbox } from './filter-checkbox.js'
+import { FilterInputBarcode } from './filter-input-barcode.js'
+import { FilterInput } from './filter-input.js'
+import { FilterRangeDate } from './filter-range-date.js'
+import { FilterRangeNumber } from './filter-range-number.js'
+import { FilterSelect } from './filter-select.js'
+import { FilterSelectRenderer } from './types.js'
+
+var RENDERERS: {
+  [name: string]: FilterSelectRenderer[]
+} = {
+  string: [FilterInput],
+  text: [FilterInput],
+  email: [FilterInput],
+  tel: [FilterInput],
+  integer: [FilterInput, FilterRangeNumber],
+  float: [FilterInput, FilterRangeNumber],
+  number: [FilterInput, FilterRangeNumber],
+  select: [FilterSelect],
+  boolean: [FilterCheckbox],
+  checkbox: [FilterCheckbox],
+  month: [FilterInput, FilterRangeDate],
+  week: [FilterInput, FilterRangeDate],
+  date: [FilterInput, FilterRangeDate],
+  time: [FilterInput, FilterRangeDate],
+  datetime: [FilterInput, FilterRangeDate],
+  color: [FilterInput],
+  progress: [FilterInput, FilterRangeNumber],
+  link: [FilterInput],
+  image: [FilterInput],
+  json5: [FilterInput],
+  scanner: [FilterInputBarcode],
+  barcode: [FilterInputBarcode]
+}
+
+export function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]) {
+  RENDERERS[type] = renderer
+}
+
+export function unregisterFilterRenderer(type: string): void {
+  delete RENDERERS[type]
+}
+
+export function getFilterRenderers(): { [name: string]: FilterSelectRenderer[] } {
+  return { ...RENDERERS }
+}
+
+export function getFilterRenderer(type: string): FilterSelectRenderer[] {
+  if (typeof type == 'function') {
+    return type
+  }
+
+  return RENDERERS[type || 'text'] || [FilterInput]
+}

package/src/filters/types.ts

@@ -0,0 +1,47 @@
+import { TemplateResult } from 'lit-html'
+
+export type FilterOperator =
+  | 'search'
+  | 'eq'
+  | 'between'
+  | 'gte'
+  | 'lte'
+  | 'is_not_true'
+  | 'in'
+  | 'like'
+  | 'i_like'
+  | 'noteq'
+  | 'is_empty_num_id'
+  | 'is_blank'
+  | 'is_present'
+  | 'is_not_false'
+  | 'is_true'
+  | 'is_false'
+  | 'is_not_null'
+  | 'is_null'
+  | 'notin_with_null'
+  | 'notin'
+  | 'gt'
+  | 'lt'
+  | 'i_nlike'
+  | 'nlike'
+
+export type FilterConfig = {
+  name: string
+  label: string
+  type: string
+  operator?: FilterOperator
+  options?: { [key: string]: any }
+}
+
+export type FilterValue = {
+  name: string
+  operator: FilterOperator
+  value: string | number | boolean | string[] | number[] | undefined
+}
+
+export type FilterSelectRenderer = (
+  filter: FilterConfig,
+  value: string | number | boolean | string[] | number[] | any | undefined,
+  owner: Element
+) => TemplateResult | string | void

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './styles'
 export * from './components/ox-search-form'
 export * from './components/ox-file-uploader'
+export * from './filters'

package/stories/ox-filter-form-barcode.stories.ts

@@ -0,0 +1,97 @@
+import '../src/filters/ox-filters-form-base.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-filters-form-barcode',
+  component: 'ox-filters-form-barcode',
+  argTypes: {
+    value: { control: 'object' },
+    filters: { control: 'object' },
+    urlParamsSensitive: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value?: object
+  filters?: object
+  urlParamsSensitive: boolean
+}
+
+const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-filters-form-base
+    .value=${value}
+    .filters=${filters}
+    ?url-params-sensitive=${urlParamsSensitive}
+    @filters-change=${(e: CustomEvent) => {
+      console.log('filters changed', e.detail)
+    }}
+  >
+  </ox-filters-form-base>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  filters: [
+    {
+      name: 'test',
+      type: 'barcode',
+      label: 'name',
+      operator: 'eq'
+    },
+    {
+      name: 'active',
+      type: 'boolean',
+      label: 'active',
+      operator: 'eq'
+    },
+    {
+      name: 'sss',
+      type: 'select',
+      label: 'sss',
+      operator: 'eq',
+      options: () => {
+        return [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'ABC',
+            value: 'ABC'
+          },
+          {
+            display: 'DEF',
+            value: 'DEF'
+          }
+        ]
+      }
+    },
+    {
+      name: 'range',
+      type: 'number',
+      label: 'range',
+      operator: 'between'
+    },
+    {
+      name: 'date-range',
+      type: 'datetime',
+      label: 'date',
+      operator: 'between'
+    }
+  ]
+}