@operato/app 8.0.0-alpha.4 → 8.0.0-alpha.41

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-alpha.4",
+  "version": "8.0.0-alpha.41",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -29,6 +29,8 @@
     "./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-resource-code.js": "./dist/src/filters-form/filter-resource-code.js",
+    "./filters-form/filter-resource-object.js": "./dist/src/filters-form/filter-resource-object.js",
     "./filter-renderer.js": "./dist/src/filter-renderer/index.js",
     "./filters-form.js": "./dist/src/filters-form/index.js"
   },
@@ -97,6 +99,15 @@
       "grist-editor/ox-grist-editor-resource-code.js": [
         "dist/src/grist-editor/ox-grist-editor-resource-code.d.ts"
       ],
+      "filters-form/filter-resource-code.js": [
+        "./dist/src/filters-form/filter-resource-code.d.ts"
+      ],
+      "filters-form/filter-resource-object.js": [
+        "./dist/src/filters-form/filter-resource-object.d.ts"
+      ],
+      "filters-form.js": [
+        "dist/src/filters-form/index.d.ts"
+      ],
       "filter-renderer.js": [
         "dist/src/filter-renderer/index.d.ts"
       ]
@@ -136,18 +147,18 @@
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/web": "^2.0.0",
-    "@operato/attachment": "^8.0.0-alpha.4",
-    "@operato/data-grist": "^8.0.0-alpha.4",
-    "@operato/font": "^8.0.0-alpha.4",
-    "@operato/form": "^8.0.0-alpha.4",
-    "@operato/graphql": "^8.0.0-alpha.0",
-    "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.4",
-    "@operato/layout": "^8.0.0-alpha.4",
-    "@operato/property-editor": "^8.0.0-alpha.4",
-    "@operato/shell": "^8.0.0-alpha.4",
-    "@operato/styles": "^8.0.0-alpha.4",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/attachment": "^8.0.0-alpha.41",
+    "@operato/data-grist": "^8.0.0-alpha.41",
+    "@operato/font": "^8.0.0-alpha.41",
+    "@operato/form": "^8.0.0-alpha.41",
+    "@operato/graphql": "^8.0.0-alpha.37",
+    "@operato/i18n": "^8.0.0-alpha.37",
+    "@operato/input": "^8.0.0-alpha.41",
+    "@operato/layout": "^8.0.0-alpha.41",
+    "@operato/property-editor": "^8.0.0-alpha.41",
+    "@operato/shell": "^8.0.0-alpha.41",
+    "@operato/styles": "^8.0.0-alpha.37",
+    "@operato/utils": "^8.0.0-alpha.37",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
@@ -157,17 +168,17 @@
     "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@open-wc/testing": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -188,5 +199,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ac097b448ea96721b3418132e92988afdf764519"
+  "gitHead": "0c2adcc994cd105055c9355810fa9c7c8196ca41"
 }

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

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

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

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

package/src/filters-form/index.ts

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

package/src/filters-form/ox-filter-resource-code.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-filter-resource-code')
+export class OxFilterResourceCode 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) {
+      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/filters-form/ox-filter-resource-object.ts

@@ -0,0 +1,224 @@
+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, PopupHandle } from '@operato/layout'
+import { OxFormField } from '@operato/input'
+
+@customElement('ox-filter-resource-object')
+export class OxFilterResourceObject extends OxFormField {
+  static 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);
+      }
+    `
+  ]
+
+  @property({ type: Object }) column: any
+  @property({ type: String }) value?: string
+
+  @state() resourceObject?: any
+
+  private popup?: PopupHandle
+
+  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: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    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?: { [field: string]: any }) => {
+      // this.department = selected
+      //   ? {
+      //       id: selected.id,
+      //       controlNo: selected.controlNo,
+      //       name: selected.name,
+      //       description: selected.description
+      //     }
+      //   : null
+
+      // this.value = this.department?.name
+
+      // this.dispatchEvent(
+      //   new CustomEvent('change', {
+      //     bubbles: true,
+      //     composed: true,
+      //     detail: this.value
+      //   })
+      // )
+
+      this.resourceObject = selected
+        ? {
+            ...(columns || [])
+              .map((field: any) => field.name)
+              .reduce(
+                (obj: { [field: string]: any }, fieldName: string) => {
+                  return (obj = {
+                    ...obj,
+                    [fieldName]: selected[fieldName]
+                  })
+                },
+                {} as { [field: string]: any }
+              ),
+            [idField]: selected[idField],
+            [nameField]: selected[nameField],
+            [descriptionField]: selected[descriptionField]
+          }
+        : null
+
+      this.value = this.resourceObject?.[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: any, value: any) => {
+          /* instance: template instance */
+          instance.searchText(value)
+        }
+      },
+      filter: {
+        handler: (instance: any) => {
+          /* instance: template instance */
+          instance.toggleFilter()
+        }
+      }
+    })
+  }
+}

package/src/property-editor/index.ts

@@ -11,6 +11,7 @@ import '@operato/property-editor/ox-property-editor-data.js'
 import '@operato/property-editor/ox-property-editor-date.js'
 import '@operato/property-editor/ox-property-editor-month.js'
 import '@operato/property-editor/ox-property-editor-time.js'
+import '@operato/property-editor/ox-property-editor-datetime.js'
 import '@operato/property-editor/ox-property-editor-checkbox.js'
 import '@operato/property-editor/ox-property-editor-options.js'
 import '@operato/property-editor/ox-property-editor-select.js'
@@ -55,6 +56,7 @@ OxPropertyEditor.register({
   select: 'ox-property-editor-select',
   date: 'ox-property-editor-date',
   month: 'ox-property-editor-month',
+  datetime: 'ox-property-editor-datetime',
   time: 'ox-property-editor-time',
   options: 'ox-property-editor-options',
   data: 'ox-property-editor-data',