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

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

@@ -4,24 +4,28 @@ 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 { css, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
+import { customElement, property, queryAsync, state } from 'lit/decorators.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { getDefaultValue } from '@operato/time-calculator'
+import { PagePreferenceProvider } from '@operato/p13n'
 
 import { FilterStyles } from './filter-styles.js'
 import { getFilterRenderer } from './registry.js'
-import { FilterConfig, FilterOperator, FilterValue } from '../types.js'
+import { FilterConfig, FilterOperator, FilterSelectRenderer, FilterValue, PersonalFilterPreference } from '../types.js'
 
 export type QueryFilterRangeValue = [from: number, to: number]
 
 @customElement('ox-filters-form-base')
 export class OxFiltersFormBase extends LitElement {
   static styles = [
+    MDTypeScaleStyles,
     FilterStyles,
     css`
       :host {
         display: flex;
+        padding: var(--spacing-small);
       }
 
       form {
@@ -29,13 +33,13 @@ export class OxFiltersFormBase extends LitElement {
 
         display: flex;
         flex-flow: row wrap;
-        gap: var(--ox-filters-form-gap);
+        gap: var(--spacing-medium) var(--spacing-large);
       }
 
       form > * {
         display: flex;
         align-items: center;
-        gap: var(--input-intra-gap, 7px);
+        gap: var(--spacing-small, 4px);
       }
 
       label span {
@@ -43,8 +47,9 @@ export class OxFiltersFormBase extends LitElement {
       }
 
       @media only screen and (max-width: 460px) {
-        label[between] {
-          display: block;
+        form {
+          flex-direction: column;
+          flex-flow: column;
         }
       }
     `
@@ -54,11 +59,16 @@ export class OxFiltersFormBase extends LitElement {
   @property({ type: Array }) filters: FilterConfig[] = []
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
   @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true
+  @property({ type: Object }) personalConfigProvider?: PagePreferenceProvider
+
+  @state() personalConfig?: PersonalFilterPreference
+  @state() personalFilters?: FilterConfig[]
 
   @queryAsync('form') form!: HTMLFormElement
 
   private _popstateEventHandler?: EventListener
   private _filtersChangeHandler?: EventListener
+  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}
 
   connectedCallback(): void {
     super.connectedCallback()
@@ -72,9 +82,25 @@ export class OxFiltersFormBase extends LitElement {
         operator,
         value: defaultValue,
         onchange
-      } = this.filters.find(filter => filter.name == name) || {}
+      } = (this.personalFilters || []).find(filter => filter.name == name) || {}
+
+      if (this.autoUpdateTargetsOnChange[name]) {
+        /* 
+          일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함.
+          */
+        ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {
+          const target = this.renderRoot.querySelector(`[name='${name}']`)
+          if (target) {
+            ;(target as HTMLInputElement).value = ''
+          }
+        })
+
+        this.requestUpdate()
+      }
+
+      const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true
 
-      const keepGoing = onchange ? onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true
+      this.value = await this.getQueryFilters()
 
       keepGoing &&
         this.dispatchEvent(
@@ -90,12 +116,12 @@ export class OxFiltersFormBase extends LitElement {
     })
   }
 
-  buildDefaultValue(operator: string, defaultValue: any) {
+  buildDefaultValue(operator: FilterOperator, defaultValue: any) {
     if (defaultValue === undefined) {
       return
     }
     if (operator == 'between') {
-      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
+      return defaultValue instanceof Array && (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
     } else {
       return getDefaultValue(defaultValue, this)
     }
@@ -104,84 +130,98 @@ export class OxFiltersFormBase extends LitElement {
   render(): TemplateResult {
     return html`
       <form
+        class="md-typescale-body-medium-prominent"
         @submit=${(e: Event) => {
           e.preventDefault()
         }}
       >
-        ${this.filters.map((filter: FilterConfig) => {
-          const { name, label, type, operator, value: defaultValue } = 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 ?? this.buildDefaultValue(operator!, defaultValue)
-
-          if (!renderer) {
-            return html``
-          }
+        ${(this.personalFilters || [])
+          .filter(filter => !filter.hidden)
+          .map((filter: FilterConfig) => {
+            const { name, label, type, operator, readonly, value: defaultValue } = 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 ?? this.buildDefaultValue(operator!, defaultValue)
+
+            if (!renderer) {
+              return nothing
+            }
 
-          return type === 'search'
-            ? html`<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
-            : type === 'boolean' || type === 'checkbox'
-              ? renderer(filter, value, this)
-              : type !== 'select'
-                ? html`
-                    <label filter-title ?between=${operator == 'between'}
-                      ><span>${label}</span> ${renderer(filter, value, this)}
-                    </label>
-                  `
-                : operator === 'in'
+            return type === 'search'
+              ? html`<ox-input-search
+                  name="search"
+                  .value=${value}
+                  ?autofocus=${this.autofocus}
+                  ?readonly=${readonly}
+                ></ox-input-search>`
+              : type === 'boolean' || type === 'checkbox'
+                ? renderer(filter, value, this)
+                : type !== '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 multiple attr-selected="checked" with-search>
-                          ${renderer(filter, value, this)}
-                        </ox-popup-list>
-                      </ox-select>
+                      <label filter-title ?between=${operator == 'between'}
+                        ><span>${label}</span> ${renderer(filter, value, this)}
+                      </label>
                     `
-                  : 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>
-                    `
-        })}
+                  : this.renderSelect(filter, value, renderer)
+          })}
       </form>
+
+      <slot name="setting"></slot>
     `
   }
 
-  getFieldByName(name: string) {
-    return this.renderRoot.querySelector(`[name=${name}]`)
+  renderSelect(filter: FilterConfig, value: any, renderer: FilterSelectRenderer) {
+    const { name, label, operator, readonly, value: defaultValue } = filter
+
+    return operator === 'in'
+      ? html`
+          <ox-select
+            name=${name}
+            placeholder=${label}
+            .value=${value ?? defaultValue}
+            @change=${(e: CustomEvent) =>
+              e.target?.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  detail: {
+                    name,
+                    operator,
+                    value: e.detail
+                  }
+                })
+              )}
+            ?readonly=${readonly}
+          >
+            <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 ?? defaultValue}
+            @change=${(e: CustomEvent) =>
+              e.target?.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  detail: {
+                    name,
+                    operator,
+                    value: e.detail
+                  }
+                })
+              )}
+            ?readonly=${readonly}
+          >
+            <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
+          </ox-select>
+        `
   }
 
   async updated(changes: PropertyValues<this>) {
@@ -245,12 +285,82 @@ export class OxFiltersFormBase extends LitElement {
         }
       }
     }
+
+    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
+      this.personalConfig = await this.personalConfigProvider.load()
+    } else if (changes.has('filters') || changes.has('personalConfig')) {
+      this.applyUpdatedConfiguration()
+    }
+  }
+
+  async applyUpdatedConfiguration() {
+    if (!this.filters) {
+      return
+    }
+
+    if (!this.personalConfig) {
+      this.personalFilters = [...this.filters]
+    } else {
+      const { filters: personalFilters } = this.personalConfig
+
+      if (personalFilters) {
+        const xfilters = this.filters.map((filter: Partial<FilterConfig>) => {
+          const personalFilter = personalFilters.find(pFilter => pFilter.name == filter.name)
+          return personalFilter ? { ...filter, ...personalFilter } : filter
+        })
+
+        function reorderList(a: Partial<FilterConfig>[], b: Partial<FilterConfig>[]): Partial<FilterConfig>[] {
+          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
+          const result = new Array(a.length)
+
+          // b 배열에 없는 아이템은 원래 위치로 채움
+          a.forEach((item, index) => {
+            if (!item.name || !b.find(bi => bi.name == item.name)) {
+              result[index] = item
+            }
+          })
+
+          b.forEach(item => {
+            const ai = a.find(ai => ai.name == item.name)
+            if (ai) {
+              result[result.findIndex(slot => slot === undefined)] = ai
+            }
+          })
+
+          return result
+        }
+
+        // 배열 재정렬 실행
+        this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterConfig[]
+      }
+    }
+
+    this.autoUpdateTargetsOnChange = {}
+
+    this.personalFilters
+      ?.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]
+          }
+        })
+      })
+
+    if (!this.urlParamsSensitive) {
+      this.value = await this.getQueryFilters()
+    }
+  }
+
+  getFieldByName(name: string) {
+    return this.renderRoot.querySelector(`[name=${name}]`)
   }
 
   async getQueryFilters(): Promise<FilterValue[]> {
     const formData = new FormData(await this.form)
 
-    var filters = this.filters
+    var filters = (this.personalFilters || [])
       .map((filter: FilterConfig) => {
         const { name, type, operator } = filter
 
@@ -290,4 +400,37 @@ export class OxFiltersFormBase extends LitElement {
 
     return filters
   }
+
+  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)
+      })
+  }
 }

package/src/styles/multi-column-form-styles.ts

@@ -23,7 +23,7 @@ export const MultiColumnFormStyles = css`
 
     padding: var(--legend-padding);
     font: var(--legend-font);
-    color: var(--legend-text-color);
+    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
     border-bottom: var(--legend-border-bottom);
   }
 
@@ -33,7 +33,7 @@ export const MultiColumnFormStyles = css`
     text-transform: capitalize;
     align-self: center;
 
-    color: var(--label-color);
+    color: var(--label-color, var(--md-sys-color-on-surface));
     font: var(--label-font);
   }
 
@@ -72,7 +72,7 @@ export const MultiColumnFormStyles = css`
     grid-column: span 9 / auto;
 
     font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color);
+    color: var(--form-sublabel-color, var(--md-sys-color-on-surface));
   }
   .multi-column-form [options-wrap] {
     grid-column: span 21 / auto;
@@ -80,7 +80,7 @@ export const MultiColumnFormStyles = css`
 
   input:focus {
     outline: none;
-    border: 1px solid var(--focus-background-color);
+    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
   }
   input[type='checkbox'] {
     margin: 0;
@@ -109,7 +109,7 @@ export const MultiColumnFormStyles = css`
     .multi-column-form [custom-input] {
       grid-column: span 8 / auto;
       max-width: initial;
-      padding: var(--padding-default);
+      padding: var(--padding-default, var(--spacing-medium));
       font: normal 15px var(--theme-font);
     }
     .multi-column-form input[type='checkbox'],
@@ -131,7 +131,7 @@ export const MultiColumnFormStyles = css`
     .multi-column-form [options-wrap] {
       grid-column: span 12 / auto;
       display: grid;
-      grid-gap: var(--padding-default) var(--padding-narrow);
+      grid-gap: var(--padding-default, var(--spacing-small)) var(--padding-narrow, var(--spacing-small));
       grid-template-columns: repeat(12, 1fr);
     }
     .multi-column-form [options-wrap] input[type='checkbox'] + label,

package/src/styles/search-form-styles.ts

@@ -3,17 +3,16 @@ import { css } from 'lit'
 export const SearchFormStyles = css`
   :host {
     overflow: auto;
-    background-color: var(--search-form-background-color);
+    background-color: transparent;
   }
 
   .search-form {
     position: relative;
     display: grid;
     grid-template-columns: repeat(24, 1fr);
-    grid-gap: var(--form-grid-gap);
+    grid-gap: var(--form-grid-gap, var(--spacing-medium));
     grid-auto-rows: minmax(24px, auto);
-    padding: var(--search-form-box-padding);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    background-color: var(--search-form-background-color, var(--md-sys-color-surface));
   }
   .search-form label {
     grid-column: span 3;
@@ -21,8 +20,8 @@ export const SearchFormStyles = css`
     align-self: center;
     text-transform: capitalize;
 
-    color: var(--label-color);
-    font: var(--label-font);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    color: var(--md-sys-color-on-primary-container);
   }
 
   .search-form input,
@@ -30,12 +29,13 @@ export const SearchFormStyles = css`
     grid-column: span 9;
 
     border: var(--input-field-border);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: var(--input-field-border-radius);
-    padding: var(--input-field-padding);
+    padding: var(--input-field-padding, var(--spacing-tiny));
     font: var(--input-field-font);
     max-width: 85%;
-    color: var(--input-field-color);
-    background-color: var(--input-field-background-color);
+    color: var(--input-field-color, var(--md-sys-color-on-surface-variant));
+    background-color: transparent;
   }
 
   .search-form select {
@@ -60,13 +60,13 @@ export const SearchFormStyles = css`
     grid-column: span 9 / auto;
 
     font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color);
+    color: var(--form-sublabel-color, var(--md-sys-color-on-surface-variant));
   }
 
   input:focus {
     outline: none;
-    border: 1px solid var(--focus-background-color);
   }
+
   input[type='checkbox'] {
     margin: 0;
   }
@@ -75,14 +75,19 @@ export const SearchFormStyles = css`
     position: absolute;
     right: 1%;
     bottom: 15px;
-    color: var(--search-form-icon-color);
+    color: var(--search-form-icon-color, var(--md-sys-color-on-surface-variant));
+  }
+
+  input[readonly],
+  select[readonly] {
+    background-color: #f0f0f0;
   }
 
   @media screen and (max-width: 460px) {
     .search-form {
       grid-template-columns: repeat(12, 1fr);
-      grid-gap: 10px 5px;
-      background-color: var(--search-form-narrow-background-color);
+      grid-gap: var(--spacing-medium) var(--spacing-medium);
+      background-color: transparent;
 
       max-height: 100%;
       overflow-y: auto;
@@ -91,13 +96,13 @@ export const SearchFormStyles = css`
       grid-column: span 3;
       padding-right: 5px;
       align-self: center;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
     .search-form input,
     .search-form select {
       grid-column: span 8;
       max-width: 100%;
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-surface, var(--md-sys-color-on-surface));
     }
     .search-form input[type='checkbox'],
     .search-form input[type='radio'] {
@@ -112,12 +117,12 @@ export const SearchFormStyles = css`
       align-self: center;
       position: relative;
       left: 5px;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
 
     [search] {
       right: 3%;
-      color: var(--search-form-narrow-text-color);
+      color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
     }
   }
   @media (min-width: 461px) and (max-width: 1024px) {

package/src/styles/single-column-form-styles.ts

@@ -24,7 +24,7 @@ export const SingleColumnFormStyles = css`
 
     padding: var(--legend-padding);
     font: var(--legend-font);
-    color: var(--legend-text-color);
+    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
     border-bottom: var(--legend-border-bottom);
   }
 
@@ -33,7 +33,7 @@ export const SingleColumnFormStyles = css`
     text-align: right;
     text-transform: capitalize;
 
-    color: var(--label-color);
+    color: var(--label-color, var(--md-sys-color-on-surface));
     font: var(--label-font);
   }
 
@@ -66,12 +66,12 @@ export const SingleColumnFormStyles = css`
     grid-column: span 9 / auto;
 
     font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color);
+    color: var(--form-sublabel-color, var(--md-sys-color-on-surface));
   }
 
   input:focus {
     outline: none;
-    border: 1px solid var(--focus-background-color);
+    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
   }
   input[type='checkbox'] {
     margin: 0;
@@ -94,7 +94,7 @@ export const SingleColumnFormStyles = css`
     .single-column-form [custom-input] {
       grid-column: span 12;
 
-      padding: var(--padding-default);
+      padding: var(--padding-default, var(--spacing-medium));
       font: normal 15px var(--theme-font);
     }
     .single-column-form input[type='checkbox'],

package/src/types.ts

@@ -1,5 +1,6 @@
 import { TemplateResult } from 'lit-html'
 import { OxFiltersFormBase } from './filters/ox-filters-form-base'
+import { OxSearchForm } from './components/ox-search-form'
 
 export type FilterOperator =
   | 'search'
@@ -27,12 +28,31 @@ export type FilterOperator =
   | 'i_nlike'
   | 'nlike'
 
+export type SelectOptionObject =
+  | {
+      name: string
+      display?: never
+      value: string
+    }
+  | {
+      display: string
+      name?: never
+      value: string
+    }
+
+export type SelectOption = SelectOptionObject | string
+
+export type FilterChangedCallback = (value: any, form: OxFiltersFormBase) => boolean | Promise<boolean>
+
 export type FilterConfig = {
   name: string
   label: string
   type: string
   operator?: FilterOperator
-  options?: { [key: string]: any }
+  options?:
+    | { [key: string]: any }
+    | SelectOption[]
+    | ((form: OxFiltersFormBase) => SelectOption[] | Promise<SelectOption[]>)
   value?:
     | string
     | number
@@ -42,6 +62,9 @@ export type FilterConfig = {
     | number[]
     | { name: string; [params: string]: any }[]
     | undefined
+  boundTo?: string[]
+  hidden?: boolean
+  readonly?: boolean
   onchange?: FilterChangedCallback
 }
 
@@ -57,4 +80,27 @@ export type FilterSelectRenderer = (
   owner: Element
 ) => TemplateResult | string | void
 
-export type FilterChangedCallback = (value: any, form: OxFiltersFormBase) => boolean
+export type SearchFilterChangedCallback = (value: any, form: OxSearchForm) => boolean | Promise<boolean>
+
+export type SearchFormField = {
+  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?: SelectOption[] | ((form: OxSearchForm) => SelectOption[] | Promise<SelectOption[]>)
+  boundTo?: string[]
+  readonly?: boolean
+  handlers?: { [event: string]: EventListener }
+  onchange?: SearchFilterChangedCallback
+}
+
+export type PersonalFilterPreference = {
+  filters?: Partial<FilterConfig>[]
+}