@operato/data-grist 2.0.0-alpha.0 → 2.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.3",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -57,8 +57,8 @@
   "dependencies": {
     "@material/mwc-icon": "^0.27.0",
     "@operato/headroom": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.0",
-    "@operato/popup": "^2.0.0-alpha.0",
+    "@operato/input": "^2.0.0-alpha.3",
+    "@operato/popup": "^2.0.0-alpha.2",
     "@operato/pull-to-refresh": "^2.0.0-alpha.0",
     "@operato/styles": "^2.0.0-alpha.0",
     "@operato/utils": "^2.0.0-alpha.0",
@@ -100,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f995e977847947a1ac4043ff7c627a5cf2ada67b"
+  "gitHead": "9943c2c54a27be3619920543344c699d3a9a55de"
 }

package/src/configure/column-builder.ts

@@ -36,9 +36,8 @@ export const buildColumn = (column: any): ColumnConfig => {
     let type = typeof label
     switch (type) {
       case 'boolean':
-        let title = typeof header == 'string' ? header : name
         compiled.label = {
-          renderer: () => title
+          renderer: compiled.header?.renderer || (() => name)
         }
         break
       case 'string':
@@ -101,12 +100,13 @@ export const buildColumn = (column: any): ColumnConfig => {
   }
 
   /* handler */
-  var { click, dblclick, focus } = handlers || {}
+  var { click, dblclick, focus, contextmenu } = handlers || {}
 
   compiled.handlers = {
     click: click && getGristEventHandler(click),
     dblclick: dblclick && getGristEventHandler(dblclick),
-    focus: focus && getGristEventHandler(focus)
+    focus: focus && getGristEventHandler(focus),
+    contextmenu: contextmenu && getGristEventHandler(contextmenu)
   }
 
   return compiled

package/src/configure/zero-config.ts

@@ -18,7 +18,9 @@ export const ZERO_FIELD_RENDERER: FieldRenderer = (value, column, record, rowInd
 
 export const ZERO_EVENTHANDLERSET: GristEventHandlerSet = {
   click: undefined,
-  dblclick: undefined
+  dblclick: undefined,
+  focus: undefined,
+  contextmenu: undefined
 }
 export const ZERO_COLUMNS: ColumnConfig[] = []
 export const ZERO_GROUPS: GroupConfig[] = []

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

@@ -89,7 +89,7 @@ export class DataCardField extends LitElement {
 
     if (typeof label == 'object') {
       let { renderer: labelRenderer } = label
-      return html`<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`
+      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`
     } else {
       return html`${recordRenderer(value, column, record, rowIndex, this)}`
     }

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

@@ -58,6 +58,7 @@ export class DataGridAccumField extends LitElement {
   @property({ type: Boolean }) editing = false
   @property({ type: Object }) value = {}
   @property({ attribute: false }) emphasized: any = false
+  @property({ type: String }) fixed?: string
 
   render(): TemplateResult {
     if (!this.column || !this.column.accumulator) {
@@ -90,5 +91,11 @@ export class DataGridAccumField extends LitElement {
         this.style.setProperty('--data-grid-field-text-align', align)
       }
     }
+
+    if (changes.has('fixed')) {
+      if (this.fixed) {
+        this.style.left = this.fixed + 'px'
+      }
+    }
   }
 }

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

@@ -18,6 +18,7 @@ import { DataGridField } from './data-grid-field'
 import { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'
 import { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'
 import { dataGridBodyFocusChangeHandler } from './event-handlers/data-grid-body-focus-change-handler'
+import { dataGridBodyContextMenuHandler } from './event-handlers/data-grid-body-contextmenu-handler'
 import { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'
 import { accumulate } from '../accumulator/accumulator'
 
@@ -75,7 +76,7 @@ export class DataGridBody extends LitElement {
       [fixed] {
         position: sticky;
         background-color: var(--grid-record-background-color);
-        z-index: 1; /* 고정된 열을 다른 열 위에 표시. */
+        z-index: 2; /* 고정된 열을 다른 열 위에 표시. */
       }
 
       :host([raised]) [fixed] {
@@ -88,6 +89,10 @@ export class DataGridBody extends LitElement {
         bottom: 0;
         z-index: 1;
       }
+
+      ox-grid-accum-field[fixed] {
+        background-color: var(--grid-accum-record-background-color, #ccc);
+      }
     `
   ]
 
@@ -135,7 +140,6 @@ export class DataGridBody extends LitElement {
     var columns = this.columns.filter(column => !column.hidden)
     var data = this.data
     var { records } = data
-    records = records.filter(record => !record.__parent__ || !record.__parent__.collapsed)
     var { appendable, classifier, accumulator } = this.config.rows
     const { start, end } = this._selectBlock || {}
 
@@ -208,6 +212,7 @@ export class DataGridBody extends LitElement {
                   .column=${column}
                   .record=${accumRecord!}
                   .value=${accumRecord[column.name]}
+                  fixed=${ifDefined(this.fixedLefts[idxColumn])}
                 ></ox-grid-accum-field>
               `
             )}
@@ -261,6 +266,27 @@ export class DataGridBody extends LitElement {
       this.setSelectBlock(start, end)
     })
 
+    this.renderRoot.addEventListener('contextmenu', (event: Event) => {
+      const e = event as MouseEvent
+      this.setSelectBlock()
+
+      this._draggable = false
+
+      var target = (e.target as Element).closest('ox-grid-field') as DataGridField
+      var { rowIndex, columnIndex } = target || {}
+
+      this.dispatchEvent(
+        new CustomEvent('focus-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            row: rowIndex,
+            column: columnIndex
+          }
+        })
+      )
+    })
+
     this.renderRoot.addEventListener('mousedown', (event: Event) => {
       const e = event as MouseEvent
       this.setSelectBlock()
@@ -285,7 +311,7 @@ export class DataGridBody extends LitElement {
         })
       )
 
-      if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
+      if (columnIndex >= 0 && target.editableOnClick && !isNaN(rowIndex) && !isNaN(columnIndex)) {
         this.startEditTarget(rowIndex, columnIndex)
       }
     })
@@ -318,6 +344,7 @@ export class DataGridBody extends LitElement {
 
     this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this))
     this.renderRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this))
+    this.renderRoot.addEventListener('contextmenu', dataGridBodyContextMenuHandler.bind(this))
 
     this.addEventListener('focus-change', dataGridBodyFocusChangeHandler.bind(this))
 

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

@@ -173,4 +173,10 @@ export class DataGridField extends LitElement {
       this.removeAttribute('emphasized-row')
     }
   }
+
+  get editableOnClick() {
+    const renderer = this.renderRoot.firstElementChild as HTMLElement
+    //@ts-ignore
+    return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true
+  }
 }

package/src/data-grid/event-handlers/data-grid-body-click-handler.ts

@@ -56,10 +56,10 @@ export function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {
   /* do column click handler */
   if (column) {
     var { click } = column.handlers
-    click && click(this.columns, this.data, column, record, rowIndex, target)
+    click && click(this.columns, this.data, column, record, rowIndex, target, e)
   }
 
   /* do rows click handler */
   var { click: rowsClick } = this.config.rows.handlers
-  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target)
+  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target, e)
 }

package/src/data-grid/event-handlers/data-grid-body-contextmenu-handler.ts

@@ -0,0 +1,32 @@
+import { DataGridBody } from '../data-grid-body'
+import { DataGridField } from '../data-grid-field'
+
+/**
+ * ox-grid-body 의 focus-change handler
+ *
+ * - handler의 this 는 ox-grid-body임.
+ */
+export async function dataGridBodyContextMenuHandler(this: DataGridBody, e: Event): Promise<void> {
+  e.stopPropagation()
+
+  if (this.editTarget) {
+    /* editTarget이 새로 설정되지 않았다면, 이후 기능이 실행된다. */
+    return
+  }
+
+  /* target should be 'ox-grid-field' */
+  var target = (e.target as Element).closest('ox-grid-field') as DataGridField
+  var { column, record, rowIndex, columnIndex } = target || {}
+
+  var { column, record } = target || {}
+
+  /* do column contextmenu handler */
+  if (column) {
+    var { contextmenu } = column.handlers
+    contextmenu && contextmenu(this.columns, this.data, column, record, rowIndex, target, e)
+  }
+
+  /* do rows contextmenu handler */
+  var { contextmenu: rowsContextMenu } = this.config.rows.handlers
+  rowsContextMenu && rowsContextMenu(this.columns, this.data, column, record, rowIndex, target, e)
+}

package/src/data-grid/event-handlers/data-grid-body-dblclick-handler.ts

@@ -33,10 +33,10 @@ export async function dataGridBodyDblclickHandler(this: DataGridBody, e: Event):
   /* do column dblclick handler */
   if (column) {
     var { dblclick } = column.handlers
-    dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)
+    dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target, e)
   }
 
   /* do rows dblclick handler */
   var { dblclick: rowsDblclick } = this.config.rows.handlers
-  rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target)
+  rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target, e)
 }

package/src/data-grid/event-handlers/data-grid-body-focus-change-handler.ts

@@ -15,10 +15,10 @@ export async function dataGridBodyFocusChangeHandler(this: DataGridBody, e: Even
   /* do column focus handler */
   if (column) {
     var { focus } = column.handlers
-    focus && focus(this.columns, this.data, column, record, rowIndex, target)
+    focus && focus(this.columns, this.data, column, record, rowIndex, target, e)
   }
 
   /* do rows focus handler */
   var { focus: rowsFocus } = this.config.rows.handlers
-  rowsFocus && rowsFocus(this.columns, this.data, column, record, rowIndex, target)
+  rowsFocus && rowsFocus(this.columns, this.data, column, record, rowIndex, target, e)
 }

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

@@ -77,7 +77,7 @@ export class DataListField extends LitElement {
 
     if (typeof label == 'object') {
       let { renderer: labelRenderer } = label
-      return html`<label>${labelRenderer()}</label>${fieldRenderer(value, column, record, rowIndex, this)}`
+      return html`<label>${labelRenderer(column)}</label>${fieldRenderer(value, column, record, rowIndex, this)}`
     } else {
       return html`${fieldRenderer(value, column, record, rowIndex, this)}`
     }

package/src/data-manipulator.ts

@@ -15,8 +15,8 @@ import {
 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: Array }) sorters: SortersConfig = []
+  @property({ type: Array }) filters: FilterValue[] = []
   @property({ type: Object }) pagination: PaginationConfig = {}
 
   constructor() {
@@ -64,16 +64,15 @@ export class DataManipulator extends LitElement {
     })
 
     /* tree processing */
-    this.addEventListener('collapsed', (e: Event) => this.onCollapsed(e as CustomEvent))
-    this.addEventListener('expanded', (e: Event) => this.onExpanded(e as CustomEvent))
+    this.addEventListener('collapse-all', (e: Event) => this.onCollapseAll(e as CustomEvent))
+    this.addEventListener('expand-all', (e: Event) => this.onExpandAll(e as CustomEvent))
+    this.addEventListener('collapse-node', (e: Event) => this.onCollapse(e as CustomEvent))
+    this.addEventListener('expand-node', (e: Event) => this.onExpand(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()
-  //   }
-  // }
+    this.addEventListener('add-sibling-node', (e: Event) => this.onAddSiblingNode(e as CustomEvent))
+    this.addEventListener('add-child-node', (e: Event) => this.onAddChildNode(e as CustomEvent))
+  }
 
   onFieldChange({
     after,
@@ -213,23 +212,101 @@ export class DataManipulator extends LitElement {
     this.requestUpdate()
   }
 
-  onCollapsed(e: CustomEvent) {
-    const record = e.detail
+  onCollapseAll(e: CustomEvent) {
+    this.refresh(false)
+  }
+
+  onExpandAll(e: CustomEvent) {
+    this.refresh(true)
+  }
+
+  onCollapse(e: CustomEvent) {
+    const record = e.detail as GristRecord
     record.__expanded__ = false
 
     this.refresh()
   }
 
-  onExpanded(e: CustomEvent) {
-    const record = e.detail
+  onExpand(e: CustomEvent) {
+    const record = e.detail as GristRecord
     record.__expanded__ = true
 
     this.refresh()
   }
 
-  onCheckInTree(e: CustomEvent) {
-    const self = this
+  onAddSiblingNode(e: CustomEvent) {
+    const { records } = this.data
+    const toplevelRecords = records.filter(
+      record => !record.__depth__
+    ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
+
+    const field = e.detail
+    const { record } = field
+    const { __depth__ } = record as GristRecord
+
+    function findParent(record: GristRecord, parent?: GristRecord): GristRecord | undefined {
+      var children = (parent ? parent.__children__ || [] : toplevelRecords) as GristRecord[]
+
+      if (children.find(child => child === record)) {
+        return parent
+      } else {
+        for (let child of children) {
+          const found = findParent(record, child)
+          if (found) {
+            return found
+          }
+        }
+      }
+    }
+
+    const parent = findParent(record)
+
+    const sibling = {
+      __depth__,
+      __dirty__: '+'
+    }
+
+    if (parent) {
+      const { __children__ } = parent as GristRecord
 
+      if (!__children__) {
+        parent.__children__ = [sibling]
+      } else {
+        parent.__children__ = [...__children__, sibling]
+      }
+
+      parent.__expanded__ = true
+    } else {
+      this.data.records = [...toplevelRecords, sibling]
+    }
+
+    this.refresh()
+  }
+
+  onAddChildNode(e: CustomEvent) {
+    const field = e.detail
+    const { record } = field
+
+    const { __children__, __depth__, __seq__ } = record as GristRecord
+    const child = {
+      __depth__: (__depth__ || 0) + 1,
+      __dirty__: '+'
+    }
+
+    if (!__children__) {
+      record.__children__ = [child]
+    } else {
+      record.__children__.push(child)
+    }
+
+    record.__expanded__ = true
+
+    field.requestUpdate()
+
+    this.refresh()
+  }
+
+  onCheckInTree(e: CustomEvent) {
     function walkTreeCheckedUpdate(record: GristRecord, checked: 'checked' | 'unchecked') {
       const children = record.__children__
 
@@ -248,7 +325,8 @@ export class DataManipulator extends LitElement {
 
       children.forEach(child => updateCheckedAll(child))
 
-      var checked: 'checked' | 'half-checked' | 'unchecked' | undefined
+      var checked: 'checked' | 'half-checked' | 'unchecked' | undefined =
+        record.__check_in_tree__ == 'checked' ? 'checked' : undefined
 
       children.forEach(child => {
         const { __check_in_tree__ } = child
@@ -256,7 +334,7 @@ export class DataManipulator extends LitElement {
         if (__check_in_tree__ == 'half-checked') {
           checked = 'half-checked'
         } else if (__check_in_tree__ == 'checked') {
-          checked = checked == 'checked' || !checked ? 'checked' : 'half-checked'
+          checked = checked == 'checked' ? 'checked' : 'half-checked'
         } else {
           checked = checked == 'unchecked' || !checked ? 'unchecked' : 'half-checked'
         }
@@ -287,7 +365,7 @@ export class DataManipulator extends LitElement {
    * Therefore, it will be deprecated.
    * @method
    */
-  refresh() {
+  refresh(forceExpandOrCollapse?: boolean) {
     /*
     - TODO 여기에서 TREE 형태 데이터의 접고, 펴는 것을 재구성한다.
     - 동적으로 서브항목을 fetch 하는 기능은 제공하지 않는다.
@@ -302,15 +380,24 @@ export class DataManipulator extends LitElement {
     ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
     this.data = {
       ...this.data,
-      records: ([] as GristRecord[]).concat(...toplevelRecords.map(record => this.traverseRefresh(record)))
+      records: ([] as GristRecord[]).concat(
+        ...toplevelRecords.map(record => this.traverseRefresh(record, forceExpandOrCollapse))
+      )
     }
   }
 
-  private traverseRefresh(record: GristRecord): GristRecord[] {
+  private traverseRefresh(record: GristRecord, forceExpandOrCollapse?: boolean): GristRecord[] {
+    if (forceExpandOrCollapse !== undefined) {
+      record = {
+        ...record,
+        __expanded__: forceExpandOrCollapse
+      }
+    }
+
     const { __expanded__, __children__ = [] } = record
 
     if (__expanded__ && __children__.length > 0) {
-      return [record].concat(...__children__.map(child => this.traverseRefresh(child)))
+      return [record].concat(...__children__.map(child => this.traverseRefresh(child, forceExpandOrCollapse)))
     } else {
       return [record]
     }

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

@@ -0,0 +1,27 @@
+import './ox-input-tree'
+
+import { html, css } from 'lit'
+import { customElement, query } from 'lit/decorators.js'
+
+import { OxGristEditor } from './ox-grist-editor.js'
+
+@customElement('ox-grist-editor-tree')
+export class OxGristEditorTree extends OxGristEditor {
+  static styles = [
+    css`
+      :host {
+        flex: 1;
+      }
+
+      ox-input-tree {
+        flex: 1;
+      }
+    `
+  ]
+
+  get editorTemplate() {
+    var { selectable } = this.column.record.options || {}
+
+    return html`<ox-input-tree .value=${this.value} .record=${this.record} ?selectable=${selectable}></ox-input-tree>`
+  }
+}

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

@@ -91,6 +91,10 @@ export class OxGristEditor extends LitElement {
     return this.renderRoot.firstElementChild as HTMLElement
   }
 
+  get directEditable() {
+    return true
+  }
+
   async firstUpdated() {
     this.renderRoot.addEventListener('change', this._onchange.bind(this))
     this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))