@operato/app 2.0.0-alpha.23 → 2.0.0-alpha.24

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.23",
+  "version": "2.0.0-alpha.24",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -139,7 +139,7 @@
     "@operato/attachment": "^2.0.0-alpha.23",
     "@operato/data-grist": "^2.0.0-alpha.23",
     "@operato/font": "^2.0.0-alpha.23",
-    "@operato/form": "^2.0.0-alpha.23",
+    "@operato/form": "^2.0.0-alpha.24",
     "@operato/graphql": "^2.0.0-alpha.0",
     "@operato/i18n": "^2.0.0-alpha.0",
     "@operato/input": "^2.0.0-alpha.20",
@@ -189,5 +189,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "a8741296e49c13e6e3fd2894e8bd1618e72bd558"
+  "gitHead": "f94620593af2557943d20c34162d0e9ccc084c2c"
 }

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

@@ -6,22 +6,16 @@ import { html } from 'lit-html'
 import { FilterConfig, FilterSelectRenderer } from '@operato/form'
 import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
+import { GristRecord } from '@operato/data-grist'
 
-type SelectedCallback = (value: { id: string; name: string; description: string }) => void
+type SelectedCallback = (value?: Partial<GristRecord>) => void
 
 function openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {
   const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || {}
 
-  var actualValue
-  if (typeof valueField === 'function') {
-    actualValue = valueField(value)
-  } else {
-    actualValue = value?.[valueField]
-  }
-
   var template = html`
     <ox-selector-resource-object
-      .value=${actualValue}
+      .value=${value}
       .confirmCallback=${confirmCallback}
       .queryName=${queryName}
       .columns=${select}
@@ -53,9 +47,9 @@ function openResourceSelector(filter: FilterConfig, value: any, confirmCallback:
 
 export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner: any) => {
   const { name, operator = 'like' } = filter
-  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {};
-  const hideValue = value ? value[idField] : '';
-  const text = value ? value[nameField] : '';
+  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {}
+  const hideValue = value ? value[idField] : ''
+  const text = value ? value[nameField] : ''
 
   return operator === 'like'
     ? html` <input
@@ -87,26 +81,33 @@ export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner:
           name='${name}_disp'
           .value=${text}
           readonly
+          @change=${() => false}
           @click=${(e: Event) => {
             e.stopPropagation()
-            const input = e.target as HTMLInputElement;
+
+            const input = e.target as HTMLInputElement
+            const codeInput =
+              owner.tagName.toLowerCase() == 'ox-grid-header'
+                ? owner.renderRoot.querySelector(`[name="${name}"]`)
+                : owner.renderRoot.querySelector(`form [name="${name}"]`)
 
             const confirmCallback = (selected?: { [field: string]: any }) => {
-              let disp = selected ? selected[idField] : '';
+              let disp = selected ? selected[idField] : ''
 
-              if(selected && nameField){
-                disp = selected[nameField];
+              if (selected && nameField) {
+                disp = selected[nameField]
               }
-              input.value = disp;
-
-              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
-                            ? owner.renderRoot.querySelector(`[name="${name}"]`)
-                            : owner.renderRoot.querySelector(`form [name="${name}"]`);
+              input.value = disp
 
-              const objectValue = selected ? selected[idField] : '';
-              codeInput.value = objectValue;
+              const value = selected ? selected[idField] : ''
+              codeInput.value = value
 
-              input.dispatchEvent(new Event('change', { bubbles: true }))
+              codeInput.dispatchEvent(
+                new Event('change', {
+                  bubbles: true,
+                  composed: true
+                })
+              )
 
               owner.dispatchEvent(
                 new CustomEvent('filter-change', {
@@ -115,13 +116,13 @@ export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner:
                   detail: {
                     name: name,
                     operator,
-                    value: objectValue
+                    value
                   }
                 })
               )
             }
 
-            openResourceSelector(filter, value, confirmCallback)
+            openResourceSelector(filter, codeInput.value, confirmCallback)
           }}
         />
       `

package/src/selector/ox-selector-resource-object.ts

@@ -61,7 +61,7 @@ export class OxSelectorResourceObject extends LitElement {
   @property({ type: String }) queryName!: string
   @property({ type: Object }) basicArgs: any
   @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include
-  @property({ type: Object }) confirmCallback?: (record?: GristRecord | null) => void
+  @property({ type: Object }) confirmCallback?: (record?: Partial<GristRecord>) => void
   @property({ type: Array }) selectedRecords: GristRecord[] = []
 
   @property({ type: Array }) searchFields: any
@@ -114,7 +114,7 @@ export class OxSelectorResourceObject extends LitElement {
   }
 
   onEmpty() {
-    this.confirmCallback && this.confirmCallback(null)
+    this.confirmCallback && this.confirmCallback()
     closePopup(this)
   }