@operato/grist-editor 1.0.0-alpha.10

package/src/id/id-selector.ts

@@ -0,0 +1,189 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,162 @@
+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')
+    })
+  }
+}

package/src/object/object-selector.ts

@@ -0,0 +1,346 @@
+import '@operato/data-grist'
+import '@operato/form/ox-search-form.js'
+
+import {
+  ColumnConfig,
+  DataGrist,
+  FetchHandler,
+  FetchOption,
+  GristData,
+  GristEventHandler,
+  GristRecord,
+  ZERO_DATA
+} from '@operato/data-grist'
+import { LitElement, css, html } from 'lit'
+import { MultiColumnFormStyles, SearchForm } from '@operato/form'
+import { buildArgs, client, gqlContext } from '@operato/graphql'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import gql from 'graphql-tag'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+
+@customElement('ox-object-selector')
+export class ObjectSelector extends LitElement {
+  static styles = [
+    MultiColumnFormStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      data-grist {
+        flex: 1;
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+
+      form {
+        position: relative;
+      }
+
+      [search] {
+        position: absolute;
+        right: 0;
+      }
+    `
+  ]
+
+  @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[] = []
+
+  @property({ type: Array }) searchFields: any
+  @property({ type: Array }) select: {
+    type: string
+    name: string
+    header: string
+    subFields?: string[]
+    hidden: boolean
+    ignoreCondition: boolean
+    queryName: string
+    width: number
+  }[] = []
+  @property({ type: Object }) list: any
+  @property({ type: String }) valueField: string | ((item: any) => any) = 'id'
+
+  @query('ox-grist') grist!: DataGrist
+  @query('ox-search-form') searchForm!: SearchForm
+
+  render() {
+    return html`
+      <ox-search-form
+        id="search-form"
+        @keypress=${(e: KeyboardEvent) => {
+          if (e.keyCode === 13) {
+            this.grist.fetch()
+          }
+        }}
+        @submit=${(e: SubmitEvent) => this.grist.fetch()}
+        .fields=${this.searchFields}
+      ></ox-search-form>
+
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .data=${this.data}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .selectedRecords=${this.selectedRecords}
+      ></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()
+  }
+
+  fetchHandler: FetchHandler = async ({ filters, page, limit, sorters = [] }) => {
+    const response = await client.query({
+      query: gql`
+        query {
+          fetch: ${this.queryName} (${buildArgs(await this._buildConditions({ filters, page, limit, sorters }))}) {
+            ${this.getSelectFields()}
+          }
+        }
+      `,
+      context: gqlContext()
+    })
+
+    if (!response.errors) {
+      const records = response.data.fetch.items.map((item: any) => {
+        let rowValue
+
+        if (this.valueField && typeof this.valueField === 'function') {
+          rowValue = this.valueField(item)
+        } else if (this.valueField) {
+          rowValue = item[this.valueField]
+        } else {
+          rowValue = item.id
+        }
+
+        if (this.value && this.value === rowValue) {
+          this.selectedRecords = [item]
+          item['__selected__'] = true
+        }
+
+        return item
+      })
+      const total = response.data.fetch.total
+
+      return {
+        records,
+        total,
+        limit,
+        page
+      }
+    }
+  }
+
+  async firstUpdated() {
+    this.config = {
+      columns: [
+        {
+          type: 'gutter',
+          gutterName: 'sequence'
+        },
+        {
+          type: 'gutter',
+          gutterName: 'row-selector',
+          multiple: false
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: false
+        },
+        handlers: {
+          click: 'select-row',
+          dblclick: ((columns, data, column, record, rowIndex, field) => {
+            this.onconfirm()
+          }) as GristEventHandler
+        },
+        appendable: false
+      }
+    }
+
+    if (this.select && this.select.length > 0) {
+      let _searchFields = this.select.filter(selectField => !selectField.hidden && !selectField.ignoreCondition)
+      if (this.list && this.list.fields && this.list.fields.length > 0) {
+        _searchFields = _searchFields.filter(searchField => this.list.fields.indexOf(searchField.name) >= 0)
+      } else {
+        _searchFields = _searchFields.slice(0, 4)
+      }
+
+      this.searchFields = _searchFields.map(selectField => {
+        const fieldType = (selectField.type && selectField.type.toLowerCase()) || 'string'
+        const numberTypes = ['integer', 'float']
+        return {
+          label: selectField.header || i18next.t(`field.${selectField.name}`),
+          name: selectField.name,
+          type:
+            fieldType === 'string'
+              ? 'text'
+              : numberTypes.indexOf(fieldType) >= 0
+              ? 'number'
+              : fieldType === 'boolean'
+              ? 'checkbox'
+              : fieldType,
+          queryName: selectField.queryName,
+          props:
+            fieldType === 'string'
+              ? { searchOper: 'i_like' }
+              : fieldType === 'object'
+              ? { searchOper: 'in' }
+              : { searchOper: 'eq' },
+          attrs: fieldType === 'boolean' ? ['indeterminated'] : []
+        }
+      })
+      this.config = {
+        ...this.config,
+        columns: [
+          ...this.config.columns,
+          ...this.select.map(selectField => {
+            return {
+              ...selectField,
+              type: selectField.type || 'string',
+              width: selectField.width || 160,
+              header: selectField.header || i18next.t(`field.${selectField.name}`)
+            }
+          })
+        ]
+      }
+    } else {
+      this.searchFields = [
+        {
+          label: i18next.t('field.name'),
+          name: 'name',
+          type: 'text',
+          props: { searchOper: 'i_like' }
+        },
+        {
+          label: i18next.t('field.description'),
+          name: 'description',
+          type: 'text',
+          props: { searchOper: 'i_like' }
+        }
+      ]
+
+      this.config = {
+        ...this.config,
+        columns: [
+          ...this.config.columns,
+          {
+            type: 'string',
+            name: 'id',
+            header: i18next.t('field.id'),
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'name',
+            header: i18next.t('field.name'),
+            record: {
+              align: 'left'
+            },
+            sortable: true,
+            width: 160
+          },
+          {
+            type: 'string',
+            name: 'description',
+            header: i18next.t('field.description'),
+            record: {
+              align: 'left'
+            },
+            sortable: true,
+            width: 300
+          }
+        ]
+      }
+    }
+
+    this.config = {
+      ...this.config,
+      list: {
+        ...this.list,
+        fields:
+          this.list && this.list.fields && this.list.fields.length > 0
+            ? this.list.fields
+            : (this.config.columns as ColumnConfig[])
+                .filter(column => column.type !== 'gutter')
+                .slice(0, 3)
+                .map(column => column.name)
+      }
+    }
+
+    await this.updateComplete
+    this.grist && this.grist.focus()
+  }
+
+  getSelectFields() {
+    if (this.select && this.select.length > 0) {
+      return `items {
+        ${this.select.map(selectField => {
+          return selectField.type === 'object'
+            ? `${selectField.name} { ${
+                selectField.subFields && selectField.subFields.length > 0
+                  ? selectField.subFields.join(' ')
+                  : `id name description`
+              } }`
+            : `${selectField.name}`
+        })}
+      }
+      total`
+    } else {
+      return `
+        items {
+          id
+          name
+          description
+        }
+        total
+      `
+    }
+  }
+
+  async _buildConditions({ filters, page, limit, sorters }: FetchOption) {
+    const queryConditions = {
+      filters: [],
+      ...this.basicArgs
+    }
+
+    queryConditions.filters = [...queryConditions.filters, ...(await this.searchForm.getQueryFilters())]
+    queryConditions.pagination = { page, limit }
+    queryConditions.sortings = sorters
+
+    return queryConditions
+  }
+
+  get selected() {
+    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist
+
+    var selected = grist.selected
+
+    return selected && selected.length > 0 ? selected[0] : undefined
+  }
+}