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

package/src/data-grist.ts

@@ -10,6 +10,7 @@ import isEqual from 'lodash-es/isEqual'
 import Headroom from '@operato/headroom'
 import { pulltorefresh } from '@operato/pull-to-refresh'
 import { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles'
+import { PagePreferenceProvider } from '@operato/p13n'
 import { SnapshotTaker, TimeCapsule } from '@operato/utils'
 
 import { buildConfig } from './configure/config-builder'
@@ -171,12 +172,12 @@ export class DataGrist extends LitElement implements DataConsumer {
    */
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
 
-  @property({ type: Object }) personalConfigProvider?: {
-    load(): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
-    save(
-      preference?: PersonalGristPreference
-    ): PersonalGristPreference | Promise<PersonalGristPreference | undefined> | undefined
-    reset(): void | Promise<void>
+  @property({ type: Object }) personalConfigProvider: PagePreferenceProvider = {
+    load: () => {
+      return {}
+    },
+    save: (preference: any) => preference,
+    reset: () => {}
   }
 
   @state() personalConfig?: {
@@ -202,6 +203,9 @@ export class DataGrist extends LitElement implements DataConsumer {
   private originMarginTop?: string
   private lastLocation: { origin?: string; pathname?: string; search?: string } = {}
 
+  /* 그리드가 준비되기 전에 fetch 요청이 있었음을 나타내는 플래그임 */
+  private pendingFetch?: boolean
+
   private popstateEventHandler: EventListener = ((e: Event) => {
     const { origin, pathname, search } = window.location
     if (
@@ -315,46 +319,56 @@ export class DataGrist extends LitElement implements DataConsumer {
   }
 
   public applyUpdatedConfiguration() {
-    if (!this.config?.columns) {
+    if (!this.personalConfig) {
       return
     }
 
     const config = { ...this.config }
     const columns: Partial<ColumnConfig>[] = config.columns
 
-    if (this.personalConfig) {
-      const { columns: personalColumns } = this.personalConfig
+    const { columns: personalColumns, sorters, pagination, mode } = this.personalConfig
+
+    if (personalColumns) {
+      const xcolumns = columns.map((column: Partial<ColumnConfig>) => {
+        const personalColumn = personalColumns.find(pcolumn => pcolumn.name == column.name)
+        return personalColumn ? { ...column, ...personalColumn } : column
+      })
+
+      function reorderList(a: { name: string }[], b: { name: string }[]): { name: string }[] {
+        // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
+        const result = new Array(a.length)
 
-      if (personalColumns) {
-        const xcolumns = columns.map((column: Partial<ColumnConfig>) => {
-          const personalColumn = personalColumns.find(pcolumn => pcolumn.name == column.name)
-          return personalColumn ? { ...column, ...personalColumn } : column
+        // b 배열에 없는 아이템은 원래 위치로 채움
+        a.forEach((item, index) => {
+          if (!item.name || !b.find(bi => bi.name == item.name)) {
+            result[index] = item
+          }
         })
 
-        function reorderList(a: { name: string }[], b: { name: string }[]): { name: string }[] {
-          // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움
-          const result = new Array(a.length)
+        b.forEach(item => {
+          const ai = a.find(ai => ai.name == item.name)
+          if (ai) {
+            result[result.findIndex(slot => slot === undefined)] = ai
+          }
+        })
 
-          // b 배열에 없는 아이템은 원래 위치로 채움
-          a.forEach((item, index) => {
-            if (!item.name || !b.find(bi => bi.name == item.name)) {
-              result[index] = item
-            }
-          })
+        return result
+      }
 
-          b.forEach(item => {
-            const ai = a.find(ai => ai.name == item.name)
-            if (ai) {
-              result[result.findIndex(slot => slot === undefined)] = ai
-            }
-          })
+      // 배열 재정렬 실행
+      config.columns = reorderList(xcolumns as any, personalColumns as any)
+    }
 
-          return result
-        }
+    if (pagination) {
+      config.pagination = pagination
+    }
 
-        // 배열 재정렬 실행
-        config.columns = reorderList(xcolumns as any, personalColumns as any)
-      }
+    if (sorters) {
+      config.sorters = sorters
+    }
+
+    if (mode) {
+      this.mode = mode
     }
 
     this._config = buildConfig({
@@ -404,7 +418,8 @@ export class DataGrist extends LitElement implements DataConsumer {
       this.dataProvider.limit = limit || pages[0] || ZERO_PAGES[0]
     }
 
-    if (!this.urlParamsSensitive && !this.explicitFetch) {
+    if (this.pendingFetch || (!this.urlParamsSensitive && !this.explicitFetch)) {
+      this.pendingFetch = false
       this.fetch()
     }
   }
@@ -546,9 +561,10 @@ export class DataGrist extends LitElement implements DataConsumer {
    * @param {boolean} reset - If true, the method resets the scroll position to the top.
    */
   async fetch(reset = true) {
-    if (!this.compiledConfig) {
+    if (this.compiledConfig === ZERO_CONFIG) {
       /* avoid to be here */
       console.warn('grist is not configured yet.')
+      this.pendingFetch = true
       return
     }
 
@@ -574,6 +590,8 @@ export class DataGrist extends LitElement implements DataConsumer {
           sortings: this.sorters || this.compiledConfig?.sorters,
           filters: this.filters
         })
+
+        this.pagination && (this.pagination!.limit = limit)
       }
     }
   }
@@ -589,7 +607,7 @@ export class DataGrist extends LitElement implements DataConsumer {
       await this.requestUpdate()
     }
 
-    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
+    if (changes.has('personalConfigProvider')) {
       this.personalConfig = await this.personalConfigProvider.load()
     } else if (changes.has('config') || changes.has('personalConfig')) {
       this.applyUpdatedConfiguration()
@@ -1151,4 +1169,8 @@ export class DataGrist extends LitElement implements DataConsumer {
       })
     )
   }
+
+  getCurrentLimit() {
+    return this.dataProvider?.limit || ZERO_PAGINATION.limit
+  }
 }

package/src/filters/filter-styles.ts

@@ -47,10 +47,6 @@ export const FilterStyles = css`
     background-color: var(--ox-filters-input-background-color, transparent);
   }
 
-  label > span + * {
-    min-width: 120px;
-  }
-
   ox-select:focus,
   input:focus {
     outline: none;
@@ -88,15 +84,29 @@ export const FilterStyles = css`
       --ox-filters-input-font: normal 16px var(--theme-font);
     }
 
-    input[from],
-    input[to] {
-      max-width: 44%;
+    ox-input-barcode {
+      max-width: unset;
+      flex: 1;
+    }
+
+    ox-input-search {
+      max-width: unset;
+    }
+
+    ox-select {
+      max-width: unset;
+    }
+
+    ox-checkbox {
+      max-width: unset;
+    }
+
+    input[type='number'] {
+      max-width: unset;
     }
 
-    input[type*='datetime'][from],
-    input[type*='datetime'][to] {
-      padding-right: var(--padding-narrow);
-      min-width: 91%;
+    input {
+      flex: 1;
     }
   }
 `

package/src/filters/filters-form.ts

@@ -6,11 +6,12 @@ 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 { PagePreferenceProvider } from '@operato/p13n'
 import { getDefaultValue } from '@operato/time-calculator'
 
-import { FilterConfigObject } from '..'
+import { FilterConfigObject, FilterPreference } from '../types.js'
 import { DataGrist } from '../data-grist'
-import { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'
+import { ColumnConfig, FilterOperator, FilterValue, GristConfig, PersonalGristPreference } from '../types'
 import { FilterStyles } from './filter-styles'
 import { getFilterRenderer } from './registry'
 
@@ -50,8 +51,9 @@ export class OxFiltersForm extends LitElement {
       }
 
       @media only screen and (max-width: 460px) {
-        label[between] {
-          display: block;
+        form {
+          flex-direction: column;
+          flex-flow: column;
         }
       }
     `
@@ -62,6 +64,10 @@ export class OxFiltersForm extends LitElement {
   @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true
   @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true
 
+  @state() personalConfigProvider?: PagePreferenceProvider
+  @state() personalConfig?: PersonalGristPreference
+  @state() personalFilters?: FilterPreference[]
+
   @state() config!: GristConfig
   @state() filterColumns: ColumnConfig[] = []
   @state() searchColumns: ColumnConfig[] = []
@@ -78,6 +84,7 @@ export class OxFiltersForm extends LitElement {
 
     if (grist) {
       this.config = grist.compiledConfig
+      this.personalConfigProvider = grist.personalConfigProvider
 
       grist.addEventListener('config-change', (e: Event) => {
         this.config = (e as CustomEvent).detail
@@ -139,44 +146,11 @@ export class OxFiltersForm extends LitElement {
     }
   }
 
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('config')) {
-      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)
-      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {
-        const filter = columnConfig.filter as FilterConfigObject
-        return filter!.operator !== 'search'
-      })
-      this.searchColumns = filters.filter(columnConfig => {
-        const filter = columnConfig.filter as FilterConfigObject
-        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]
-            }
-          })
-        })
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('personalConfigProvider') && this.personalConfigProvider) {
+      this.personalConfig = await this.personalConfigProvider.load()
+    } else if (changes.has('config') || changes.has('personalConfig')) {
+      this.applyUpdatedConfiguration()
     }
   }
 
@@ -197,93 +171,189 @@ export class OxFiltersForm extends LitElement {
               grist && grist.fetch()
             }}
           >
-            ${this.searchColumns.length === 0 || this.withoutSearch
-              ? html``
-              : html`
-                  <ox-input-search name="search" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>
-                `}
-            ${this.filterColumns.map((column: ColumnConfig) => {
-              const { name, header, label, filter } = column
-
-              const type = (filter as FilterConfigObject).type
-              const operator = (filter as FilterConfigObject).operator
-              const filterLabel = (filter as FilterConfigObject).label
-
-              const labelText =
-                filterLabel !== undefined
-                  ? filterLabel
-                  : typeof label === 'object' && label.renderer
-                    ? label.renderer(column)
-                    : header.renderer(column) || name
-
-              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!, (filter as FilterConfigObject)?.value)
-
-              if (!renderer) {
-                return html``
-              }
-
-              return type === 'boolean' || type === 'checkbox'
-                ? renderer(column, value, this)
-                : 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>
-                        `
-            })}
+            ${this.filterColumns
+              .filter(column => !(column.filter as FilterConfigObject).hidden)
+              .map((column: ColumnConfig) => {
+                const { name, header, label, filter } = column
+
+                const type = (filter as FilterConfigObject).type
+
+                if (type == 'search') {
+                  return html`
+                    <ox-input-search name="search" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>
+                  `
+                }
+
+                const operator = (filter as FilterConfigObject).operator
+                const filterLabel = (filter as FilterConfigObject).label
+
+                const labelText =
+                  filterLabel !== undefined
+                    ? filterLabel
+                    : typeof label === 'object' && label.renderer
+                      ? label.renderer(column)
+                      : header.renderer(column) || name
+
+                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!, (filter as FilterConfigObject)?.value)
+
+                if (!renderer) {
+                  return html``
+                }
+
+                return type === 'boolean' || type === 'checkbox'
+                  ? renderer(column, value, this)
+                  : 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>
+          <slot name="setting"></slot>
         `
   }
 
+  applyUpdatedConfiguration() {
+    const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)
+    this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {
+      const filter = columnConfig.filter as FilterConfigObject
+      return filter!.operator !== 'search'
+    })
+    this.searchColumns = filters.filter(columnConfig => {
+      const filter = columnConfig.filter as FilterConfigObject
+      return filter!.operator === 'search'
+    })
+
+    if (this.searchColumns.length > 0) {
+      this.filterColumns.unshift({ name: 'search', filter: { type: 'search' } } as any)
+    }
+
+    if (!this.personalConfig) {
+      this.personalFilters = this.filterColumns.map(column => {
+        return { name: column.name }
+      })
+    } else {
+      const { filters: personalFilters = [] } = this.personalConfig
+
+      if (personalFilters) {
+        const xfilters = this.filterColumns.map(column => {
+          return personalFilters.find(pFilter => pFilter.name == column.name) || { name: column.name }
+        })
+
+        function reorderList(a: FilterPreference[], b: FilterPreference[]): FilterPreference[] {
+          // 결과 배열 초기화, 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 FilterPreference[]
+
+        this.filterColumns = this.personalFilters
+          .map(filter => {
+            const column = this.filterColumns.find(column => column.name == filter.name)
+            if (column?.filter) {
+              ;(column.filter as FilterConfigObject)!.hidden = filter.hidden
+            }
+            return column
+          })
+          .filter(Boolean) as ColumnConfig[]
+      }
+    }
+
+    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]
+          }
+        })
+      })
+  }
+
   async getQueryFilters(): Promise<QueryFilter[]> {
     const form = await this.form
     if (!form) return []
@@ -292,6 +362,7 @@ export class OxFiltersForm extends LitElement {
     const search: string | undefined = formData.get('search')?.toString()
 
     var filters = this.filterColumns
+      .filter(column => column.name !== 'search' && !(column.filter as FilterConfigObject)!.hidden)
       .map((column: ColumnConfig) => {
         const { name, type, filter } = column
         const operator = (filter as FilterConfigObject).operator