@operato/app 0.4.2 → 0.4.5

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

@@ -0,0 +1,202 @@
+import { __decorate } from "tslib";
+import '@operato/data-grist';
+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 { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
+import { isMobileDevice } from '@operato/utils';
+let OxSelectorResourceId = class OxSelectorResourceId extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = ZERO_DATA;
+        this.selectedRecords = [];
+    }
+    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.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();
+        history.back();
+    }
+    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 = [] }) {
+        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');
+        var selected = grist.selected;
+        return selected && selected.length > 0 ? selected[0] : undefined;
+    }
+};
+OxSelectorResourceId.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;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], OxSelectorResourceId.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceId.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceId.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], OxSelectorResourceId.prototype, "queryName", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceId.prototype, "basicArgs", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceId.prototype, "confirmCallback", void 0);
+__decorate([
+    property({ type: Array })
+], OxSelectorResourceId.prototype, "selectedRecords", void 0);
+__decorate([
+    query('ox-grist')
+], OxSelectorResourceId.prototype, "grist", void 0);
+OxSelectorResourceId = __decorate([
+    customElement('ox-selector-resource-id')
+], OxSelectorResourceId);
+export { OxSelectorResourceId };
+//# sourceMappingURL=ox-selector-resource-id.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-selector-resource-id.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-selector-resource-id.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, FetchOption, GristData, GristRecord, ZERO_DATA } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('ox-selector-resource-id')\nexport class OxSelectorResourceId extends LitElement {\n  static styles = 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  @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) => void\n  @property({ type: Array }) selectedRecords: GristRecord[] = []\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        .fetchHandler=${this.fetchHandler.bind(this)}\n        .selectedRecords=${this.selectedRecords}\n      >\n        <div id=\"filters\" slot=\"headroom\">\n          <ox-filters-form></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    history.back()\n  }\n\n  oncancel() {\n    history.back()\n  }\n\n  onconfirm() {\n    this.confirmCallback && this.confirmCallback(this.selected)\n    history.back()\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          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          filter: 'search',\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          filter: 'search',\n          sortable: true,\n          width: 300\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row'\n        }\n      },\n      pagination: {\n        infinite: true\n      }\n    }\n\n    await this.updateComplete\n\n    /* TODO config가 설정될 때, fetch() 가 동작하므로, fetch 완료 이벤트를 받아서, selected를 설정해주는 것이 좋겠다. \n       현재는 fetch() 가 두번 일어난다.\n       */\n    await this.grist.fetch()\n\n    var selected = this.grist.data.records.find(item => this.value == item.id)\n    if (selected) {\n      this.selectedRecords = [selected]\n    }\n    /* TODO config가 설정될 때, fetch() 가 동작하므로, fetch 완료 이벤트를 받아서, selected를 설정해주는 것이 좋겠다. */\n\n    await this.updateComplete\n    this.grist.focus()\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sorters = [], filters = [] }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          q: ${this.queryName}(filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              description\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        filters,\n        pagination: { page, limit },\n        sortings: sorters\n      }\n    })\n\n    return {\n      total: response.data.q.total || 0,\n      records: response.data.q.items || []\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"]}

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

@@ -0,0 +1,39 @@
+import '@operato/data-grist';
+import '@operato/form/ox-search-form.js';
+import { LitElement } from 'lit';
+import { DataGrist, FetchHandler, FetchOption, GristData, GristRecord } from '@operato/data-grist';
+import { SearchForm } from '@operato/form';
+export declare class OxSelectorResourceObject extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: string;
+    config: any;
+    data: GristData;
+    queryName: string;
+    basicArgs: any;
+    confirmCallback?: (record?: GristRecord | null) => void;
+    selectedRecords: GristRecord[];
+    searchFields: any;
+    select: {
+        type: string;
+        name: string;
+        header: string;
+        subFields?: string[];
+        hidden: boolean;
+        ignoreCondition: boolean;
+        queryName: string;
+        width: number;
+    }[];
+    list: any;
+    valueField: string | ((item: any) => any);
+    grist: DataGrist;
+    searchForm: SearchForm;
+    render(): import("lit-html").TemplateResult<1>;
+    onempty(): void;
+    oncancel(): void;
+    onconfirm(): void;
+    fetchHandler: FetchHandler;
+    firstUpdated(): Promise<void>;
+    getSelectFields(): string;
+    _buildConditions({ filters, page, limit, sorters }: FetchOption): Promise<any>;
+    get selected(): GristRecord | undefined;
+}

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

@@ -0,0 +1,343 @@
+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 { i18next } from '@operato/i18n';
+import { isMobileDevice } from '@operato/utils';
+let OxSelectorResourceObject = class OxSelectorResourceObject extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = ZERO_DATA;
+        this.selectedRecords = [];
+        this.select = [];
+        this.valueField = 'id';
+        this.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) => {
+                    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
+                };
+            }
+        };
+    }
+    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}
+      ></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.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();
+        history.back();
+    }
+    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
+                }
+            ],
+            rows: {
+                selectable: {
+                    multiple: false
+                },
+                handlers: {
+                    click: 'select-row',
+                    dblclick: ((columns, data, column, record, rowIndex, field) => {
+                        this.onconfirm();
+                    })
+                },
+                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
+                        .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 }) {
+        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;
+        return selected && selected.length > 0 ? selected[0] : undefined;
+    }
+};
+OxSelectorResourceObject.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;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxSelectorResourceObject.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceObject.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceObject.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], OxSelectorResourceObject.prototype, "queryName", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceObject.prototype, "basicArgs", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceObject.prototype, "confirmCallback", void 0);
+__decorate([
+    property({ type: Array })
+], OxSelectorResourceObject.prototype, "selectedRecords", void 0);
+__decorate([
+    property({ type: Array })
+], OxSelectorResourceObject.prototype, "searchFields", void 0);
+__decorate([
+    property({ type: Array })
+], OxSelectorResourceObject.prototype, "select", void 0);
+__decorate([
+    property({ type: Object })
+], OxSelectorResourceObject.prototype, "list", void 0);
+__decorate([
+    property({ type: String })
+], OxSelectorResourceObject.prototype, "valueField", void 0);
+__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);
+export { OxSelectorResourceObject };
+//# sourceMappingURL=ox-selector-resource-object.js.map

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

@@ -0,0 +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 { 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      ></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    history.back()\n  }\n\n  oncancel() {\n    history.back()\n  }\n\n  onconfirm() {\n    this.confirmCallback && this.confirmCallback(this.selected)\n    history.back()\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"]}

package/dist/src/input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ox-input-background-pattern.js';
+export * from './ox-input-fill-style.js';
+export * from './ox-input-graphql.js';

package/dist/src/input/index.js

@@ -0,0 +1,4 @@
+export * from './ox-input-background-pattern.js';
+export * from './ox-input-fill-style.js';
+export * from './ox-input-graphql.js';
+//# sourceMappingURL=index.js.map

package/dist/src/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA;AAChD,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA","sourcesContent":["export * from './ox-input-background-pattern.js'\nexport * from './ox-input-fill-style.js'\nexport * from './ox-input-graphql.js'\n"]}