@operato/data-grist 2.0.0-alpha.12 → 2.0.0-alpha.121

package/src/filters/filter-styles.ts

@@ -2,56 +2,77 @@ import { css } from 'lit'
 
 export const FilterStyles = css`
   :host {
-    --ox-input-placeholder-color: var(--primary-color);
-
-    --ox-input-padding: var(--padding-narrow) var(--padding-default);
-    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);
-    --ox-input-focus-border: 1px solid var(--primary-color);
-    --ox-input-border-radius: var(--border-radius);
-    --ox-input-font: normal 14px var(--theme-font);
-    --ox-input-color: var(--primary-text-color);
-
-    --ox-filters-form-gap: var(--margin-wide);
-    --ox-filters-form-label-font: var(--label-font);
-    --ox-filters-form-label-color: var(--label-color);
-    --ox-select-padding: 0 var(--padding-narrow);
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+
+    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
+    --ox-filters-input-color: var(--input-color, var(--primary-text-color));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
+    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
+    --ox-filters-label-color: var(--label-color, var(--primary-text-color));
+    --ox-filters-input-background-color: transparent;
+
+    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+    --ox-filters-input-padding: var(--input-padding, 6px 2px);
+
+    --ox-select-padding: var(--ox-filters-input-padding);
+    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   label {
-    font: var(--ox-filters-form-label-font);
-    color: var(--ox-filters-form-label-color);
+    font: var(--ox-filters-label-font);
+    color: var(--ox-filters-label-color);
   }
+
   span {
-    margin-right: var(--margin-narrow);
     text-transform: capitalize;
   }
 
   input::placeholder {
-    color: var(--ox-input-placeholder-color);
+    color: var(--ox-filters-input-placeholder-color);
     opacity: 0.6;
   }
 
+  input {
+    padding: var(--ox-filters-input-padding);
+  }
+
+  label > span + *,
   ox-select,
   input {
-    padding: var(--input-padding);
     border: none;
-    border-bottom: var(--ox-input-border);
-    font: var(--ox-input-font);
-    color: var(--ox-input-color);
+    border-bottom: var(--ox-filters-input-border);
+    font: var(--ox-filters-input-font);
+    color: var(--ox-filters-input-color);
+    background-color: var(--ox-filters-input-background-color, transparent);
+  }
+
+  label > span + * {
+    min-width: 120px;
   }
 
   ox-select:focus,
   input:focus {
     outline: none;
-    border-bottom: var(--ox-input-focus-border);
-    color: var(--primary-color);
+    border-bottom: var(--ox-filters-input-focus-border);
+    color: var(--ox-filters-input-focus-color);
   }
+
   ox-select {
-    padding: var(--ox-select-padding);
+    min-width: 100px;
+    max-width: 170px;
+  }
+
+  ox-input-barcode {
+    min-width: 150px;
+  }
+
+  ox-input-search {
+    max-width: 150px;
   }
 
   input[type='number'] {
-    padding-right: var(--padding-narrow);
     max-width: 90px;
   }
 
@@ -59,15 +80,13 @@ export const FilterStyles = css`
   input[type*='time'],
   input[type='week'],
   input[type='month'] {
-    padding: 8px var(--padding-narrow) 8px var(--padding-default);
     max-width: 170px;
   }
 
   @media only screen and (max-width: 460px) {
     :host {
       --ox-filters-form-label-font: bold 13px var(--theme-font);
-      --ox-input-font: normal 16px var(--theme-font);
-      --ox-filters-form-gap: var(--margin-narrow);
+      --ox-filters-input-font: normal 16px var(--theme-font);
     }
 
     input[from],

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,7 +51,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'add-child-node')
         }}
       >
-        <mwc-icon slot="icon">playlist_add</mwc-icon>
+        <md-icon slot="icon">playlist_add</md-icon>
       </ox-popup-menuitem>
 
       <div separator></div>
@@ -62,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
@@ -71,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,6 @@ export * from './gutters'
 export * from './filters'
 export * from './sorters/sorters-control'
 export * from './record-view'
-export * from './value-generator'
+export * from './personalizer'
 
 export * from './utils/list-param'

package/src/personalizer/index.ts

@@ -0,0 +1 @@
+export * from './ox-grist-personalizer'