@operato/app 8.0.0-alpha.11 → 8.0.0-alpha.14

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.14](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.13...v8.0.0-alpha.14) (2024-10-02)
+
+
+### :bug: Bug Fix
+
+* ox-input-code-filter ([c6ef056](https://github.com/hatiolab/operato/commit/c6ef0567493130ae43b0634ea2cd54ef1028b86b))
+
+
+
 ## [8.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.10...v8.0.0-alpha.11) (2024-09-21)
 
 **Note:** Version bump only for package @operato/app

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-code-select.js","sourceRoot":"","sources":["../../../src/filters-form/filter-code-select.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,gBAAgB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC7E,OAAO,IAAI,CAAA,+BAA+B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,YAAY,MAAM,WAAW,KAAK,2BAA2B,CAAA;AACrH,CAAC,CAAA","sourcesContent":["import './ox-input-code-filter.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '@operato/data-grist'\n\nexport const FilterCodeSelect: FilterSelectRenderer = (column, value, owner) => {\n  return html` <ox-input-code-filter name=${column?.name} .column=${column} .value=${value}></ox-input-code-filter> `\n}\n"]}

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

@@ -1,5 +1,8 @@
 import { registerFilterRenderer } from '@operato/form';
+import { registerFilterRenderer as dataGristFiltersRenderer } from '@operato/data-grist';
 import { FilterResourceSelect } from './filter-resource-select.js';
+import { FilterCodeSelect } from './filter-code-select.js';
 registerFilterRenderer('resource-object', [FilterResourceSelect]);
 registerFilterRenderer('resource-id', [FilterResourceSelect]);
+dataGristFiltersRenderer('code', [FilterCodeSelect]);
 //# 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,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAExF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AACjE,sBAAsB,CAAC,aAAa,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AAC7D,wBAAwB,CAAC,MAAM,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA","sourcesContent":["import { registerFilterRenderer } from '@operato/form'\nimport { registerFilterRenderer as dataGristFiltersRenderer } from '@operato/data-grist'\n\nimport { FilterResourceSelect } from './filter-resource-select.js'\nimport { FilterCodeSelect } from './filter-code-select.js'\n\nregisterFilterRenderer('resource-object', [FilterResourceSelect])\nregisterFilterRenderer('resource-id', [FilterResourceSelect])\ndataGristFiltersRenderer('code', [FilterCodeSelect])\n"]}

package/dist/src/filters-form/ox-input-code-filter.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 OxInputCodeFilter 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-input-code-filter.js

@@ -0,0 +1,137 @@
+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 OxInputCodeFilter = class OxInputCodeFilter extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.codes = [];
+    }
+    render() {
+        var _a, _b;
+        const { name, filter } = this.column;
+        const operator = filter.operator;
+        const { selectDispOpt = 'code-name' } = this.column.record || {};
+        if (!this.codes || this.codes.length === 0) {
+            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;
+        const { codeName } = this.column.record || {};
+        if (codeName) {
+            const response = await client.query({
+                query: FETCH_COMMON_CODE_GQL(codeName),
+                context: gqlContext()
+            });
+            this.codes = ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.commonCode.details) || [];
+            this.requestUpdate();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchCodes();
+    }
+};
+OxInputCodeFilter.styles = css `
+    :host {
+      min-width: 100px;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxInputCodeFilter.prototype, "column", void 0);
+__decorate([
+    property({ type: String })
+], OxInputCodeFilter.prototype, "value", void 0);
+__decorate([
+    state()
+], OxInputCodeFilter.prototype, "codes", void 0);
+OxInputCodeFilter = __decorate([
+    customElement('ox-input-code-filter')
+], OxInputCodeFilter);
+export { OxInputCodeFilter };
+//# sourceMappingURL=ox-input-code-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-code-filter.js","sourceRoot":"","sources":["../../../src/filters-form/ox-input-code-filter.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAQ5C,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,GAAG,CAAA;;sBAEjC,QAAQ;;;;;;;;CAQ7B,CAAA;AAGM,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAUI,UAAK,GAAuB,EAAE,CAAA;IAiHzC,CAAC;IA/GC,MAAM;;QACJ,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACpC,MAAM,QAAQ,GAAI,MAA6B,CAAC,QAAQ,CAAA;QACxD,MAAM,EAAE,aAAa,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QAEhE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC3C,OAAO,IAAI,CAAA,mBAAmB,CAAA;QAChC,CAAC;QAED,OAAO,QAAQ,KAAK,IAAI;YACtB,CAAC,CAAC,IAAI,CAAA;;qBAES,IAAI,CAAC,KAAK;sBACT,CAAC,CAAc,EAAE,EAAE;gBAC3B,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,CAAA;gBAClB,IAAI,CAAC,KAAK,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAA;gBAE9C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE;wBACN,IAAI;wBACJ,QAAQ;wBACR,KAAK,EAAE,IAAI,CAAC,KAAK;qBAClB;iBACF,CAAC,CACH,CAAA;YACH,CAAC;;;;;yBAKY,CAAC,CAAM,EAAE,EAAE;;gBAClB,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA;gBAChC,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAM,CAAC,GAAG,CAAC,CAAC,IAAsB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;gBAEjF,MAAA,CAAC,CAAC,MAAM,0CAAE,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;YACpF,CAAC;mBACE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC;;gBAEzB,MAAA,IAAI,CAAC,KAAK,0CACR,MAAM,CAAC,CAAC,IAAsB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC/C,GAAG,CACF,CAAC,IAAsB,EAAE,EAAE,CAAC,IAAI,CAAA;;;8BAGpB,IAAI,CAAC,IAAI;gCACP,CAAC,CAAM,EAAE,EAAE;gBACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;gBACrC,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC1C,MAAM,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAA;gBAE5F,MAAM,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,OAAO;oBACnD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAsB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,UAAU,CAAA;YACpF,CAAC;yBACE,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;mBAEhF,CACF;;;SAGR;YACH,CAAC,CAAC,IAAI,CAAA;;qBAES,IAAI,CAAC,KAAK;sBACT,CAAC,CAAc,EAAE,EAAE;gBAC3B,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;gBACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE;wBACN,IAAI;wBACJ,QAAQ;wBACR,KAAK,EAAE,IAAI,CAAC,KAAK;qBAClB;iBACF,CAAC,CACH,CAAA;YACH,CAAC;;;;gBAIG,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CACf,CAAC,IAAsB,EAAE,EAAE,CAAC,IAAI,CAAA;sCACV,IAAI,CAAC,IAAI;sBACzB,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;iBAE/E,CACF;;;SAGN,CAAA;IACP,CAAC;IAED,KAAK,CAAC,UAAU;;QACd,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QAE7C,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC;gBACtC,OAAO,EAAE,UAAU,EAAE;aACtB,CAAC,CAAA;YAEF,IAAI,CAAC,KAAK,GAAG,CAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,UAAU,CAAC,OAAO,KAAI,EAAE,CAAA;YAErD,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,UAAU,EAAE,CAAA;IACnB,CAAC;;AAzHM,wBAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAe;AAEjC;IAAR,KAAK,EAAE;gDAA+B;AAV5B,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA2H7B","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-input-code-filter')\nexport class OxInputCodeFilter 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 || this.codes.length === 0) {\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"]}