@operato/data-grist 1.12.7 → 1.12.8

package/src/data-grist.ts

@@ -114,7 +114,6 @@ export class DataGrist extends LitElement implements DataConsumer {
   private orginPaddingTop?: string
   private originMarginTop?: string
   private lastLocation: { origin?: string; pathname?: string; search?: string } = {}
-  private childrenProperty?: string
 
   private popstateEventHandler: EventListener = ((e: Event) => {
     const { origin, pathname, search } = window.location
@@ -241,8 +240,6 @@ export class DataGrist extends LitElement implements DataConsumer {
       })
     )
 
-    this.childrenProperty = this.compiledConfig.tree.childrenProperty
-
     this.pagination = this.compiledConfig.pagination || {}
 
     if (!this.urlParamsSensitive) {
@@ -319,13 +316,7 @@ export class DataGrist extends LitElement implements DataConsumer {
     const empty = !this._showSpinner && this._data.records.length == 0
 
     return html`
-      <div
-        id="wrap"
-        @keydown=${(e: KeyboardEvent) => this.onKeydown(e)}
-        @collapsed=${(e: CustomEvent) => this.onCollapsed(e)}
-        @expanded=${(e: CustomEvent) => this.onExpanded(e)}
-        @check-in-tree=${(e: CustomEvent) => this.onCheckInTree(e)}
-      >
+      <div id="wrap" @keydown=${(e: KeyboardEvent) => this.onKeydown(e)}>
         ${this.mode == 'GRID'
           ? html`
               <ox-grid
@@ -381,86 +372,22 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
-  private onCollapsed(e: CustomEvent) {
-    const record = e.detail
-    record.__expanded__ = false
-
-    this.refresh()
-  }
-
-  private onExpanded(e: CustomEvent) {
-    const record = e.detail
-    record.__expanded__ = true
-
-    this.refresh()
-  }
-
-  private onCheckInTree(e: CustomEvent) {
-    const self = this
-
-    function walkTreeCheckedUpdate(record: GristRecord, checked: 'checked' | 'unchecked') {
-      const children = record[self.childrenProperty!] as GristRecord[]
-
-      children?.forEach(child => walkTreeCheckedUpdate(child, checked))
-      record.__check_in_tree__ = checked
-      record.__selected__ = checked == 'checked'
-    }
-
-    function updateCheckedAll(record: GristRecord) {
-      /* 자식들의 checked 상태로 record의 checked 상태를 수정한다. */
-      var children = record[self.childrenProperty!] as GristRecord[]
-
-      if (!children || children.length == 0) {
-        return
-      }
-
-      children.forEach(child => updateCheckedAll(child))
-
-      var checked: 'checked' | 'half-checked' | 'unchecked' | undefined
-
-      children.forEach(child => {
-        const { __check_in_tree__ } = child
-
-        if (__check_in_tree__ == 'half-checked') {
-          checked = 'half-checked'
-        } else if (__check_in_tree__ == 'checked') {
-          checked = checked == 'checked' || !checked ? 'checked' : 'half-checked'
-        } else {
-          checked = checked == 'unchecked' || !checked ? 'unchecked' : 'half-checked'
-        }
-      })
-
-      record.__check_in_tree__ = checked
-      record.__selected__ = checked == 'checked'
-    }
-
-    e.stopPropagation()
-
-    const record = e.detail
-    var checked = record.__check_in_tree__
-
-    walkTreeCheckedUpdate(record, !checked || checked == 'unchecked' ? 'checked' : 'unchecked')
-    const toplevelRecords = this._data.records.filter(
-      record => !record.__depth__
-    ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
-
-    toplevelRecords.forEach(record => updateCheckedAll(record))
-
-    this.refresh()
-  }
-
   get state() {
-    return JSON.stringify(this._data)
+    return JSON.stringify(this.dirtyData)
   }
 
   undo() {
-    if (!this.timeCapsule?.backwardable) return
+    if (!this.timeCapsule?.backwardable) {
+      return
+    }
 
     this._data = JSON.parse(this.timeCapsule?.backward())
   }
 
   redo() {
-    if (!this.timeCapsule?.forwardable) return
+    if (!this.timeCapsule?.forwardable) {
+      return
+    }
 
     this._data = JSON.parse(this.timeCapsule?.forward())
   }
@@ -541,7 +468,7 @@ export class DataGrist extends LitElement implements DataConsumer {
       var { records } = this.data || []
       var selectedRecords = this.selectedRecords || []
 
-      var _records = this._data.records
+      var _records = this.dirtyData.records
 
       /* 원본데이타에서 index를 찾아서, 복사본 데이타의 selected를 설정한다. */
       selectedRecords.forEach(selected => {
@@ -691,6 +618,7 @@ export class DataGrist extends LitElement implements DataConsumer {
         delete copied.__depth__
         delete copied.__expanded__
         delete copied.__check_in_tree__
+        delete copied.__children__
         delete copied.__typename
 
         return copied
@@ -721,18 +649,6 @@ export class DataGrist extends LitElement implements DataConsumer {
     }
   }
 
-  traverse(record: GristRecord, __depth__: number = 0): GristRecord[] {
-    const children = record[this.childrenProperty!] as GristRecord[]
-
-    record.__depth__ = __depth__
-
-    if (record.__expanded__ && children) {
-      return [record].concat(...children.map(child => this.traverse(child, __depth__ + 1)))
-    } else {
-      return [record]
-    }
-  }
-
   /**
    * Forced internal data to be reflected on the screen
    * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
@@ -740,22 +656,7 @@ export class DataGrist extends LitElement implements DataConsumer {
    * @method
    */
   refresh() {
-    /*
-    - TODO 여기에서 TREE 형태 데이터의 접고, 펴는 것을 재구성한다.
-    - 동적으로 서브항목을 fetch 하는 기능은 제공하지 않는다.
-
-    1. 빈배열에서 시작한다.
-    2. 기존 배열을 traverse하면서, collapsed 여부에 따라서, 자식의 포함여부를 결정하고 준비한 배열에 하나씩 추가한다.
-
-    */
-    const { records } = this._data
-    const toplevelRecords = records.filter(
-      record => !record.__depth__
-    ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
-    this._data = {
-      ...this._data,
-      records: ([] as GristRecord[]).concat(...toplevelRecords.map(record => this.traverse(record)))
-    }
+    this.grist.refresh()
   }
 
   /**
@@ -773,15 +674,24 @@ export class DataGrist extends LitElement implements DataConsumer {
       records = []
     } = this.data || ZERO_PAGINATION
 
+    const { childrenProperty, expanded } = this.compiledConfig.tree
+
     /* 원본 데이타를 남기고, 복사본(_data)을 사용한다. */
-    records = ([] as GristRecord[]).concat(...records.map(record => this.traverse(record)))
-    records = records.map((record, idx) => {
-      return {
-        ...record,
-        __seq__: this.mode == 'GRID' ? (page - 1) * limit + idx + 1 : idx + 1,
-        __origin__: record
-      }
-    })
+    records = ([] as GristRecord[]).concat(
+      ...records.map((record, idx) =>
+        this.traverseReset(
+          record,
+          this.mode == 'GRID' ? (page - 1) * limit + idx + 1 : idx + 1,
+          0,
+          childrenProperty,
+          expanded as () => boolean
+        )
+      )
+    )
+
+    if (childrenProperty) {
+      records = ([] as GristRecord[]).concat(...records.map(record => this.traverseExpanded(record)))
+    }
 
     this._data = {
       limit,
@@ -794,6 +704,43 @@ export class DataGrist extends LitElement implements DataConsumer {
     this.snapshotTaker?.take(true)
   }
 
+  private traverseReset(
+    record: GristRecord,
+    seq: number,
+    __depth__: number,
+    childrenProperty: string | undefined,
+    expanded: () => boolean
+  ): GristRecord {
+    const copied = {
+      ...record,
+      __seq__: seq,
+      __origin__: record
+    }
+
+    if (childrenProperty) {
+      const children: GristRecord[] = record[childrenProperty!]
+
+      const __expanded__ = (expanded as Function)(record)
+      const __children__ = (children || []).map(child =>
+        this.traverseReset(child, seq, __depth__ + 1, childrenProperty, expanded)
+      )
+
+      Object.assign(copied, { __depth__, __children__, __expanded__ })
+    }
+
+    return copied
+  }
+
+  private traverseExpanded(record: GristRecord): GristRecord[] {
+    const { __expanded__, __children__ = [] } = record
+
+    if (__expanded__ && __children__.length > 0) {
+      return [record].concat(...__children__.map(child => this.traverseExpanded(child)))
+    } else {
+      return [record]
+    }
+  }
+
   checkDirties() {
     const records = this.dirtyRecords
     const { columns = [] } = this.compiledConfig || {}
@@ -819,7 +766,7 @@ export class DataGrist extends LitElement implements DataConsumer {
       }
     }
 
-    this._data = { ...this._data }
+    this._data = { ...this.dirtyData }
 
     this.snapshotTaker?.touch()
   }
@@ -837,9 +784,9 @@ export class DataGrist extends LitElement implements DataConsumer {
         .forEach(column => {
           cloned[column.name] = record[column.name]
         })
-      const rowIndex = this._data.records.findIndex(rec => rec === record)
+      const rowIndex = this.dirtyData.records.findIndex(rec => rec === record)
 
-      this._data.records.splice(rowIndex + 1, 0, cloned)
+      this.dirtyData.records.splice(rowIndex + 1, 0, cloned)
     })
 
     this.checkDirties()
@@ -851,11 +798,10 @@ export class DataGrist extends LitElement implements DataConsumer {
     records.forEach(record => {
       if (dirty) {
         record.__dirty__ = '-'
-      } else {
       }
 
-      const rowIndex = this._data.records.findIndex(rec => rec === record)
-      this._data.records.splice(rowIndex, 1)
+      const rowIndex = this.dirtyData.records.findIndex(rec => rec === record)
+      this.dirtyData.records.splice(rowIndex, 1)
     })
 
     this.checkDirties()

package/src/data-manipulator.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit'
+import { LitElement, PropertyValues } from 'lit'
 import { property } from 'lit/decorators.js'
 
 import { ZERO_CONFIG, ZERO_DATA } from './configure/zero-config'
@@ -62,8 +62,19 @@ export class DataManipulator extends LitElement {
 
       this.onRecordChanged(record['__origin__'], row, null)
     })
+
+    /* tree processing */
+    this.addEventListener('collapsed', (e: Event) => this.onCollapsed(e as CustomEvent))
+    this.addEventListener('expanded', (e: Event) => this.onExpanded(e as CustomEvent))
+    this.addEventListener('check-in-tree', (e: Event) => this.onCheckInTree(e as CustomEvent))
   }
 
+  // updated(changes: PropertyValues<this>) {
+  //   if (changes.has('data')) {
+  //     this.refresh()
+  //   }
+  // }
+
   onFieldChange({
     after,
     before,
@@ -169,19 +180,11 @@ export class DataManipulator extends LitElement {
       } else {
         let beforeDirty = beforeRecord['__dirty__']
         if (beforeDirty == '+') {
-          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: '+'
-          }
+          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다.(레코드 레퍼런스를 유지해야한다) */
+          afterRecord = Object.assign(beforeRecord, recordData, { __dirty__: '+' })
         } else {
-          /* 기존에 레코드가 있었으며 계속 수정중이다. */
-          afterRecord = {
-            ...beforeRecord,
-            ...recordData,
-            __dirty__: 'M'
-          }
+          /* 기존에 레코드가 있었으며 계속 수정중이다.(레코드 레퍼런스를 유지해야한다) */
+          afterRecord = Object.assign(beforeRecord, recordData, { __dirty__: 'M' })
         }
       }
     }
@@ -209,4 +212,107 @@ export class DataManipulator extends LitElement {
 
     this.requestUpdate()
   }
+
+  onCollapsed(e: CustomEvent) {
+    const record = e.detail
+    record.__expanded__ = false
+
+    this.refresh()
+  }
+
+  onExpanded(e: CustomEvent) {
+    const record = e.detail
+    record.__expanded__ = true
+
+    this.refresh()
+  }
+
+  onCheckInTree(e: CustomEvent) {
+    const self = this
+
+    function walkTreeCheckedUpdate(record: GristRecord, checked: 'checked' | 'unchecked') {
+      const children = record.__children__
+
+      children?.forEach(child => walkTreeCheckedUpdate(child, checked))
+      record.__check_in_tree__ = checked
+      record.__selected__ = checked == 'checked'
+    }
+
+    function updateCheckedAll(record: GristRecord) {
+      /* 자식들의 checked 상태로 record의 checked 상태를 수정한다. */
+      const children = record.__children__
+
+      if (!children || children.length == 0) {
+        return
+      }
+
+      children.forEach(child => updateCheckedAll(child))
+
+      var checked: 'checked' | 'half-checked' | 'unchecked' | undefined
+
+      children.forEach(child => {
+        const { __check_in_tree__ } = child
+
+        if (__check_in_tree__ == 'half-checked') {
+          checked = 'half-checked'
+        } else if (__check_in_tree__ == 'checked') {
+          checked = checked == 'checked' || !checked ? 'checked' : 'half-checked'
+        } else {
+          checked = checked == 'unchecked' || !checked ? 'unchecked' : 'half-checked'
+        }
+      })
+
+      record.__check_in_tree__ = checked
+      record.__selected__ = checked == 'checked'
+    }
+
+    e.stopPropagation()
+
+    const record = e.detail
+    var checked = record.__check_in_tree__
+
+    walkTreeCheckedUpdate(record, !checked || checked == 'unchecked' ? 'checked' : 'unchecked')
+    const toplevelRecords = this.data.records.filter(
+      record => !record.__depth__
+    ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
+
+    toplevelRecords.forEach(record => updateCheckedAll(record))
+
+    this.refresh()
+  }
+
+  /**
+   * Forced internal data to be reflected on the screen
+   * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
+   * Therefore, it will be deprecated.
+   * @method
+   */
+  refresh() {
+    /*
+    - TODO 여기에서 TREE 형태 데이터의 접고, 펴는 것을 재구성한다.
+    - 동적으로 서브항목을 fetch 하는 기능은 제공하지 않는다.
+
+    1. 빈배열에서 시작한다.
+    2. 기존 배열을 traverseRefresh하면서, collapsed 여부에 따라서, 자식의 포함여부를 결정하고 준비한 배열에 하나씩 추가한다.
+
+    */
+    const { records } = this.data
+    const toplevelRecords = records.filter(
+      record => !record.__depth__
+    ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
+    this.data = {
+      ...this.data,
+      records: ([] as GristRecord[]).concat(...toplevelRecords.map(record => this.traverseRefresh(record)))
+    }
+  }
+
+  private traverseRefresh(record: GristRecord): GristRecord[] {
+    const { __expanded__, __children__ = [] } = record
+
+    if (__expanded__ && __children__.length > 0) {
+      return [record].concat(...__children__.map(child => this.traverseRefresh(child)))
+    } else {
+      return [record]
+    }
+  }
 }

package/src/renderers/ox-grist-renderer-tree.ts

@@ -121,10 +121,10 @@ export class OxGristRendererTree extends OxGristRenderer {
   @state() private expanded?: boolean = false
 
   get rendererTemplate() {
-    var { childrenProperty = 'children', selectable = false } = this.column.record.options || {}
-    var { [childrenProperty]: children } = this.record
+    var { selectable = false } = this.column.record.options || {}
+    var { __children__ } = this.record
 
-    const expandable = children && children.length > 0
+    const expandable = __children__ && __children__.length > 0
 
     return html`
       <div wrap>

package/src/types.ts

@@ -237,6 +237,7 @@ export type ListConfig = {
 
 export type TreeConfig = {
   childrenProperty?: string
+  expanded?: boolean | ((x: GristRecord) => boolean)
 }
 
 export type ImexConfig = {
@@ -291,7 +292,7 @@ export type GristRecord = {
   __collapsed__?: boolean
   __depth__?: number
   __check_in_tree__?: 'checked' | 'half-checked' | 'unchecked'
-  // __children__?: GristRecord[]
+  __children__?: GristRecord[]
   [key: string]: any
 }
 

package/stories/fixed-column.stories.ts

@@ -81,19 +81,16 @@ const config = {
   columns: [
     {
       type: 'gutter',
-      gutterName: 'dirty',
-      fixed: true
+      gutterName: 'dirty'
     },
     {
       type: 'gutter',
-      gutterName: 'sequence',
-      fixed: true
+      gutterName: 'sequence'
     },
     {
       type: 'gutter',
       gutterName: 'row-selector',
-      multiple: true,
-      fixed: true
+      multiple: true
     },
     {
       type: 'gutter',
@@ -104,8 +101,7 @@ const config = {
         click: function () {
           console.log('clicked')
         }
-      },
-      fixed: true
+      }
     },
     {
       type: 'gutter',
@@ -114,8 +110,7 @@ const config = {
       title: 'add',
       handlers: {
         click: 'record-copy'
-      },
-      fixed: true
+      }
     },
     {
       type: 'gutter',

package/stories/grist-modes.stories.ts

@@ -130,6 +130,7 @@ const config = {
       type: 'link',
       name: 'name',
       label: true,
+      fixed: true,
       header: 'name',
       record: {
         editable: true,

package/stories/tree-column-with-checkbox.stories.ts

@@ -93,8 +93,7 @@ const config = {
       record: {
         editable: false,
         options: {
-          selectable: true /* with checkbox */,
-          childrenProperty: 'children'
+          selectable: true /* with checkbox */
         }
       },
       filter: 'search',
@@ -185,6 +184,10 @@ const config = {
   ],
   pagination: {
     pages: [20, 30, 50, 100, 200]
+  },
+  tree: {
+    childrenProperty: 'children',
+    expanded: true
   }
 }
 

package/stories/tree-column.stories.ts

@@ -93,7 +93,6 @@ const config = {
       record: {
         editable: false,
         options: {
-          childrenProperty: 'children',
           selectable: false
         }
       },
@@ -185,6 +184,9 @@ const config = {
   ],
   pagination: {
     pages: [20, 30, 50, 100, 200]
+  },
+  tree: {
+    childrenProperty: 'children'
   }
 }