@operato/form 2.0.0-alpha.0 → 2.0.0-alpha.103

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

@@ -1,17 +1,47 @@
-import '@material/mwc-icon'
+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, 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 { 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 = [
     SearchFormStyles,
     css`
@@ -24,33 +54,21 @@ export class SearchForm extends LitElement {
 
       ::placeholder {
         text-transform: capitalize;
-        color: var(--theme-white-color);
+        color: rgba(var(--secondary-color-rgb), 0.5);
       }
     `
   ]
 
-  @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
 
@@ -63,92 +81,135 @@ export class SearchForm extends LitElement {
             this.submit()
           }
         }}
+        @change=${(e: Event) => {
+          this.dispatchEvent(
+            new CustomEvent('change', {
+              detail: (e.target as HTMLInputElement).value
+            })
+          )
+
+          const name = (e.target as HTMLElement)?.getAttribute('name')
+          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()
+          }
+        }}
       >
         ${(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
-                  >
-                `
-              : 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.renderCheckbox(field)
+                : field.type === 'object'
+                  ? this.renderObject(field, autofocusConsumed++)
+                  : this.renderElse(field, autofocusConsumed++)}
           `
         )}
-        ${this.hideSearchButton || false
-          ? ``
-          : html`<mwc-icon @click=${(e: MouseEvent) => this.submit()} search>search</mwc-icon>`}
+        ${!!this.hideSearchButton
+          ? nothing
+          : html`<md-icon @click=${(e: MouseEvent) => this.submit()} search>search</md-icon>`}
       </form>
     `
   }
 
+  renderSelect(field: SearchFormField) {
+    var { options } = 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=${field.hidden}>${field.label || field.name || field.id}</label>
+      <select
+        .value=${field.value}
+        name=${ifDefined(field.name)}
+        placeholder=${ifDefined(field.placeholder)}
+        ?hidden=${field.hidden}
+      >
+        ${optionsTemplate!}
+      </select>
+    `
+  }
+
+  renderCheckbox(field: SearchFormField) {
+    return html`
+      <input
+        id="ckbx_${field.name}"
+        type="checkbox"
+        name=${ifDefined(field.name)}
+        ?checked=${field.value}
+        ?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>
+    `
+  }
+
+  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}
+        ?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}
+        ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
+      />
+    `
+  }
+
   async updated(changes: PropertyValues<this>) {
     if (changes.has('fields')) {
       this._checkInputValidity()
@@ -186,6 +247,18 @@ 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]
+            }
+          })
+        })
     }
   }
 
@@ -224,14 +297,14 @@ export class SearchForm extends LitElement {
             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,
+                ? field.hasAttribute('indeterminate')
+                  ? field._value === 'on'
+                    ? true
+                    : false
+                  : (field as HTMLInputElement).checked
+                : field.type === 'number'
+                  ? parseFloat(value)
+                  : value,
           operator
         }
       })
@@ -257,16 +330,16 @@ export class SearchForm extends LitElement {
               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,
+                  ? 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
@@ -285,14 +358,14 @@ export class SearchForm extends LitElement {
       query: gql`
         query {
           fetch: ${queryName}(${buildArgs({
-        filters: [
-          {
-            name: field,
-            operator: 'i_like',
-            value: `%${value}%`
-          }
-        ]
-      })}) {
+            filters: [
+              {
+                name: field,
+                operator: 'i_like',
+                value: `%${value}%`
+              }
+            ]
+          })}) {
             items {
               id
             }

package/src/filters/filter-checkbox.ts

@@ -2,10 +2,10 @@ import '@operato/input/ox-checkbox.js'
 
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
-  const { name } = filter
+  const { name, label } = filter
 
   return html`
     <ox-checkbox
@@ -13,6 +13,7 @@ export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
       ?checked=${value}
       indeterminatable
       ?indeterminate=${value === undefined}
+      left-label
       @change=${(e: CustomEvent) => {
         ;(e.target as HTMLElement).dispatchEvent(
           new CustomEvent('filter-change', {
@@ -26,6 +27,7 @@ export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
-    />
+      ><label><span>${label}</span></label></ox-checkbox
+    >
   `
 }

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

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

package/src/filters/filter-input.ts

@@ -1,6 +1,6 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 export const FilterInput: FilterSelectRenderer = (filter, value, owner) => {
   const { name, type } = filter

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

@@ -1,20 +1,35 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+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 } = filter
-  const [from, to] = value instanceof Array ? value : []
+  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}
-      .value=${from}
+      type=${type as 'date' | 'datetime-local'}
+      value=${from}
       from
       @keyup=${(e: KeyboardEvent) => {
         if (e.key !== 'Enter') {
@@ -38,8 +53,8 @@ export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
     ~
     <input
       name=${name}
-      type=${type}
-      .value=${to}
+      type=${type as 'date' | 'datetime-local'}
+      value=${to}
       to
       @keyup=${(e: KeyboardEvent) => {
         if (e.key !== 'Enter') {

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html'
 
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) => {
   const { name, operator } = filter

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)
+  }
+}