@operato/data-grist 0.3.13 → 0.3.17

package/src/data-card/record-card.ts

@@ -8,6 +8,7 @@ import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'
+import { RecordViewHandler } from '../record-view/record-view-handler'
 import { GristConfig, GristData, GristRecord } from '../types'
 import { recordCardClickHandler } from './event-handlers/record-card-click-handler'
 import { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'
@@ -67,7 +68,10 @@ export class RecordCard extends LitElement {
         border-top-right-radius: var(--data-card-record-card-border-radius);
         border-bottom: var(--data-card-thumbnail-border-bottom);
         overflow: hidden;
-        align-self: center;
+
+        display: flex;
+        align-content: center;
+        justify-content: center;
       }
 
       [content] {
@@ -139,36 +143,6 @@ export class RecordCard extends LitElement {
   private clickHandler = recordCardClickHandler.bind(this) as EventListener
   private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener
 
-  attributeChangedCallback(name: string, oldval: any, newval: any) {
-    super.attributeChangedCallback(name, oldval, newval)
-  }
-
-  onFieldChange(e: Event) {
-    /* record-view의 이벤트를 부모에게로 전달한다. */
-    this.dispatchEvent(
-      new CustomEvent('field-change', {
-        bubbles: true,
-        composed: true,
-        detail: (e as any).detail
-      })
-    )
-  }
-
-  get recordView() {
-    if (!this._recordView) {
-      this._recordView = document.createElement('ox-record-view')
-      this._recordView.addEventListener('field-change', (e: CustomEvent) => this.onFieldChange(e))
-    }
-
-    var columns = this.config.columns
-
-    this._recordView.columns = columns
-    this._recordView.record = this.record
-    this._recordView.rowIndex = this.rowIndex
-
-    return this._recordView
-  }
-
   firstUpdated() {
     /*
       long-press
@@ -178,6 +152,8 @@ export class RecordCard extends LitElement {
     // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))
     this.renderRoot.addEventListener('click', this.clickHandler)
     this.renderRoot.addEventListener('dblclick', this.dblclickHandler)
+
+    this.addEventListener('show-record-view', () => this.popupRecordView())
   }
 
   updated(changes: PropertyValues<this>) {
@@ -187,18 +163,21 @@ export class RecordCard extends LitElement {
   }
 
   render() {
-    var record = this.record
-    var rowIndex = this.rowIndex
-    var { columns, list } = this.config
-    var { thumbnail, fields, details } = list || {}
+    const record = this.record
+    const rowIndex = this.rowIndex
+    const { columns, list } = this.config
+    const { thumbnail, fields, details } = list || {}
 
-    var briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []
-    var detailFields = details.map(field => columns.find(column => column.name == field)).filter(column => column) || []
+    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []
+    const detailFields =
+      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []
 
-    var thumbnailTemplate = thumbnail.call(this, record, rowIndex)
+    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined
+    const thumbRenderer = thumbnailColumn?.record.renderer
+    const thumbnailTemplate = thumbRenderer?.call(this, record[thumbnail!], thumbnailColumn!, record, rowIndex, this)
 
-    var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)
-    var firstGutter = gutters[0]
+    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)
+    const firstGutter = gutters[0]
 
     if (this.hasAttribute('dirty')) {
       var dirtyIcon
@@ -301,53 +280,17 @@ export class RecordCard extends LitElement {
       title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)
     }
 
-    document.dispatchEvent(
-      new CustomEvent('open-popup', {
-        detail: {
-          template: this.recordView,
-          options: {
-            backdrop: true,
-            size: 'large',
-            title
-          },
-          callback: (popup: any) => {
-            this.recordView.addEventListener('reset', () => {
-              this.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    record: this.record,
-                    row: this.rowIndex
-                  }
-                })
-              )
-            })
-
-            this.recordView.addEventListener('cancel', () => {
-              this.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    record: this.record,
-                    row: this.rowIndex
-                  }
-                })
-              )
-              popup.close()
-            })
-
-            this.recordView.addEventListener('ok', () => {
-              popup.close()
-            })
-
-            popup.onclosed = () => {
-              delete this._recordView
-            }
-          }
-        }
-      })
+    this._recordView = RecordViewHandler(
+      this.config.columns,
+      this.record,
+      this.rowIndex,
+      this,
+      {
+        title
+      },
+      () => {
+        delete this._recordView
+      }
     )
   }
 }

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

@@ -1,16 +1,17 @@
 import './data-grid-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 debounce from 'lodash-es/debounce'
 
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { RecordViewHandler } from '../record-view/record-view-handler'
+import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'
+import { supportsPassive } from '../utils'
+import { dataGridBodyStyle } from './data-grid-body-style'
 import { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'
 import { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'
 import { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'
-import { dataGridBodyStyle } from './data-grid-body-style'
-import debounce from 'lodash-es/debounce'
-import { supportsPassive } from '../utils'
 
 const THRESHOLD = 300
 const DATA_PADDING = 3
@@ -58,6 +59,8 @@ export class DataGridBody extends LitElement {
   @property({ type: Number }) to = -1
 
   private _focusedListener?: (e: KeyboardEvent) => void
+  private _recordView?: any
+  private _recordViewRow?: number
 
   resetEdit() {
     this.editTarget = null
@@ -171,6 +174,10 @@ export class DataGridBody extends LitElement {
       '--focused-background-image',
       `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>")`
     )
+
+    this.addEventListener('show-record-view', (e: Event) =>
+      this.popupRecordView((e as CustomEvent).detail as { row: number; record: GristRecord })
+    )
   }
 
   _onWheelEvent(e: WheelEvent) {
@@ -226,6 +233,10 @@ export class DataGridBody extends LitElement {
         this.scrollLeft = left
       }
     }
+
+    if (this._recordView) {
+      this._recordView.record = this.data.records[this._recordViewRow!]
+    }
   }
 
   focus() {
@@ -238,4 +249,30 @@ export class DataGridBody extends LitElement {
       this.focused = { row: row == -1 ? 0 : row, column: 0 }
     }
   }
+
+  popupRecordView({ record, row }: { row: number; record: GristRecord }) {
+    var titleField = this.config.list.fields[0] || 'name'
+    var title = record[titleField]
+
+    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
+    if (typeof title == 'object') {
+      var column = this.config.columns.find(column => column.name == titleField)
+      title = column?.record.renderer(title, column, record, row, this /* cautious */)
+    }
+
+    this._recordViewRow = row
+    this._recordView = RecordViewHandler(
+      this.config.columns,
+      record,
+      row,
+      this,
+      {
+        title
+      },
+      () => {
+        delete this._recordView
+        delete this._recordViewRow
+      }
+    )
+  }
 }

package/src/data-grid/data-grid-field.ts

@@ -118,7 +118,7 @@ export class DataGridField extends LitElement {
     if (changes.has('editing')) {
       if (this.isEditing) {
         this._onKeydownInEditingMode = ((e: KeyboardEvent) => {
-          if (e.keyCode == 27 /* KEY_ESC */) {
+          if (e.key === 'Esc' || e.key === 'Escape') {
             /* 편집 취소 */
             this._editCancelled = true
           }

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

@@ -6,6 +6,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import throttle from 'lodash-es/throttle'
 
 import { OxPopup } from '@operato/popup'
+import { closestElement } from '@operato/utils'
 
 import { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
 import { FilterStyles } from '../filters/filter-styles'
@@ -24,7 +25,7 @@ export class DataGridHeader extends LitElement {
         overflow: hidden;
       }
 
-      :scope > div {
+      div[column] {
         display: flex;
 
         white-space: nowrap;
@@ -119,6 +120,15 @@ export class DataGridHeader extends LitElement {
   private _lastAccVal?: number
   private _throttledNotifier?: any
 
+  connectedCallback() {
+    super.connectedCallback()
+
+    const grid = closestElement('ox-grist', this)
+    grid?.addEventListener('sorters-change', (e: Event) => {
+      this._sorters = (e as CustomEvent).detail
+    })
+  }
+
   render() {
     var columns = this.columns || []
 

package/src/data-grid/data-grid.ts

@@ -2,20 +2,21 @@ import './data-grid-header'
 import './data-grid-body'
 import './data-grid-footer'
 
-import { ColumnConfig, GristConfig, GristData, GristRecord, PaginationConfig } from '../types'
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { DataGridHeader } from './data-grid-header'
 import { ScrollbarStyles } from '@operato/styles'
+
+import { DataManipulator } from '../data-manipulator'
+import { ColumnConfig, GristRecord, PaginationConfig } from '../types'
 import { supportsPassive } from '../utils'
+import { DataGridHeader } from './data-grid-header'
 
 /**
  * DataGrid
  */
 @customElement('ox-grid')
-export class DataGrid extends LitElement {
+export class DataGrid extends DataManipulator {
   static styles = [
     ScrollbarStyles,
     css`
@@ -40,8 +41,6 @@ export class DataGrid extends LitElement {
     `
   ]
 
-  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
-  @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: Object }) focused?: { row: number; column: number }
 
   @query('ox-grid-body', true) body!: LitElement
@@ -82,70 +81,11 @@ export class DataGrid extends LitElement {
       this.body.requestUpdate()
     })
 
-    this.addEventListener('select-record-change', e => {
-      var {
-        records: selectedRecords,
-        added = [],
-        removed = []
-      } = (e as CustomEvent).detail as {
-        records: GristRecord[]
-        added: GristRecord[]
-        removed: GristRecord[]
-      }
-      var { records } = this.data
-      var { selectable } = this.config.rows
-
-      if (!records) {
-        return
-      }
-
-      if (selectable && !selectable.multiple) {
-        records.forEach(record => (record['__selected__'] = false))
-      }
-
-      if (selectedRecords) {
-        records.forEach(record => (record['__selected__'] = false))
-        selectedRecords.forEach(record => (record['__selected__'] = true))
-      } else {
-        removed.forEach(record => (record['__selected__'] = false))
-        added.forEach(record => (record['__selected__'] = true))
-      }
-
-      this.header.requestUpdate()
-      this.body.requestUpdate()
-    })
-
-    /* field change processing */
-    this.addEventListener('field-change', e => {
-      var { after, before, column, record, row } = (e as CustomEvent).detail
-
-      /* compare changes */
-      if (after === before) {
-        return
-      }
-
-      var validation = column.validation
-      if (validation && typeof (validation == 'function')) {
-        if (!validation.call(this, after, before, record, column)) {
-          return
-        }
-      }
-
-      this.onRecordChanged({ [column.name]: after }, row, column)
-    })
-
     this.addEventListener('focus-change', e => {
       this.focused = (e as CustomEvent).detail
       this.focus()
       this.requestUpdate()
     })
-
-    /* record reset processing */
-    this.addEventListener('record-reset', e => {
-      var { record, row } = (e as CustomEvent).detail
-
-      this.onRecordChanged(record['__origin__'], row, null)
-    })
   }
 
   onWheelEvent(e: WheelEvent) {
@@ -155,89 +95,31 @@ export class DataGrid extends LitElement {
     supportsPassive || e.preventDefault()
   }
 
+  onSelectRecordChanged({
+    selectedRecords,
+    added,
+    removed
+  }: {
+    selectedRecords: GristRecord[]
+    added: GristRecord[]
+    removed: GristRecord[]
+  }): void {
+    super.onSelectRecordChanged({ selectedRecords, added, removed })
+
+    this.header.requestUpdate()
+    this.body.requestUpdate()
+  }
+
   onRecordChanged(
     recordData: GristRecord,
     row: number,
     column: ColumnConfig | null /* TODO column should be removed */
   ) {
-    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.
-
-    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */
-    var records = this.data.records
-
-    var beforeRecord: GristRecord = records[row]
-    var afterRecord: GristRecord
-    var wantToDelete = false
-    var wantToAppend = false
-
-    if (!recordData) {
-      if (!beforeRecord) {
-        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */
-        this.requestUpdate()
-        return
-      } else {
-        /*
-         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,
-         * 삭제하고자 하는 의도로 이해된다. (주의 필요)
-         */
-        if (beforeRecord['__dirty__'] == '+') {
-          wantToDelete = true
-        } else {
-          afterRecord = {
-            ...beforeRecord,
-            __dirty__: '-'
-          }
-        }
-      }
-    } else {
-      if (!beforeRecord) {
-        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */
-        afterRecord = {
-          ...recordData,
-          __dirty__: '+'
-        }
-
-        wantToAppend = true
-      } else {
-        let beforeDirty = beforeRecord.__dirty__
-        if (beforeDirty == '+') {
-          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: '+'
-          }
-        } else {
-          /* 기존에 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: 'M'
-          }
-        }
-      }
-    }
-
-    if (wantToAppend) {
-      records.push(afterRecord!)
-    } else if (wantToDelete) {
-      records.splice(row, 1)
-    } else {
-      records.splice(row, 1, afterRecord!)
-    }
+    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */
+    super.onRecordChanged(recordData, row, column)
 
-    this.dispatchEvent(
-      new CustomEvent('record-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          before: beforeRecord,
-          after: afterRecord!,
-          column,
-          row
-        }
-      })
-    )
+    this.header.requestUpdate()
+    this.body.requestUpdate()
   }
 
   updated(changes: PropertyValues<this>) {

package/src/data-grist.ts

@@ -275,6 +275,10 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
+  get compiledConfig(): GristConfig {
+    return this._config
+  }
+
   get sorters(): SortersConfig | undefined {
     return this._config?.sorters
   }

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

@@ -1,14 +1,14 @@
 import '@material/mwc-icon'
 import './record-partial'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { css, html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
-import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'
+import { DataManipulator } from '../data-manipulator'
+import { GristRecord } from '../types'
 
 @customElement('ox-list')
-export class DataList extends LitElement {
+export class DataList extends DataManipulator {
   static styles = [
     css`
       :host {
@@ -42,8 +42,6 @@ export class DataList extends LitElement {
     `
   ]
 
-  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
-  @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: Boolean }) isTop: boolean = false
   @property({ type: Array }) private _records: GristRecord[] = []
 
@@ -71,158 +69,6 @@ export class DataList extends LitElement {
 
       this.isTop = this.scrollTop == 0
     })
-
-    this.addEventListener('select-record-change', e => {
-      var {
-        records: selectedRecords,
-        added = [],
-        removed = []
-      } = (e as CustomEvent).detail as {
-        records: GristRecord[]
-        added: GristRecord[]
-        removed: GristRecord[]
-      }
-      var { records } = this.data || {}
-      var { selectable = false } = this.config.rows || {}
-
-      if (!records || !selectable) {
-        return
-      } else if (selectable && !selectable.multiple) {
-        records.forEach(record => (record['__selected__'] = false))
-      }
-
-      if (selectedRecords) {
-        records.forEach(record => (record['__selected__'] = false))
-        selectedRecords.forEach(record => (record['__selected__'] = true))
-      } else {
-        removed.forEach(record => (record['__selected__'] = false))
-        added.forEach(record => (record['__selected__'] = true))
-      }
-
-      this.requestUpdate()
-    })
-
-    /* field change processing */
-    this.addEventListener('field-change', e => {
-      var { after, before, column, record, row } = (e as CustomEvent).detail as {
-        after: any
-        before: any
-        column: ColumnConfig
-        record: GristRecord
-        row: number
-      }
-
-      /* compare changes */
-      if (after === before) {
-        return
-      }
-
-      var validation = column.validation
-      if (validation && typeof validation == 'function') {
-        if (!validation.call(this, after, before, record, column)) {
-          return
-        }
-      }
-
-      this.onRecordChanged({ [column.name]: after }, row, column)
-    })
-
-    /* record reset processing */
-    this.addEventListener('record-reset', e => {
-      var { record, row } = (e as CustomEvent).detail as {
-        record: GristRecord
-        row: number
-      }
-
-      this.onRecordChanged(record['__origin__'], row, null)
-    })
-  }
-
-  onRecordChanged(
-    recordData: GristRecord,
-    row: number,
-    column: ColumnConfig | null /* TODO column should be removed */
-  ) {
-    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.
-
-    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */
-    var records = this.data.records
-
-    var beforeRecord = records[row]
-    var afterRecord: GristRecord
-    var wantToDelete = false
-    var wantToAppend = false
-
-    if (!recordData) {
-      if (!beforeRecord) {
-        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */
-        this.requestUpdate()
-        return
-      } else {
-        /*
-         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,
-         * 삭제하고자 하는 의도로 이해된다. (주의 필요)
-         */
-        if (beforeRecord['__dirty__'] == '+') {
-          wantToDelete = true
-        } else {
-          afterRecord = {
-            ...beforeRecord,
-            __dirty__: '-'
-          }
-        }
-      }
-    } else {
-      if (!beforeRecord) {
-        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */
-        afterRecord = {
-          ...recordData,
-          __dirty__: '+'
-        }
-
-        wantToAppend = true
-      } else {
-        let beforeDirty = beforeRecord['__dirty__']
-        if (beforeDirty == '+') {
-          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: '+'
-          }
-        } else {
-          /* 기존에 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: 'M'
-          }
-        }
-      }
-    }
-
-    if (wantToAppend) {
-      records.push(afterRecord!)
-    } else if (wantToDelete) {
-      records.splice(row, 1)
-    } else {
-      records.splice(row, 1, afterRecord!)
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('record-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          before: beforeRecord,
-          after: afterRecord!,
-          column,
-          row
-        }
-      })
-    )
-
-    this.requestUpdate()
   }
 
   updated(changes: PropertyValues<this>) {