@operato/data-grist 0.3.13 → 0.3.17

package/src/data-list/record-partial.ts

@@ -7,6 +7,7 @@ import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'
+import { RecordViewHandler } from '../record-view/record-view-handler'
 import { GristConfig, GristData, GristRecord } from '../types'
 import { recordPartialClickHandler } from './event-handlers/record-partial-click-handler'
 import { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler'
@@ -122,32 +123,6 @@ export class RecordPartial extends LitElement {
     super.attributeChangedCallback(name, oldval, newval)
   }
 
-  onFieldChange(e: Event) {
-    /* record-view의 이벤트를 부모에게로 전달한다. */
-    this.dispatchEvent(
-      new CustomEvent('field-change', {
-        bubbles: true,
-        composed: true,
-        detail: (e as any).detail
-      })
-    )
-  }
-
-  get recordView() {
-    if (!this._recordView) {
-      this._recordView = document.createElement('ox-record-view')
-      this._recordView.addEventListener('field-change', (e: CustomEvent) => this.onFieldChange(e))
-    }
-
-    var columns = this.config.columns
-
-    this._recordView.columns = columns
-    this._recordView.record = this.record
-    this._recordView.rowIndex = this.rowIndex
-
-    return this._recordView
-  }
-
   firstUpdated() {
     /*
       long-press
@@ -158,6 +133,8 @@ export class RecordPartial extends LitElement {
     // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))
     this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this) as EventListener)
     this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this) as EventListener)
+
+    this.addEventListener('show-record-view', () => this.popupRecordView())
   }
 
   updated(changes: PropertyValues<this>) {
@@ -234,53 +211,17 @@ export class RecordPartial extends LitElement {
       title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)
     }
 
-    document.dispatchEvent(
-      new CustomEvent('open-popup', {
-        detail: {
-          template: this.recordView,
-          options: {
-            backdrop: true,
-            size: 'large',
-            title
-          },
-          callback: (popup: any) => {
-            this.recordView.addEventListener('reset', () => {
-              this.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    record: this.record,
-                    row: this.rowIndex
-                  }
-                })
-              )
-            })
-
-            this.recordView.addEventListener('cancel', () => {
-              this.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    record: this.record,
-                    row: this.rowIndex
-                  }
-                })
-              )
-              popup.close()
-            })
-
-            this.recordView.addEventListener('ok', () => {
-              popup.close()
-            })
-
-            popup.onclosed = () => {
-              delete this._recordView
-            }
-          }
-        }
-      })
+    this._recordView = RecordViewHandler(
+      this.config.columns,
+      this.record,
+      this.rowIndex,
+      this,
+      {
+        title
+      },
+      () => {
+        delete this._recordView
+      }
     )
   }
 }

package/src/data-manipulator.ts

@@ -0,0 +1,201 @@
+import { LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { ZERO_CONFIG, ZERO_DATA } from './configure/zero-config'
+import { ColumnConfig, GristConfig, GristData, GristRecord } from './types'
+
+export class DataManipulator extends LitElement {
+  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
+  @property({ type: Object }) data: GristData = ZERO_DATA
+
+  constructor() {
+    super()
+
+    this.addEventListener('select-record-change', e => {
+      var {
+        records: selectedRecords,
+        added = [],
+        removed = []
+      } = (e as CustomEvent).detail as {
+        records: GristRecord[]
+        added: GristRecord[]
+        removed: GristRecord[]
+      }
+
+      this.onSelectRecordChanged({
+        selectedRecords,
+        added,
+        removed
+      })
+    })
+
+    /* field change processing */
+    this.addEventListener('field-change', e => {
+      var { after, before, column, record, row } = (e as CustomEvent).detail as {
+        after: any
+        before: any
+        column: ColumnConfig
+        record: GristRecord
+        row: number
+      }
+
+      this.onFieldChange({ after, before, column, record, row })
+    })
+
+    /* record reset processing */
+    this.addEventListener('record-reset', e => {
+      var { record, row } = (e as CustomEvent).detail as {
+        record: GristRecord
+        row: number
+      }
+
+      this.onRecordChanged(record['__origin__'], row, null)
+    })
+  }
+
+  onFieldChange({
+    after,
+    before,
+    column,
+    record,
+    row
+  }: {
+    after: any
+    before: any
+    column: ColumnConfig
+    record: GristRecord
+    row: number
+  }) {
+    /* compare changes */
+    if (after === before) {
+      return
+    }
+
+    var validation = column.validation
+    if (validation && typeof validation == 'function') {
+      if (!validation.call(this, after, before, record, column)) {
+        return
+      }
+    }
+
+    this.onRecordChanged({ [column.name]: after }, row, column)
+  }
+
+  onSelectRecordChanged({
+    selectedRecords,
+    added = [],
+    removed = []
+  }: {
+    selectedRecords: GristRecord[]
+    added: GristRecord[]
+    removed: GristRecord[]
+  }) {
+    var { records } = this.data || {}
+    var { selectable = false } = this.config.rows || {}
+
+    if (!records || !selectable) {
+      return
+    }
+
+    if (selectable && !selectable.multiple) {
+      records.forEach(record => (record['__selected__'] = false))
+    }
+
+    if (selectedRecords) {
+      records.forEach(record => (record['__selected__'] = false))
+      selectedRecords.forEach(record => (record['__selected__'] = true))
+    } else {
+      removed.forEach(record => (record['__selected__'] = false))
+      added.forEach(record => (record['__selected__'] = true))
+    }
+
+    this.requestUpdate()
+  }
+
+  onRecordChanged(
+    recordData: GristRecord,
+    row: number,
+    column: ColumnConfig | null /* TODO column should be removed */
+  ) {
+    // TODO 오브젝트나 배열 타입인 경우 deepCompare 후에 변경 적용 여부를 결정한다.
+
+    /* 빈 그리드로 시작한 경우, data 설정이 되어있지 않을 수 있다. */
+    var records = this.data.records
+
+    var beforeRecord = records[row]
+    var afterRecord: GristRecord
+    var wantToDelete = false
+    var wantToAppend = false
+
+    if (!recordData) {
+      if (!beforeRecord) {
+        /* recordData가 없고, beforeRecord도 없다면, 레코드 생성 중에 리셋된 경우이므로 아무것도 하지 않는다. */
+        this.requestUpdate()
+        return
+      } else {
+        /*
+         * beforeRecord가 있는데, 빈데이타로 업데이트하고자 한다면,
+         * 삭제하고자 하는 의도로 이해된다. (주의 필요)
+         */
+        if (beforeRecord['__dirty__'] == '+') {
+          wantToDelete = true
+        } else {
+          afterRecord = {
+            ...beforeRecord,
+            __dirty__: '-'
+          }
+        }
+      }
+    } else {
+      if (!beforeRecord) {
+        /* 기존 레코드가 없는 경우에는 새로운 레코드가 생성된다 */
+        afterRecord = {
+          ...recordData,
+          __dirty__: '+'
+        }
+
+        wantToAppend = true
+      } else {
+        let beforeDirty = beforeRecord['__dirty__']
+        if (beforeDirty == '+') {
+          /* 기존에 새로 생성된 레코드가 있었으며 계속 수정중이다. */
+          afterRecord = {
+            ...beforeRecord,
+            ...recordData,
+            __dirty__: '+'
+          }
+        } else {
+          /* 기존에 레코드가 있었으며 계속 수정중이다. */
+          afterRecord = {
+            ...beforeRecord,
+            ...recordData,
+            __dirty__: 'M'
+          }
+        }
+      }
+    }
+
+    if (wantToAppend) {
+      records.push(afterRecord!)
+    } else if (wantToDelete) {
+      records.splice(row, 1)
+    } else {
+      records.splice(row, 1, afterRecord!)
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('record-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          before: beforeRecord,
+          after: afterRecord!,
+          column,
+          row
+        }
+      })
+    )
+
+    this.requestUpdate()
+  }
+}

package/src/editors/image-input.ts

@@ -0,0 +1,29 @@
+import '@operato/input/ox-input-image.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { InputEditor } from './input-editors'
+
+@customElement('ox-image-input')
+export class ImageInput extends InputEditor {
+  get editorTemplate() {
+    return html` <ox-input-image .value=${this.value}></ox-input-image> `
+  }
+
+  _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
+    if (input.files?.[0]) {
+      return input.files[0]
+    } else {
+      return input.value
+    }
+  }
+}

package/src/editors/index.ts

@@ -1,3 +1,4 @@
 export * from './registry'
 
 export * from './input-editors'
+export * from './image-input'

package/src/editors/input-editors.ts

@@ -1,9 +1,9 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
-import { customElement, property, query } from 'lit/decorators.js'
+import { css, html, LitElement } from 'lit'
+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'
 
 const STYLE = css`
   :host {
@@ -17,7 +17,7 @@ const STYLE = css`
   }
 
   :host > * {
-    display: block;
+    display: flex;
 
     width: 100%;
     height: 100%;
@@ -279,49 +279,6 @@ export class CheckboxInput extends InputEditor {
   }
 }
 
-@customElement('ox-image-input')
-export class ImageInput extends InputEditor {
-  @query('input[type=file]') imageInput!: HTMLElement
-
-  get editorTemplate() {
-    return html`${this.value
-        ? html`<span
-            >${this.value.name || this.value}<button
-              @click=${() => {
-                this.imageInput.dispatchEvent(
-                  new Event('change', {
-                    bubbles: true
-                  })
-                )
-              }}
-            >
-              X
-            </button></span
-          >`
-        : ''} <input type="file" accept="image/*" /> `
-  }
-
-  focus() {
-    if (!this.value) this.imageInput.click()
-  }
-
-  _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
-    if (input.files?.[0]) {
-      return input.files[0]
-    } else {
-      return input.value
-    }
-  }
-}
-
 @customElement('ox-select-input')
 export class Select extends InputEditor {
   get editorTemplate() {

package/src/editors/registry.ts

@@ -1,10 +1,12 @@
+import { DataGridField } from '../data-grid/data-grid-field'
+import { ColumnConfig, FieldEditor, GristRecord } from '../types'
+import { ImageInput } from './image-input'
 import {
   CheckboxInput,
   ColorInput,
   DateInput,
   DateTimeInput,
   EmailInput,
-  ImageInput,
   InputEditor,
   MonthInput,
   NumberInput,
@@ -15,9 +17,6 @@ import {
   TimeInput,
   WeekInput
 } from './input-editors'
-import { ColumnConfig, FieldEditor, GristRecord } from '../types'
-
-import { DataGridField } from '../data-grid/data-grid-field'
 
 var EDITORS: { [name: string]: { new (): InputEditor } } = {
   string: TextInput,

package/src/handlers/record-view-handler.ts

@@ -1,9 +1,5 @@
-import '../record-view/record-view'
-
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
 import { DataGridField } from '../data-grid/data-grid-field'
-import { html } from 'lit'
+import { ColumnConfig, GristData, GristRecord } from '../types'
 
 /*
  * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
@@ -18,46 +14,14 @@ export const RecordViewHandler = function (
   rowIndex: number,
   field: DataGridField
 ): void {
-  document.dispatchEvent(
-    new CustomEvent('open-popup', {
+  field.dispatchEvent(
+    new CustomEvent('show-record-view', {
+      bubbles: true,
+      composed: true,
       detail: {
-        template: html`
-          <record-view
-            .field=${field}
-            .columns=${columns}
-            .column=${column}
-            .record=${record}
-            .rowIndex=${rowIndex}
-            @reset=${(e: Event) => {
-              field.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: record
-                })
-              )
-            }}
-            @cancel=${(e: Event) => {
-              field.dispatchEvent(
-                new CustomEvent('record-reset', {
-                  bubbles: true,
-                  composed: true,
-                  detail: record
-                })
-              )
-              // popup.close()
-            }}
-            @ok=${(e: Event) => {
-              // popup.close()
-            }}
-          ></record-view>
-        `
-      },
-      options: {
-        backdrop: true,
-        size: 'large',
-        title: record['name']
+        record,
+        row: rowIndex
       }
-    } as any)
+    })
   )
 }

package/src/handlers/select-row-toggle.ts

@@ -1,6 +1,5 @@
-import { ColumnConfig, GristData, GristRecord } from '../types'
-
 import { DataGridField } from '../data-grid/data-grid-field'
+import { ColumnConfig, GristData, GristRecord } from '../types'
 
 /*
  * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,

package/src/record-view/event-handlers/record-view-body-click-handler.ts

@@ -0,0 +1,30 @@
+import { DataGridField } from '../../data-grid/data-grid-field'
+import { RecordViewBody } from '../record-view-body'
+
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void {
+  e.stopPropagation()
+
+  /* target should be 'ox-grid-field' */
+  var target = e.target as DataGridField
+
+  if (!this.onlyForEdit && this.currentTarget) {
+    this.focus()
+    this.currentTarget.removeAttribute('editing')
+  }
+
+  if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {
+    this.focus()
+    this.currentTarget = null
+    return
+  }
+
+  this.currentTarget = target
+  if (!this.onlyForEdit) {
+    target.setAttribute('editing', 'true')
+  }
+}

package/src/record-view/event-handlers/record-view-body-keydown-handler.ts

@@ -0,0 +1,26 @@
+import { RecordViewBody } from '../record-view-body'
+
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void> {
+  switch ((e as KeyboardEvent).key) {
+    case 'Esc':
+    case 'Escape':
+    /* TODO 편집이 취소되어야 한다. */
+    case 'Enter':
+      /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */
+      !this.onlyForEdit && this.focus()
+
+      if (!this.onlyForEdit && this.currentTarget) {
+        this.currentTarget.removeAttribute('editing')
+      }
+
+      this.currentTarget = null
+
+      break
+    default:
+  }
+}

package/src/record-view/index.ts

@@ -1 +1,2 @@
 export * from './record-view'
+export * from './record-creator'