@operato/data-grist 1.0.0-beta.7 → 1.0.0

package/src/data-grist.ts

@@ -15,7 +15,7 @@ import { HeadroomStyles, ScrollbarStyles, SpinnerStyles } from '@operato/styles'
 import { SnapshotTaker, TimeCapsule } from '@operato/utils'
 
 import { buildConfig } from './configure/config-builder'
-import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/zero-config'
+import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGES, ZERO_PAGINATION } from './configure/zero-config'
 import { DataCard } from './data-card/data-card'
 import { DataConsumer } from './data-consumer'
 import { DataGrid } from './data-grid/data-grid'
@@ -23,11 +23,13 @@ import { DataList } from './data-list/data-list'
 import { DataProvider } from './data-provider'
 import {
   FetchHandler,
+  FilterConfigObject,
   FilterValue,
   GristConfig,
   GristData,
   GristRecord,
   GristSelectFunction,
+  PaginationConfig,
   SortersConfig
 } from './types'
 
@@ -62,8 +64,7 @@ export class DataGrist extends LitElement implements DataConsumer {
         overflow: auto;
       }
 
-      ox-grid,
-      ox-list {
+      #grist {
         flex: 1;
       }
 
@@ -92,11 +93,12 @@ export class DataGrist extends LitElement implements DataConsumer {
   @property() config: any
   @property() data: GristData = ZERO_DATA
   @property() selectedRecords?: GristRecord[]
-  @property({ type: Boolean, attribute: 'auto-fetch' }) autoFetch: boolean = false
+  @property({ type: Boolean, attribute: 'explicit-fetch' }) explicitFetch: boolean = false
   @property() fetchHandler?: FetchHandler
   @property() fetchOptions: any
   @property() filters?: FilterValue[]
   @property() sorters?: SortersConfig
+  @property() pagination?: PaginationConfig
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
 
   @state() _data: GristData = ZERO_DATA
@@ -108,9 +110,82 @@ export class DataGrist extends LitElement implements DataConsumer {
   private _headroom?: Headroom
   private orginPaddingTop?: string
   private originMarginTop?: string
-  private _popstateEventHandler?: EventListener
-  private _urlSensitiveFiltersHandler?: EventListener
-  private _urlSensitiveSortersHandler?: EventListener
+  private lastLocation: { origin?: string; pathname?: string; search?: string } = {}
+
+  private _popstateEventHandler: EventListener = ((e: Event) => {
+    const { origin, pathname, search } = window.location
+    if (
+      this.lastLocation.origin &&
+      (this.lastLocation.origin !== origin ||
+        this.lastLocation.pathname !== pathname ||
+        this.lastLocation.search === search)
+    ) {
+      return
+    }
+
+    this.lastLocation = {
+      origin,
+      pathname,
+      search
+    }
+
+    const queryString = search
+    const urlParams = new URLSearchParams(queryString)
+    var filters = urlParams.get('filters')
+    var sorters = urlParams.get('sorters')
+
+    try {
+      if (!isEqual(filters, this.filters) || !isEqual(sorters, this.sorters)) {
+        this.dispatchEvent(
+          new CustomEvent('fetch-params-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              filters: json5.parse(filters || '[]'),
+              sorters: json5.parse(sorters || '[]'),
+              from: 'url-parameter'
+            }
+          })
+        )
+      }
+    } catch (e) {
+      console.error(`invalid fetch params on URL query string : ${e}`)
+    }
+  }).bind(this)
+
+  private _fetchParamsChangeEventHandler: EventListener = ((e: Event) => {
+    const urlParams = new URLSearchParams(window.location.search)
+    const { sorters, filters, from } = (e as CustomEvent).detail
+
+    sorters && (this.sorters = sorters)
+    filters && (this.filters = filters)
+
+    if (!this.urlParamsSensitive || from === 'url-parameter') {
+      return
+    }
+
+    if (sorters) {
+      if (sorters.length > 0) {
+        urlParams.set('sorters', json5.stringify(sorters))
+      } else {
+        urlParams.delete('sorters')
+      }
+    }
+
+    if (filters) {
+      if (filters.length > 0) {
+        urlParams.set('filters', json5.stringify(filters))
+      } else {
+        urlParams.delete('filters')
+      }
+    }
+
+    const queryString = String(urlParams)
+    this.lastLocation.search = queryString ? `?${queryString}` : ''
+    const url = `${window.location.pathname}${this.lastLocation.search}`
+
+    history.pushState({}, document.title, url)
+  }).bind(this)
 
   @query('slot[name=headroom]') head!: HTMLElement
   @query('#grist') grist!: DataGrid | DataList | DataCard
@@ -127,12 +202,16 @@ export class DataGrist extends LitElement implements DataConsumer {
     this._timeCapsule = new TimeCapsule(10)
     this._snapshotTaker = new SnapshotTaker(this, this._timeCapsule!)
 
+    this.addEventListener('fetch-params-change', this._fetchParamsChangeEventHandler)
+
     await this.updateComplete
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
 
+    this.removeEventListener('fetch-params-change', this._fetchParamsChangeEventHandler)
+
     this._timeCapsule && this._timeCapsule.dispose()
     this._snapshotTaker && this._snapshotTaker.dispose()
 
@@ -172,8 +251,6 @@ export class DataGrist extends LitElement implements DataConsumer {
       this.orginPaddingTop = style.paddingTop || '0'
       this.originMarginTop = style.marginTop || '0'
 
-      console.log(this.orginPaddingTop, this.originMarginTop)
-
       this._headroom = new Headroom(this.head, {
         scroller: this.grist,
         onTop: () => {
@@ -208,10 +285,38 @@ export class DataGrist extends LitElement implements DataConsumer {
         : html``}
       <div id="wrap" @keydown=${(e: KeyboardEvent) => this.onKeydown(e)}>
         ${this.mode == 'GRID'
-          ? html` <ox-grid id="grist" .config=${this.compiledConfig} .data=${this._data}> </ox-grid> `
+          ? html`
+              <ox-grid
+                id="grist"
+                .config=${this.compiledConfig}
+                .data=${this._data}
+                .sorters=${this.sorters}
+                .filters=${this.filters}
+                .pagination=${this.pagination}
+              >
+              </ox-grid>
+            `
           : this.mode == 'CARD'
-          ? html` <ox-card id="grist" .config=${this.compiledConfig} .data=${this._data}> </ox-card> `
-          : html` <ox-list id="grist" .config=${this.compiledConfig} .data=${this._data}> </ox-list> `}
+          ? html`
+              <ox-card
+                id="grist"
+                .config=${this.compiledConfig}
+                .data=${this._data}
+                .sorters=${this.sorters}
+                .filters=${this.filters}
+              >
+              </ox-card>
+            `
+          : html`
+              <ox-list
+                id="grist"
+                .config=${this.compiledConfig}
+                .data=${this._data}
+                .sorters=${this.sorters}
+                .filters=${this.filters}
+              >
+              </ox-list>
+            `}
       </div>
 
       <div id="spinner" ?show=${this._showSpinner}></div>
@@ -283,127 +388,12 @@ export class DataGrist extends LitElement implements DataConsumer {
   async updated(changes: PropertyValues<this>) {
     var needToSetPullToRefresh = false
 
-    if (changes.has('urlParamsSensitive')) {
-      if (this.urlParamsSensitive) {
-        this._popstateEventHandler = () => {
-          const queryString = window.location.search
-          const urlParams = new URLSearchParams(queryString)
-          var filters = urlParams.get('filters')
-          var sorters = urlParams.get('sorters')
-
-          if (filters) {
-            try {
-              this.filters = json5.parse(filters)
-              this.dispatchEvent(
-                new CustomEvent('filters-change', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    filters: json5.parse(filters),
-                    from: 'url-parameter'
-                  }
-                })
-              )
-            } catch (e) {
-              console.error(`invalid filters params on URL query string : ${e}`)
-            }
-          }
-          if (sorters) {
-            try {
-              this.sorters = json5.parse(sorters)
-            } catch (e) {
-              console.error(`invalid sorters params on URL query string : ${e}`)
-            }
-          }
-        }
-
-        //@ts-ignore
-        this._popstateEventHandler() // call for the first time
-
-        window.addEventListener('popstate', this._popstateEventHandler)
-
-        this._urlSensitiveFiltersHandler = (e: Event) => {
-          const urlParams = new URLSearchParams(window.location.search)
-          const { filters, from } = (e as CustomEvent).detail || {}
-
-          if (from === 'url-parameter') {
-            return
-          }
-
-          if (filters.length > 0) {
-            urlParams.set('filters', json5.stringify(filters))
-          } else {
-            urlParams.delete('filters')
-          }
-          const queryString = String(urlParams)
-          const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`
-
-          history.pushState({}, document.title, url)
-        }
-
-        this.addEventListener('filters-change', this._urlSensitiveFiltersHandler)
-
-        this._urlSensitiveSortersHandler = (e: Event) => {
-          const urlParams = new URLSearchParams(window.location.search)
-          const { sorters, from } = (e as CustomEvent).detail
-
-          if (from === 'url-parameter') {
-            return
-          }
-
-          if (sorters.length > 0) {
-            urlParams.set('sorters', json5.stringify(sorters))
-          } else {
-            urlParams.delete('sorters')
-          }
-          const queryString = String(urlParams)
-          const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`
-
-          history.pushState({}, document.title, url)
-        }
-
-        this.addEventListener('sorters-change', this._urlSensitiveSortersHandler)
-      } else {
-        if (this._popstateEventHandler) {
-          window.removeEventListener('popstate', this._popstateEventHandler)
-        }
-        if (this._urlSensitiveFiltersHandler) {
-          this.removeEventListener('popstate', this._urlSensitiveFiltersHandler)
-        }
-        if (this._urlSensitiveSortersHandler) {
-          this.removeEventListener('popstate', this._urlSensitiveSortersHandler)
-        }
-      }
-    }
-
     if (changes.has('filters')) {
       await this.requestUpdate()
-
-      this.dispatchEvent(
-        new CustomEvent('filters-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            filters: this.filters,
-            from: 'url-parameter'
-          }
-        })
-      )
     }
 
     if (changes.has('sorters')) {
       await this.requestUpdate()
-
-      this.dispatchEvent(
-        new CustomEvent('sorters-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            sorters: this.sorters,
-            from: 'url-parameter'
-          }
-        })
-      )
     }
 
     if (changes.has('config')) {
@@ -419,12 +409,44 @@ export class DataGrist extends LitElement implements DataConsumer {
         })
       )
 
+      this.pagination = this.compiledConfig.pagination || {}
+
+      if (!this.urlParamsSensitive) {
+        const sorters = this.compiledConfig?.sorters
+        const filters = this.compiledConfig?.columns
+          .filter(
+            column =>
+              column.filter &&
+              'value' in (column.filter as FilterConfigObject) &&
+              (column.filter as FilterConfigObject).value
+          )
+          .map(column => {
+            const filter = column.filter as FilterConfigObject
+            return { name: column.name, operator: filter.operator, value: filter.value } as FilterValue
+          })
+
+        this.dispatchEvent(
+          new CustomEvent('fetch-params-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              filters,
+              sorters,
+              from: 'config'
+            }
+          })
+        )
+      }
+
       if (this.dataProvider) {
-        this.dataProvider.sorters = this.sorters || this.compiledConfig?.sorters
-        this.dataProvider.filters = this.filters
+        const { limit, pages = ZERO_PAGES } = this._config.pagination || ZERO_PAGINATION
+        this.dataProvider.page = 1
+        this.dataProvider.limit = limit || pages[0] || ZERO_PAGES[0]
       }
 
-      this.fetch()
+      if (!this.urlParamsSensitive && !this.explicitFetch) {
+        this.fetch()
+      }
     }
 
     if (changes.has('fetchHandler')) {
@@ -470,6 +492,17 @@ export class DataGrist extends LitElement implements DataConsumer {
       this.refresh()
     }
 
+    if (changes.has('urlParamsSensitive')) {
+      if (this.urlParamsSensitive) {
+        //@ts-ignore
+        this._popstateEventHandler() // call for the first time
+
+        window.addEventListener('popstate', this._popstateEventHandler)
+      } else {
+        window.removeEventListener('popstate', this._popstateEventHandler)
+      }
+    }
+
     if (needToSetPullToRefresh) {
       await this._setPullToRefresh()
     }
@@ -690,4 +723,20 @@ export class DataGrist extends LitElement implements DataConsumer {
 
     this.checkDirties()
   }
+
+  deleteSelectedRecords(dirty = true) {
+    const records = this.selected || ([] as GristRecord[])
+
+    records.forEach(record => {
+      if (dirty) {
+        record.__dirty__ = '-'
+      } else {
+      }
+
+      const rowIndex = this._data.records.findIndex(rec => rec === record)
+      this._data.records.splice(rowIndex, 1)
+    })
+
+    this.checkDirties()
+  }
 }

package/src/data-list/record-partial.ts

@@ -41,10 +41,6 @@ export class RecordPartial extends LitElement {
         min-height: 42px;
       }
 
-      ox-list-gutter {
-        flex: 0 0 14px;
-      }
-
       :host([dirty])::before {
         content: '';
         position: absolute;
@@ -59,7 +55,7 @@ export class RecordPartial extends LitElement {
 
       :host > * {
         margin: var(--data-list-item-margin);
-        zoom: 1.4;
+        zoom: var(--grist-input-zoom);
       }
 
       :host [dirty] {

package/src/data-manipulator.ts

@@ -2,11 +2,22 @@ import { LitElement } from 'lit'
 import { property } from 'lit/decorators.js'
 
 import { ZERO_CONFIG, ZERO_DATA } from './configure/zero-config'
-import { ColumnConfig, GristConfig, GristData, GristRecord } from './types'
+import {
+  ColumnConfig,
+  FilterValue,
+  GristConfig,
+  GristData,
+  GristRecord,
+  PaginationConfig,
+  SortersConfig
+} from './types'
 
 export class DataManipulator extends LitElement {
   @property({ type: Object }) config: GristConfig = ZERO_CONFIG
   @property({ type: Object }) data: GristData = ZERO_DATA
+  @property({ type: Object }) sorters: SortersConfig = []
+  @property({ type: Object }) filters: FilterValue[] = []
+  @property({ type: Object }) pagination: PaginationConfig = {}
 
   constructor() {
     super()

package/src/data-provider.ts

@@ -1,9 +1,6 @@
-import { FetchHandler, FetchOption, FilterValue, GristRecord, SorterConfig, SortersConfig } from './types'
-import { SnapshotTaker, TimeCapsule } from '@operato/utils'
-
-import { DataConsumer } from './data-consumer'
-import { ZERO_RECORDS } from './configure/zero-config'
-import deepEquals from 'lodash-es/isEqual'
+import { ZERO_RECORDS } from './configure/zero-config.js'
+import { DataConsumer } from './data-consumer.js'
+import { FetchHandler, FetchOption, FilterValue, GristRecord, SorterConfig, SortersConfig } from './types.js'
 
 function EMPTY_FETCHHANDLER() {
   return {
@@ -33,8 +30,7 @@ export class DataProvider {
 
   private _pageChangeHandler: EventListener = this.onPageChange.bind(this)
   private _limitChangeHandler = this.onLimitChange.bind(this)
-  private _sortersChangeHandler = this.onSortersChange.bind(this)
-  private _filtersChangeHandler = this.onFiltersChange.bind(this)
+  private _fetchParamsChangeHandler = this.onFetchParamsChange.bind(this)
   private _recordChangeHandler = this.onRecordChange.bind(this)
   private _attachPageHandler: EventListener = this.onAttachPage.bind(this)
 
@@ -49,8 +45,7 @@ export class DataProvider {
     this.consumer.addEventListener('attach-page', this._attachPageHandler)
     this.consumer.addEventListener('page-change', this._pageChangeHandler)
     this.consumer.addEventListener('limit-change', this._limitChangeHandler)
-    this.consumer.addEventListener('sorters-change', this._sortersChangeHandler)
-    this.consumer.addEventListener('filters-change', this._filtersChangeHandler)
+    this.consumer.addEventListener('fetch-params-change', this._fetchParamsChangeHandler)
     this.consumer.addEventListener('record-change', this._recordChangeHandler)
   }
 
@@ -58,8 +53,7 @@ export class DataProvider {
     this.consumer?.removeEventListener('attach-page', this._attachPageHandler)
     this.consumer?.removeEventListener('page-change', this._pageChangeHandler)
     this.consumer?.removeEventListener('limit-change', this._limitChangeHandler)
-    this.consumer?.removeEventListener('sorters-change', this._sortersChangeHandler)
-    this.consumer?.removeEventListener('filters-change', this._filtersChangeHandler)
+    this.consumer?.removeEventListener('fetch-params-change', this._fetchParamsChangeHandler)
     this.consumer?.removeEventListener('record-change', this._recordChangeHandler)
   }
 
@@ -77,21 +71,17 @@ export class DataProvider {
     this.fetch({ limit })
   }
 
-  onSortersChange(e: Event) {
-    const { sorters } = (e as CustomEvent).detail || {}
-    this.sorters = sorters
+  onFetchParamsChange(e: Event) {
+    const { sorters, filters, from } = (e as CustomEvent).detail || {}
+
+    sorters && (this.sorters = sorters)
+    filters && (this.filters = filters)
 
     if (this.consumer?.mode !== 'GRID') {
       this.page = 0
     }
 
-    this.fetch()
-  }
-
-  onFiltersChange(e: Event) {
-    const { filters } = (e as CustomEvent).detail || {}
-
-    this.filters = filters
+    from !== 'config' && this.fetch()
   }
 
   onRecordChange(e: Event) {
@@ -154,13 +144,7 @@ export class DataProvider {
   }
 
   set filters(filters) {
-    if (this._filters === filters || deepEquals(this._filters, filters)) {
-      return
-    }
-
     this._filters = filters
-
-    this.fetch()
   }
 
   async attach(reset = false) {
@@ -188,6 +172,7 @@ export class DataProvider {
           page,
           limit,
           sorters: this.sorters,
+          filters: this.filters,
           options: this.fetchOptions
         }))
       },
@@ -251,7 +236,6 @@ export class DataProvider {
     if (maxpage < page) {
       return await this.fetch({ page: maxpage, limit })
     }
-    // CONFIRM-ME 위 코드에 대한 설명이 필요함!!!.
 
     // page와 limit이 없는 경우 records 검사 전에 초기화
     this.page = this.page || page

package/src/data-report/data-report-body.ts

@@ -1,14 +1,14 @@
 import './data-report-field'
 
-import { ColumnConfig, GristConfig, GristData } from '../types'
-import { LitElement, PropertyValues, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { ColumnConfig, GristConfig, GristData } from '../types'
+import { dataReportBodyStyle } from './data-report-body-style'
 import { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler'
 import { dataReportBodyDblclickHandler } from './event-handlers/data-report-body-dblclick-handler'
 import { dataReportBodyKeydownHandler } from './event-handlers/data-report-body-keydown-handler'
-import { dataReportBodyStyle } from './data-report-body-style'
 
 function calcScrollPos(parent: DataReportBody, child: Element) {
   /* getBoundingClientRect는 safari에서 스크롤 상태에서 다른 브라우저와는 다른 값을 리턴함 - 사파리는 약간 이상 작동함. */
@@ -182,7 +182,7 @@ export class DataReportBody extends LitElement {
   focus() {
     super.focus()
 
-    if (!this.focused || this.focused.row === undefined) {
+    if (!this.focused || this.focused.row == null) {
       this.focused = { row: 0, column: 0 }
     }
   }

package/src/data-report/data-report-header.ts

@@ -1,10 +1,10 @@
-import { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'
-import { LitElement, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import throttle from 'lodash-es/throttle'
 
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'
 import { supportsPassive } from '../utils'
-import throttle from 'lodash-es/throttle'
 
 @customElement('ox-report-header')
 class DataReportHeader extends LitElement {
@@ -170,7 +170,7 @@ class DataReportHeader extends LitElement {
     this._sorters = sorters
 
     this.dispatchEvent(
-      new CustomEvent('sorters-change', {
+      new CustomEvent('fetch-params-change', {
         bubbles: true,
         composed: true,
         detail: {

package/src/editors/ox-grist-editor.ts

@@ -1,9 +1,9 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { DataGridField } from '../data-grid/data-grid-field'
+import { ColumnConfig, GristRecord } from '../types'
 
 const STYLE = css`
   :host {
@@ -16,13 +16,14 @@ const STYLE = css`
 
     border: 0;
     background-color: transparent;
+
+    overflow: hidden;
   }
 
   :host > * {
     display: flex;
 
     width: 100%;
-    height: 100%;
 
     border: 0;
     background-color: transparent;
@@ -31,6 +32,8 @@ const STYLE = css`
 
     font-size: inherit;
     font-family: inherit;
+
+    align-items: center;
   }
 
   :host > style {
@@ -116,7 +119,7 @@ export class OxGristEditor extends LitElement {
   }
 
   formatForEditor(value: any): any {
-    return value === undefined ? '' : value
+    return value == null ? '' : value
   }
 
   formatFromEditor(e: Event): any {

package/src/filters/filter-checkbox.ts

@@ -1,9 +1,9 @@
 import '@operato/input/ox-checkbox.js'
 
-import { FilterConfigObject, FilterSelectRenderer } from '../types'
-
 import { html } from 'lit-html'
 
+import { FilterConfigObject, FilterSelectRenderer } from '../types.js'
+
 export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
   const filter = column.filter as FilterConfigObject
   const options = filter?.options
@@ -13,7 +13,7 @@ export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
       name=${column.name}
       ?checked=${value}
       indeterminatable
-      ?indeterminate=${value === undefined}
+      ?indeterminate=${value == null}
       @change=${(e: CustomEvent) => {
         ;(e.target as HTMLElement).dispatchEvent(
           new CustomEvent('filter-change', {