@operato/data-grist 8.0.0-beta.0 → 8.0.0-beta.1

package/src/data-report/event-handlers/data-report-body-click-handler.ts

@@ -1,38 +0,0 @@
-import { DataReportBody } from '../data-report-body'
-import { DataReportField } from '../data-report-field'
-
-/**
- * ox-report-body 의 click handler
- */
-export function dataReportBodyClickHandler(this: DataReportBody, e: Event) {
-  e.stopPropagation()
-
-  var target = e.target as DataReportField
-  var { column, record, rowIndex, columnIndex } = target
-
-  if (!column) {
-    /* 여백 컬럼이 클릭된 경우 */
-    return
-  }
-
-  if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
-    if (!this.focused || rowIndex !== this.focused.row || columnIndex !== this.focused.column) {
-      this.focused = {
-        row: rowIndex,
-        column: columnIndex
-      }
-    } else {
-      this.requestUpdate()
-    }
-  } else {
-    console.error('should not be here.')
-  }
-
-  /* do column click handler */
-  var { click } = column.handlers
-  click && click(this.columns, this.data, column, record, rowIndex, target)
-
-  /* do rows click handler */
-  var { click: rowsClick } = this.config.rows.handlers
-  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target)
-}

package/src/data-report/event-handlers/data-report-body-dblclick-handler.ts

@@ -1,25 +0,0 @@
-import { DataReportBody } from '../data-report-body'
-import { DataReportField } from '../data-report-field'
-
-/**
- * ox-report-body 의 dblclick handler
- */
-export async function dataReportBodyDblclickHandler(this: DataReportBody, e: Event) {
-  e.stopPropagation()
-
-  var target = e.target as DataReportField
-  var { record, rowIndex, column } = target
-
-  if (!column) {
-    /* 여백 컬럼이 클릭된 경우 */
-    return
-  }
-
-  /* do column dblclick handler */
-  var { dblclick } = column.handlers
-  dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)
-
-  /* do rows dblclick handler */
-  var { dblclick: rowsDblclick } = this.config.rows.handlers
-  rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target)
-}

package/src/data-report/event-handlers/data-report-body-keydown-handler.ts

@@ -1,68 +0,0 @@
-import { DataReportBody } from '../data-report-body'
-
-/**
- * ox-report-body 의 keydown handler
- */
-export function dataReportBodyKeydownHandler(this: DataReportBody, e: KeyboardEvent): void {
-  // arrow-key
-  const key = e.key
-  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
-
-  switch (key) {
-    case 'Up':
-    case 'ArrowUp':
-      row = Math.max(0, row - 1)
-      break
-
-    case 'Down':
-    case 'ArrowDown':
-      row = Math.min(maxrow, row + 1)
-      break
-
-    case 'Enter':
-      if (maxcolumn > column) {
-        column++
-      } else if (maxrow > row) {
-        row++
-      }
-      break
-
-    case 'Left':
-    case 'ArrowLeft':
-    case 'Backspace':
-      column = Math.max(0, column - 1)
-      break
-
-    case 'Right':
-    case 'ArrowRight':
-    case 'Tab':
-      column = Math.min(maxcolumn, column + 1)
-      break
-
-    case 'PageUp':
-      /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
-      row = Math.max(0, row - 10)
-      break
-
-    case 'PageDown':
-      row = Math.min(maxrow, row + 10)
-      break
-
-    case 'Esc':
-    case 'Escape':
-      return
-
-    default:
-      return
-  }
-
-  if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
-    this.focused = { row, column }
-  }
-
-  /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */
-  e.preventDefault()
-}

package/src/data-report.ts

@@ -1,424 +0,0 @@
-import './data-report/data-report-component'
-
-import { GristConfig, GristData, GristRecord, GroupConfig } from './types'
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ScrollbarStyles, SpinnerStyles } from '@operato/styles'
-import { ZERO_CONFIG, ZERO_DATA, ZERO_PAGINATION } from './configure/zero-config'
-import { customElement, property, query, queryAsync, state } from 'lit/decorators.js'
-
-import { DataConsumer } from './data-consumer'
-import { DataProvider } from './data-provider'
-import { DataReportComponent } from './data-report/data-report-component'
-import { buildColumn } from './configure/column-builder'
-import { buildConfig } from './configure/config-builder'
-import i18next from 'i18next'
-import { pulltorefresh } from '@operato/pull-to-refresh'
-
-@customElement('ox-report')
-export class DataReport extends LitElement implements DataConsumer {
-  static styles = [
-    ScrollbarStyles,
-    SpinnerStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-        background-color: var(--report-background-color);
-        padding: var(--report-padding);
-        min-height: 120px;
-
-        overflow: hidden;
-
-        /* for pulltorefresh controller */
-        position: relative;
-      }
-
-      #wrap {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-      }
-
-      ox-report-component {
-        flex: 1;
-      }
-
-      ox-empty-note {
-        display: block;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-    `
-  ]
-
-  @property() config: any
-  @property() data: GristData = ZERO_DATA
-  @property() fetchHandler: any
-  @property() fetchOptions: any
-  @property({ type: Boolean, attribute: 'auto-fetch' }) autoFetch: boolean = false
-
-  @state() _data: GristData = ZERO_DATA
-  @state() _config: GristConfig = ZERO_CONFIG
-  @state() private _showSpinner: boolean = false
-
-  private dataProvider?: DataProvider
-  private pulltorefreshHandle?: any
-
-  @query('#report') report!: DataReportComponent
-  @queryAsync('#wrap') private wrap!: Promise<HTMLElement>
-
-  get mode(): 'REPORT' {
-    return 'REPORT'
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.dataProvider = new DataProvider(this)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this.resetPullToRefresh()
-    this.dataProvider?.dispose()
-  }
-
-  private resetPullToRefresh() {
-    if (this.pulltorefreshHandle) {
-      this.pulltorefreshHandle()
-      delete this.pulltorefreshHandle
-    }
-  }
-
-  private async setPullToRefresh() {
-    this.resetPullToRefresh()
-    if (this.fetchHandler) {
-      this.pulltorefreshHandle = pulltorefresh({
-        container: await this.wrap,
-        scrollable: this.report.pullToRefreshTarget,
-        refresh: () => {
-          return this.fetch(true)
-        }
-      })
-    }
-  }
-
-  async firstUpdated() {
-    if (this.fetchHandler && this.autoFetch) {
-      await this.requestUpdate()
-      this.fetch(true)
-    }
-  }
-
-  render() {
-    var oops = !this._showSpinner && (!this._data || !this._data.records || this._data.records.length == 0)
-
-    return html`
-      ${oops ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
-
-      <div id="wrap">
-        <ox-report-component id="report" .config=${this._config} .data=${this._data}> </ox-report-component>
-      </div>
-
-      <div id="spinner" ?show=${this._showSpinner}></div>
-    `
-  }
-
-  async fetch(reset = true) {
-    if (!this._config) {
-      /* avoid to be here */
-      console.warn('report is not configured yet.')
-      return
-    }
-
-    if (reset) {
-      /*
-       * scroll 의 현재위치에 의해서 scroll 이벤트가 발생할 수 있으므로, 이를 방지하기 위해서 스크롤의 위치를 TOP으로 옮긴다.
-       * (scroll 이 첫페이지 크기 이상으로 내려가 있는 경우, 첫페이지부터 다시 표시하는 경우에, scroll 이벤트가 발생한다.)
-       */
-      this.report.scrollTop = 0
-    }
-
-    if (this.dataProvider) {
-      await this.dataProvider.attach(reset)
-    }
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('config')) {
-      this._config = buildConfig({
-        ...this.config
-      })
-
-      this.dataProvider && (this.dataProvider.sorters = this._config.sorters)
-      this.fetch()
-    }
-
-    if (changes.has('fetchHandler')) {
-      this.dataProvider && (this.dataProvider.fetchHandler = this.fetchHandler)
-      await this.setPullToRefresh()
-    }
-
-    if (changes.has('fetchOptions')) {
-      this.dataProvider && (this.dataProvider.fetchOptions = this.fetchOptions)
-    }
-
-    if (changes.has('data')) {
-      this.reset()
-    }
-  }
-
-  get dirtyData() {
-    return (this.report as any)?.data || {}
-  }
-
-  showSpinner() {
-    this._showSpinner = true
-  }
-
-  hideSpinner() {
-    this._showSpinner = false
-  }
-
-  focus() {
-    super.focus()
-
-    this.report?.focus()
-  }
-
-  /**
-   * Forced internal data to be reflected on the screen
-   * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
-Therefore, it will be deprecated.
-   * @deprecated
-   * @method
-   */
-  refresh() {
-    this.requestUpdate()
-  }
-
-  reset() {
-    var {
-      limit = ZERO_PAGINATION.limit,
-      page = ZERO_PAGINATION.page,
-      total = ZERO_PAGINATION.total,
-      records = []
-    } = this.data
-
-    this._data = {
-      limit,
-      page,
-      total,
-      records: this.sortByGroups(records).map((record, idx) => {
-        return {
-          ...record,
-          __seq__: (page - 1) * limit + idx + 1
-        }
-      })
-    }
-  }
-
-  sortByGroups(sortedRecords: GristRecord[]) {
-    var { groups, totals } = this._config.rows
-    var { columns } = this._config
-
-    var getColumnIndex = (name: string | number) =>
-      columns.filter(column => !column.hidden).findIndex(column => column.name == name)
-
-    var groupFieldsForTotalRecord: GroupConfig[] = [
-      /* add a group total record to the front. */
-      {
-        column: '*',
-        title: i18next.exists('text.ox-data-report-grand-total')
-          ? i18next.t('text.ox-data-report-grand-total')
-          : 'grand total',
-        align: 'right',
-        rowspan: 1
-      },
-      ...groups
-    ].map(group => {
-      return {
-        ...group,
-        titleColumn: buildColumn({
-          record: {
-            align: group.align || 'right'
-          }
-        })
-      }
-    })
-    let lastGroupValues
-    let reportRecords = []
-    let totalicRecords: { [idx: string]: GroupConfig }[] = sortedRecords[0]
-      ? (() => {
-          /* 처음 만드는 total records */
-          let record = sortedRecords[0]
-          let totalBase = totals.reduce((base, field) => {
-            base[field] =
-              columns.find(col => col.name == field)?.rowCount && (record[field] === 0 || record[field])
-                ? 1
-                : record[field]
-            return base
-          }, {} as { [totalField: string]: number })
-          let groupBase = {} as { [idx: string]: GroupConfig }
-
-          return groupFieldsForTotalRecord.map((group, idx) => {
-            groupBase[group.column] = record[group.column]
-
-            return {
-              ...totalBase,
-              ...groupBase,
-              [group.column]: record[group.column],
-              '*': {
-                titleColumn: group.titleColumn,
-                value: group.title,
-                groupName: group.column,
-                /* 이 레코드 그룹에 해당하는 첫번째 레코드의 행 번호(1 부터 시작하는 번호임.) - grid layout의 row 지정에 사용됨. */
-                row: 1,
-                rowspan: 1,
-                /* 이 레코드 그룹의 컬럼에 해당하는 열 번호(1 부터 시작하는 번호임.) - grid layout의 column 지정에 사용됨. */
-                column:
-                  group.column !== '*'
-                    ? getColumnIndex(group.column) + 1
-                    : getColumnIndex(groups[0].column) + 1 /* grand total 은 첫번째 그룹 컬럼을 사용한다. */,
-                colspan:
-                  group.column !== '*' ? groupFieldsForTotalRecord.length - idx : groupFieldsForTotalRecord.length - 1
-              }
-            }
-          })
-        })()
-      : [
-          {
-            '*': {
-              titleColumn: groupFieldsForTotalRecord[0].titleColumn,
-              value: i18next.exists('text.ox-data-report-grand-total')
-                ? i18next.t('text.ox-data-report-grand-total')
-                : 'grand total',
-              groupName: '*',
-              row: 1,
-              rowspan: 1,
-              column: 1,
-              colspan: 0
-            } as GroupConfig
-          }
-        ]
-
-    var row = 0
-
-    for (let record of sortedRecords) {
-      let groupValues = groups.reduce((base, group) => {
-        base[group.column] = record[group.column]
-        return base
-      }, {} as { [groupColumn: string]: string | number })
-      let isSameGroupRecord = true
-      let totalsStack = [] as { idx: string; record: any }[]
-      let groupBase = {} as { [idx: string]: any }
-
-      row++
-
-      if (lastGroupValues) {
-        for (let idx in groupFieldsForTotalRecord) {
-          let group = groupFieldsForTotalRecord[idx]
-          let totalRecord: {
-            [idx: string]: GroupConfig | number
-          } = totalicRecords[idx]
-
-          groupBase[group.column] = record[group.column]
-
-          if (
-            group.column == '*' ||
-            (isSameGroupRecord && groupValues[group.column] === lastGroupValues[group.column])
-          ) {
-            for (let field of totals) {
-              totalRecord[field] +=
-                columns.find(col => col.name == field)?.rowCount && (record[field] === 0 || record[field])
-                  ? 1
-                  : record[field]
-            }
-
-            ;(totalRecord['*'] as GroupConfig).rowspan++
-
-            continue
-          }
-
-          /* to avoid from floating point calculation problem */
-          totals.forEach(field => {
-            totalRecord[field] = Math.round((totalRecord[field] as number) * 100) / 100
-          })
-
-          isSameGroupRecord = false
-
-          totalsStack.push({
-            idx,
-            record: totals.reduce(
-              (sum, field) => {
-                sum[field] =
-                  columns.find(col => col.name == field)?.rowCount && (record[field] === 0 || record[field])
-                    ? 1
-                    : record[field]
-                return sum
-              },
-              {
-                ...groupBase,
-                [group.column]: record[group.column],
-                '*': {
-                  titleColumn: group.titleColumn,
-                  groupName: group.column,
-                  value: group.title,
-                  row,
-                  rowspan: 1,
-                  column: getColumnIndex(group.column) + 1,
-                  colspan: totalicRecords[idx]['*'].colspan
-                }
-              }
-            )
-          })
-        }
-
-        totalsStack
-          .reverse()
-          .map(({ record, idx }) => {
-            reportRecords.push(totalicRecords[Number(idx)])
-            totalicRecords[Number(idx)] = {}
-
-            if (record['*'].value) {
-              totalicRecords.forEach(record => record['*'] && record['*'].rowspan++)
-              row++
-            }
-
-            return { record, idx }
-          })
-          .forEach(({ record, idx }) => {
-            record['*'].row = row
-            totalicRecords[Number(idx)] = record
-          })
-      }
-
-      reportRecords.push(record)
-
-      lastGroupValues = groupValues
-    }
-
-    /* 마지막 남은 토탈 레코드들을 추가한다. */
-    var poped: any
-    while ((poped = totalicRecords.pop())) {
-      /* to avoid from floating point calculation problem */
-      totals.forEach(field => {
-        poped[field] = Math.round(poped[field] * 100) / 100
-      })
-
-      reportRecords.push(poped)
-      if (poped['*'].value) {
-        totalicRecords.forEach(record => record['*'].rowspan++)
-      }
-    }
-
-    return reportRecords
-  }
-
-  checkDirties() {}
-}

package/src/editors/index.ts

@@ -1,4 +0,0 @@
-export * from './registry'
-
-export * from './ox-grist-editor.js'
-export * from './ox-grist-editor-image.js'

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

@@ -1,28 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-checkbox')
-export class OxGristEditorCheckbox extends OxGristEditor {
-  _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 {
-    return value == !!value && !!String(value).match(/true/i)
-  }
-
-  get editorTemplate() {
-    return html` <input type="checkbox" .checked=${!!this.value && !!String(this.value).match(/true/i)} /> `
-  }
-}

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

@@ -1,10 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-color')
-export class OxGristEditorColor extends OxGristEditor {
-  get editorTemplate() {
-    return html` <input type="color" .value=${this.value} /> `
-  }
-}

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

@@ -1,10 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-date')
-export class OxGristEditorDate extends OxGristEditor {
-  get editorTemplate() {
-    return html` <input type="date" .value=${this.value} max="9999-12-31" /> `
-  }
-}

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

@@ -1,27 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-datetime')
-export class OxGristEditorDateTime extends OxGristEditor {
-  formatForEditor(timestamp: any) {
-    if (!timestamp) {
-      timestamp = Date.now()
-    }
-    var datetime = new Date(timestamp)
-
-    var tzoffset = datetime.getTimezoneOffset() * 60000 //offset in milliseconds
-
-    return new Date(timestamp - tzoffset).toISOString().slice(0, -1)
-  }
-
-  formatFromEditor(value: any) {
-    var datetime = new Date(value)
-
-    return datetime.getTime()
-  }
-
-  get editorTemplate() {
-    return html` <input type="datetime-local" .value=${this.value} max="9999-12-31T23:59" /> `
-  }
-}

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

@@ -1,10 +0,0 @@
-import { OxGristEditor } from './ox-grist-editor.js'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('ox-grist-editor-email')
-export class OxGristEditorEmail extends OxGristEditor {
-  get editorTemplate() {
-    return html` <input type="email" .value=${this.value} /> `
-  }
-}

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

@@ -1,28 +0,0 @@
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxGristEditor } from './ox-grist-editor.js'
-
-@customElement('ox-grist-editor-file')
-export class OxGristEditorFile extends OxGristEditor {
-  _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() {
-    var value = typeof this.value === 'string' ? null : this.value
-    var { multiple = false } = this.column.record || {}
-
-    return html` <input style="opacity: 1" type="file" ?multiple=${multiple} /> `
-  }
-}