@operato/grist-editor 1.0.0-alpha.9 → 1.0.0-beta.41

package/src/id/id-input.ts

@@ -1,135 +0,0 @@
-import '@material/mwc-icon'
-import './id-selector.js'
-
-import { ColumnConfig, GristRecord, InputEditor } from '@operato/data-grist'
-import { TemplateResult, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-id-input')
-export class IdInput extends InputEditor {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-
-      padding: 7px 0px;
-      box-sizing: border-box;
-
-      width: 100%;
-      height: 100%;
-
-      border: 0;
-      background-color: transparent;
-
-      font: var(--grist-object-editor-font);
-      color: var(--grist-object-editor-color);
-
-      justify-content: inherit;
-    }
-
-    span {
-      display: flex;
-      flex: auto;
-
-      justify-content: inherit;
-    }
-
-    mwc-icon {
-      width: 20px;
-      font-size: 1.5em;
-      margin-left: auto;
-    }
-  `
-
-  @property({ type: Object }) value?: { id?: string; [propany: string]: any }
-  @property({ type: Object }) column!: ColumnConfig
-  @property({ type: Object }) record!: GristRecord
-  @property({ type: Number }) row!: number
-
-  private popup?: {
-    name: string
-    close: () => void
-    closed: boolean
-    onclosed?: (() => void) | undefined
-  }
-
-  private template?: TemplateResult
-
-  render() {
-    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-    var value = this.value
-
-    return html`
-      ${!value ? html`` : html` <span>${value[nameField]} (${value[descriptionField]})</span> `}
-      <mwc-icon>arrow_drop_down</mwc-icon>
-    `
-  }
-
-  async firstUpdated() {
-    this.value = this.record[this.column.name]
-    this.template = ((this.column.record || {}).options || {}).template
-
-    await this.updateComplete
-
-    this.renderRoot.addEventListener('click', e => {
-      e.stopPropagation()
-
-      this.openSelector()
-    })
-
-    this.openSelector()
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    const confirmCallback: (record: GristRecord | undefined) => void = selected => {
-      if (!selected) {
-        return
-      }
-
-      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: {
-              [idField]: selected[idField],
-              [nameField]: selected[nameField],
-              [descriptionField]: selected[descriptionField]
-            },
-            record: this.record,
-            column: this.column,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var value = this.value || {}
-    var template =
-      this.template ||
-      html`
-        <ox-id-selector
-          .value=${value.id}
-          .confirmCallback=${confirmCallback.bind(this)}
-          .queryName=${this.column.record.options.queryName}
-          .basicArgs=${this.column.record.options.basicArgs}
-        ></ox-id-selector>
-      `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: 'select item'
-    })
-  }
-}

package/src/id/id-renderer.ts

@@ -1,12 +0,0 @@
-import { FieldRenderer } from '@operato/data-grist'
-import { html } from 'lit'
-
-export const IdRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {
-  if (!value) {
-    return ''
-  }
-
-  var { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
-
-  return html` ${value[nameField] || ''}(${value[descriptionField] || ''}) `
-}

package/src/id/id-selector.ts

@@ -1,189 +0,0 @@
-import '@operato/data-grist'
-
-import { DataGrist, FetchOption, GristData, GristRecord, ZERO_DATA } from '@operato/data-grist'
-import { LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import gql from 'graphql-tag'
-import { i18next } from '@operato/i18n'
-import { isMobileDevice } from '@operato/utils'
-
-@customElement('ox-id-selector')
-export class IdSelector extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-
-      background-color: #fff;
-
-      width: var(--overlay-center-normal-width, 50%);
-      height: var(--overlay-center-normal-height, 50%);
-    }
-
-    ox-grist {
-      flex: 1;
-    }
-
-    #filters {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-
-    #filters > * {
-      padding: var(--padding-default) var(--padding-wide);
-    }
-
-    .button-container {
-      display: flex;
-      margin-left: auto;
-    }
-  `
-
-  @property({ type: String }) value?: string
-  @property({ type: Object }) config: any
-  @property({ type: Object }) data: GristData = ZERO_DATA
-  @property({ type: String }) queryName!: string
-  @property({ type: Object }) basicArgs: any
-  @property({ type: Object }) confirmCallback?: (record: GristRecord | undefined) => void
-  @property({ type: Array }) selectedRecords: GristRecord[] = []
-
-  @query('ox-grist') grist!: DataGrist
-
-  render() {
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        .selectedRecords=${this.selectedRecords}
-      >
-        <div id="filters" slot="headroom">
-          <ox-filters-form></ox-filters-form>
-        </div>
-      </ox-grist>
-
-      <div class="button-container">
-        <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
-      </div>
-    `
-  }
-
-  oncancel() {
-    history.back()
-  }
-
-  onconfirm() {
-    this.confirmCallback && this.confirmCallback(this.selected)
-    history.back()
-  }
-
-  async firstUpdated() {
-    this.config = {
-      columns: [
-        {
-          type: 'gutter',
-          gutterName: 'sequence'
-        },
-        {
-          type: 'gutter',
-          gutterName: 'row-selector',
-          multiple: false
-        },
-        {
-          type: 'string',
-          name: 'id',
-          header: i18next.t('field.id'),
-          hidden: true
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: {
-            align: 'left'
-          },
-          filter: 'search',
-          sortable: true,
-          width: 160
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: {
-            align: 'left'
-          },
-          filter: 'search',
-          sortable: true,
-          width: 300
-        }
-      ],
-      rows: {
-        selectable: {
-          multiple: false
-        },
-        handlers: {
-          click: 'select-row'
-        }
-      },
-      pagination: {
-        infinite: true
-      }
-    }
-
-    await this.updateComplete
-
-    /* TODO config가 설정될 때, fetch() 가 동작하므로, fetch 완료 이벤트를 받아서, selected를 설정해주는 것이 좋겠다. 
-       현재는 fetch() 가 두번 일어난다.
-       */
-    await this.grist.fetch()
-
-    var selected = this.grist.data.records.find(item => this.value == item.id)
-    if (selected) {
-      this.selectedRecords = [selected]
-    }
-    /* TODO config가 설정될 때, fetch() 가 동작하므로, fetch 완료 이벤트를 받아서, selected를 설정해주는 것이 좋겠다. */
-
-    await this.updateComplete
-    this.grist.focus()
-  }
-
-  async fetchHandler({ page = 1, limit = 100, sorters = [], filters = [] }: FetchOption) {
-    const response = await client.query({
-      query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          q: ${this.queryName}(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
-              name
-              description
-            }
-            total
-          }
-        }
-      `,
-      variables: {
-        filters,
-        pagination: { page, limit },
-        sortings: sorters
-      }
-    })
-
-    return {
-      total: response.data.q.total || 0,
-      records: response.data.q.items || []
-    }
-  }
-
-  get selected() {
-    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist
-
-    var selected = grist.selected
-
-    return selected && selected.length > 0 ? selected[0] : undefined
-  }
-}

package/src/id/index.ts

@@ -1,8 +0,0 @@
-import { registerEditor, registerRenderer } from '@operato/data-grist'
-
-import { IdInput } from './id-input.js'
-import { IdRenderer } from './id-renderer.js'
-
-/* register grist renderer/editor for id */
-registerEditor('id', IdInput)
-registerRenderer('id', IdRenderer)

package/src/object/index.ts

@@ -1,8 +0,0 @@
-import { registerEditor, registerRenderer } from '@operato/data-grist'
-
-import { ObjectEditor } from './object-editor'
-
-/* register grist renderer/editor for id */
-registerEditor('object', ObjectEditor)
-
-// registerRenderer('id', IdRenderer)

package/src/object/object-editor.ts

@@ -1,162 +0,0 @@
-import '@material/mwc-icon'
-import '../../elements/object-selector'
-
-import {
-  ColumnConfig,
-  GristData,
-  GristRecord,
-  InputEditor,
-  ZERO_COLUMN,
-  ZERO_CONFIG,
-  ZERO_RECORD
-} from '@operato/data-grist'
-import { LitElement, TemplateResult, css, html } from 'lit'
-import { PopupHandle, openPopup } from '@operato/layout'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-@customElement('ox-object-editor')
-export class ObjectEditor extends InputEditor {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-flow: row nowrap;
-
-      padding: 7px 0px;
-      box-sizing: border-box;
-
-      width: 100%;
-      height: 100%;
-
-      border: 0;
-      background-color: transparent;
-
-      font: var(--grist-object-editor-font);
-      color: var(--grist-object-editor-color);
-      justify-content: inherit;
-    }
-
-    span {
-      display: flex;
-      flex: auto;
-
-      justify-content: inherit;
-    }
-
-    mwc-icon {
-      width: 20px;
-      font-size: 1.5em;
-      margin-left: auto;
-    }
-  `
-
-  @property({ type: Object }) value: { [prop: string]: any } = {}
-  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN
-  @property({ type: Object }) record: GristRecord = ZERO_RECORD
-  @property({ type: Number }) row?: number
-
-  private popup?: PopupHandle
-  private template?: TemplateResult
-
-  render() {
-    var value = this.value || {}
-
-    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-    var name, description
-    if (typeof nameField === 'function') {
-      name = nameField(value)
-    } else {
-      name = value[nameField]
-    }
-
-    if (typeof descriptionField === 'function') {
-      description = descriptionField(value)
-    } else {
-      description = value[descriptionField] && `(${value[descriptionField]})`
-    }
-
-    return html`
-      ${!value ? html`` : html` <span>${name || ''}${description || ''}</span> `}
-      <mwc-icon>arrow_drop_down</mwc-icon>
-    `
-  }
-
-  async firstUpdated() {
-    this.value = this.record[this.column.name]
-    this.template = ((this.column.record || {}).options || {}).template
-
-    await this.updateComplete
-
-    this.renderRoot.addEventListener('click', e => {
-      e.stopPropagation()
-
-      this.openSelector()
-    })
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    const confirmCallback = (selected: { [field: string]: any }) => {
-      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: {
-              ...(this.column.record.options.select || [])
-                .map((field: any) => field.name)
-                .reduce((obj: { [field: string]: any }, fieldName: string) => {
-                  return (obj = {
-                    ...obj,
-                    [fieldName]: selected[fieldName]
-                  })
-                }, {} as { [field: string]: any }),
-              [idField]: selected[idField],
-              [nameField]: selected[nameField],
-              [descriptionField]: selected[descriptionField]
-            },
-            record: this.record,
-            column: this.column,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var value = this.value || {}
-    var valueField: string | ((item: any) => any) = this.column.record.options.valueField || 'id'
-    var actualValue
-    if (typeof valueField === 'function') {
-      actualValue = valueField(value)
-    } else {
-      actualValue = value[valueField]
-    }
-
-    var template =
-      this.template ||
-      html`
-        <object-selector
-          .value=${actualValue}
-          .confirmCallback=${confirmCallback.bind(this)}
-          .queryName=${this.column.record.options.queryName}
-          .select=${this.column.record.options.select}
-          .list=${this.column.record.options.list}
-          .basicArgs=${this.column.record.options.basicArgs}
-          .valueField=${this.column.record.options.valueField}
-        ></object-selector>
-      `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.select_item')
-    })
-  }
-}