@operato/app 8.0.0-alpha.9 → 8.0.0-beta.0

package/dist/src/filters-form/filter-resource-code.d.ts

@@ -0,0 +1,3 @@
+import './ox-filter-resource-code.js';
+import { FilterSelectRenderer } from '@operato/data-grist';
+export declare const FilterResourceCode: FilterSelectRenderer;

package/dist/src/filters-form/filter-resource-code.js

@@ -0,0 +1,8 @@
+import './ox-filter-resource-code.js';
+import { html } from 'lit-html';
+export const FilterResourceCode = (column, value, owner) => {
+    return html `
+    <ox-filter-resource-code name=${column === null || column === void 0 ? void 0 : column.name} .column=${column} .value=${value}></ox-filter-resource-code>
+  `;
+};
+//# sourceMappingURL=filter-resource-code.js.map

package/dist/src/filters-form/filter-resource-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-resource-code.js","sourceRoot":"","sources":["../../../src/filters-form/filter-resource-code.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,kBAAkB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC/E,OAAO,IAAI,CAAA;oCACuB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,YAAY,MAAM,WAAW,KAAK;GAC/E,CAAA;AACH,CAAC,CAAA","sourcesContent":["import './ox-filter-resource-code.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '@operato/data-grist'\n\nexport const FilterResourceCode: FilterSelectRenderer = (column, value, owner) => {\n  return html`\n    <ox-filter-resource-code name=${column?.name} .column=${column} .value=${value}></ox-filter-resource-code>\n  `\n}\n"]}

package/dist/src/filters-form/filter-resource-object.d.ts

@@ -0,0 +1,3 @@
+import './ox-filter-resource-object.js';
+import { FilterSelectRenderer } from '@operato/data-grist';
+export declare const FilterResourceObject: FilterSelectRenderer;

package/dist/src/filters-form/filter-resource-object.js

@@ -0,0 +1,8 @@
+import './ox-filter-resource-object.js';
+import { html } from 'lit-html';
+export const FilterResourceObject = (column, value, owner) => {
+    return html `
+    <ox-filter-resource-object name=${column === null || column === void 0 ? void 0 : column.name} .column=${column} .value=${value}></ox-filter-resource-object>
+  `;
+};
+//# sourceMappingURL=filter-resource-object.js.map

package/dist/src/filters-form/filter-resource-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-resource-object.js","sourceRoot":"","sources":["../../../src/filters-form/filter-resource-object.ts"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,oBAAoB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACjF,OAAO,IAAI,CAAA;sCACyB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,YAAY,MAAM,WAAW,KAAK;GACjF,CAAA;AACH,CAAC,CAAA","sourcesContent":["import './ox-filter-resource-object.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '@operato/data-grist'\n\nexport const FilterResourceObject: FilterSelectRenderer = (column, value, owner) => {\n  return html`\n    <ox-filter-resource-object name=${column?.name} .column=${column} .value=${value}></ox-filter-resource-object>\n  `\n}\n"]}

package/dist/src/filters-form/index.js

@@ -1,5 +1,11 @@
 import { registerFilterRenderer } from '@operato/form';
+import { registerFilterRenderer as dataGristFilterRenderer } from '@operato/data-grist';
 import { FilterResourceSelect } from './filter-resource-select.js';
+import { FilterResourceCode } from './filter-resource-code.js';
+import { FilterResourceObject } from './filter-resource-object.js';
 registerFilterRenderer('resource-object', [FilterResourceSelect]);
 registerFilterRenderer('resource-id', [FilterResourceSelect]);
+dataGristFilterRenderer('code', [FilterResourceCode]);
+dataGristFilterRenderer('object', [FilterResourceObject]);
+dataGristFilterRenderer('resource-object', [FilterResourceObject]);
 //# sourceMappingURL=index.js.map

package/dist/src/filters-form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/filters-form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAElE,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AACjE,sBAAsB,CAAC,aAAa,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA","sourcesContent":["import { registerFilterRenderer } from '@operato/form'\n\nimport { FilterResourceSelect } from './filter-resource-select.js'\n\nregisterFilterRenderer('resource-object', [FilterResourceSelect])\nregisterFilterRenderer('resource-id', [FilterResourceSelect])\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/filters-form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,sBAAsB,IAAI,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAEvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAElE,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AACjE,sBAAsB,CAAC,aAAa,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AAE7D,uBAAuB,CAAC,MAAM,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;AACrD,uBAAuB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AACzD,uBAAuB,CAAC,iBAAiB,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA","sourcesContent":["import { registerFilterRenderer } from '@operato/form'\nimport { registerFilterRenderer as dataGristFilterRenderer } from '@operato/data-grist'\n\nimport { FilterResourceSelect } from './filter-resource-select.js'\n\nimport { FilterResourceCode } from './filter-resource-code.js'\nimport { FilterResourceObject } from './filter-resource-object.js'\n\nregisterFilterRenderer('resource-object', [FilterResourceSelect])\nregisterFilterRenderer('resource-id', [FilterResourceSelect])\n\ndataGristFilterRenderer('code', [FilterResourceCode])\ndataGristFilterRenderer('object', [FilterResourceObject])\ndataGristFilterRenderer('resource-object', [FilterResourceObject])\n"]}

package/dist/src/filters-form/ox-filter-resource-code.d.ts

@@ -0,0 +1,17 @@
+import '@operato/input/ox-select.js';
+import { OxFormField } from '@operato/input';
+type CommonCodeDetail = {
+    name: string;
+    description: string;
+    rank: number;
+};
+export declare class OxFilterResourceCode extends OxFormField {
+    static styles: import("lit").CSSResult;
+    column: any;
+    value?: string;
+    codes?: CommonCodeDetail[];
+    render(): import("lit-html").TemplateResult<1>;
+    fetchCodes(): Promise<void>;
+    connectedCallback(): void;
+}
+export {};

package/dist/src/filters-form/ox-filter-resource-code.js

@@ -0,0 +1,133 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-select.js';
+import gql from 'graphql-tag';
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { client, gqlContext } from '@operato/graphql';
+import { OxFormField } from '@operato/input';
+const FETCH_COMMON_CODE_GQL = (codeName) => gql `
+{
+  commonCode(name: "${codeName}") {
+    details {
+      name
+      description
+      rank
+    }
+  }
+}
+`;
+let OxFilterResourceCode = class OxFilterResourceCode extends OxFormField {
+    render() {
+        var _a, _b;
+        const { name, filter } = this.column;
+        const operator = filter.operator;
+        const { selectDispOpt = 'code-name' } = this.column.record || {};
+        if (!this.codes) {
+            return html `<p>Loading...</p>`;
+        }
+        return operator === 'in'
+            ? html `
+          <ox-select
+            .value=${this.value}
+            @change=${(e) => {
+                let val = e.detail;
+                this.value = (val === null || val === void 0 ? void 0 : val.length) > 0 ? val : undefined;
+                this === null || this === void 0 ? void 0 : this.dispatchEvent(new CustomEvent('change', {
+                    detail: {
+                        name,
+                        operator,
+                        value: this.value
+                    }
+                }));
+            }}
+          >
+            <ox-popup-list multiple attr-selected="checked" with-search align-left>
+              <ox-checkbox
+                checkAll
+                @click=${(e) => {
+                var _a;
+                const checked = e.target.checked;
+                const val = checked ? this.codes.map((code) => code.name) : [];
+                (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('select', { bubbles: true, detail: val }));
+            }}
+                >${i18next.t('label.all')}</ox-checkbox
+              >
+              ${(_a = this.codes) === null || _a === void 0 ? void 0 : _a.filter((code) => !!code.name).map((code) => html `
+                    <ox-checkbox
+                      option
+                      value=${code.name}
+                      @change=${(e) => {
+                const parent = e.target.parentElement;
+                const checkCnt = e.target.checked ? 1 : -1;
+                const checkedLen = parent.querySelectorAll('ox-checkbox[option][checked]').length + checkCnt;
+                parent.querySelector('ox-checkbox[checkAll]').checked =
+                    this.codes.filter((code) => !!code.name).length === checkedLen;
+            }}
+                      >${selectDispOpt.replace('name', code.description).replace('code', code.name)}</ox-checkbox
+                    >
+                  `)}
+            </ox-popup-list>
+          </ox-select>
+        `
+            : html `
+          <ox-select
+            .value=${this.value}
+            @change=${(e) => {
+                this.value = e.detail;
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: {
+                        name,
+                        operator,
+                        value: this.value
+                    }
+                }));
+            }}
+          >
+            <ox-popup-list with-search>
+              <div option value="">&nbsp;</div>
+              ${(_b = this.codes) === null || _b === void 0 ? void 0 : _b.map((code) => html `
+                  <div option value=${code.name}>
+                    ${selectDispOpt.replace('name', code.description).replace('code', code.name)}
+                  </div>
+                `)}
+            </ox-popup-list>
+          </ox-select>
+        `;
+    }
+    async fetchCodes() {
+        var _a, _b;
+        const { codeName } = this.column.record || {};
+        if (codeName) {
+            const response = await client.query({
+                query: FETCH_COMMON_CODE_GQL(codeName),
+                context: gqlContext()
+            });
+            this.codes = ((_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.commonCode) === null || _b === void 0 ? void 0 : _b.details) || [];
+            this.requestUpdate();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchCodes();
+    }
+};
+OxFilterResourceCode.styles = css `
+    :host {
+      min-width: 100px;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxFilterResourceCode.prototype, "column", void 0);
+__decorate([
+    property({ type: String })
+], OxFilterResourceCode.prototype, "value", void 0);
+__decorate([
+    state()
+], OxFilterResourceCode.prototype, "codes", void 0);
+OxFilterResourceCode = __decorate([
+    customElement('ox-filter-resource-code')
+], OxFilterResourceCode);
+export { OxFilterResourceCode };
+//# sourceMappingURL=ox-filter-resource-code.js.map

package/dist/src/filters-form/ox-filter-resource-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-filter-resource-code.js","sourceRoot":"","sources":["../../../src/filters-form/ox-filter-resource-code.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-select.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { FilterConfigObject } from '@operato/data-grist'\nimport { client, gqlContext } from '@operato/graphql'\nimport { OxFormField } from '@operato/input'\n\ntype CommonCodeDetail = {\n  name: string\n  description: string\n  rank: number\n}\n\nconst FETCH_COMMON_CODE_GQL = (codeName: string) => gql`\n{\n  commonCode(name: \"${codeName}\") {\n    details {\n      name\n      description\n      rank\n    }\n  }\n}\n`\n\n@customElement('ox-filter-resource-code')\nexport class OxFilterResourceCode extends OxFormField {\n  static styles = css`\n    :host {\n      min-width: 100px;\n    }\n  `\n\n  @property({ type: Object }) column: any\n  @property({ type: String }) value?: string\n\n  @state() codes?: CommonCodeDetail[]\n\n  render() {\n    const { name, filter } = this.column\n    const operator = (filter as FilterConfigObject).operator\n    const { selectDispOpt = 'code-name' } = this.column.record || {}\n\n    if (!this.codes) {\n      return html`<p>Loading...</p>`\n    }\n\n    return operator === 'in'\n      ? html`\n          <ox-select\n            .value=${this.value}\n            @change=${(e: CustomEvent) => {\n              let val = e.detail\n              this.value = val?.length > 0 ? val : undefined\n\n              this?.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: {\n                    name,\n                    operator,\n                    value: this.value\n                  }\n                })\n              )\n            }}\n          >\n            <ox-popup-list multiple attr-selected=\"checked\" with-search align-left>\n              <ox-checkbox\n                checkAll\n                @click=${(e: any) => {\n                  const checked = e.target.checked\n                  const val = checked ? this.codes!.map((code: CommonCodeDetail) => code.name) : []\n\n                  e.target?.dispatchEvent(new CustomEvent('select', { bubbles: true, detail: val }))\n                }}\n                >${i18next.t('label.all')}</ox-checkbox\n              >\n              ${this.codes\n                ?.filter((code: CommonCodeDetail) => !!code.name)\n                .map(\n                  (code: CommonCodeDetail) => html`\n                    <ox-checkbox\n                      option\n                      value=${code.name}\n                      @change=${(e: any) => {\n                        const parent = e.target.parentElement\n                        const checkCnt = e.target.checked ? 1 : -1\n                        const checkedLen = parent.querySelectorAll('ox-checkbox[option][checked]').length + checkCnt\n\n                        parent.querySelector('ox-checkbox[checkAll]').checked =\n                          this.codes!.filter((code: CommonCodeDetail) => !!code.name).length === checkedLen\n                      }}\n                      >${selectDispOpt.replace('name', code.description).replace('code', code.name)}</ox-checkbox\n                    >\n                  `\n                )}\n            </ox-popup-list>\n          </ox-select>\n        `\n      : html`\n          <ox-select\n            .value=${this.value}\n            @change=${(e: CustomEvent) => {\n              this.value = e.detail\n              this.dispatchEvent(\n                new CustomEvent('change', {\n                  detail: {\n                    name,\n                    operator,\n                    value: this.value\n                  }\n                })\n              )\n            }}\n          >\n            <ox-popup-list with-search>\n              <div option value=\"\">&nbsp;</div>\n              ${this.codes?.map(\n                (code: CommonCodeDetail) => html`\n                  <div option value=${code.name}>\n                    ${selectDispOpt.replace('name', code.description).replace('code', code.name)}\n                  </div>\n                `\n              )}\n            </ox-popup-list>\n          </ox-select>\n        `\n  }\n\n  async fetchCodes() {\n    const { codeName } = this.column.record || {}\n\n    if (codeName) {\n      const response = await client.query({\n        query: FETCH_COMMON_CODE_GQL(codeName),\n        context: gqlContext()\n      })\n\n      this.codes = response?.data?.commonCode?.details || []\n\n      this.requestUpdate()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.fetchCodes()\n  }\n}\n"]}

package/dist/src/filters-form/ox-filter-resource-object.d.ts

@@ -0,0 +1,13 @@
+import '../selector/ox-selector-resource-object.js';
+import { OxFormField } from '@operato/input';
+export declare class OxFilterResourceObject extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    column: any;
+    value?: string;
+    resourceObject?: any;
+    private popup?;
+    render(): import("lit-html").TemplateResult<1>;
+    _onclick(e: Event): void;
+    _onkeydown(e: KeyboardEvent): void;
+    openSelector(): void;
+}

package/dist/src/filters-form/ox-filter-resource-object.js

@@ -0,0 +1,195 @@
+import { __decorate } from "tslib";
+import '../selector/ox-selector-resource-object.js';
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+import { OxFormField } from '@operato/input';
+let OxFilterResourceObject = class OxFilterResourceObject extends OxFormField {
+    render() {
+        var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {};
+        var value = this.resourceObject || {};
+        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 `
+      <div @click=${this._onclick} @keydown=${this._onkeydown}>
+        <span tabindex="0" style="flex:1">${name || ''}${(description && `(${description})`) || ''}</span>
+        <md-icon>search</md-icon>
+      </div>
+    `;
+    }
+    _onclick(e) {
+        e.stopPropagation();
+        this.openSelector();
+    }
+    _onkeydown(e) {
+        const key = e.key;
+        if (key == 'Enter') {
+            e.stopPropagation();
+            this.openSelector();
+        }
+    }
+    openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        var { title = '', idField = 'id', nameField = 'name', descriptionField = 'description', valueField = 'id', queryName, basicArgs, select, columns, pagination, list } = this.column.record.options || {};
+        if (!queryName) {
+            console.warn('queryName is empty');
+            return;
+        }
+        /* select options is only for compatability, it might be able to be deprecated. */
+        columns = columns || select;
+        const confirmCallback = (selected) => {
+            // this.department = selected
+            //   ? {
+            //       id: selected.id,
+            //       controlNo: selected.controlNo,
+            //       name: selected.name,
+            //       description: selected.description
+            //     }
+            //   : null
+            var _a;
+            // this.value = this.department?.name
+            // this.dispatchEvent(
+            //   new CustomEvent('change', {
+            //     bubbles: true,
+            //     composed: true,
+            //     detail: this.value
+            //   })
+            // )
+            this.resourceObject = selected
+                ? {
+                    ...(columns || [])
+                        .map((field) => field.name)
+                        .reduce((obj, fieldName) => {
+                        return (obj = {
+                            ...obj,
+                            [fieldName]: selected[fieldName]
+                        });
+                    }, {}),
+                    [idField]: selected[idField],
+                    [nameField]: selected[nameField],
+                    [descriptionField]: selected[descriptionField]
+                }
+                : null;
+            this.value = (_a = this.resourceObject) === null || _a === void 0 ? void 0 : _a[nameField];
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: this.value
+            }));
+        };
+        var value = this.resourceObject || {};
+        var actualValue;
+        if (typeof valueField === 'function') {
+            actualValue = valueField(value);
+        }
+        else {
+            actualValue = value[valueField];
+        }
+        var template = html `
+      <ox-selector-resource-object
+        .value=${actualValue}
+        .confirmCallback=${confirmCallback.bind(this)}
+        .queryName=${queryName}
+        .columns=${columns}
+        .pagination=${pagination}
+        .list=${list}
+        .basicArgs=${basicArgs}
+        .valueField=${valueField}
+      ></ox-selector-resource-object>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            search: {
+                autofocus: true,
+                placeholder: title || i18next.t('title.select_item'),
+                handler: (instance, value) => {
+                    /* instance: template instance */
+                    instance.searchText(value);
+                }
+            },
+            filter: {
+                handler: (instance) => {
+                    /* instance: template instance */
+                    instance.toggleFilter();
+                }
+            }
+        });
+    }
+};
+OxFilterResourceObject.styles = [
+    css `
+      :host {
+        display: block;
+        position: relative;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+        min-width: 100px;
+
+        --ox-select-padding: var(--spacing-tiny);
+        --ox-select-font: var(--input-font);
+        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));
+        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));
+        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);
+      }
+
+      div {
+        width: 100%;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: var(--ox-select-padding);
+        font: var(--ox-select-font);
+        color: var(--ox-select-color);
+      }
+
+      span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        gap: 4px;
+      }
+
+      md-icon {
+        --md-icon-size: 16px;
+        display: block;
+        text-align: right;
+        color: var(--ox-select-icon-color);
+        opacity: 0.7;
+      }
+
+      div:hover md-icon {
+        color: var(--md-sys-color-on-primary-container);
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], OxFilterResourceObject.prototype, "column", void 0);
+__decorate([
+    property({ type: String })
+], OxFilterResourceObject.prototype, "value", void 0);
+__decorate([
+    state()
+], OxFilterResourceObject.prototype, "resourceObject", void 0);
+OxFilterResourceObject = __decorate([
+    customElement('ox-filter-resource-object')
+], OxFilterResourceObject);
+export { OxFilterResourceObject };
+//# sourceMappingURL=ox-filter-resource-object.js.map

package/dist/src/filters-form/ox-filter-resource-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-filter-resource-object.js","sourceRoot":"","sources":["../../../src/filters-form/ox-filter-resource-object.ts"],"names":[],"mappings":"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","sourcesContent":["import '../selector/ox-selector-resource-object.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup, PopupHandle } from '@operato/layout'\nimport { OxFormField } from '@operato/input'\n\n@customElement('ox-filter-resource-object')\nexport class OxFilterResourceObject extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n        min-width: 100px;\n\n        --ox-select-padding: var(--spacing-tiny);\n        --ox-select-font: var(--input-font);\n        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);\n      }\n\n      div {\n        width: 100%;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        padding: var(--ox-select-padding);\n        font: var(--ox-select-font);\n        color: var(--ox-select-color);\n      }\n\n      span {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        gap: 4px;\n      }\n\n      md-icon {\n        --md-icon-size: 16px;\n        display: block;\n        text-align: right;\n        color: var(--ox-select-icon-color);\n        opacity: 0.7;\n      }\n\n      div:hover md-icon {\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @property({ type: Object }) column: any\n  @property({ type: String }) value?: string\n\n  @state() resourceObject?: any\n\n  private popup?: PopupHandle\n\n  render() {\n    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n\n    var value = this.resourceObject || {}\n    var name, description\n\n    if (typeof nameField === 'function') {\n      name = nameField(value)\n    } else {\n      name = value[nameField]\n    }\n\n    if (typeof descriptionField === 'function') {\n      description = descriptionField(value)\n    } else {\n      description = value[descriptionField] && `(${value[descriptionField]})`\n    }\n\n    return html`\n      <div @click=${this._onclick} @keydown=${this._onkeydown}>\n        <span tabindex=\"0\" style=\"flex:1\">${name || ''}${(description && `(${description})`) || ''}</span>\n        <md-icon>search</md-icon>\n      </div>\n    `\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n    this.openSelector()\n  }\n\n  _onkeydown(e: KeyboardEvent): void {\n    const key = e.key\n    if (key == 'Enter') {\n      e.stopPropagation()\n      this.openSelector()\n    }\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    var {\n      title = '',\n      idField = 'id',\n      nameField = 'name',\n      descriptionField = 'description',\n      valueField = 'id',\n      queryName,\n      basicArgs,\n      select,\n      columns,\n      pagination,\n      list\n    } = this.column.record.options || {}\n\n    if (!queryName) {\n      console.warn('queryName is empty')\n      return\n    }\n\n    /* select options is only for compatability, it might be able to be deprecated. */\n    columns = columns || select\n\n    const confirmCallback = (selected?: { [field: string]: any }) => {\n      // this.department = selected\n      //   ? {\n      //       id: selected.id,\n      //       controlNo: selected.controlNo,\n      //       name: selected.name,\n      //       description: selected.description\n      //     }\n      //   : null\n\n      // this.value = this.department?.name\n\n      // this.dispatchEvent(\n      //   new CustomEvent('change', {\n      //     bubbles: true,\n      //     composed: true,\n      //     detail: this.value\n      //   })\n      // )\n\n      this.resourceObject = selected\n        ? {\n            ...(columns || [])\n              .map((field: any) => field.name)\n              .reduce(\n                (obj: { [field: string]: any }, fieldName: string) => {\n                  return (obj = {\n                    ...obj,\n                    [fieldName]: selected[fieldName]\n                  })\n                },\n                {} as { [field: string]: any }\n              ),\n            [idField]: selected[idField],\n            [nameField]: selected[nameField],\n            [descriptionField]: selected[descriptionField]\n          }\n        : null\n\n      this.value = this.resourceObject?.[nameField]\n\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          detail: this.value\n        })\n      )\n    }\n\n    var value = this.resourceObject || {}\n    var actualValue\n    if (typeof valueField === 'function') {\n      actualValue = valueField(value)\n    } else {\n      actualValue = value[valueField]\n    }\n\n    var template = html`\n      <ox-selector-resource-object\n        .value=${actualValue}\n        .confirmCallback=${confirmCallback.bind(this)}\n        .queryName=${queryName}\n        .columns=${columns}\n        .pagination=${pagination}\n        .list=${list}\n        .basicArgs=${basicArgs}\n        .valueField=${valueField}\n      ></ox-selector-resource-object>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      search: {\n        autofocus: true,\n        placeholder: title || i18next.t('title.select_item'),\n        handler: (instance: any, value: any) => {\n          /* instance: template instance */\n          instance.searchText(value)\n        }\n      },\n      filter: {\n        handler: (instance: any) => {\n          /* instance: template instance */\n          instance.toggleFilter()\n        }\n      }\n    })\n  }\n}\n"]}

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

@@ -71,7 +71,7 @@ let OxGristEditorResourceId = class OxGristEditorResourceId extends OxGristEdito
     }
 };
 OxGristEditorResourceId = __decorate([
-    customElement('ox-input-resource-id')
+    customElement('ox-grist-editor-resource-id')
 ], OxGristEditorResourceId);
 export { OxGristEditorResourceId };
 //# sourceMappingURL=ox-grist-editor-resource-id.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-editor-resource-id.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-editor-resource-id.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../selector/ox-selector-resource-id.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { GristRecord, OxGristEditor } from '@operato/data-grist'\nimport { openPopup, PopupHandle } from '@operato/layout'\n\n@customElement('ox-input-resource-id')\nexport class OxGristEditorResourceId extends OxGristEditor {\n  private popup?: PopupHandle\n\n  render() {\n    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n    var value = this.value\n\n    return html`\n      ${!value\n        ? html`<span tabindex=\"0\"></span>`\n        : html` <span tabindex=\"0\">${value[nameField]} (${value[descriptionField]})</span> `}\n      <md-icon>arrow_drop_down</md-icon>\n    `\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n    this.openSelector()\n  }\n\n  _onkeydown(e: KeyboardEvent): void {\n    const key = e.key\n    if (key == 'Enter') {\n      e.stopPropagation()\n      this.openSelector()\n    }\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    const confirmCallback: (record?: GristRecord) => void = selected => {\n      if (!selected) {\n        return\n      }\n\n      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: selected\n              ? {\n                  [idField]: selected[idField],\n                  [nameField]: selected[nameField],\n                  [descriptionField]: selected[descriptionField]\n                }\n              : null,\n            record: this.record,\n            column: this.column,\n            row: this.row\n          }\n        })\n      )\n    }\n\n    var value = this.value || {}\n    var template = html`\n      <ox-selector-resource-id\n        .value=${value.id}\n        .confirmCallback=${confirmCallback.bind(this)}\n        .queryName=${this.column.record.options.queryName}\n        .basicArgs=${this.column.record.options.basicArgs}\n      ></ox-selector-resource-id>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: 'select item'\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-grist-editor-resource-id.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-editor-resource-id.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../selector/ox-selector-resource-id.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { GristRecord, OxGristEditor } from '@operato/data-grist'\nimport { openPopup, PopupHandle } from '@operato/layout'\n\n@customElement('ox-grist-editor-resource-id')\nexport class OxGristEditorResourceId extends OxGristEditor {\n  private popup?: PopupHandle\n\n  render() {\n    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n    var value = this.value\n\n    return html`\n      ${!value\n        ? html`<span tabindex=\"0\"></span>`\n        : html` <span tabindex=\"0\">${value[nameField]} (${value[descriptionField]})</span> `}\n      <md-icon>arrow_drop_down</md-icon>\n    `\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n    this.openSelector()\n  }\n\n  _onkeydown(e: KeyboardEvent): void {\n    const key = e.key\n    if (key == 'Enter') {\n      e.stopPropagation()\n      this.openSelector()\n    }\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    const confirmCallback: (record?: GristRecord) => void = selected => {\n      if (!selected) {\n        return\n      }\n\n      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: selected\n              ? {\n                  [idField]: selected[idField],\n                  [nameField]: selected[nameField],\n                  [descriptionField]: selected[descriptionField]\n                }\n              : null,\n            record: this.record,\n            column: this.column,\n            row: this.row\n          }\n        })\n      )\n    }\n\n    var value = this.value || {}\n    var template = html`\n      <ox-selector-resource-id\n        .value=${value.id}\n        .confirmCallback=${confirmCallback.bind(this)}\n        .queryName=${this.column.record.options.queryName}\n        .basicArgs=${this.column.record.options.basicArgs}\n      ></ox-selector-resource-id>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: 'select item'\n    })\n  }\n}\n"]}