@operato/app 1.0.0 → 1.0.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "WebApplication production supporting components following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0",
+  "version": "1.0.6",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -24,9 +24,71 @@
     "./grist-editor/ox-grist-editor-json.js": "./dist/src/grist-editor/ox-grist-editor-json.js",
     "./grist-editor/ox-grist-editor-code.js": "./dist/src/grist-editor/ox-grist-editor-code.js",
     "./grist-editor/ox-grist-editor-resource-object.js": "./dist/src/grist-editor/ox-grist-editor-resource-object.js",
+    "./grist-editor/ox-grist-editor-resource-object-legacy.js": "./dist/src/grist-editor/ox-grist-editor-resource-object-legacy.js",
     "./grist-editor/ox-grist-editor-resource-code.js": "./dist/src/grist-editor/ox-grist-editor-resource-code.js",
     "./filter-renderer.js": "./dist/src/filter-renderer/index.js"
   },
+  "typesVersions": {
+    "*": {
+      "input.js": [
+        "dist/src/input/index.d.ts"
+      ],
+      "input/ox-input-graphql.js": [
+        "dist/src/input/ox-input-graphql.d.ts"
+      ],
+      "input/ox-input-background-pattern.js": [
+        "dist/src/input/ox-input-background-pattern.d.ts"
+      ],
+      "input/ox-input-fill-style.js": [
+        "dist/src/input/ox-input-fill-style.d.ts"
+      ],
+      "property-editor.js": [
+        "dist/src/property-editor/index.d.ts"
+      ],
+      "property-editor/ox-property-editor-graphql.js": [
+        "dist/src/property-editor/ox-property-editor-graphql.d.ts"
+      ],
+      "grist-editor.js": [
+        "dist/src/grist-editor/index.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-resource-id.js": [
+        "dist/src/grist-editor/ox-grist-editor-resource-id.d.ts"
+      ],
+      "grist-editor/ox-selector-resource-id.js": [
+        "dist/src/grist-editor/ox-selector-resource-id.d.ts"
+      ],
+      "grist-editor/ox-grist-renderer-resource-id.js": [
+        "dist/src/grist-editor/ox-grist-renderer-resource-id.d.ts"
+      ],
+      "grist-editor/ox-selector-resource-object.js": [
+        "dist/src/grist-editor/ox-selector-resource-object.d.ts"
+      ],
+      "grist-editor/ox-grist-renderer-resource-object.js": [
+        "dist/src/grist-editor/ox-grist-renderer-resource-object.d.ts"
+      ],
+      "grist-editor/ox-grist-renderer-crontab.js": [
+        "dist/src/grist-editor/ox-grist-renderer-crontab.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-json.js": [
+        "dist/src/grist-editor/ox-grist-editor-json.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-code.js": [
+        "dist/src/grist-editor/ox-grist-editor-code.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-resource-object.js": [
+        "dist/src/grist-editor/ox-grist-editor-resource-object.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-resource-object-legacy.js": [
+        "dist/src/grist-editor/ox-grist-editor-resource-object-legacy.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-resource-code.js": [
+        "dist/src/grist-editor/ox-grist-editor-resource-code.d.ts"
+      ],
+      "filter-renderer.js": [
+        "dist/src/filter-renderer/index.d.ts"
+      ]
+    }
+  },
   "publishConfig": {
     "access": "public",
     "@operato:registry": "https://registry.npmjs.org"
@@ -53,18 +115,18 @@
     "@material/mwc-button": "^0.26.1",
     "@material/mwc-icon": "^0.26.1",
     "@material/mwc-icon-button": "^0.26.1",
-    "@operato/attachment": "^1.0.0",
-    "@operato/data-grist": "^1.0.0",
-    "@operato/font": "^1.0.0",
-    "@operato/form": "^1.0.0",
-    "@operato/graphql": "^1.0.0",
-    "@operato/i18n": "^1.0.0",
-    "@operato/input": "^1.0.0",
-    "@operato/layout": "^1.0.0",
-    "@operato/property-editor": "^1.0.0",
-    "@operato/shell": "^1.0.0",
-    "@operato/styles": "^1.0.0",
-    "@operato/utils": "^1.0.0",
+    "@operato/attachment": "^1.0.6",
+    "@operato/data-grist": "^1.0.6",
+    "@operato/font": "^1.0.6",
+    "@operato/form": "^1.0.6",
+    "@operato/graphql": "^1.0.6",
+    "@operato/i18n": "^1.0.6",
+    "@operato/input": "^1.0.6",
+    "@operato/layout": "^1.0.6",
+    "@operato/property-editor": "^1.0.6",
+    "@operato/shell": "^1.0.6",
+    "@operato/styles": "^1.0.6",
+    "@operato/utils": "^1.0.6",
     "codemirror": "^5.64.0",
     "codemirror-graphql": "^1.3.2",
     "cronstrue": "^2.2.0",
@@ -101,9 +163,9 @@
   },
   "lint-staged": {
     "*.ts": [
-      "eslint --fix",
+      "eslint --fid.t",
       "prettier --write"
     ]
   },
-  "gitHead": "c383e4b11cb4195f32be9b0daa4342dda0bbb2ab"
+  "gitHead": "e0c4443fb011f84350b93f1c0efa6a96f76cb40b"
 }

package/src/grist-editor/ox-grist-editor-resource-object-legacy.ts

@@ -0,0 +1,123 @@
+import './ox-selector-resource-object-legacy.js'
+
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
+
+@customElement('ox-grist-editor-resource-object-legacy')
+export class OxGristEditorResourceObjectLegacy extends OxGristEditor {
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  get editorTemplate() {
+    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 style="flex:1">${name || ''}${description || ''}</span> `} `
+  }
+
+  async firstUpdated() {
+    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
+    }
+
+    var {
+      idField = 'id',
+      nameField = 'name',
+      descriptionField = 'description',
+      valueField = 'id',
+      queryName,
+      basicArgs,
+      select,
+      list
+    } = this.column.record.options || {}
+
+    const confirmCallback = (selected?: { [field: string]: any }) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected
+              ? {
+                  ...(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]
+                }
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var value = this.value || {}
+    var actualValue
+    if (typeof valueField === 'function') {
+      actualValue = valueField(value)
+    } else {
+      actualValue = value[valueField]
+    }
+
+    var template =
+      this.template ||
+      html`
+        <ox-selector-resource-object-legacy
+          .value=${actualValue}
+          .confirmCallback=${confirmCallback.bind(this)}
+          .queryName=${queryName}
+          .select=${select}
+          .list=${list}
+          .basicArgs=${basicArgs}
+          .valueField=${valueField}
+        ></ox-selector-resource-object-legacy>
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select_item')
+    })
+  }
+}

package/src/grist-editor/ox-grist-editor-resource-object.ts

@@ -59,9 +59,13 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       queryName,
       basicArgs,
       select,
+      columns,
       list
     } = this.column.record.options || {}
 
+    /* select options is only for compatability, it might be able to be deprecated. */
+    columns = columns || select
+
     const confirmCallback = (selected?: { [field: string]: any }) => {
       this.dispatchEvent(
         new CustomEvent('field-change', {
@@ -71,7 +75,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
             before: this.value,
             after: selected
               ? {
-                  ...(this.column.record.options.select || [])
+                  ...(columns || [])
                     .map((field: any) => field.name)
                     .reduce((obj: { [field: string]: any }, fieldName: string) => {
                       return (obj = {
@@ -107,7 +111,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
           .value=${actualValue}
           .confirmCallback=${confirmCallback.bind(this)}
           .queryName=${queryName}
-          .select=${select}
+          .columns=${columns}
           .list=${list}
           .basicArgs=${basicArgs}
           .valueField=${valueField}

package/src/grist-editor/ox-selector-resource-id.ts

@@ -62,7 +62,7 @@ export class OxSelectorResourceId extends LitElement {
         .selectedRecords=${this.selectedRecords}
       >
         <div id="filters" slot="headroom">
-          <ox-filters-form></ox-filters-form>
+          <ox-filters-form autofocus></ox-filters-form>
         </div>
       </ox-grist>
 

package/src/grist-editor/ox-selector-resource-object-legacy.ts

@@ -0,0 +1,360 @@
+import '@operato/data-grist'
+import '@operato/form/ox-search-form.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import {
+  ColumnConfig,
+  DataGrist,
+  FetchHandler,
+  FetchOption,
+  GristData,
+  GristEventHandler,
+  GristRecord,
+  ZERO_DATA
+} from '@operato/data-grist'
+import { MultiColumnFormStyles, SearchForm } from '@operato/form'
+import { buildArgs, client, gqlContext } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { isMobileDevice } from '@operato/utils'
+
+@customElement('ox-selector-resource-object-legacy')
+export class OxSelectorResourceObjectLegacy extends LitElement {
+  static styles = [
+    MultiColumnFormStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      ox-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 | null) => 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.key === 'Enter') {
+            this.grist.fetch()
+          }
+        }}
+        @submit=${(e: SubmitEvent) => this.grist.fetch()}
+        .fields=${this.searchFields}
+        autofocus
+      ></ox-search-form>
+
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .data=${this.data}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .selectedRecords=${this.selectedRecords}
+      >
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+        </div>
+      </ox-grist>
+
+      <div class="button-container">
+        <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
+        <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>
+    `
+  }
+
+  onempty() {
+    this.confirmCallback && this.confirmCallback()
+    closePopup(this)
+  }
+
+  oncancel() {
+    closePopup(this)
+  }
+
+  onconfirm() {
+    this.confirmCallback && this.confirmCallback(this.selected)
+    closePopup(this)
+  }
+
+  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
+  }
+}