@operato/grist-editor 1.0.0-alpha.9

package/src/code/code-editor.ts

@@ -0,0 +1,78 @@
+import '@material/mwc-icon'
+import {} from '@operato/shell'
+
+import { InputEditor, RecordConfig } from '@operato/data-grist'
+import { client, gqlContext } from '@operato/graphql'
+
+import gql from 'graphql-tag'
+import { html } from 'lit'
+
+type CommonCodeDetail = {
+  name: string
+  description: string
+  rank: number
+}
+
+type CommonCode = {
+  name: string
+  description: string
+  details: CommonCodeDetail[]
+}
+
+const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
+{
+  commonCode(name: "${codeName}") {
+    details {
+      name
+      description
+      rank
+    }
+  }
+}
+`
+
+export class CodeEditor extends InputEditor {
+  async firstUpdated() {
+    super.firstUpdated()
+
+    var { codeName, codes } = this.column.record || {}
+
+    if (!codes && codeName) {
+      /* codeName으로 fetch 해와서, this.column.record.codes에 보관한다. */
+      var response = await client.query({
+        query: FETCH_COMMON_CODE_GQL(codeName),
+        context: gqlContext()
+      })
+
+      var commonCode = response && response.data && response.data.commonCode
+
+      if (commonCode) {
+        this.column.record.codes = [{ name: '', description: '' }].concat(
+          commonCode.details.sort(function (a: CommonCodeDetail, b: CommonCodeDetail) {
+            return a.rank - b.rank
+          })
+        )
+
+        this.requestUpdate()
+      }
+    }
+  }
+
+  get editorTemplate() {
+    var { codes } = this.column.record || {}
+
+    return html`
+      <select>
+        ${(codes || ['']).map(
+          (code: CommonCode) => html`
+            <option ?selected=${code.name == this.value} value=${code.name}>
+              ${code.name}${code.description ? ` - ${code.description}` : ''}
+            </option>
+          `
+        )}
+      </select>
+    `
+  }
+}
+
+customElements.define('code-editor', CodeEditor)

package/src/code/index.ts

@@ -0,0 +1,6 @@
+import { registerEditor, registerRenderer } from '@operato/data-grist'
+
+import { CodeEditor } from './code-editor'
+
+/* register grist renderer/editor for id */
+registerEditor('code', CodeEditor)

package/src/id/id-input.ts

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

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

@@ -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')
+    })
+  }
+}