@operato/grist-editor 1.0.0-alpha.23 → 1.0.0-beta.40

package/src/object/object-selector.ts

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

package/src/parameters/index.ts

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