@operato/data-grist 0.3.16 → 0.3.17

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,12 +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,

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

@@ -24,5 +24,7 @@ export function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void
   }
 
   this.currentTarget = target
-  target.setAttribute('editing', 'true')
+  if (!this.onlyForEdit) {
+    target.setAttribute('editing', 'true')
+  }
 }

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

@@ -6,8 +6,6 @@ import { RecordViewBody } from '../record-view-body'
  * - handler의 this 는 ox-record-view-body임.
  */
 export async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void> {
-  // e.preventDefault()
-
   switch ((e as KeyboardEvent).key) {
     case 'Esc':
     case 'Escape':
@@ -25,91 +23,4 @@ export async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Even
       break
     default:
   }
-
-  // arrow-key
-  // var keyCode = e.keyCode
-  // var { row = 0, column = 0 } = this.focused || {}
-  // var { records = [] } = this.data || {}
-  // var maxrow = this.config.rows.appendable ? records.length : records.length - 1
-  // var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1
-
-  // if (this.currentTarget) {
-  //   switch (keyCode) {
-  //     case KEYCODE.KEY_ESC:
-  //     /* TODO 편집이 취소되어야 한다. */
-  //     case KEYCODE.KEY_ENTER:
-  //       this.currentTarget = null
-  //       this.focus()
-  //       return
-
-  //     // case KEYCODE.KEY_TAP:
-  //     //   this.currentTarget = null
-  //     //   column = Math.min(maxcolumn, column + 1)
-  //     //   this.focus()
-  //     //   break
-
-  //     // case KEYCODE.KEY_DOWN:
-  //     //   this.currentTarget = null
-  //     //   row = Math.min(maxrow, row + 1)
-  //     //   this.focus()
-  //     //   break
-
-  //     default:
-  //       return
-  //   }
-  // } else {
-  //   switch (keyCode) {
-  //     case KEYCODE.KEY_UP:
-  //       row = Math.max(0, row - 1)
-  //       break
-
-  //     case KEYCODE.KEY_DOWN:
-  //       row = Math.min(maxrow, row + 1)
-  //       break
-
-  //     case KEYCODE.KEY_ENTER:
-  //       this.startEditTarget(row, column)
-  //       return
-
-  //     case KEYCODE.KEY_LEFT:
-  //     case KEYCODE.KEY_BACKSPACE:
-  //       column = Math.max(0, column - 1)
-  //       break
-
-  //     case KEYCODE.KEY_RIGHT:
-  //     case KEYCODE.KEY_TAP:
-  //       column = Math.min(maxcolumn, column + 1)
-  //       break
-
-  //     case KEYCODE.KEY_PAGEUP:
-  //       /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
-  //       row = Math.max(0, row - 10)
-  //       break
-
-  //     case KEYCODE.KEY_PAGEDOWN:
-  //       row = Math.min(maxrow, row + 10)
-  //       break
-
-  //     case KEYCODE.KEY_ESC:
-  //       return
-
-  //     default:
-  //       if (
-  //         (keyCode > 47 && keyCode < 58) || // number keys
-  //         keyCode == 32 ||
-  //         keyCode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
-  //         (keyCode > 64 && keyCode < 91) || // letter keys
-  //         (keyCode > 95 && keyCode < 112) || // numpad keys
-  //         (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
-  //         (keyCode > 218 && keyCode < 223) // [\]' (in order)
-  //       ) {
-  //         this.startEditTarget(row, column)
-  //       }
-  //       return
-  //   }
-  // }
-
-  // if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
-  //   this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))
-  // }
 }

package/src/record-view/index.ts

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

package/src/record-view/record-creator.ts

@@ -2,20 +2,20 @@ import '@material/mwc-icon'
 import './record-view'
 
 import { html, LitElement } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { OxPopup } from '@operato/popup'
 
-import { RecordView } from '.'
-import { ColumnConfig } from '..'
 import { DataGrist } from '../data-grist'
-import { GristRecord } from '../types'
+import { ColumnConfig, GristRecord } from '../types'
+import { RecordView } from './record-view'
 
 @customElement('ox-record-creator')
 export class RecordCreator extends LitElement {
   @state() grist?: DataGrist
 
-  @state() record: GristRecord = { __dirty__: '+' }
+  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean
+  @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false
 
   constructor() {
     super()
@@ -24,7 +24,11 @@ export class RecordCreator extends LitElement {
       e.preventDefault()
       e.stopPropagation()
 
-      this.popupRecordView()
+      if (this.lightPopup) {
+        this.lightPopupRecordView()
+      } else {
+        this.popupRecordView()
+      }
     })
   }
 
@@ -38,22 +42,16 @@ export class RecordCreator extends LitElement {
     return html`<slot></slot>`
   }
 
-  popupRecordView() {
+  lightPopupRecordView() {
     const config = this.grist!.compiledConfig
-    var titleField = config.list.fields[0] || 'name'
-    var title = this.record[titleField]
+    var title = 'create'
     const rowIndex = -1
     var record: GristRecord = {}
     const columns = config.columns
 
-    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
-    if (typeof title == 'object') {
-      var column = config.columns.find(column => column.name == titleField)
-      title = column?.record.renderer(title, column, record, rowIndex, this)
-    }
-
     var popup = OxPopup.open({
       template: html`
+        <div title>${title}</div>
         <ox-record-view
           only-for-edit
           @field-change=${(e: CustomEvent) => {
@@ -79,7 +77,6 @@ export class RecordCreator extends LitElement {
               [column.name]: after
             }
           }}
-          .config=${config}
           .columns=${columns}
           .record=${record}
           .rowIndex=${rowIndex}
@@ -108,4 +105,76 @@ export class RecordCreator extends LitElement {
       parent: document.body
     })
   }
+
+  popupRecordView() {
+    const config = this.grist!.compiledConfig
+    const rowIndex = -1
+    var record: GristRecord = {}
+    const columns = config.columns
+
+    var title = 'create'
+
+    var recordView = document.createElement('ox-record-view') as RecordView
+
+    recordView.setAttribute('only-for-edit', '')
+    recordView.columns = columns
+    recordView.record = record
+    recordView.rowIndex = rowIndex
+
+    document.dispatchEvent(
+      new CustomEvent('open-popup', {
+        detail: {
+          template: recordView,
+          options: {
+            backdrop: true,
+            size: 'large',
+            title
+          },
+          callback: (popup: any) => {
+            recordView.addEventListener('reset', (e: Event) => {
+              const view = e.currentTarget as RecordView
+              view.record = {}
+            })
+
+            recordView.addEventListener('cancel', (e: Event) => {
+              popup.close()
+            })
+
+            recordView.addEventListener('ok', async (e: Event) => {
+              const view = e.currentTarget as RecordView
+              if (await this.callback?.(view.record)) {
+                popup.close()
+              }
+            })
+
+            recordView.addEventListener('field-change', (e: Event) => {
+              const view = e.currentTarget as RecordView
+
+              var { after, before, column, record, row } = (e as CustomEvent).detail as {
+                after: any
+                before: any
+                column: ColumnConfig
+                record: GristRecord
+                row: number
+              }
+
+              var validation = column.validation
+              if (validation && typeof validation == 'function') {
+                if (!validation.call(this, after, before, record, column)) {
+                  return
+                }
+              }
+
+              view.record = {
+                ...record,
+                [column.name]: after
+              }
+            })
+
+            popup.onclosed = () => {}
+          }
+        }
+      })
+    )
+  }
 }

package/src/record-view/record-view-body.ts

@@ -44,6 +44,7 @@ export class RecordViewBody extends LitElement {
       }
 
       ox-grid-field {
+        border-top: none;
         border-bottom: var(--record-view-border-bottom);
         font: var(--record-view-font);
         color: var(--record-view-color);
@@ -51,7 +52,6 @@ export class RecordViewBody extends LitElement {
       }
 
       ox-grid-field[editing='true'] {
-        border-top: none;
         border-bottom: var(--record-view-edit-border-bottom);
       }
 
@@ -74,14 +74,12 @@ export class RecordViewBody extends LitElement {
 
     this.setAttribute('tabindex', '0')
 
-    // if (!this.onlyForEdit) {
     this.renderRoot.addEventListener('keydown', recordViewBodyKeydownHandler.bind(this))
     this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this))
-    // }
   }
 
   render() {
-    var columns = this.columns.filter(column => !column.hidden && column.type != 'gutter')
+    var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter')
     var record = this.record
     var rowIndex = this.rowIndex
 

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

@@ -0,0 +1,86 @@
+import { RecordCard } from '../data-card/record-card'
+import { DataGridBody } from '../data-grid/data-grid-body'
+import { DataGridField } from '../data-grid/data-grid-field'
+import { RecordPartial } from '../data-list/record-partial'
+import { RecordView } from '../record-view/record-view'
+import { ColumnConfig, GristRecord } from '../types'
+
+/*
+ * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
+ * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
+ */
+
+export const RecordViewHandler = function (
+  columns: ColumnConfig[],
+  record: GristRecord,
+  rowIndex: number,
+  field: DataGridField | RecordCard | RecordPartial | DataGridBody,
+  popupOptions: { [key: string]: any },
+  closeCallback?: () => void
+): RecordView {
+  var recordView = document.createElement('ox-record-view') as RecordView
+
+  recordView.columns = columns
+  recordView.record = record
+  recordView.rowIndex = rowIndex
+
+  document.dispatchEvent(
+    new CustomEvent('open-popup', {
+      detail: {
+        template: recordView,
+        options: {
+          backdrop: true,
+          size: 'large',
+          title: record['name'],
+          ...popupOptions
+        },
+        callback: (popup: any) => {
+          recordView.addEventListener('field-change', (e: Event) => {
+            field.dispatchEvent(
+              new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: (e as any).detail
+              })
+            )
+          })
+
+          recordView.addEventListener('reset', (e: Event) => {
+            field.dispatchEvent(
+              new CustomEvent('record-reset', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  record: record,
+                  row: rowIndex
+                }
+              })
+            )
+          })
+
+          recordView.addEventListener('cancel', (e: Event) => {
+            field.dispatchEvent(
+              new CustomEvent('record-reset', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  record: record,
+                  row: rowIndex
+                }
+              })
+            )
+            popup.close()
+          })
+
+          recordView.addEventListener('ok', (e: Event) => {
+            popup.close()
+          })
+
+          popup.onclosed = closeCallback
+        }
+      }
+    } as any)
+  )
+
+  return recordView
+}