@operato/app 1.19.9 → 1.19.12

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.19.9",
+  "version": "1.19.12",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -28,6 +28,7 @@
     "./grist-editor/ox-grist-editor-resource-object.js": "./dist/src/grist-editor/ox-grist-editor-resource-object.js",
     "./grist-editor/ox-grist-editor-resource-object-legacy.js": "./dist/src/grist-editor/ox-grist-editor-resource-object-legacy.js",
     "./grist-editor/ox-grist-editor-resource-code.js": "./dist/src/grist-editor/ox-grist-editor-resource-code.js",
+    "./filters-form/filter-code-select.js": "./dist/src/filters-form/filter-code-select.js",
     "./filter-renderer.js": "./dist/src/filter-renderer/index.js",
     "./filters-form.js": "./dist/src/filters-form/index.js"
   },
@@ -96,6 +97,12 @@
       "grist-editor/ox-grist-editor-resource-code.js": [
         "dist/src/grist-editor/ox-grist-editor-resource-code.d.ts"
       ],
+      "filters-form/filter-code-select.js": [
+        "./dist/src/filters-form/filter-code-select.d.ts"
+      ],
+      "filters-form.js": [
+        "dist/src/filters-form/index.d.ts"
+      ],
       "filter-renderer.js": [
         "dist/src/filter-renderer/index.d.ts"
       ]
@@ -136,18 +143,18 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.19.9",
-    "@operato/data-grist": "^1.19.9",
-    "@operato/font": "^1.19.9",
-    "@operato/form": "^1.19.0",
-    "@operato/graphql": "^1.19.0",
-    "@operato/i18n": "^1.17.9",
-    "@operato/input": "^1.19.7",
-    "@operato/layout": "^1.19.1",
-    "@operato/property-editor": "^1.19.9",
-    "@operato/shell": "^1.19.1",
-    "@operato/styles": "^1.18.0",
-    "@operato/utils": "^1.19.0",
+    "@operato/attachment": "^1.19.10",
+    "@operato/data-grist": "^1.19.10",
+    "@operato/font": "^1.19.10",
+    "@operato/form": "^1.19.10",
+    "@operato/graphql": "^1.19.10",
+    "@operato/i18n": "^1.19.10",
+    "@operato/input": "^1.19.10",
+    "@operato/layout": "^1.19.10",
+    "@operato/property-editor": "^1.19.10",
+    "@operato/shell": "^1.19.10",
+    "@operato/styles": "^1.19.10",
+    "@operato/utils": "^1.19.10",
     "cm6-graphql": "^0.0.12",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
@@ -189,5 +196,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "eed80d424a2ce5a493c1d16f13a68ba1e6d6703d"
+  "gitHead": "79699426eaf4d1b0d476385e44dff8f5f57ff2a7"
 }

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

@@ -0,0 +1,9 @@
+import './ox-input-code-filter.js'
+
+import { html } from 'lit-html'
+
+import { FilterSelectRenderer } from '@operato/data-grist'
+
+export const FilterCodeSelect: FilterSelectRenderer = (column, value, owner) => {
+  return html` <ox-input-code-filter name=${column?.name} .column=${column} .value=${value}></ox-input-code-filter> `
+}

package/src/filters-form/index.ts

@@ -1,6 +1,9 @@
 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])

package/src/filters-form/ox-input-code-filter.ts

@@ -0,0 +1,154 @@
+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 { FilterConfigObject } from '@operato/data-grist'
+import { client, gqlContext } from '@operato/graphql'
+import { OxFormField } from '@operato/input'
+
+type CommonCodeDetail = {
+  name: string
+  description: string
+  rank: number
+}
+
+const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
+{
+  commonCode(name: "${codeName}") {
+    details {
+      name
+      description
+      rank
+    }
+  }
+}
+`
+
+@customElement('ox-input-code-filter')
+export class OxInputCodeFilter extends OxFormField {
+  static styles = css`
+    :host {
+      min-width: 100px;
+    }
+  `
+
+  @property({ type: Object }) column: any
+  @property({ type: String }) value?: string
+
+  @state() codes: CommonCodeDetail[] = []
+
+  render() {
+    const { name, filter } = this.column
+    const operator = (filter as FilterConfigObject).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: CustomEvent) => {
+              let val = e.detail
+              this.value = val?.length > 0 ? val : undefined
+
+              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: any) => {
+                  const checked = e.target.checked
+                  const val = checked ? this.codes!.map((code: CommonCodeDetail) => code.name) : []
+
+                  e.target?.dispatchEvent(new CustomEvent('select', { bubbles: true, detail: val }))
+                }}
+                >${i18next.t('label.all')}</ox-checkbox
+              >
+              ${this.codes
+                ?.filter((code: CommonCodeDetail) => !!code.name)
+                .map(
+                  (code: CommonCodeDetail) => html`
+                    <ox-checkbox
+                      option
+                      value=${code.name}
+                      @change=${(e: any) => {
+                        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: CommonCodeDetail) => !!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: CustomEvent) => {
+              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>
+              ${this.codes?.map(
+                (code: CommonCodeDetail) => html`
+                  <div option value=${code.name}>
+                    ${selectDispOpt.replace('name', code.description).replace('code', code.name)}
+                  </div>
+                `
+              )}
+            </ox-popup-list>
+          </ox-select>
+        `
+  }
+
+  async fetchCodes() {
+    const { codeName } = this.column.record || {}
+
+    if (codeName) {
+      const response = await client.query({
+        query: FETCH_COMMON_CODE_GQL(codeName),
+        context: gqlContext()
+      })
+
+      this.codes = response?.data?.commonCode.details || []
+
+      this.requestUpdate()
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.fetchCodes()
+  }
+}

package/tsconfig.json

@@ -17,6 +17,7 @@
     "rootDir": "./",
     "declaration": true,
     "incremental": true,
+    "skipLibCheck": true,
     "types": ["node", "mocha"]
   },
   "include": ["**/*.ts"]