@operato/data-grist 2.0.0-alpha.7 → 2.0.0-alpha.80

package/src/data-manipulator.ts

@@ -64,14 +64,16 @@ 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('collapse-node', (e: Event) => this.onCollapse(e as CustomEvent))
-    this.addEventListener('expand-node', (e: Event) => this.onExpand(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))
 
-    this.addEventListener('add-sibling-node', (e: Event) => this.onAddSiblingNode(e as CustomEvent))
-    this.addEventListener('add-child-node', (e: Event) => this.onAddChildNode(e as CustomEvent))
+    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({
@@ -212,36 +214,46 @@ export class DataManipulator extends LitElement {
     this.requestUpdate()
   }
 
-  onCollapseAll(e: CustomEvent) {
+  collapseAll() {
     this.refresh(false)
   }
 
-  onExpandAll(e: CustomEvent) {
+  expandAll() {
     this.refresh(true)
   }
 
-  onCollapse(e: CustomEvent) {
-    const record = e.detail as GristRecord
+  collapseNode(record: GristRecord) {
     record.__expanded__ = false
 
     this.refresh()
   }
 
-  onExpand(e: CustomEvent) {
-    const record = e.detail as GristRecord
+  expandNode(record: GristRecord) {
     record.__expanded__ = true
 
     this.refresh()
   }
 
-  onAddSiblingNode(e: CustomEvent) {
+  // 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 field = e.detail
-    const { record } = field
     const { __depth__ } = record as GristRecord
 
     function findParent(record: GristRecord, parent?: GristRecord): GristRecord | undefined {
@@ -264,15 +276,27 @@ export class DataManipulator extends LitElement {
     const sibling = {
       __depth__,
       __dirty__: '+'
-    }
+    } as GristRecord
 
     if (parent) {
-      const { __children__ } = parent as GristRecord
+      const { id } = parent as GristRecord
 
-      if (!__children__) {
+      sibling.parent = { id }
+
+      if (!parent.__children__) {
         parent.__children__ = [sibling]
       } else {
-        parent.__children__ = [...__children__, sibling]
+        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
@@ -283,25 +307,25 @@ export class DataManipulator extends LitElement {
     this.refresh()
   }
 
-  onAddChildNode(e: CustomEvent) {
-    const field = e.detail
-    const { record } = field
-
-    const { __children__, __depth__, __seq__ } = record as GristRecord
+  addChildNode(record: GristRecord) {
+    const { id: parentId, __children__, __depth__ } = record as GristRecord
     const child = {
+      parent: {
+        id: parentId
+      },
       __depth__: (__depth__ || 0) + 1,
       __dirty__: '+'
     }
 
-    if (!__children__) {
+    if (!record.__children__) {
       record.__children__ = [child]
     } else {
-      record.__children__.push(child)
+      record.__children__.unshift(child)
     }
 
     record.__expanded__ = true
 
-    field.requestUpdate()
+    // this.requestUpdate()
 
     this.refresh()
   }
@@ -388,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-checkbox.ts

@@ -4,8 +4,18 @@ import { html } from 'lit'
 
 @customElement('ox-grist-editor-checkbox')
 export class OxGristEditorCheckbox extends OxGristEditor {
-  formatFromEditor(e: Event) {
-    return (e.target as HTMLInputElement).checked
+  _onchange(e: Event) {
+    e.stopPropagation()
+
+    const input = e.target as HTMLInputElement
+
+    this._dirtyValue = this.formatFromEditor(input.checked)
+  }
+
+  formatFromEditor(value: any) {
+    if (typeof value == 'boolean') {
+      return value
+    }
   }
 
   formatForEditor(value: any): any {

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

@@ -15,8 +15,7 @@ export class OxGristEditorDateTime extends OxGristEditor {
     return new Date(timestamp - tzoffset).toISOString().slice(0, -1)
   }
 
-  formatFromEditor(e: Event) {
-    var value = (e.target as HTMLInputElement).value
+  formatFromEditor(value: any) {
     var datetime = new Date(value)
 
     return datetime.getTime()

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

@@ -5,8 +5,18 @@ import { OxGristEditor } from './ox-grist-editor.js'
 
 @customElement('ox-grist-editor-file')
 export class OxGristEditorFile extends OxGristEditor {
-  formatFromEditor(e: Event): any {
-    return (e.target as HTMLInputElement).files
+  _onchange(e: Event) {
+    e.stopPropagation()
+
+    const input = e.target as HTMLInputElement
+
+    this._dirtyValue = this.formatFromEditor(input.files)
+
+    this._onfocusout()
+  }
+
+  formatFromEditor(value: any): any {
+    return value
   }
 
   get editorTemplate() {

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

@@ -12,17 +12,20 @@ export class OxGristEditorImage extends OxGristEditor {
 
   _onchange(e: Event) {
     e.stopPropagation()
-    this._dirtyValue = this.formatFromEditor(e)
-    this._onfocusout()
-  }
 
-  formatFromEditor(e: Event) {
-    // value가 image file object인지, image url인지 확인
     const input = e.target as HTMLInputElement
+
+    // value가 image file object인지, image url인지 확인
     if (input.files?.[0]) {
-      return input.files[0]
+      this._dirtyValue = this.formatFromEditor(input.files[0])
     } else {
-      return input.value
+      this._dirtyValue = this.formatFromEditor(input.value)
     }
+
+    this._onfocusout()
+  }
+
+  formatFromEditor(value: any) {
+    return value
   }
 }

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

@@ -1,20 +1,22 @@
 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 {
-  formatFromEditor(e: Event) {
-    let value = (e.target as HTMLInputElement).value
+  get inlineEditable() {
+    return true
+  }
+
+  formatFromEditor(value: any) {
+    const parsed = parseToNumberOrNull(value) ?? null
 
-    switch (this.column.type) {
-      case 'float':
-        return Number.parseFloat(value)
-      case 'integer':
-        return Number.parseInt(value)
-      default:
-        return Number(value)
+    if (parsed !== null && this.column.type == 'integer') {
+      return Math.floor(parsed)
     }
+
+    return parsed
   }
 
   get editorTemplate() {

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

@@ -4,6 +4,10 @@ import { html } from 'lit'
 
 @customElement('ox-grist-editor-text')
 export class OxGristEditorText extends OxGristEditor {
+  get inlineEditable() {
+    return true
+  }
+
   get editorTemplate() {
     return html` <input type="text" .value=${this.value} /> `
   }

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

@@ -6,6 +6,10 @@ import { html } from 'lit'
 
 @customElement('ox-grist-editor-textarea')
 export class OxGristEditorTextarea extends OxGristEditor {
+  get inlineEditable() {
+    return true
+  }
+
   get editorTemplate() {
     return html` <ox-input-textarea .value=${this.value}></ox-input-textarea> `
   }

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

@@ -4,7 +4,7 @@ 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'
 
 const STYLE = css`
   :host {
@@ -91,8 +91,8 @@ export class OxGristEditor extends LitElement {
     return this.renderRoot.firstElementChild as HTMLElement
   }
 
-  get directEditable() {
-    return true
+  get inlineEditable() {
+    return false
   }
 
   async firstUpdated() {
@@ -121,19 +121,21 @@ export class OxGristEditor extends LitElement {
       currentValue = getDefaultValue(defaultValue, this.record)
     }
 
+    this.value = this._dirtyValue = this.formatForEditor(currentValue)
+
     // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
-    const editorValue = this.field?.valueWithEdit ? this.field.valueWithEdit : this.formatForEditor(currentValue)
-    this.value = this._dirtyValue = this.field?.type === 'number' ? Number(editorValue) : editorValue
+    const valueWith = this.inlineEditable && this.field?.valueWith
+    this.value = this._dirtyValue = valueWith ? this.formatFromEditor(valueWith) : this.formatForEditor(currentValue)
 
     requestAnimationFrame(() => {
       this.focus()
-      this.select()
+      !valueWith && this.select()
     })
   }
 
   select() {
     const editor = this.editor
-    if ((editor as HTMLInputElement)?.select && !this.field?.valueWithEdit) {
+    if ((editor as HTMLInputElement)?.select) {
       return (editor as HTMLInputElement).select()
     }
   }
@@ -149,8 +151,8 @@ export class OxGristEditor extends LitElement {
     return value == null ? '' : value
   }
 
-  formatFromEditor(e: Event): any {
-    return (e.target as HTMLInputElement).value
+  formatFromEditor(value: any): any {
+    return value
   }
 
   _onfocusout() {
@@ -180,7 +182,9 @@ export class OxGristEditor extends LitElement {
   _onchange(e: Event): void {
     e.stopPropagation()
 
-    this._dirtyValue = this.formatFromEditor(e)
+    const value = (e.target as any)?.value
+
+    this._dirtyValue = this.formatFromEditor(value)
   }
 
   _onkeydown(e: Event): void {}

package/src/empty-note.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -11,7 +11,7 @@ export class EmptyNote extends LitElement {
       text-align: center;
     }
 
-    mwc-icon {
+    md-icon {
       font: var(--oops-note-icon-font);
       color: var(--oops-note-icon-color);
       border: var(--oops-note-icon-border);
@@ -38,7 +38,7 @@ export class EmptyNote extends LitElement {
 
   render() {
     return html`
-      ${this.icon ? html`<mwc-icon>${this.icon}</mwc-icon>` : html``}
+      ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : html``}
       <div titler>${this.title}</div>
       ${this.description ? html`<div description>${this.description}</div>` : html``}
     `

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
     }
   }
@@ -151,8 +172,8 @@ export class FiltersForm extends LitElement {
                 filterLabel !== undefined
                   ? filterLabel
                   : typeof label === 'object' && label.renderer
-                  ? label.renderer(column)
-                  : header.renderer(column) || name
+                    ? label.renderer(column)
+                    : header.renderer(column) || name
 
               const idx = operator === 'between' ? 1 : 0
               const renderer = getFilterRenderer(
@@ -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``
@@ -171,48 +194,48 @@ export class FiltersForm extends LitElement {
                     ><span>${labelText}</span> ${renderer(column, value, this)}
                   </label> `
                 : type !== 'select' && !labelText
-                ? renderer(column, value, this)
-                : operator === 'in'
-                ? html`
-                    <ox-select
-                      name=${name}
-                      placeholder=${labelText}
-                      .value=${value}
-                      @change=${(e: CustomEvent) =>
-                        e.target?.dispatchEvent(
-                          new CustomEvent('filter-change', {
-                            detail: {
-                              name,
-                              operator,
-                              value: e.detail
-                            }
-                          })
-                        )}
-                    >
-                      <ox-popup-list multiple attr-selected="checked" with-search>
-                        ${renderer(column, value, this)}
-                      </ox-popup-list>
-                    </ox-select>
-                  `
-                : html`
-                    <ox-select
-                      name=${name}
-                      placeholder=${labelText}
-                      .value=${value}
-                      @change=${(e: CustomEvent) =>
-                        e.target?.dispatchEvent(
-                          new CustomEvent('filter-change', {
-                            detail: {
-                              name,
-                              operator,
-                              value: e.detail
-                            }
-                          })
-                        )}
-                    >
-                      <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
-                    </ox-select>
-                  `
+                  ? renderer(column, value, this)
+                  : operator === 'in'
+                    ? html`
+                        <ox-select
+                          name=${name}
+                          placeholder=${labelText}
+                          .value=${value}
+                          @change=${(e: CustomEvent) =>
+                            e.target?.dispatchEvent(
+                              new CustomEvent('filter-change', {
+                                detail: {
+                                  name,
+                                  operator,
+                                  value: e.detail
+                                }
+                              })
+                            )}
+                        >
+                          <ox-popup-list multiple attr-selected="checked" with-search>
+                            ${renderer(column, value, this)}
+                          </ox-popup-list>
+                        </ox-select>
+                      `
+                    : html`
+                        <ox-select
+                          name=${name}
+                          placeholder=${labelText}
+                          .value=${value}
+                          @change=${(e: CustomEvent) =>
+                            e.target?.dispatchEvent(
+                              new CustomEvent('filter-change', {
+                                detail: {
+                                  name,
+                                  operator,
+                                  value: e.detail
+                                }
+                              })
+                            )}
+                        >
+                          <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
+                        </ox-select>
+                      `
             })}
           </form>
         `

package/src/gutters/gutter-button.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html } from 'lit'
 
@@ -23,13 +23,13 @@ export class GutterButton {
         sortable: false,
         header: {
           renderer: function (column) {
-            return html` <mwc-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</mwc-icon> `
+            return html` <md-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</md-icon> `
           } as HeaderRenderer
         },
         record: {
           align: 'center',
           renderer: function (value, column, record, rowIndex, field) {
-            return html` <mwc-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</mwc-icon> `
+            return html` <md-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</md-icon> `
           } as FieldRenderer
         },
         forGrid: true,

package/src/gutters/gutter-dirty.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -13,7 +13,7 @@ class GutterDirtyElement extends LitElement {
       margin: auto;
     }
 
-    mwc-icon {
+    md-icon {
       width: var(--grid-record-dirty-icon-size);
       height: var(--grid-record-dirty-icon-size);
       border-radius: 50%;
@@ -38,11 +38,11 @@ class GutterDirtyElement extends LitElement {
   render() {
     switch (this.value) {
       case '+':
-        return html` <mwc-icon style=${INLINESTYLE} center add>add</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center add>add</md-icon> `
       case '-':
-        return html` <mwc-icon style=${INLINESTYLE} center remove>remove</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center remove>remove</md-icon> `
       case 'M':
-        return html` <mwc-icon style=${INLINESTYLE} center done>done</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center done>done</md-icon> `
       default:
         return ''
     }