@operato/form 1.0.0-beta.3 → 1.0.0-beta.30

package/package.json

@@ -3,7 +3,7 @@
   "description": "WebApplication form supporting components following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.30",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -11,6 +11,7 @@
     "./styles/multi-column-form-styles.js": "./dist/src/styles/multi-column-form-styles.js",
     "./styles/search-form-styles.js": "./dist/src/styles/search-form-styles.js",
     "./styles/single-column-form-styles.js": "./dist/src/styles/single-column-form-styles.js",
+    "./ox-filters-form-base.js": "./dist/src/filters/ox-filters-form-base.js",
     "./ox-search-form.js": "./dist/src/components/ox-search-form.js",
     "./ox-file-uploader.js": "./dist/src/components/ox-file-uploader.js"
   },
@@ -37,8 +38,8 @@
   },
   "dependencies": {
     "@material/mwc-icon": "^0.25.3",
-    "@operato/graphql": "^1.0.0-beta.3",
-    "@operato/utils": "^1.0.0-beta.3",
+    "@operato/graphql": "^1.0.0-beta.30",
+    "@operato/utils": "^1.0.0-beta.30",
     "lit": "^2.2.1"
   },
   "devDependencies": {
@@ -49,12 +50,13 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@web/dev-server-storybook": "^0.5.0",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
+    "husky": "^7.0.2",
+    "json5": "^2.2.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -73,5 +75,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "e344f2744d26410b75d8077d02709c7acb836026"
+  "gitHead": "1fd1abd7f54b71eab502417de355058cdc7c66c5"
 }

package/src/filters/filter-checkbox.ts

@@ -0,0 +1,31 @@
+import '@operato/input/ox-checkbox.js'
+
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from './types.js'
+
+export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
+  const { name } = filter
+
+  return html`
+    <ox-checkbox
+      name=${name}
+      ?checked=${value}
+      indeterminatable
+      ?indeterminate=${value === undefined}
+      @change=${(e: CustomEvent) => {
+        ;(e.target as HTMLElement).dispatchEvent(
+          new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              name: name,
+              operator: filter.operator,
+              value: (e.target as Element & { checked: boolean | undefined }).checked
+            }
+          })
+        )
+      }}
+    />
+  `
+}

package/src/filters/filter-input-barcode.ts

@@ -0,0 +1,30 @@
+import '@operato/input/ox-input-barcode.js'
+
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from './types.js'
+
+export const FilterInputBarcode: FilterSelectRenderer = (filter, value, owner) => {
+  const { name, type } = filter
+
+  return html`
+    <ox-input-barcode
+      name=${name}
+      .value=${value === undefined ? '' : value}
+      @change=${(e: CustomEvent) => {
+        const input = e.target as HTMLInputElement
+        input.dispatchEvent(
+          new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              name,
+              operator: filter.operator,
+              value: input.value
+            }
+          })
+        )
+      }}
+    />
+  `
+}

package/src/filters/filter-input.ts

@@ -0,0 +1,29 @@
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from './types.js'
+
+export const FilterInput: FilterSelectRenderer = (filter, value, owner) => {
+  const { name, type } = filter
+
+  return html`
+    <input
+      type=${type}
+      name=${name}
+      .value=${value === undefined ? '' : value}
+      @change=${(e: CustomEvent) => {
+        const input = e.target as HTMLInputElement
+        input.dispatchEvent(
+          new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              name: name,
+              operator: filter.operator,
+              value: input.value
+            }
+          })
+        )
+      }}
+    />
+  `
+}

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

@@ -0,0 +1,64 @@
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from './types.js'
+
+export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
+  var { name, type, operator } = filter
+  const [from, to] = value instanceof Array ? value : []
+
+  if (type === 'datetime') {
+    type = 'datetime-local'
+  }
+
+  return html`
+    <input
+      name=${name}
+      type=${type}
+      .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=${type}
+      .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-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
+  }
+}