@operato/data-grist 2.0.0-alpha.9 → 2.0.0-alpha.92

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-checkbox.ts

@@ -5,8 +5,16 @@ import { html } from 'lit-html'
 import { FilterConfigObject, FilterSelectRenderer } from '../types.js'
 
 export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
-  const filter = column.filter as FilterConfigObject
-  const options = filter?.options
+  const { name, header, label, filter } = column
+
+  const { label: filterLabel, operator } = filter! as FilterConfigObject
+
+  const labelText =
+    filterLabel !== undefined
+      ? filterLabel
+      : typeof label === 'object' && label.renderer
+        ? label.renderer(column)
+        : header.renderer(column) || name
 
   return html`
     <ox-checkbox
@@ -14,19 +22,21 @@ export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
       ?checked=${value}
       indeterminatable
       ?indeterminate=${value == null}
+      left-label
       @change=${(e: CustomEvent) => {
         ;(e.target as HTMLElement).dispatchEvent(
           new CustomEvent('filter-change', {
             bubbles: true,
             composed: true,
             detail: {
-              name: column.name,
-              operator: filter.operator,
+              name,
+              operator,
               value: (e.target as Element & { checked: boolean | undefined }).checked
             }
           })
         )
       }}
-    ></ox-checkbox>
+      ><label filter-title><span>${labelText}</span></label></ox-checkbox
+    >
   `
 }

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/filter-styles.ts

@@ -2,56 +2,77 @@ import { css } from 'lit'
 
 export const FilterStyles = css`
   :host {
-    --ox-input-placeholder-color: var(--primary-color);
-
-    --ox-input-padding: var(--padding-narrow) var(--padding-default);
-    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);
-    --ox-input-focus-border: 1px solid var(--primary-color);
-    --ox-input-border-radius: var(--border-radius);
-    --ox-input-font: normal 14px var(--theme-font);
-    --ox-input-color: var(--primary-text-color);
-
-    --ox-filters-form-gap: var(--margin-wide);
-    --ox-filters-form-label-font: var(--label-font);
-    --ox-filters-form-label-color: var(--label-color);
-    --ox-select-padding: 0 var(--padding-narrow);
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+
+    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
+    --ox-filters-input-color: var(--input-color, var(--primary-text-color));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
+    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
+    --ox-filters-label-color: var(--label-color, var(--primary-text-color));
+    --ox-filters-input-background-color: transparent;
+
+    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+    --ox-filters-input-padding: var(--input-padding, 6px 2px);
+
+    --ox-select-padding: var(--ox-filters-input-padding);
+    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
   }
 
   label {
-    font: var(--ox-filters-form-label-font);
-    color: var(--ox-filters-form-label-color);
+    font: var(--ox-filters-label-font);
+    color: var(--ox-filters-label-color);
   }
+
   span {
-    margin-right: var(--margin-narrow);
     text-transform: capitalize;
   }
 
   input::placeholder {
-    color: var(--ox-input-placeholder-color);
+    color: var(--ox-filters-input-placeholder-color);
     opacity: 0.6;
   }
 
+  input {
+    padding: var(--ox-filters-input-padding);
+  }
+
+  label > span + *,
   ox-select,
   input {
-    padding: var(--input-padding);
     border: none;
-    border-bottom: var(--ox-input-border);
-    font: var(--ox-input-font);
-    color: var(--ox-input-color);
+    border-bottom: var(--ox-filters-input-border);
+    font: var(--ox-filters-input-font);
+    color: var(--ox-filters-input-color);
+    background-color: var(--ox-filters-input-background-color, transparent);
+  }
+
+  label > span + * {
+    min-width: 120px;
   }
 
   ox-select:focus,
   input:focus {
     outline: none;
-    border-bottom: var(--ox-input-focus-border);
-    color: var(--primary-color);
+    border-bottom: var(--ox-filters-input-focus-border);
+    color: var(--ox-filters-input-focus-color);
   }
+
   ox-select {
-    padding: var(--ox-select-padding);
+    min-width: 100px;
+    max-width: 170px;
+  }
+
+  ox-input-barcode {
+    min-width: 150px;
+  }
+
+  ox-input-search {
+    max-width: 150px;
   }
 
   input[type='number'] {
-    padding-right: var(--padding-narrow);
     max-width: 90px;
   }
 
@@ -59,15 +80,13 @@ export const FilterStyles = css`
   input[type*='time'],
   input[type='week'],
   input[type='month'] {
-    padding: 8px var(--padding-narrow) 8px var(--padding-default);
     max-width: 170px;
   }
 
   @media only screen and (max-width: 460px) {
     :host {
       --ox-filters-form-label-font: bold 13px var(--theme-font);
-      --ox-input-font: normal 16px var(--theme-font);
-      --ox-filters-form-gap: var(--margin-narrow);
+      --ox-filters-input-font: normal 16px var(--theme-font);
     }
 
     input[from],