@operato/data-grist 2.0.0-alpha.13 → 2.0.0-alpha.132

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'

package/src/personalizer/ox-grist-personalizer.ts

@@ -0,0 +1,181 @@
+import '@material/web/button/outlined-button.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { OxPopupList } from '@operato/popup'
+import { OxCheckbox } from '@operato/input'
+
+import { ColumnConfig, PersonalGristPreference } from '../types'
+import { DataGrist } from '../data-grist'
+
+@customElement('ox-grist-personalizer')
+export class OxGristPersonalizer extends LitElement {
+  static styles = [
+    css`
+      md-icon {
+        --md-icon-size: 14px;
+        width: 16px;
+        height: 16px;
+        background-color: rgba(var(--secondary-color-rgb), 0.6);
+        color: var(--md-sys-color-secondary-container);
+        border-radius: 0px 0px 7px 7px;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--md-sys-color-primary-container);
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) page!: string
+  @property({ type: String }) element!: string
+  @property({ type: Boolean, attribute: true }) debug: boolean = false
+
+  @state() private preference?: PersonalGristPreference
+
+  render() {
+    return html`
+      <md-icon
+        @click=${(e: MouseEvent) => {
+          const grist = this.closest('ox-grist') as DataGrist
+
+          const { config, compiledConfig } = grist
+          const { columns: compiledColumns } = compiledConfig
+
+          const columns = compiledColumns
+            .filter(ccolumn => {
+              const column = config.columns.find((column: Partial<ColumnConfig>) => column.name == ccolumn.name)
+              return column && column.name && column.type !== 'gutter' && !column.hidden && !column.unusable
+            })
+            .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name)!)
+
+          this.preference = {
+            columns: columns.map(column => {
+              return {
+                name: column.name,
+                hidden: column.hidden,
+                width: column.width
+              }
+            })
+          }
+
+          const template = html`
+            <div class="personalizer-header" slot="header">
+              <md-icon
+                style="margin-left: auto;"
+                @click=${async (e: MouseEvent) => {
+                  if (grist.personalConfigProvider) {
+                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save(this.preference)
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.save'))}
+                >keep</md-icon
+              ><md-icon
+                @click=${async (e: MouseEvent) => {
+                  if (grist.personalConfigProvider) {
+                    grist.personalConfig = this.preference = {}
+                    await grist.personalConfigProvider.reset()
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.delete'))}
+                >keep_off</md-icon
+              ><md-icon @click=${async (e: MouseEvent) => popup.close()} title=${String(i18next.t('button.close'))}
+                >close</md-icon
+              >
+            </div>
+
+            ${columns.map(
+              column => html`
+                <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option
+                  >${column.header.renderer(column)}<span style="position: absolute; right: 10px; cursor: move;" handle
+                    >☰</span
+                  ></ox-checkbox
+                >
+              `
+            )}
+          `
+
+          const popup = OxPopupList.open({
+            template,
+            multiple: true,
+            sortable: true,
+            debug: this.debug,
+            attrSelected: 'checked',
+            top: e.pageY,
+            left: e.pageX,
+            styles: css`
+              :host {
+                width: 240px;
+                max-height: 300px;
+                overflow: auto;
+              }
+
+              ::slotted(.personalizer-header) {
+                --md-icon-size: 1.4em;
+
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                text-transform: capitalize;
+                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
+              }
+
+              ::slotted([option]) {
+                position: relative;
+                user-select: none;
+              }
+            `
+          })
+
+          popup.onselect = (e: Event) => {
+            const selected = (e as CustomEvent).detail
+
+            const pconfig: PersonalGristPreference = grist.personalConfig || {}
+            const pcolumns = this.preference?.columns || columns
+
+            pconfig.columns = pcolumns.map(column => {
+              return {
+                name: column.name,
+                hidden: selected.indexOf(column.name) == -1,
+                width: column.width
+              }
+            })
+
+            this.preference = pconfig
+
+            grist.personalConfig = this.preference
+
+            grist.applyUpdatedConfiguration()
+          }
+
+          popup.addEventListener('sorted', (e: Event) => {
+            const sorted = (e as CustomEvent).detail as HTMLElement[]
+
+            const pconfig: PersonalGristPreference = grist.personalConfig || {}
+
+            pconfig.columns = sorted.map(element => {
+              const name = (element as OxCheckbox).value
+              return {
+                name,
+                hidden: !element.hasAttribute('checked'),
+                width: columns.find(column => column.name == name)?.width
+              }
+            })
+
+            this.preference = pconfig
+
+            grist.personalConfig = this.preference
+
+            grist.applyUpdatedConfiguration()
+          })
+        }}
+        >settings</md-icon
+      >
+    `
+  }
+}

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>
     `
   }