@operato/data-grist 0.3.13 → 0.3.17

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

@@ -0,0 +1,180 @@
+import '@material/mwc-icon'
+import './record-view'
+
+import { html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { OxPopup } from '@operato/popup'
+
+import { DataGrist } from '../data-grist'
+import { ColumnConfig, GristRecord } from '../types'
+import { RecordView } from './record-view'
+
+@customElement('ox-record-creator')
+export class RecordCreator extends LitElement {
+  @state() grist?: DataGrist
+
+  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean
+  @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false
+
+  constructor() {
+    super()
+
+    this.addEventListener('click', (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      if (this.lightPopup) {
+        this.lightPopupRecordView()
+      } else {
+        this.popupRecordView()
+      }
+    })
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    this.grist = this.closest('ox-grist') as DataGrist
+  }
+
+  render() {
+    return html`<slot></slot>`
+  }
+
+  lightPopupRecordView() {
+    const config = this.grist!.compiledConfig
+    var title = 'create'
+    const rowIndex = -1
+    var record: GristRecord = {}
+    const columns = config.columns
+
+    var popup = OxPopup.open({
+      template: html`
+        <div title>${title}</div>
+        <ox-record-view
+          only-for-edit
+          @field-change=${(e: CustomEvent) => {
+            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
+            }
+          }}
+          .columns=${columns}
+          .record=${record}
+          .rowIndex=${rowIndex}
+          @reset=${(e: Event) => {
+            const view = e.currentTarget as RecordView
+            view.record = {}
+          }}
+          @cancel=${(e: Event) => {
+            popup.close()
+          }}
+          @ok=${(e: Event) => {
+            popup.close()
+
+            const view = e.currentTarget as RecordView
+
+            this.dispatchEvent(
+              new CustomEvent('ok', {
+                bubbles: true,
+                composed: true,
+                detail: view.record
+              })
+            )
+          }}
+        ></ox-record-view>
+      `,
+      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

@@ -5,11 +5,9 @@ import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { ZERO_RECORD } from '../configure/zero-config'
-import { DataGridField } from '../data-grid/data-grid-field'
 import { ColumnConfig, GristRecord } from '../types'
-
-const KEY_ENTER = 13
-const KEY_ESC = 27
+import { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'
+import { recordViewBodyKeydownHandler } from './event-handlers/record-view-body-keydown-handler'
 
 @customElement('ox-record-view-body')
 export class RecordViewBody extends LitElement {
@@ -20,10 +18,7 @@ export class RecordViewBody extends LitElement {
         grid-template-columns: 1fr 2fr;
         grid-auto-rows: min-content;
         grid-gap: var(--record-view-gap);
-        background-color: var(--record-view-background-color);
         padding: var(--record-view-padding);
-
-        overflow-y: auto;
       }
 
       label {
@@ -49,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);
@@ -56,7 +52,6 @@ export class RecordViewBody extends LitElement {
       }
 
       ox-grid-field[editing='true'] {
-        border-top: none;
         border-bottom: var(--record-view-edit-border-bottom);
       }
 
@@ -70,12 +65,21 @@ export class RecordViewBody extends LitElement {
   @property({ type: Array }) columns: ColumnConfig[] = []
   @property({ type: Object }) record: GristRecord = ZERO_RECORD
   @property({ type: Number }) rowIndex: number = -1
+  @property({ type: Boolean, attribute: 'only-for-edit' }) onlyForEdit: boolean = false
+
+  public currentTarget: any
 
-  private editTarget: any
-  private _focusedListener: any
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.setAttribute('tabindex', '0')
+
+    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
 
@@ -92,56 +96,13 @@ export class RecordViewBody extends LitElement {
             .record=${record}
             .value=${record[column.name]}
             ?dirty=${!!dirtyFields[column.name]}
+            ?editing=${this.onlyForEdit}
           ></ox-grid-field>
         `
       })}
     `
   }
 
-  firstUpdated() {
-    this.renderRoot.addEventListener('click', e => {
-      e.stopPropagation()
-
-      /* target should be 'ox-grid-field' */
-      var target = e.target as DataGridField
-
-      if (this.editTarget) {
-        this.editTarget.removeAttribute('editing')
-        this.editTarget = null
-      }
-
-      if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {
-        return
-      }
-
-      this.editTarget = target
-      target.setAttribute('editing', 'true')
-    })
-
-    this._focusedListener = (e: KeyboardEvent) => {
-      var keyCode = e.keyCode
-      switch (keyCode) {
-        case KEY_ESC:
-        /* TODO 편집이 취소되어야 한다. */
-        case KEY_ENTER:
-          if (this.editTarget) {
-            this.editTarget.removeAttribute('editing')
-            this.editTarget = null
-          }
-          break
-
-        default:
-      }
-    }
-    window.addEventListener('keydown', this._focusedListener)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    window.removeEventListener('keydown', this._focusedListener)
-  }
-
   _renderLabel(column: ColumnConfig) {
     var { renderer } = column.header
     var title = renderer.call(this, column)

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
+}

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

@@ -1,63 +1,80 @@
 import '@material/mwc-icon'
 import './record-view-body'
+import '@operato/input/ox-input-file.js'
+import '../data-grid/data-grid-field'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { ScrollbarStyles } from '@operato/styles'
+
 import { ZERO_RECORD } from '../configure/zero-config'
 import { ColumnConfig, GristRecord } from '../types'
 
 @customElement('ox-record-view')
 export class RecordView extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
-
-    ox-record-view-body {
-      flex: 1;
-    }
-
-    [footer] {
-      display: flex;
-      text-align: right;
-      background-color: var(--record-view-footer-background);
-      box-shadow: var(--context-toolbar-shadow-line);
-    }
-
-    [footer] button {
-      flex: 1;
-      background-color: transparent;
-      border: var(--record-view-footer-button-border);
-      border-width: var(--record-view-footer-button-border-width);
-      color: var(--record-view-footer-button-color);
-      font-size: var(--record-view-footer-button-font);
-      line-height: 3;
-    }
-
-    [footer] button * {
-      vertical-align: middle;
-    }
-
-    [footer] button mwc-icon {
-      margin-top: -3px;
-      margin-right: 5px;
-      font-size: var(--record-view-footer-iconbutton-size);
-    }
-
-    [footer] button[ok] {
-      background-color: var(--record-view-footer-focus-background);
-    }
-  `
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--record-view-background-color);
+
+        max-height: 80vh;
+      }
+
+      ox-record-view-body {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      [footer] {
+        display: flex;
+        text-align: right;
+        background-color: var(--record-view-footer-background);
+        box-shadow: var(--context-toolbar-shadow-line);
+      }
+
+      [footer] button {
+        flex: 1;
+        background-color: transparent;
+        border: var(--record-view-footer-button-border);
+        border-width: var(--record-view-footer-button-border-width);
+        color: var(--record-view-footer-button-color);
+        font-size: var(--record-view-footer-button-font);
+        line-height: 3;
+      }
+
+      [footer] button * {
+        vertical-align: middle;
+      }
+
+      [footer] button mwc-icon {
+        margin-top: -3px;
+        margin-right: 5px;
+        font-size: var(--record-view-footer-iconbutton-size);
+      }
+
+      [footer] button[ok] {
+        background-color: var(--record-view-footer-focus-background);
+      }
+    `
+  ]
 
   @property({ type: Array }) columns: ColumnConfig[] = []
   @property({ type: Object }) record: GristRecord = ZERO_RECORD
   @property({ type: Number }) rowIndex: number = -1
+  @property({ type: Boolean, attribute: 'only-for-edit' }) onlyForEdit: boolean = false
 
   render() {
     return html`
-      <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
+      <ox-record-view-body
+        .columns=${this.columns}
+        .record=${this.record}
+        .rowIndex=${this.rowIndex}
+        ?only-for-edit=${this.onlyForEdit}
+      >
       </ox-record-view-body>
       <div footer>
         <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon>Reset</button>
@@ -67,7 +84,13 @@ export class RecordView extends LitElement {
     `
   }
 
+  firstUpdated() {
+    this.setAttribute('tabindex', '0')
+  }
+
   onReset() {
+    this.focus()
+
     this.dispatchEvent(
       new CustomEvent('reset', {
         detail: this.record
@@ -76,6 +99,8 @@ export class RecordView extends LitElement {
   }
 
   onCancel() {
+    this.focus()
+
     this.dispatchEvent(
       new CustomEvent('cancel', {
         detail: this.record
@@ -84,6 +109,8 @@ export class RecordView extends LitElement {
   }
 
   onOK() {
+    this.focus()
+
     this.dispatchEvent(
       new CustomEvent('ok', {
         detail: this.record

package/src/renderers/image-renderer.ts

@@ -1,12 +1,15 @@
-import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
-export const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {
-  if (!value) return html``
+import { FieldRenderer } from '../types'
 
+const IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href
+
+export const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {
   let src: string
 
-  if (typeof value === 'string') {
+  if (!value) {
+    src = IMAGE_FALLBACK
+  } else if (typeof value === 'string') {
     src = value
   } else {
     src = URL.createObjectURL(value)
@@ -15,5 +18,11 @@ export const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, fi
 
   const { width, height } = column.record.options || {}
 
-  return html` <img src=${src} alt="upload image" width=${width} height=${height} />`
+  return html` <img
+    src=${src}
+    width=${width}
+    height=${height}
+    style="max-width: 100%;"
+    onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
+  />`
 }

package/src/sorters/sorters-control.ts

@@ -0,0 +1,111 @@
+import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import { DataGrist } from '../data-grist'
+import { ColumnConfig, GristConfig, SorterConfig } from '../types'
+
+@customElement('ox-sorters-control')
+export class SortersControl extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ]
+
+  @state() config!: GristConfig
+  @state() columns: ColumnConfig[] = []
+  @state() sorters: SorterConfig[] = []
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    const grist = this.closest('ox-grist') as DataGrist
+
+    if (grist) {
+      this.config = grist.config
+
+      this.closest('ox-grist')?.addEventListener('sorters-change', e => {
+        this.sorters = (e as CustomEvent).detail as SorterConfig[]
+      })
+    }
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('config')) {
+      const sorters = this.config.sorters || []
+
+      this.columns = sorters
+        .map(({ name }) => this.config.columns.find(column => column.name === name))
+        .filter(column => !!column) as ColumnConfig[]
+
+      this.sorters = this.config.sorters || []
+    }
+  }
+
+  render(): TemplateResult {
+    const columns = this.columns
+
+    const current = this.sorters || []
+
+    return html`
+      ${columns.map(column => {
+        const { name } = column
+        var rank = current.findIndex(sorter => sorter.name === name) + 1
+        var desc = rank !== 0 ? current[rank - 1].desc : null
+
+        if (current.length <= 1) {
+          rank = 0
+        }
+
+        return html`
+          <div
+            option
+            @click=${(e: MouseEvent) => {
+              this.onChangeSort(name)
+            }}
+          >
+            ${column.header /*.renderer.call(this, column) */}
+            ${desc === null
+              ? html``
+              : html`
+                  <mwc-icon>${desc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</mwc-icon>
+                  ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}
+                `}
+          </div>
+        `
+      })}
+    `
+  }
+
+  onChangeSort(name: string) {
+    var sorters = [...this.sorters]
+
+    var idx = sorters.findIndex(sorter => sorter.name == name)
+    if (idx !== -1) {
+      let sorter = sorters[idx]
+      if (sorter.desc) {
+        sorters.splice(idx, 1)
+      } else {
+        sorter.desc = true
+      }
+    } else {
+      var sorter = {
+        name
+      }
+
+      sorters.push(sorter)
+    }
+
+    this.sorters = sorters
+
+    this.dispatchEvent(
+      new CustomEvent('sorters-change', {
+        bubbles: true,
+        composed: true,
+        detail: this.sorters
+      })
+    )
+  }
+}