@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.1

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

@@ -0,0 +1,191 @@
+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 { FilterConfigObject, FilterPreference, PersonalGristPreference } from '../types.js'
+
+import { OxFiltersForm } from '../filters/filters-form'
+
+@customElement('ox-grist-filter-personalizer')
+export class OxGristFilterPersonalizer extends LitElement {
+  static styles = [
+    css`
+      md-icon {
+        --md-icon-size: 16px;
+        width: 36px;
+        height: 36px;
+        color: var(--md-sys-color-secondary-container);
+        cursor: pointer;
+
+        display: flex;
+        place-content: center;
+        place-items: center;
+        position: relative;
+
+        &:hover {
+          color: var(--md-sys-color-primary-container);
+        }
+      }
+
+      md-ripple {
+        border-radius: 50%;
+        inset: unset;
+        height: 36px;
+        width: 36px;
+      }
+    `
+  ]
+
+  @property({ type: Boolean, attribute: true }) debug: boolean = false
+
+  @state() private preference?: PersonalGristPreference
+
+  render() {
+    return html`
+      <md-icon
+        @click=${async (e: MouseEvent) => {
+          const form = this.closest('ox-filters-form') as OxFiltersForm
+          const { filterColumns, personalFilters = [] } = form
+          const queryFilters = await form.getQueryFilters()
+
+          this.preference = {
+            filters: (
+              personalFilters.map((filter: FilterPreference) => {
+                const originFilterColumn =
+                  filter.name == 'search'
+                    ? { filter: { name: 'search' } }
+                    : filterColumns.find(f => f.name == filter.name)
+
+                if (!originFilterColumn) {
+                  /* 원래 filters 설정에 있는 것들 만을 유지한다. */
+                  return
+                }
+
+                const { value } = originFilterColumn.filter! as FilterConfigObject
+
+                return {
+                  name: filter.name,
+                  hidden: filter.hidden,
+                  /* 만약, filters에 기본값이 이미 설정되어 있다면, 그대로 유지한다. */
+                  value: value ?? queryFilters.find(f => f.name == filter.name)?.value
+                }
+              }) || []
+            ).filter(Boolean) as FilterPreference[]
+          }
+
+          const template = html`
+            <div class="personalizer-header" slot="header">
+              <md-icon
+                style="margin-left: auto;"
+                @click=${async (e: MouseEvent) => {
+                  if (form.personalConfigProvider) {
+                    form.personalConfig = await form.personalConfigProvider.save(this.preference)
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.save'))}
+                >keep</md-icon
+              ><md-icon
+                @click=${async (e: MouseEvent) => {
+                  if (form.personalConfigProvider) {
+                    form.personalConfig = this.preference = {}
+                    await form.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>
+
+            ${this.preference?.filters!.map(
+              filter => html`
+                <ox-checkbox label="checkbox" ?checked=${!filter.hidden} value=${filter.name} option
+                  >${filter.name}<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 = { ...form.personalConfig }
+            const pfilters = this.preference?.filters!
+
+            pconfig.filters = pfilters.map(filter => {
+              return {
+                name: filter.name,
+                hidden: selected.indexOf(filter.name) == -1,
+                value: filter.value
+              }
+            })
+
+            form.personalConfig = this.preference = pconfig
+
+            form.applyUpdatedConfiguration()
+          }
+
+          popup.addEventListener('sorted', (e: Event) => {
+            const sorted = (e as CustomEvent).detail as HTMLElement[]
+
+            const pconfig: PersonalGristPreference = { ...form.personalConfig }
+            const pfilters = this.preference?.filters!
+
+            pconfig.filters = sorted
+              .map(element => {
+                const name = (element as HTMLInputElement).value
+                return pfilters.find(filter => filter.name == name)!
+              })
+              .filter(Boolean)
+
+            form.personalConfig = this.preference = pconfig
+
+            form.applyUpdatedConfiguration()
+          })
+        }}
+        >settings<md-ripple></md-ripple
+      ></md-icon>
+    `
+  }
+}

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

@@ -0,0 +1,192 @@
+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;
+        color: var(--ox-grist-p13n-color, var(--md-sys-color-on-primary));
+        background-color: var(--ox-grist-p13n-background-color, var(--md-sys-color-primary));
+        border-radius: 0px 0px 7px 7px;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-primary));
+          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-on-primary));
+        }
+      }
+    `
+  ]
+
+  @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, sorters, pagination, mode } = 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
+              }
+            }),
+            sorters,
+            pagination: {
+              ...pagination,
+              limit: grist.getCurrentLimit()
+            },
+            mode
+          }
+
+          const template = html`
+            <div class="personalizer-header" slot="header">
+              <md-icon
+                style="margin-left: auto;"
+                @click=${async (e: MouseEvent) => {
+                  if (grist.personalConfigProvider) {
+                    const { mode, columns, sorters, pagination } = this.preference || {}
+                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save({
+                      mode,
+                      columns,
+                      sorters,
+                      pagination
+                    })
+                  }
+                  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

@@ -145,7 +145,7 @@ export class RecordCreator extends LitElement {
               }
             })
 
-            recordView.addEventListener('field-change', (e: Event) => {
+            recordView.addEventListener('field-change', async (e: Event) => {
               const view = e.currentTarget as RecordView
 
               var { after, before, column, record, row } = (e as CustomEvent).detail as {
@@ -158,7 +158,7 @@ export class RecordCreator extends LitElement {
 
               var validation = column.validation
               if (validation && typeof validation == 'function') {
-                if (!validation.call(this, after, before, record, column)) {
+                if (!(await validation.call(this, after, before, record, column))) {
                   return
                 }
               }

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/renderers/ox-grist-renderer-tree.ts

@@ -38,7 +38,7 @@ export class OxGristRendererTree extends OxGristRenderer {
       transform: translate(-25%, -50%) rotate(-90deg);
       content: ' ';
       border: 5px solid transparent;
-      border-top: 5px solid var(--primary-color, #1890ff);
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[expander][expanded]::before {
@@ -48,7 +48,7 @@ export class OxGristRendererTree extends OxGristRenderer {
       transform: translate(-50%, -25%);
       content: ' ';
       border: 5px solid transparent;
-      border-top: 5px solid var(--primary-color, #1890ff);
+      border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox] {
@@ -70,7 +70,7 @@ export class OxGristRendererTree extends OxGristRenderer {
       display: block;
       width: 10px;
       height: 10px;
-      border: 1px solid var(--primary-color, #1890ff);
+      border: 1px solid var(--md-sys-color-on-primary-container, #1890ff);
       border-radius: 2px;
     }
 
@@ -79,8 +79,8 @@ export class OxGristRendererTree extends OxGristRenderer {
     }
 
     span[checkbox][checked='checked']::before {
-      background-color: var(--primary-color, #1890ff);
-      border-color: var(--primary-color, #1890ff);
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox][checked='checked']::after {
@@ -100,8 +100,8 @@ export class OxGristRendererTree extends OxGristRenderer {
     }
 
     span[checkbox][checked='half-checked']::before {
-      background-color: var(--primary-color, #1890ff);
-      border-color: var(--primary-color, #1890ff);
+      background-color: var(--md-sys-color-on-primary-container, #1890ff);
+      border-color: var(--md-sys-color-on-primary-container, #1890ff);
     }
 
     span[checkbox][checked='half-checked']::after {
@@ -113,7 +113,7 @@ export class OxGristRendererTree extends OxGristRenderer {
       transform: translate(-50%, -50%);
       width: 10px;
       height: 2px;
-      background-color: #fff;
+      background-color: var(--md-sys-color-surface);
     }
   `
 

package/src/sorters/sorters-control.ts

@@ -30,12 +30,12 @@ export class SortersControl extends LitElement {
         user-select: none;
       }
       [option] md-icon {
-        margin-left: var(--margin-default);
+        margin-left: var(--spacing-medium);
         --md-icon-size: var(--fontsize-large);
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
       }
       [option] sub {
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
       }
     `
   ]

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.
  *
@@ -90,6 +106,7 @@ export type FilterOperator =
  * @property {string} type - The type of the filter condition.
  * @property {FilterOperator} [operator] - The filter operator used to compare values (optional).
  * @property {Object} [options] - Additional options or parameters for the filter condition (optional).
+ * @property {boolean|undefined} [hidden] - The hidden flag for the filter condition (optional).
  * @property {string|number|boolean|string[]|number[]|undefined} [value] - The value to compare with in the filter condition (optional).
  * @property {string} [label] - The label to display for the filter condition (optional).
  */
@@ -99,6 +116,9 @@ export type FilterConfigObject = {
   options?: { [key: string]: any }
   value?: string | number | boolean | string[] | number[] | undefined
   label?: string
+  boundTo?: string[]
+  hidden?: boolean
+  onchange?: FilterChangedCallback
 }
 
 /**
@@ -341,6 +361,8 @@ export type ColumnConfig = {
   imex?: ImexConfig | boolean
   multiple?: boolean
   rowCount?: boolean
+  /** 특정 도구에 의해서 사용되는 옵션으로, 일반적인 용도로 사용되지 않음을 표현할 수 있다. */
+  unusable?: boolean
 }
 
 /**
@@ -355,7 +377,12 @@ export type ColumnConfig = {
  * @param {ColumnConfig} column - The configuration of the column being edited.
  * @returns {boolean} - Returns `true` if the value is valid, `false` otherwise.
  */
-export type ValidationCallback = (after: any, before: any, record: GristRecord, column: ColumnConfig) => boolean
+export type ValidationCallback = (
+  after: any,
+  before: any,
+  record: GristRecord,
+  column: ColumnConfig
+) => boolean | Promise<boolean>
 
 /**
  * Configuration options for column labels.
@@ -743,3 +770,27 @@ export type GristData = {
  * @returns {boolean} - `true` if the record should be selected, `false` otherwise.
  */
 export type GristSelectFunction = (record: GristRecord) => boolean
+
+/**
+ * Defines a type for personalized grid settings. It includes individual column settings and additional configurations specific to a user's grid view.
+ *
+ * @typedef {Object} PersonalGristPreference
+ * @property {Partial<ColumnConfig>[]} [columns] - Partially defines the configuration for each column in the grid.
+ *   Each element can include only some properties of the `ColumnConfig`, used for optionally overriding column settings.
+ * @property {any} [key] - Allows for storing additional user-defined properties with dynamic keys.
+ *   This property can include various custom settings beyond the grid configuration, and the keys can be freely defined.
+ */
+export type PersonalGristPreference = {
+  columns?: Partial<ColumnConfig>[]
+  filters?: FilterPreference[]
+  pagination?: PaginationConfig
+  sorters?: SortersConfig
+  mode?: 'GRID' | 'LIST' | 'CARD'
+  [key: string]: any
+}
+
+export type FilterPreference = {
+  name: string
+  hidden?: boolean
+  value?: any
+}