@operato/data-grist 2.0.0-alpha.2 → 2.0.0-alpha.22

package/src/data-manipulator.ts

@@ -64,18 +64,17 @@ export class DataManipulator extends LitElement {
     })
 
     /* tree processing */
-    this.addEventListener('collapse-all', (e: Event) => this.onCollapseAll(e as CustomEvent))
-    this.addEventListener('expand-all', (e: Event) => this.onExpandAll(e as CustomEvent))
-    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.collapseAll())
+    this.addEventListener('expand-all', (e: Event) => this.expandAll())
+    this.addEventListener('collapse-node', (e: Event) => this.collapseNode((e as CustomEvent).detail as GristRecord))
+    this.addEventListener('expand-node', (e: Event) => this.expandNode((e as CustomEvent).detail as GristRecord))
     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.addSiblingNode((e as CustomEvent).detail as GristRecord)
+    )
+    this.addEventListener('add-child-node', (e: Event) => this.addChildNode((e as CustomEvent).detail as GristRecord))
+  }
 
   onFieldChange({
     after,
@@ -215,25 +214,119 @@ export class DataManipulator extends LitElement {
     this.requestUpdate()
   }
 
-  onCollapseAll(e: CustomEvent) {
+  collapseAll() {
     this.refresh(false)
   }
 
-  onExpandAll(e: CustomEvent) {
+  expandAll() {
     this.refresh(true)
   }
 
-  onCollapsed(e: CustomEvent) {
-    const record = e.detail
+  collapseNode(record: GristRecord) {
     record.__expanded__ = false
 
     this.refresh()
   }
 
-  onExpanded(e: CustomEvent) {
-    const record = e.detail
+  expandNode(record: GristRecord) {
+    record.__expanded__ = true
+
+    this.refresh()
+  }
+
+  // onCollapse(e: CustomEvent) {
+  //   const record = e.detail as GristRecord
+  //   record.__expanded__ = false
+
+  //   this.refresh()
+  // }
+
+  // onExpand(e: CustomEvent) {
+  //   const record = e.detail as GristRecord
+  //   record.__expanded__ = true
+
+  //   this.refresh()
+  // }
+
+  addSiblingNode(record: GristRecord) {
+    const { records } = this.data
+    const toplevelRecords = records.filter(
+      record => !record.__depth__
+    ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
+
+    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__: '+'
+    } as GristRecord
+
+    if (parent) {
+      const { id } = parent as GristRecord
+
+      sibling.parent = { id }
+
+      if (!parent.__children__) {
+        parent.__children__ = [sibling]
+      } else {
+        let index = parent.__children__.indexOf(record)
+
+        if (index !== -1) {
+          parent.__children__ = [
+            ...parent.__children__.slice(0, index + 1),
+            sibling,
+            ...parent.__children__.slice(index + 1)
+          ]
+        } else {
+          parent.__children__ = [...parent.__children__, sibling]
+        }
+      }
+
+      parent.__expanded__ = true
+    } else {
+      this.data.records = [...toplevelRecords, sibling]
+    }
+
+    this.refresh()
+  }
+
+  addChildNode(record: GristRecord) {
+    const { id: parentId, __children__, __depth__ } = record as GristRecord
+    const child = {
+      parent: {
+        id: parentId
+      },
+      __depth__: (__depth__ || 0) + 1,
+      __dirty__: '+'
+    }
+
+    if (!record.__children__) {
+      record.__children__ = [child]
+    } else {
+      record.__children__.unshift(child)
+    }
+
     record.__expanded__ = true
 
+    // this.requestUpdate()
+
     this.refresh()
   }
 
@@ -256,7 +349,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
@@ -264,7 +358,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'
         }
@@ -318,10 +412,7 @@ export class DataManipulator extends LitElement {
 
   private traverseRefresh(record: GristRecord, forceExpandOrCollapse?: boolean): GristRecord[] {
     if (forceExpandOrCollapse !== undefined) {
-      record = {
-        ...record,
-        __expanded__: forceExpandOrCollapse
-      }
+      record.__expanded__ = forceExpandOrCollapse
     }
 
     const { __expanded__, __children__ = [] } = record

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

@@ -1,6 +1,7 @@
 import { OxGristEditor } from './ox-grist-editor.js'
 import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { parseToNumberOrNull } from '@operato/utils'
 
 @customElement('ox-grist-editor-number')
 export class OxGristEditorNumber extends OxGristEditor {
@@ -9,9 +10,9 @@ export class OxGristEditorNumber extends OxGristEditor {
 
     switch (this.column.type) {
       case 'float':
-        return Number.parseFloat(value)
+        return Number.parseFloat(value) || 0
       case 'integer':
-        return Number.parseInt(value)
+        return Number.parseInt(value) || 0
       default:
         return Number(value)
     }

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

@@ -4,7 +4,8 @@ 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'
-import { getDefaultValue } from '../value-generator'
+import { getDefaultValue } from '@operato/time-calculator'
+import { parseToNumberOrNull } from '@operato/utils'
 
 const STYLE = css`
   :host {
@@ -123,7 +124,10 @@ export class OxGristEditor extends LitElement {
 
     // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
     const editorValue = this.field?.valueWithEdit ? this.field.valueWithEdit : this.formatForEditor(currentValue)
-    this.value = this._dirtyValue = this.field?.type === 'number' ? Number(editorValue) : editorValue
+    const fieldType = this.field?.type || 'string'
+    this.value = this._dirtyValue = ['number', 'float', 'integer', 'progress'].includes(fieldType)
+      ? parseToNumberOrNull(editorValue)
+      : editorValue
 
     requestAnimationFrame(() => {
       this.focus()

package/src/editors/ox-input-tree.ts

@@ -214,7 +214,7 @@ export class OxInputTree extends OxFormField {
     e.stopPropagation()
 
     this.dispatchEvent(
-      new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
+      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
         bubbles: true,
         composed: true,
         detail: this.record

package/src/filters/filter-range-date.ts

@@ -2,16 +2,31 @@ import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 import { html } from 'lit-html'
 
+function formatDate(type: string, date: Date) {
+  var year = date.getFullYear()
+  var month = ('0' + (date.getMonth() + 1)).slice(-2)
+  var day = ('0' + date.getDate()).slice(-2)
+  var hours = ('0' + date.getHours()).slice(-2)
+  var minutes = ('0' + date.getMinutes()).slice(-2)
+
+  var formatDate = year + '-' + month + '-' + day
+
+  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes
+}
+
 export const FilterRangeDate: FilterSelectRenderer = (column, value, owner) => {
   const filter = column.filter as FilterConfigObject
 
-  const [from, to] = value instanceof Array ? value : []
+  var [from, to] = value instanceof Array ? value : []
 
   var type: any = filter?.type || column.type
   if (type === 'datetime') {
     type = 'datetime-local'
   }
 
+  from = formatDate(type, new Date(from))
+  to = formatDate(type, new Date(to))
+
   return html`
     <input
       name=${column.name}

package/src/filters/filters-form.ts

@@ -6,6 +6,8 @@ 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 { getDefaultValue } from '@operato/time-calculator'
+
 import { FilterConfigObject } from '..'
 import { DataGrist } from '../data-grist'
 import { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types'
@@ -72,7 +74,6 @@ export class FiltersForm extends LitElement {
 
     if (grist) {
       this.config = grist.compiledConfig
-      this.value = grist.filters || []
 
       grist.addEventListener('config-change', (e: Event) => {
         this.config = (e as CustomEvent).detail
@@ -102,6 +103,17 @@ export class FiltersForm extends LitElement {
     }
   }
 
+  buildDefaultValue(operator: string, defaultValue: any) {
+    if (defaultValue === undefined) {
+      return
+    }
+    if (operator == 'between') {
+      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
+    } else {
+      return getDefaultValue(defaultValue, this)
+    }
+  }
+
   updated(changes: PropertyValues<this>) {
     if (changes.has('config')) {
       const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)
@@ -114,6 +126,15 @@ export class FiltersForm extends LitElement {
         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
     }
   }
@@ -160,7 +181,9 @@ export class FiltersForm extends LitElement {
                   ? 'text'
                   : type
               )[idx]
-              const value = this.value?.find(filter => filter.name == name)?.value
+              const value =
+                this.value?.find(filter => filter.name == name)?.value ??
+                this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)
 
               if (!renderer) {
                 return html``

package/src/handlers/contextmenu-tree-mutation.ts

@@ -9,7 +9,7 @@ function dispatchEvent(field: DataGridField, event: string) {
     new CustomEvent(event, {
       bubbles: true,
       composed: true,
-      detail: field
+      detail: field.record
     })
   )
 }
@@ -54,24 +54,6 @@ export const ContextMenuTreeMutation = function (
         <mwc-icon slot="icon">playlist_add</mwc-icon>
       </ox-popup-menuitem>
 
-      <ox-popup-menuitem
-        label="move up"
-        @click=${() => {
-          dispatchEvent(field, 'move-up')
-        }}
-      >
-        <mwc-icon slot="icon">arrow_upward</mwc-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="move down"
-        @click=${() => {
-          dispatchEvent(field, 'move-down')
-        }}
-      >
-        <mwc-icon slot="icon">arrow_downward</mwc-icon>
-      </ox-popup-menuitem>
-
       <div separator></div>
 
       <ox-popup-menuitem

package/src/index.ts

@@ -12,6 +12,5 @@ export * from './gutters'
 export * from './filters'
 export * from './sorters/sorters-control'
 export * from './record-view'
-export * from './value-generator'
 
 export * from './utils/list-param'

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

@@ -173,7 +173,7 @@ export class OxGristRendererTree extends OxGristRenderer {
     e.stopPropagation()
 
     this.dispatchEvent(
-      new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
+      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
         bubbles: true,
         composed: true,
         detail: this.record