@operato/data-grist 2.0.0-alpha.11 → 2.0.0-alpha.111

package/src/filters/filters-form.ts

@@ -6,6 +6,8 @@ import '@operato/input/ox-input-search.js'
 import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'
 import { customElement, property, queryAsync, state } from 'lit/decorators.js'
 
+import { getDefaultValue } from '@operato/time-calculator'
+
 import { FilterConfigObject } from '..'
 import { DataGrist } from '../data-grist'
 import { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'
@@ -21,7 +23,7 @@ export type QueryFilter = {
 }
 
 @customElement('ox-filters-form')
-export class FiltersForm extends LitElement {
+export class OxFiltersForm extends LitElement {
   static styles = [
     FilterStyles,
     css`
@@ -40,6 +42,7 @@ export class FiltersForm extends LitElement {
       form > * {
         display: flex;
         align-items: center;
+        gap: var(--input-intra-gap, 7px);
       }
 
       label span {
@@ -65,6 +68,9 @@ export class FiltersForm extends LitElement {
 
   @queryAsync('form') form!: HTMLFormElement
 
+  private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}
+  private objectValue?: object
+
   connectedCallback(): void {
     super.connectedCallback()
 
@@ -72,7 +78,6 @@ export class FiltersForm extends LitElement {
 
     if (grist) {
       this.config = grist.compiledConfig
-      this.value = grist.filters || []
 
       grist.addEventListener('config-change', (e: Event) => {
         this.config = (e as CustomEvent).detail
@@ -88,20 +93,52 @@ export class FiltersForm extends LitElement {
       })
 
       this.renderRoot.addEventListener('change', async (e: Event) => {
-        this.dispatchEvent(
-          new CustomEvent('fetch-params-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              filters: await this.getQueryFilters(),
-              from: 'filters-form'
+        const { target, detail: value } = e as CustomEvent
+        const name = (target as HTMLInputElement).name
+        const { filter } = this.filterColumns.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 = ''
             }
           })
-        )
+
+          await this.updateObjectValues()
+          this.requestUpdate()
+        }
+
+        const onchange = typeof filter == 'object' ? filter.onchange : null
+        const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true
+
+        keepGoing &&
+          this.dispatchEvent(
+            new CustomEvent('fetch-params-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                filters: await this.getQueryFilters(),
+                from: 'filters-form'
+              }
+            })
+          )
       })
     }
   }
 
+  buildDefaultValue(operator: FilterOperator, defaultValue: any) {
+    if (defaultValue === undefined) {
+      return
+    }
+    if (operator == 'between') {
+      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
+    } else {
+      return getDefaultValue(defaultValue, this)
+    }
+  }
+
   updated(changes: PropertyValues<this>) {
     if (changes.has('config')) {
       const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)
@@ -114,7 +151,32 @@ export class FiltersForm extends LitElement {
         return filter!.operator === 'search'
       })
 
+      const grist = this.closest('ox-grist') as DataGrist
+
+      this.value = (grist?.filters || []).map(filter => {
+        return {
+          ...filter,
+          value: this.buildDefaultValue(filter!.operator, filter!.value)
+        }
+      })
+
       this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0
+
+      this.autoUpdateTargetsOnChange = {}
+      this.filterColumns
+        ?.filter(({ filter }) => {
+          return typeof filter == 'object' && filter.boundTo && filter.boundTo.length > 0
+        })
+        .map(({ name, filter }) => {
+          const boundTo = (filter as FilterConfigObject).boundTo
+
+          boundTo!.forEach(to => {
+            const origin = this.autoUpdateTargetsOnChange[to] || []
+            if (name && !origin.includes(name)) {
+              this.autoUpdateTargetsOnChange[to] = [...origin, name]
+            }
+          })
+        })
     }
   }
 
@@ -151,8 +213,8 @@ export class FiltersForm extends LitElement {
                 filterLabel !== undefined
                   ? filterLabel
                   : typeof label === 'object' && label.renderer
-                  ? label.renderer(column)
-                  : header.renderer(column) || name
+                    ? label.renderer(column)
+                    : header.renderer(column) || name
 
               const idx = operator === 'between' ? 1 : 0
               const renderer = getFilterRenderer(
@@ -160,59 +222,63 @@ export class FiltersForm extends LitElement {
                   ? 'text'
                   : type
               )[idx]
-              const value = this.value?.find(filter => filter.name == name)?.value
+              const value =
+                this.value?.find(filter => filter.name == name)?.value ??
+                this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)
 
               if (!renderer) {
                 return html``
               }
 
-              return type !== 'select' && labelText
-                ? html`<label filter-title ?between=${operator === 'between'}
-                    ><span>${labelText}</span> ${renderer(column, value, this)}
-                  </label> `
-                : type !== 'select' && !labelText
+              return type === 'boolean' || type === 'checkbox'
                 ? renderer(column, value, this)
-                : operator === 'in'
-                ? html`
-                    <ox-select
-                      name=${name}
-                      placeholder=${labelText}
-                      .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(column, value, this)}
-                      </ox-popup-list>
-                    </ox-select>
-                  `
-                : html`
-                    <ox-select
-                      name=${name}
-                      placeholder=${labelText}
-                      .value=${value}
-                      @change=${(e: CustomEvent) =>
-                        e.target?.dispatchEvent(
-                          new CustomEvent('filter-change', {
-                            detail: {
-                              name,
-                              operator,
-                              value: e.detail
-                            }
-                          })
-                        )}
-                    >
-                      <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
-                    </ox-select>
-                  `
+                : type !== 'select' && labelText
+                  ? html`<label filter-title ?between=${operator === 'between'}
+                      ><span>${labelText}</span> ${renderer(column, value, this)}
+                    </label> `
+                  : type !== 'select' && !labelText
+                    ? renderer(column, value, this)
+                    : operator === 'in'
+                      ? html`
+                          <ox-select
+                            name=${name}
+                            placeholder=${labelText}
+                            .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(column, value, this)}
+                            </ox-popup-list>
+                          </ox-select>
+                        `
+                      : html`
+                          <ox-select
+                            name=${name}
+                            placeholder=${labelText}
+                            .value=${value}
+                            @change=${(e: CustomEvent) =>
+                              e.target?.dispatchEvent(
+                                new CustomEvent('filter-change', {
+                                  detail: {
+                                    name,
+                                    operator,
+                                    value: e.detail
+                                  }
+                                })
+                              )}
+                          >
+                            <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
+                          </ox-select>
+                        `
             })}
           </form>
         `
@@ -293,4 +359,38 @@ export class FiltersForm extends LitElement {
     const input = this.renderRoot.querySelector(`form [name="${name}"]`) as HTMLInputElement
     return input?.value
   }
+
+  private async updateObjectValues() {
+    const form = await this.form
+    if (!form) return []
+
+    const formData = new FormData(form)
+
+    const object = {} as any
+    formData.forEach((value, key) => {
+      const prev = object[key]
+
+      if (key in object) {
+        object[key] = prev instanceof Array ? [...prev, value] : [prev, value]
+      } else {
+        object[key] = value
+      }
+    })
+
+    this.objectValue = object
+  }
+
+  public getFormObjectValue() {
+    return this.objectValue
+  }
+
+  reset() {
+    this.form
+      .then((form: HTMLFormElement) => {
+        form.reset()
+      })
+      .catch((error: any) => {
+        console.error('Error resetting the form:', error)
+      })
+  }
 }

package/src/gutters/gutter-button.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html } from 'lit'
 
@@ -23,13 +23,13 @@ export class GutterButton {
         sortable: false,
         header: {
           renderer: function (column) {
-            return html` <mwc-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</mwc-icon> `
+            return html` <md-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</md-icon> `
           } as HeaderRenderer
         },
         record: {
           align: 'center',
           renderer: function (value, column, record, rowIndex, field) {
-            return html` <mwc-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</mwc-icon> `
+            return html` <md-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</md-icon> `
           } as FieldRenderer
         },
         forGrid: true,

package/src/gutters/gutter-dirty.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -13,7 +13,7 @@ class GutterDirtyElement extends LitElement {
       margin: auto;
     }
 
-    mwc-icon {
+    md-icon {
       width: var(--grid-record-dirty-icon-size);
       height: var(--grid-record-dirty-icon-size);
       border-radius: 50%;
@@ -38,11 +38,11 @@ class GutterDirtyElement extends LitElement {
   render() {
     switch (this.value) {
       case '+':
-        return html` <mwc-icon style=${INLINESTYLE} center add>add</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center add>add</md-icon> `
       case '-':
-        return html` <mwc-icon style=${INLINESTYLE} center remove>remove</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center remove>remove</md-icon> `
       case 'M':
-        return html` <mwc-icon style=${INLINESTYLE} center done>done</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center done>done</md-icon> `
       default:
         return ''
     }

package/src/handlers/contextmenu-tree-mutation.ts

@@ -42,7 +42,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'add-sibling-node')
         }}
       >
-        <mwc-icon slot="icon">add</mwc-icon>
+        <md-icon slot="icon">add</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem
@@ -51,25 +51,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'add-child-node')
         }}
       >
-        <mwc-icon slot="icon">playlist_add</mwc-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="move up"
-        @click=${() => {
-          dispatchEvent(field, 'move-up')
-        }}
-      >
-        <mwc-icon slot="icon">arrow_upward</mwc-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="move down"
-        @click=${() => {
-          dispatchEvent(field, 'move-down')
-        }}
-      >
-        <mwc-icon slot="icon">arrow_downward</mwc-icon>
+        <md-icon slot="icon">playlist_add</md-icon>
       </ox-popup-menuitem>
 
       <div separator></div>
@@ -80,7 +62,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'collapse-all')
         }}
       >
-        <mwc-icon slot="icon">unfold_less</mwc-icon>
+        <md-icon slot="icon">unfold_less</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem
@@ -89,7 +71,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'expand-all')
         }}
       >
-        <mwc-icon slot="icon">unfold_more</mwc-icon>
+        <md-icon slot="icon">unfold_more</md-icon>
       </ox-popup-menuitem>
     `,
     top: e.pageY,

package/src/index.ts

@@ -12,6 +12,5 @@ export * from './gutters'
 export * from './filters'
 export * from './sorters/sorters-control'
 export * from './record-view'
-export * from './value-generator'
 
 export * from './utils/list-param'

package/src/record-view/record-creator.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './record-view'
 
 import { html, LitElement } from 'lit'

package/src/record-view/record-view-body.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../data-grid/data-grid-field'
 
 import { css, html, LitElement } from 'lit'
@@ -34,7 +34,7 @@ export class RecordViewBody extends LitElement {
         color: var(--record-view-label-color);
       }
 
-      label mwc-icon {
+      label md-icon {
         display: none;
       }
 
@@ -43,7 +43,7 @@ export class RecordViewBody extends LitElement {
         font-weight: bold;
       }
 
-      label[editable] mwc-icon {
+      label[editable] md-icon {
         display: inline-block;
         font-size: var(--record-view-label-icon-size);
         opacity: 0.5;
@@ -99,7 +99,7 @@ export class RecordViewBody extends LitElement {
 
         return html`
           <label ?editable=${editable}
-            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label
+            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <md-icon>edit</md-icon></label
           >
           <ox-grid-field
             .rowIndex=${rowIndex}

package/src/record-view/record-view.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './record-view-body'
 import '@operato/input/ox-input-file.js'
 import '../data-grid/data-grid-field'
@@ -53,7 +53,7 @@ export class RecordView extends LitElement {
         vertical-align: middle;
       }
 
-      [footer] button mwc-icon {
+      [footer] button md-icon {
         margin-top: -3px;
         margin-right: 5px;
         font-size: var(--record-view-footer-iconbutton-size);
@@ -74,9 +74,9 @@ export class RecordView extends LitElement {
       <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
       </ox-record-view-body>
       <div footer>
-        <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon><span>Reset</span></button>
-        <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon><span>Cancel</span></button>
-        <button @click=${this.onOK.bind(this)} ok><mwc-icon>radio_button_unchecked</mwc-icon><span>OK</span></button>
+        <button @click=${this.onReset.bind(this)}><md-icon>refresh</md-icon><span>Reset</span></button>
+        <button @click=${this.onCancel.bind(this)}><md-icon>clear</md-icon><span>Cancel</span></button>
+        <button @click=${this.onOK.bind(this)} ok><md-icon>radio_button_unchecked</md-icon><span>OK</span></button>
       </div>
     `
   }

package/src/renderers/ox-grist-renderer-select.ts

@@ -1,11 +1,41 @@
 import { html } from 'lit'
+import { until } from 'lit/directives/until.js'
 
-import { FieldRenderer } from '../types'
+import { FieldRenderer, SelectOption, SelectOptionObject } from '../types'
+
+function buildOptions(options: SelectOption[], value: any) {
+  const selectOptionObjects = options.map(option => {
+    switch (typeof option) {
+      case 'string':
+        return {
+          display: option,
+          value: option
+        }
+      case 'object':
+        return {
+          display: option.display || option.name,
+          value: option.value
+        }
+      default:
+        return option
+    }
+  }) as SelectOptionObject[]
+
+  var res = selectOptionObjects
+    ? selectOptionObjects.filter((option: any) => option.value == String(value == null ? '' : value))
+    : []
+
+  if (res.length) {
+    return html`<span>${res[0].display || res[0].name || ''}</span>`
+  }
+  return html`<span>${value}</span>`
+}
 
 export const OxGristRendererSelect: FieldRenderer = (value, column, record, rowIndex, field) => {
   if (value == null) {
     return ''
   }
+
   var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]
   var options = rowOptionField?.options ? rowOptionField.options : column.record.options
 
@@ -13,11 +43,16 @@ export const OxGristRendererSelect: FieldRenderer = (value, column, record, rowI
     console.error(`options value for select '${column.name}' column is mandatory.`)
   } else if (typeof options == 'function') {
     options = options.call(null, value, column, record, rowIndex, field)
-  }
 
-  var res = options ? options.filter((option: any) => option.value == String(value == null ? '' : value)) : []
-  if (res.length) {
-    return html`<span>${res[0].display}</span>`
+    if (options instanceof Promise) {
+      return html`${until(
+        options.then(options => buildOptions(options, value)),
+        value
+      )}`
+    } else {
+      return buildOptions((options || []) as SelectOption[], value)
+    }
+  } else {
+    return buildOptions((options || []) as SelectOption[], value)
   }
-  return html`<span>${value}</span>`
 }

package/src/sorters/sorters-control.ts

@@ -29,9 +29,9 @@ export class SortersControl extends LitElement {
         text-transform: capitalize;
         user-select: none;
       }
-      [option] mwc-icon {
+      [option] md-icon {
         margin-left: var(--margin-default);
-        --mdc-icon-size: var(--fontsize-large);
+        --md-icon-size: var(--fontsize-large);
         color: var(--primary-color);
       }
       [option] sub {
@@ -99,7 +99,7 @@ export class SortersControl extends LitElement {
             ${desc === null
               ? html``
               : html`
-                  <mwc-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</mwc-icon>
+                  <md-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</md-icon>
                   ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}
                 `}
           </div>

package/src/types.ts

@@ -9,7 +9,7 @@ import { DataListGutter } from './data-list/data-list-gutter'
 import { RecordPartial } from './data-list/record-partial'
 import { DataReportField } from './data-report/data-report-field'
 import { OxGristEditor } from './editors'
-import { QueryFilter } from './filters'
+import { QueryFilter, OxFiltersForm } from './filters'
 import { OxGristRenderer } from './renderers/ox-grist-renderer'
 
 /**
@@ -83,6 +83,22 @@ 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: OxFiltersForm) => boolean
+
 /**
  * Configuration object for specifying filter conditions.
  *
@@ -99,6 +115,8 @@ export type FilterConfigObject = {
   options?: { [key: string]: any }
   value?: string | number | boolean | string[] | number[] | undefined
   label?: string
+  boundTo?: string[]
+  onchange?: FilterChangedCallback
 }
 
 /**
@@ -427,15 +445,6 @@ export type HeaderConfig = {
  */
 export type HeaderRenderer = (column: ColumnConfig) => any
 
-/**
- * Function type for generating values.
- *
- * @callback ValueGeneratorFn
- * @param {...any} args - The arguments used for generating a value.
- * @returns {*} - The generated value.
- */
-export type ValueGeneratorFn = (...args: any[]) => any
-
 /**
  * Configuration for specifying default values for fields in a record.
  * Default values can be set using predefined value generator functions or custom user-defined functions.
@@ -627,6 +636,7 @@ export type ImexConfig = {
 export type RowsConfig = {
   accumulator?: boolean
   appendable: boolean
+  editable: boolean
   insertable: boolean
   selectable?: RowSelectableConfig
   groups: GroupConfig[]