@operato/app 1.0.0 → 1.0.6

package/dist/src/grist-editor/ox-selector-resource-object.js

@@ -1,31 +1,34 @@
 import { __decorate } from "tslib";
 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 { ZERO_DATA } from '@operato/data-grist';
-import { MultiColumnFormStyles } from '@operato/form';
-import { buildArgs, client, gqlContext } from '@operato/graphql';
+import { client, gqlContext } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { closePopup } from '@operato/popup';
-import { isMobileDevice } from '@operato/utils';
+import { adjustFilters, isMobileDevice } from '@operato/utils';
 let OxSelectorResourceObject = class OxSelectorResourceObject extends LitElement {
     constructor() {
         super(...arguments);
         this.data = ZERO_DATA;
         this.selectedRecords = [];
-        this.select = [];
+        this.columns = [];
         this.valueField = 'id';
-        this.fetchHandler = async ({ filters, page, limit, sorters = [] }) => {
+        this.fetchHandler = async ({ filters = [], page, limit, sortings = [] }) => {
+            if (this.basicArgs) {
+                filters = adjustFilters(filters, this.basicArgs);
+            }
+            const pagination = { page, limit };
             const response = await client.query({
                 query: gql `
-        query {
-          fetch: ${this.queryName} (${buildArgs(await this._buildConditions({ filters, page, limit, sorters }))}) {
-            ${this.getSelectFields()}
+        query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          fetch: ${this.queryName} (filters: $filters, pagination: $pagination, sortings: $sortings) {
+            ${this.getQueryFields()}
           }
         }
       `,
+                variables: { filters, pagination, sortings },
                 context: gqlContext()
             });
             if (!response.errors) {
@@ -58,25 +61,17 @@ let OxSelectorResourceObject = class OxSelectorResourceObject extends LitElement
     }
     render() {
         return html `
-      <ox-search-form
-        id="search-form"
-        @keypress=${(e) => {
-            if (e.key === 'Enter') {
-                this.grist.fetch();
-            }
-        }}
-        @submit=${(e) => 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}
-      ></ox-grist>
+      >
+        <div id="filters" slot="headroom">
+          <ox-filters-form autofocus></ox-filters-form>
+        </div>
+      </ox-grist>
 
       <div class="button-container">
         <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
@@ -122,118 +117,55 @@ let OxSelectorResourceObject = class OxSelectorResourceObject extends LitElement
                 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' }
+        const columns = this.columns || [
+            {
+                type: 'string',
+                name: 'id',
+                header: i18next.t('field.id'),
+                hidden: true
+            },
+            {
+                type: 'string',
+                name: 'name',
+                header: i18next.t('field.name'),
+                record: {
+                    align: 'left'
                 },
-                {
-                    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
-                    }
-                ]
-            };
-        }
+                sortable: true,
+                filter: 'search',
+                width: 160
+            },
+            {
+                type: 'string',
+                name: 'description',
+                header: i18next.t('field.description'),
+                record: {
+                    align: 'left'
+                },
+                sortable: true,
+                filter: 'search',
+                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
-                        .filter(column => column.type !== 'gutter')
-                        .slice(0, 3)
-                        .map(column => column.name)
-            }
+            columns: [
+                ...this.config.columns,
+                ...columns.map(selectField => {
+                    return {
+                        ...selectField,
+                        type: selectField.type || 'string',
+                        width: selectField.width || 160,
+                        header: selectField.header || i18next.t(`field.${selectField.name}`)
+                    };
+                })
+            ]
         };
-        await this.updateComplete;
-        this.grist && this.grist.focus();
     }
-    getSelectFields() {
-        if (this.select && this.select.length > 0) {
+    getQueryFields() {
+        if (this.columns && this.columns.length > 0) {
             return `items {
-        ${this.select.map(selectField => {
+        ${this.columns.map(selectField => {
                 return selectField.type === 'object'
                     ? `${selectField.name} { ${selectField.subFields && selectField.subFields.length > 0
                         ? selectField.subFields.join(' ')
@@ -254,16 +186,6 @@ let OxSelectorResourceObject = class OxSelectorResourceObject extends LitElement
       `;
         }
     }
-    async _buildConditions({ filters, page, limit, sorters }) {
-        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');
         var selected = grist.selected;
@@ -271,31 +193,34 @@ let OxSelectorResourceObject = class OxSelectorResourceObject extends LitElement
     }
 };
 OxSelectorResourceObject.styles = [
-    MultiColumnFormStyles,
     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;
       }
 
-      .button-container {
+      #filters {
         display: flex;
-        margin-left: auto;
+        flex-direction: row;
+        justify-content: space-between;
       }
 
-      form {
-        position: relative;
+      #filters > * {
+        padding: var(--padding-default) var(--padding-wide);
       }
 
-      [search] {
-        position: absolute;
-        right: 0;
+      .button-container {
+        display: flex;
+        margin-left: auto;
       }
     `
 ];
@@ -325,7 +250,7 @@ __decorate([
 ], OxSelectorResourceObject.prototype, "searchFields", void 0);
 __decorate([
     property({ type: Array })
-], OxSelectorResourceObject.prototype, "select", void 0);
+], OxSelectorResourceObject.prototype, "columns", void 0);
 __decorate([
     property({ type: Object })
 ], OxSelectorResourceObject.prototype, "list", void 0);
@@ -335,9 +260,6 @@ __decorate([
 __decorate([
     query('ox-grist')
 ], OxSelectorResourceObject.prototype, "grist", void 0);
-__decorate([
-    query('ox-search-form')
-], OxSelectorResourceObject.prototype, "searchForm", void 0);
 OxSelectorResourceObject = __decorate([
     customElement('ox-selector-resource-object')
 ], OxSelectorResourceObject);

package/dist/src/grist-editor/ox-selector-resource-object.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-selector-resource-object.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-selector-resource-object.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/form/ox-search-form.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FetchHandler,\n  FetchOption,\n  GristData,\n  GristEventHandler,\n  GristRecord,\n  ZERO_DATA\n} from '@operato/data-grist'\nimport { MultiColumnFormStyles, SearchForm } from '@operato/form'\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('ox-selector-resource-object')\nexport class OxSelectorResourceObject extends LitElement {\n  static styles = [\n    MultiColumnFormStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n\n      form {\n        position: relative;\n      }\n\n      [search] {\n        position: absolute;\n        right: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: String }) queryName!: string\n  @property({ type: Object }) basicArgs: any\n  @property({ type: Object }) confirmCallback?: (record?: GristRecord | null) => void\n  @property({ type: Array }) selectedRecords: GristRecord[] = []\n\n  @property({ type: Array }) searchFields: any\n  @property({ type: Array }) select: {\n    type: string\n    name: string\n    header: string\n    subFields?: string[]\n    hidden: boolean\n    ignoreCondition: boolean\n    queryName: string\n    width: number\n  }[] = []\n  @property({ type: Object }) list: any\n  @property({ type: String }) valueField: string | ((item: any) => any) = 'id'\n\n  @query('ox-grist') grist!: DataGrist\n  @query('ox-search-form') searchForm!: SearchForm\n\n  render() {\n    return html`\n      <ox-search-form\n        id=\"search-form\"\n        @keypress=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            this.grist.fetch()\n          }\n        }}\n        @submit=${(e: SubmitEvent) => this.grist.fetch()}\n        .fields=${this.searchFields}\n        autofocus\n      ></ox-search-form>\n\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.config}\n        .data=${this.data}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .selectedRecords=${this.selectedRecords}\n      ></ox-grist>\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>\n        <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n        <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n      </div>\n    `\n  }\n\n  onempty() {\n    this.confirmCallback && this.confirmCallback()\n    closePopup(this)\n  }\n\n  oncancel() {\n    closePopup(this)\n  }\n\n  onconfirm() {\n    this.confirmCallback && this.confirmCallback(this.selected)\n    closePopup(this)\n  }\n\n  fetchHandler: FetchHandler = async ({ filters, page, limit, sorters = [] }) => {\n    const response = await client.query({\n      query: gql`\n        query {\n          fetch: ${this.queryName} (${buildArgs(await this._buildConditions({ filters, page, limit, sorters }))}) {\n            ${this.getSelectFields()}\n          }\n        }\n      `,\n      context: gqlContext()\n    })\n\n    if (!response.errors) {\n      const records = response.data.fetch.items.map((item: any) => {\n        let rowValue\n\n        if (this.valueField && typeof this.valueField === 'function') {\n          rowValue = this.valueField(item)\n        } else if (this.valueField) {\n          rowValue = item[this.valueField]\n        } else {\n          rowValue = item.id\n        }\n\n        if (this.value && this.value === rowValue) {\n          this.selectedRecords = [item]\n          item['__selected__'] = true\n        }\n\n        return item\n      })\n      const total = response.data.fetch.total\n\n      return {\n        records,\n        total,\n        limit,\n        page\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.config = {\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'row-selector',\n          multiple: false\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row',\n          dblclick: ((columns, data, column, record, rowIndex, field) => {\n            this.onconfirm()\n          }) as GristEventHandler\n        },\n        appendable: false\n      }\n    }\n\n    if (this.select && this.select.length > 0) {\n      let _searchFields = this.select.filter(selectField => !selectField.hidden && !selectField.ignoreCondition)\n      if (this.list && this.list.fields && this.list.fields.length > 0) {\n        _searchFields = _searchFields.filter(searchField => this.list.fields.indexOf(searchField.name) >= 0)\n      } else {\n        _searchFields = _searchFields.slice(0, 4)\n      }\n\n      this.searchFields = _searchFields.map(selectField => {\n        const fieldType = (selectField.type && selectField.type.toLowerCase()) || 'string'\n        const numberTypes = ['integer', 'float']\n        return {\n          label: selectField.header || i18next.t(`field.${selectField.name}`),\n          name: selectField.name,\n          type:\n            fieldType === 'string'\n              ? 'text'\n              : numberTypes.indexOf(fieldType) >= 0\n              ? 'number'\n              : fieldType === 'boolean'\n              ? 'checkbox'\n              : fieldType,\n          queryName: selectField.queryName,\n          props:\n            fieldType === 'string'\n              ? { searchOper: 'i_like' }\n              : fieldType === 'object'\n              ? { searchOper: 'in' }\n              : { searchOper: 'eq' },\n          attrs: fieldType === 'boolean' ? ['indeterminated'] : []\n        }\n      })\n      this.config = {\n        ...this.config,\n        columns: [\n          ...this.config.columns,\n          ...this.select.map(selectField => {\n            return {\n              ...selectField,\n              type: selectField.type || 'string',\n              width: selectField.width || 160,\n              header: selectField.header || i18next.t(`field.${selectField.name}`)\n            }\n          })\n        ]\n      }\n    } else {\n      this.searchFields = [\n        {\n          label: i18next.t('field.name'),\n          name: 'name',\n          type: 'text',\n          props: { searchOper: 'i_like' }\n        },\n        {\n          label: i18next.t('field.description'),\n          name: 'description',\n          type: 'text',\n          props: { searchOper: 'i_like' }\n        }\n      ]\n\n      this.config = {\n        ...this.config,\n        columns: [\n          ...this.config.columns,\n          {\n            type: 'string',\n            name: 'id',\n            header: i18next.t('field.id'),\n            hidden: true\n          },\n          {\n            type: 'string',\n            name: 'name',\n            header: i18next.t('field.name'),\n            record: {\n              align: 'left'\n            },\n            sortable: true,\n            width: 160\n          },\n          {\n            type: 'string',\n            name: 'description',\n            header: i18next.t('field.description'),\n            record: {\n              align: 'left'\n            },\n            sortable: true,\n            width: 300\n          }\n        ]\n      }\n    }\n\n    this.config = {\n      ...this.config,\n      list: {\n        ...this.list,\n        fields:\n          this.list && this.list.fields && this.list.fields.length > 0\n            ? this.list.fields\n            : (this.config.columns as ColumnConfig[])\n                .filter(column => column.type !== 'gutter')\n                .slice(0, 3)\n                .map(column => column.name)\n      }\n    }\n\n    await this.updateComplete\n    this.grist && this.grist.focus()\n  }\n\n  getSelectFields() {\n    if (this.select && this.select.length > 0) {\n      return `items {\n        ${this.select.map(selectField => {\n          return selectField.type === 'object'\n            ? `${selectField.name} { ${\n                selectField.subFields && selectField.subFields.length > 0\n                  ? selectField.subFields.join(' ')\n                  : `id name description`\n              } }`\n            : `${selectField.name}`\n        })}\n      }\n      total`\n    } else {\n      return `\n        items {\n          id\n          name\n          description\n        }\n        total\n      `\n    }\n  }\n\n  async _buildConditions({ filters, page, limit, sorters }: FetchOption) {\n    const queryConditions = {\n      filters: [],\n      ...this.basicArgs\n    }\n\n    queryConditions.filters = [...queryConditions.filters, ...(await this.searchForm.getQueryFilters())]\n    queryConditions.pagination = { page, limit }\n    queryConditions.sortings = sorters\n\n    return queryConditions\n  }\n\n  get selected() {\n    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist\n\n    var selected = grist.selected\n\n    return selected && selected.length > 0 ? selected[0] : undefined\n  }\n}\n"]}
+{"version":3,"file":"ox-selector-resource-object.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-selector-resource-object.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist, FetchHandler, GristData, GristEventHandler, GristRecord, ZERO_DATA } from '@operato/data-grist'\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { adjustFilters, isMobileDevice } from '@operato/utils'\n\n@customElement('ox-selector-resource-object')\nexport class OxSelectorResourceObject extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n      }\n\n      #filters > * {\n        padding: var(--padding-default) var(--padding-wide);\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: String }) queryName!: string\n  @property({ type: Object }) basicArgs: any\n  @property({ type: Object }) confirmCallback?: (record?: GristRecord | null) => void\n  @property({ type: Array }) selectedRecords: GristRecord[] = []\n\n  @property({ type: Array }) searchFields: any\n  @property({ type: Array }) columns: {\n    type: string\n    name: string\n    header: string\n    subFields?: string[]\n    hidden: boolean\n    queryName: string\n    width: number\n  }[] = []\n  @property({ type: Object }) list: any\n  @property({ type: String }) valueField: string | ((item: any) => any) = 'id'\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.config}\n        .data=${this.data}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .selectedRecords=${this.selectedRecords}\n      >\n        <div id=\"filters\" slot=\"headroom\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n      </ox-grist>\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>\n        <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n        <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n      </div>\n    `\n  }\n\n  onempty() {\n    this.confirmCallback && this.confirmCallback()\n    closePopup(this)\n  }\n\n  oncancel() {\n    closePopup(this)\n  }\n\n  onconfirm() {\n    this.confirmCallback && this.confirmCallback(this.selected)\n    closePopup(this)\n  }\n\n  fetchHandler: FetchHandler = async ({ filters = [], page, limit, sortings = [] }) => {\n    if (this.basicArgs) {\n      filters = adjustFilters(filters, this.basicArgs)\n    }\n    const pagination = { page, limit }\n\n    const response = await client.query({\n      query: gql`\n        query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          fetch: ${this.queryName} (filters: $filters, pagination: $pagination, sortings: $sortings) {\n            ${this.getQueryFields()}\n          }\n        }\n      `,\n      variables: { filters, pagination, sortings },\n      context: gqlContext()\n    })\n\n    if (!response.errors) {\n      const records = response.data.fetch.items.map((item: any) => {\n        let rowValue\n\n        if (this.valueField && typeof this.valueField === 'function') {\n          rowValue = this.valueField(item)\n        } else if (this.valueField) {\n          rowValue = item[this.valueField]\n        } else {\n          rowValue = item.id\n        }\n\n        if (this.value && this.value === rowValue) {\n          this.selectedRecords = [item]\n          item['__selected__'] = true\n        }\n\n        return item\n      })\n      const total = response.data.fetch.total\n\n      return {\n        records,\n        total,\n        limit,\n        page\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.config = {\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'row-selector',\n          multiple: false\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row',\n          dblclick: ((columns, data, column, record, rowIndex, field) => {\n            this.onconfirm()\n          }) as GristEventHandler\n        },\n        appendable: false\n      }\n    }\n\n    const columns = this.columns || [\n      {\n        type: 'string',\n        name: 'id',\n        header: i18next.t('field.id'),\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        record: {\n          align: 'left'\n        },\n        sortable: true,\n        filter: 'search',\n        width: 160\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        record: {\n          align: 'left'\n        },\n        sortable: true,\n        filter: 'search',\n        width: 300\n      }\n    ]\n\n    this.config = {\n      ...this.config,\n      columns: [\n        ...this.config.columns,\n        ...columns.map(selectField => {\n          return {\n            ...selectField,\n            type: selectField.type || 'string',\n            width: selectField.width || 160,\n            header: selectField.header || i18next.t(`field.${selectField.name}`)\n          }\n        })\n      ]\n    }\n  }\n\n  getQueryFields() {\n    if (this.columns && this.columns.length > 0) {\n      return `items {\n        ${this.columns.map(selectField => {\n          return selectField.type === 'object'\n            ? `${selectField.name} { ${\n                selectField.subFields && selectField.subFields.length > 0\n                  ? selectField.subFields.join(' ')\n                  : `id name description`\n              } }`\n            : `${selectField.name}`\n        })}\n      }\n      total`\n    } else {\n      return `\n        items {\n          id\n          name\n          description\n        }\n        total\n      `\n    }\n  }\n\n  get selected() {\n    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist\n\n    var selected = grist.selected\n\n    return selected && selected.length > 0 ? selected[0] : undefined\n  }\n}\n"]}