@operato/form 2.0.0-alpha.94 → 2.0.0-beta.0

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

@@ -3,63 +3,120 @@ import './ox-custom-input.js'
 import './ox-custom-select.js'
 
 import gql from 'graphql-tag'
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, queryAll } from 'lit/decorators.js'
+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 SearchForm extends LitElement {
+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: var(--theme-white-color);
+        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-ref-palette-primary50));
+        color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));
       }
     `
   ]
 
-  @property({ type: Array }) fields?: {
-    type: string
-    hidden: boolean
-    name: string
-    id: string
-    label: string
-    placeholder: string
-    value: any
-    field: string
-    queryName: string
-    props: { [prop: string]: string }
-    attrs: string[]
-    options: { name: string; value: string }[]
-    handlers: { [event: string]: EventListener }
-  }[]
+  @property({ type: Array }) fields?: SearchFormField[]
   @property({ type: Boolean }) hideSearchButton: boolean = false
   @property({ type: Boolean, attribute: true }) autofocus: boolean = false
 
-  @query('form') form!: HTMLFormElement
+  @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"
-        @keypress=${(e: KeyboardEvent) => {
-          if (e.key === 'Enter') {
-            e.preventDefault()
+        class="search-form md-typescale-body-medium-prominent"
+        @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()
           }
         }}
@@ -67,88 +124,116 @@ export class SearchForm extends LitElement {
         ${(this.fields || []).map(
           field => html`
             ${field.type === 'select'
-              ? html`
-                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
-                  <select
-                    .value=${field.value}
-                    .name=${field.name}
-                    ?hidden=${field.hidden}
-                    .placeholder=${field.placeholder || ''}
-                  >
-                    ${(field.options || []).map(
-                      (option: { name: string; value: string }) => html`
-                        <option ?selected=${option.value == field.value} value=${option.value}>${option.name}</option>
-                      `
-                    )}
-                  </select>
-                `
+              ? this.renderSelect(field)
               : field.type === 'checkbox'
-                ? html`
-                    <input
-                      id="ckbx_${field.name}"
-                      type="checkbox"
-                      ?checked="${field.value}"
-                      .name=${field.name}
-                      ?hidden=${field.hidden}
-                      @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
-                    >
-                  `
+                ? this.renderCheckbox(field)
                 : field.type === 'object'
-                  ? html`
-                      <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
-                      <input
-                        .type=${field.type}
-                        .value=${field.value || ''}
-                        .name=${field.name}
-                        .field=${field.field}
-                        .queryName=${field.queryName}
-                        .placeholder=${field.placeholder || ''}
-                        ?hidden=${field.hidden}
-                        ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
-                      />
-                    `
-                  : html`
-                      <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
-                      <input
-                        .type=${field.type}
-                        .value=${field.value || ''}
-                        .name=${field.name}
-                        .placeholder=${field.placeholder || ''}
-                        ?hidden=${field.hidden}
-                        ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
-                      />
-                    `}
+                  ? this.renderObject(field, autofocusConsumed++)
+                  : this.renderElse(field, autofocusConsumed++)}
           `
         )}
-        ${this.hideSearchButton || false
-          ? ``
+        ${!!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()
@@ -186,9 +271,25 @@ export class SearchForm extends LitElement {
         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 => {
@@ -324,6 +425,39 @@ export class SearchForm extends LitElement {
     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

@@ -5,7 +5,7 @@ import { html } from 'lit-html'
 import { FilterSelectRenderer } from '../types.js'
 
 export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, label } = filter
+  const { name, label, readonly } = filter
 
   return html`
     <ox-checkbox
@@ -27,6 +27,7 @@ export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
+      ?readonly=${readonly}
       ><label><span>${label}</span></label></ox-checkbox
     >
   `

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

@@ -5,8 +5,8 @@ import { html } from 'lit-html'
 import { FilterSelectRenderer } from '../types.js'
 
 export const FilterInputBarcode: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, type } = filter
-  const { englishOnly, selectAfterChange } = filter.options || {}
+  const { name, readonly, options } = filter
+  const { englishOnly, selectAfterChange } = (options || {}) as { [key: string]: any }
 
   return html`
     <ox-input-barcode
@@ -28,6 +28,8 @@ export const FilterInputBarcode: FilterSelectRenderer = (filter, value, owner) =
           })
         )
       }}
-    />
+      filter-input
+      ?readonly=${readonly}
+    ></ox-input-barcode>
   `
 }

package/src/filters/filter-input.ts

@@ -3,7 +3,7 @@ import { html } from 'lit-html'
 import { FilterSelectRenderer } from '../types.js'
 
 export const FilterInput: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, type } = filter
+  const { name, type, readonly } = filter
 
   return html`
     <input
@@ -24,6 +24,7 @@ export const FilterInput: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
+      ?readonly=${readonly}
     />
   `
 }

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

@@ -15,7 +15,7 @@ function formatDate(type: string, date: Date) {
 }
 
 export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
-  var { name, type, operator } = filter
+  var { name, type, operator, readonly } = filter
   var [from, to] = value instanceof Array ? value : []
 
   if (type === 'datetime') {
@@ -49,6 +49,7 @@ export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
+      ?readonly=${readonly}
     />
     ~
     <input
@@ -74,6 +75,7 @@ export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
+      ?readonly=${readonly}
     />
   `
 }

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

@@ -3,7 +3,7 @@ import { html } from 'lit-html'
 import { FilterSelectRenderer } from '../types.js'
 
 export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, operator } = filter
+  const { name, operator, readonly } = filter
   const [from, to] = value instanceof Array ? value : []
 
   return html`
@@ -31,6 +31,7 @@ export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) =>
           })
         )
       }}
+      ?readonly=${readonly}
     />
     ~
     <input
@@ -57,6 +58,7 @@ export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) =>
           })
         )
       }}
+      ?readonly=${readonly}
     />
   `
 }

package/src/filters/filter-select.ts

@@ -1,18 +1,12 @@
 import '@operato/input/ox-checkbox.js'
 
-import { html } from 'lit-html'
+import { html } from 'lit'
+import { until } from 'lit/directives/until.js'
 
-import { FilterSelectRenderer } from '../types.js'
+import { FilterOperator, FilterSelectRenderer, SelectOption, SelectOptionObject } 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) => {
+function buildOptions(options: SelectOption[], operator?: FilterOperator) {
+  const selectOptionObjects = options.map(option => {
     switch (typeof option) {
       case 'string':
         return {
@@ -21,27 +15,42 @@ export const FilterSelect: FilterSelectRenderer = (filter, value, owner) => {
         }
       case 'object':
         return {
-          display: option.display,
+          display: option.display || option.name,
           value: option.value
         }
       default:
         return option
     }
-  })
+  }) as SelectOptionObject[]
 
   return operator === 'in'
     ? html`
-        ${options
-          ?.filter((option: { display: string; value: any }) => !!option)
+        ${selectOptionObjects
+          ?.filter(option => !!option)
           .map(
-            (option: { display: string; value: any }) =>
-              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+            ({ value, display, name }) => html` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `
           )}
       `
     : html`
-        ${options?.map(
-          (option: { display: string; value: any }) =>
-            html` <div option value=${option.value}>${option.display}&nbsp;</div> `
+        ${selectOptionObjects?.map(
+          ({ value, display, name }) => html` <div option value=${value}>${display || name}&nbsp;</div> `
         )}
       `
 }
+
+export const FilterSelect: FilterSelectRenderer = (filter, value, owner) => {
+  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+  var { operator, options } = filter
+
+  if (typeof options === 'function') {
+    options = (options as Function).call(filter, 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)
+  }
+}