@operato/app 1.19.10 → 1.19.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.19.10",
+  "version": "1.19.13",
   "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"
       ]
@@ -132,19 +139,21 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.1",
     "@graphql-tools/delegate": "^10.0.1",
-    "@graphql-tools/wrap": "^8.5.0",
+    "@graphql-tools/load": "^8.0.12",
+    "@graphql-tools/schema": "^10.0.16",
+    "@graphql-tools/url-loader": "^8.0.24",
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.19.10",
-    "@operato/data-grist": "^1.19.10",
-    "@operato/font": "^1.19.10",
+    "@operato/attachment": "^1.19.13",
+    "@operato/data-grist": "^1.19.13",
+    "@operato/font": "^1.19.13",
     "@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/input": "^1.19.13",
+    "@operato/layout": "^1.19.13",
+    "@operato/property-editor": "^1.19.13",
     "@operato/shell": "^1.19.10",
     "@operato/styles": "^1.19.10",
     "@operato/utils": "^1.19.10",
@@ -189,5 +198,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "a2e152f67e86309e4644814e00202254f7a59247"
+  "gitHead": "20b4eee2566c09eee30456483155e8d3ac7445d5"
 }

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/src/input/ox-input-graphql.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { fetch } from 'cross-fetch'
-import { print } from 'graphql'
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { graphql } from 'cm6-graphql'
@@ -14,7 +12,9 @@ import { bracketMatching, syntaxHighlighting } from '@codemirror/language'
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
 import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
 
-import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
+import { makeExecutableSchema } from '@graphql-tools/schema'
+import { loadSchema } from '@graphql-tools/load'
+import { UrlLoader } from '@graphql-tools/url-loader'
 import { GRAPHQL_URI } from '@operato/graphql'
 import { OxFormField } from '@operato/input'
 import { togglefullscreen } from '@operato/utils'
@@ -66,24 +66,16 @@ export default class OxInputGraphql extends OxFormField {
   }
 
   async getSchema() {
-    const executor = async ({ document, variables }: any) => {
-      const query = print(document)
-      const uri = this.link || GRAPHQL_URI
-
-      const fetchResult = await fetch(uri, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ query, variables })
-      })
-      return fetchResult.json()
-    }
+    const uri = this.link || GRAPHQL_URI
 
-    return await wrapSchema({
-      schema: await introspectSchema(executor),
-      executor
+    const schema = await loadSchema(uri, {
+      loaders: [new UrlLoader()],
+      headers: {
+        'Content-Type': 'application/json'
+      }
     })
+
+    return makeExecutableSchema({ typeDefs: schema, resolvers: {} })
   }
 
   async getEditor() {