@operato/form 8.0.0-beta.0 → 8.0.0-beta.2

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

@@ -1,467 +0,0 @@
-import '@material/web/icon/icon.js'
-import './ox-custom-input.js'
-import './ox-custom-select.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement, nothing, PropertyValues } from 'lit'
-import { customElement, property, query, queryAll, queryAsync } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { until } from 'lit/directives/until.js'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-import { buildArgs, client } from '@operato/graphql'
-
-import { SearchFormStyles } from '../styles/search-form-styles.js'
-import { SearchFormField, SelectOption, SelectOptionObject } from '../types.js'
-
-function buildOptions(field: SearchFormField, options: SelectOption[]) {
-  const selectOptionObjects = options.map(option => {
-    switch (typeof option) {
-      case 'string':
-        return {
-          name: option,
-          value: option
-        }
-      case 'object':
-        return {
-          name: option.name || option.display,
-          value: option.value
-        }
-      default:
-        return option
-    }
-  }) as SelectOptionObject[]
-
-  return html`
-    ${selectOptionObjects?.map(
-      ({ value, display, name }) => html`
-        <option ?selected=${value == field.value} value=${value}>${name || display}</option>
-      `
-    )}
-  `
-}
-
-@customElement('ox-search-form')
-export class OxSearchForm extends LitElement {
-  static styles = [
-    MDTypeScaleStyles,
-    SearchFormStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        padding: var(--spacing-small);
-
-        position: relative;
-      }
-
-      ::placeholder {
-        text-transform: capitalize;
-        color: rgba(var(--secondary-color-rgb), 0.5);
-      }
-      label {
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-        color: var(--md-sys-color-primary);
-      }
-      select,
-      input {
-        border: none;
-        border-bottom: var(--ox-filters-input-border, 1px solid var(--md-sys-color-outline));
-        font: var(--ox-filters-input-font);
-      }
-
-      select:focus,
-      input:focus {
-        outline: none;
-        border-bottom: var(--ox-filters-input-focus-border, 1px solid var(--md-sys-color-primary));
-        color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));
-      }
-    `
-  ]
-
-  @property({ type: Array }) fields?: SearchFormField[]
-  @property({ type: Boolean }) hideSearchButton: boolean = false
-  @property({ type: Boolean, attribute: true }) autofocus: boolean = false
-
-  @queryAsync('form') form!: HTMLFormElement
-  @query('input[autofocus]') autofocused?: HTMLInputElement
-  @queryAll('input, select') formFields!: ((HTMLInputElement | HTMLSelectElement) & { field: string; _value: any })[]
-
-  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}
-
-  render() {
-    var autofocusConsumed = 0
-
-    return html`
-      <form
-        class="search-form md-typescale-body-medium-prominent"
-        @submit=${(e: Event) => {
-          e.preventDefault() // input="text" 가 한개만 있을경우에 엔터를 치면 강제 submit되는 증상 방지
-        }}
-        @change=${async (e: Event) => {
-          const field = e.target as HTMLInputElement
-          const name = field?.getAttribute('name')
-          const value = field.value
-
-          if (name && this.autoUpdateTargetsOnChange[name]) {
-            ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {
-              const target = this.renderRoot.querySelector(`[name='${name}']`)
-              if (target) {
-                ;(target as HTMLInputElement).value = ''
-              }
-            })
-
-            this.requestUpdate()
-          }
-
-          const { onchange } = this.fields?.find(field => field.name == name) || {}
-
-          const keepGoing = onchange ? await onchange.call(null, value, this) : true
-
-          if (keepGoing) {
-            this.dispatchEvent(new CustomEvent('change', { detail: value }))
-            this.submit()
-          }
-        }}
-      >
-        ${(this.fields || []).map(
-          field => html`
-            ${field.type === 'select'
-              ? this.renderSelect(field)
-              : field.type === 'checkbox'
-                ? this.renderCheckbox(field)
-                : field.type === 'object'
-                  ? this.renderObject(field, autofocusConsumed++)
-                  : this.renderElse(field, autofocusConsumed++)}
-          `
-        )}
-        ${!!this.hideSearchButton
-          ? nothing
-          : html`<md-icon @click=${(e: MouseEvent) => this.submit()} search>search</md-icon>`}
-      </form>
-    `
-  }
-
-  renderSelect(field: SearchFormField) {
-    var { id, options, readonly, label, name, value, placeholder, hidden } = field
-
-    if (typeof options === 'function') {
-      options = (options as Function).call(field, this)
-
-      if (options instanceof Promise) {
-        var optionsTemplate = html`${until(options.then(options => buildOptions(field, options)))}`
-      } else {
-        var optionsTemplate = buildOptions(field, (options || []) as SelectOption[])
-      }
-    } else {
-      var optionsTemplate = buildOptions(field, (options || []) as SelectOption[])
-    }
-
-    return html`
-      <label ?hidden=${hidden}>${label || name || id}</label>
-      <select
-        .value=${value}
-        name=${ifDefined(name)}
-        placeholder=${ifDefined(placeholder)}
-        ?hidden=${hidden}
-        ?readonly=${readonly}
-      >
-        ${optionsTemplate!}
-      </select>
-    `
-  }
-
-  renderCheckbox(field: SearchFormField) {
-    return html`
-      <input
-        id="ckbx_${field.name}"
-        type="checkbox"
-        name=${ifDefined(field.name)}
-        ?checked=${field.value}
-        ?hidden=${field.hidden}
-        ?readonly=${field.readonly}
-        @click=${(e: MouseEvent) => {
-          const checkbox = e.currentTarget as HTMLInputElement & { _value: any }
-          if (checkbox.hasAttribute('indeterminate')) {
-            const values = [undefined, 'on', 'off']
-            const currentValue = checkbox._value
-            const newValue =
-              values.indexOf(currentValue) + 1 > values.length - 1
-                ? values[0]
-                : values[values.indexOf(currentValue) + 1]
-
-            if (newValue === 'on') {
-              checkbox.checked = true
-            } else if (newValue === 'off') {
-              checkbox.checked = false
-            } else {
-              checkbox.indeterminate = true
-            }
-            checkbox._value = newValue
-          }
-        }}
-      />
-      <label for="ckbx_${field.name}" ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
-    `
-  }
-
-  renderObject(field: SearchFormField, autofocusConsumed: number) {
-    return html`
-      <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
-      <input
-        .type=${field.type}
-        name=${ifDefined(field.name)}
-        placeholder=${ifDefined(field.placeholder)}
-        .value=${field.value || ''}
-        .field=${field.field}
-        .queryName=${field.queryName}
-        ?hidden=${field.hidden}
-        ?readonly=${field.readonly}
-        ?autofocus=${!field.hidden && 0 === autofocusConsumed}
-      />
-    `
-  }
-
-  renderElse(field: SearchFormField, autofocusConsumed: number) {
-    return html`
-      <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
-      <input
-        .type=${field.type}
-        .value=${field.value || ''}
-        name=${ifDefined(field.name)}
-        placeholder=${ifDefined(field.placeholder)}
-        ?hidden=${field.hidden}
-        ?readonly=${field.readonly}
-        ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
-      />
-    `
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('fields')) {
-      this._checkInputValidity()
-
-      var formFields = Array.from(this.formFields)
-      this.fields &&
-        this.fields.forEach(field => {
-          var formField = formFields.find(f => f.name == field.name)
-          if (field.props instanceof Object && !Array.isArray(field.props)) {
-            for (let prop in field.props) {
-              if (field.props[prop]) {
-                formField!.setAttribute(prop, field.props[prop])
-              }
-            }
-          }
-
-          if (field.attrs && Array.isArray(field.attrs)) {
-            field.attrs.forEach(attr => {
-              if (attr === 'indeterminate') {
-                ;(formField as HTMLInputElement).indeterminate = true
-              } else {
-                formField!.setAttribute(attr, '')
-              }
-            })
-          }
-
-          if (field.handlers instanceof Object && !Array.isArray(field.handlers)) {
-            for (let eventName in field.handlers) {
-              formField!.addEventListener(eventName, field.handlers[eventName])
-            }
-          }
-        })
-
-      if (this.autofocus) {
-        await this.requestUpdate()
-        this.autofocused?.focus()
-      }
-
-      this.autoUpdateTargetsOnChange = {}
-      this.fields
-        ?.filter(filter => filter.boundTo && filter.boundTo.length > 0)
-        .map(({ name, boundTo }) => {
-          boundTo!.forEach(to => {
-            const origin = this.autoUpdateTargetsOnChange[to] || []
-            if (name && !origin.includes(name)) {
-              this.autoUpdateTargetsOnChange[to] = [...origin, name]
-            }
-          })
-        })
-    }
-  }
-
-  getFieldByName(name: string) {
-    return this.renderRoot.querySelector(`[name=${name}]`)
-  }
-
-  _checkInputValidity() {
-    const names = this.fields?.map(i => i.name) || []
-    const result = names.every(name => {
-      return names.indexOf(name) === names.lastIndexOf(name)
-    })
-    if (!result) {
-      throw new Error('Field name is duplicated.')
-    }
-  }
-
-  get searchParams() {
-    let searchParam = new URLSearchParams()
-    const fields = Array.from(this.formFields)
-    fields.forEach(field => searchParam.append(field.name, field.value))
-
-    return decodeURI(searchParam.toString())
-  }
-
-  get queryFilters() {
-    return Array.from(this.formFields)
-      .filter(
-        field =>
-          (field.type !== 'checkbox' && field.value && field.value !== '') ||
-          (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||
-          (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)
-      )
-      .map(field => {
-        const operator = field.getAttribute('searchOper') || ''
-        let value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value
-        return {
-          name: field.name,
-          value:
-            field.type === 'text'
-              ? value
-              : field.type === 'checkbox'
-                ? field.hasAttribute('indeterminate')
-                  ? field._value === 'on'
-                    ? true
-                    : false
-                  : (field as HTMLInputElement).checked
-                : field.type === 'number'
-                  ? parseFloat(value)
-                  : value,
-          operator
-        }
-      })
-  }
-
-  public async getQueryFilters() {
-    return await Promise.all(
-      Array.from(this.formFields)
-        .filter(
-          field =>
-            (field.type !== 'checkbox' && field.value && field.value !== '') ||
-            (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||
-            (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)
-        )
-        .map(async field => {
-          const name = field.name
-          const operator = (field.type === 'text' && field.field ? 'in' : field.getAttribute('searchOper')) || ''
-          const value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value
-          const filter = {
-            name,
-            operator,
-            value:
-              field.type === 'text' && field.getAttribute('type') === 'object'
-                ? await this._getResourceIds(field)
-                : field.type === 'text'
-                  ? value
-                  : field.type === 'checkbox'
-                    ? field.hasAttribute('indeterminate')
-                      ? field._value === 'on'
-                        ? true
-                        : false
-                      : (field as HTMLInputElement).checked
-                    : field.type === 'number'
-                      ? parseFloat(value)
-                      : value,
-            relation: field.type === 'text' && field.getAttribute('type') === 'object'
-          }
-          return filter
-        })
-    )
-  }
-
-  private async _getResourceIds(inputField: HTMLInputElement | HTMLSelectElement) {
-    const {
-      field = 'name',
-      value,
-      queryName
-    } = inputField as (HTMLInputElement | HTMLSelectElement) & { field: string; queryName: string }
-
-    const response = await client.query({
-      query: gql`
-        query {
-          fetch: ${queryName}(${buildArgs({
-            filters: [
-              {
-                name: field,
-                operator: 'i_like',
-                value: `%${value}%`
-              }
-            ]
-          })}) {
-            items {
-              id
-            }
-          }
-        }
-      `
-    })
-
-    if (!response.errors) {
-      const items = response.data.fetch.items as { id: string }[]
-      return (items && items.map(item => item.id)) || []
-    }
-  }
-
-  serialize() {
-    let data: { [name: string]: any } = {}
-
-    Array.from(this.formFields).forEach(field => {
-      const name = field.name
-      if (field.type === 'number') {
-        data[name] = parseFloat(field.value)
-      } else if (field.type === 'checkbox') {
-        data[name] = (field as HTMLInputElement).checked
-      } else {
-        data[name] = field.value
-      }
-    })
-
-    return data
-  }
-
-  reset(value?: string[] | { [field: string]: any }) {
-    this.form
-      .then((form: HTMLFormElement) => {
-        if (value) {
-          if (value instanceof Array) {
-            value
-              .filter(item => typeof item == 'string')
-              .forEach(item => {
-                const field = this.getFieldByName(item)
-                if (field) {
-                  ;(field as HTMLInputElement).value = ''
-                }
-              })
-          } else {
-            const keys = Object.keys(value)
-            keys
-              .filter(key => typeof key == 'string')
-              .forEach(key => {
-                const field = this.getFieldByName(key)
-                if (field) {
-                  ;(field as HTMLInputElement).value = value[key]
-                }
-              })
-          }
-        } else {
-          form.reset()
-        }
-      })
-      .catch((error: any) => {
-        console.error('Error resetting the form:', error)
-      })
-  }
-
-  submit() {
-    this.dispatchEvent(new CustomEvent('submit'))
-  }
-}

package/src/filters/filter-checkbox.ts

@@ -1,34 +0,0 @@
-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, label, readonly } = filter
-
-  return html`
-    <ox-checkbox
-      name=${name}
-      ?checked=${value}
-      indeterminatable
-      ?indeterminate=${value === undefined}
-      left-label
-      @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
-            }
-          })
-        )
-      }}
-      ?readonly=${readonly}
-      ><label><span>${label}</span></label></ox-checkbox
-    >
-  `
-}

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

@@ -1,35 +0,0 @@
-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, readonly, options } = filter
-  const { englishOnly, selectAfterChange } = (options || {}) as { [key: string]: any }
-
-  return html`
-    <ox-input-barcode
-      name=${name}
-      ?english-only=${englishOnly}
-      ?select-after-change=${selectAfterChange}
-      .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
-            }
-          })
-        )
-      }}
-      filter-input
-      ?readonly=${readonly}
-    ></ox-input-barcode>
-  `
-}

package/src/filters/filter-input.ts

@@ -1,30 +0,0 @@
-import { html } from 'lit-html'
-
-import { FilterSelectRenderer } from '../types.js'
-
-export const FilterInput: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, type, readonly } = 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
-            }
-          })
-        )
-      }}
-      ?readonly=${readonly}
-    />
-  `
-}

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

@@ -1,81 +0,0 @@
-import { html } from 'lit-html'
-
-import { FilterSelectRenderer } from '../types.js'
-
-function formatDate(type: string, date: Date) {
-  var year = date.getFullYear()
-  var month = ('0' + (date.getMonth() + 1)).slice(-2)
-  var day = ('0' + date.getDate()).slice(-2)
-  var hours = ('0' + date.getHours()).slice(-2)
-  var minutes = ('0' + date.getMinutes()).slice(-2)
-
-  var formatDate = year + '-' + month + '-' + day
-
-  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes
-}
-
-export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
-  var { name, type, operator, readonly } = filter
-  var [from, to] = value instanceof Array ? value : []
-
-  if (type === 'datetime') {
-    type = 'datetime-local'
-  }
-
-  from = formatDate(type, new Date(from))
-  to = formatDate(type, new Date(to))
-
-  return html`
-    <input
-      name=${name}
-      type=${type as 'date' | 'datetime-local'}
-      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)
-            }
-          })
-        )
-      }}
-      ?readonly=${readonly}
-    />
-    ~
-    <input
-      name=${name}
-      type=${type as 'date' | 'datetime-local'}
-      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)
-            }
-          })
-        )
-      }}
-      ?readonly=${readonly}
-    />
-  `
-}