@operato/app 1.2.52 → 1.3.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.2.52",
+  "version": "1.3.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -26,7 +26,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",
-    "./filter-renderer.js": "./dist/src/filter-renderer/index.js"
+    "./filter-renderer.js": "./dist/src/filter-renderer/index.js",
+    "./filters-form.js": "./dist/src/filters-form/index.js"
   },
   "typesVersions": {
     "*": {
@@ -119,18 +120,18 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.2.52",
-    "@operato/data-grist": "^1.2.52",
-    "@operato/font": "^1.2.52",
-    "@operato/form": "^1.2.46",
-    "@operato/graphql": "^1.2.46",
-    "@operato/i18n": "^1.2.52",
-    "@operato/input": "^1.2.52",
-    "@operato/layout": "^1.2.49",
-    "@operato/property-editor": "^1.2.52",
-    "@operato/shell": "^1.2.49",
-    "@operato/styles": "^1.2.35",
-    "@operato/utils": "^1.2.35",
+    "@operato/attachment": "^1.3.2",
+    "@operato/data-grist": "^1.3.2",
+    "@operato/font": "^1.3.2",
+    "@operato/form": "^1.3.2",
+    "@operato/graphql": "^1.3.2",
+    "@operato/i18n": "^1.3.2",
+    "@operato/input": "^1.3.2",
+    "@operato/layout": "^1.3.2",
+    "@operato/property-editor": "^1.3.2",
+    "@operato/shell": "^1.3.2",
+    "@operato/styles": "^1.3.2",
+    "@operato/utils": "^1.3.2",
     "codemirror": "^5.64.0",
     "codemirror-graphql": "^1.3.2",
     "cronstrue": "^2.2.0",
@@ -156,7 +157,7 @@
     "lint-staged": "^13.2.2",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
-    "typescript": "^5.0.4"
+    "typescript": "5.0.4"
   },
   "customElements": "custom-elements.json",
   "prettier": "@hatiolab/prettier-config",
@@ -171,5 +172,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "e74565a4341831efce940fbac74ffb036289620a"
+  "gitHead": "956de896ec0e99f6673a694d11adf9879649dd68"
 }

package/src/filter-renderer/filter-resource-select.ts

@@ -10,7 +10,7 @@ import { openPopup } from '@operato/layout'
 type SelectedCallback = (value: { id: string; name: string; description: string }) => void
 
 function openResourceSelector(column: ColumnConfig, value: any, confirmCallback: SelectedCallback) {
-  const { queryName, select, list, basicArgs, valueField = 'id' } = column.record.options
+  const { queryName, select, list, basicArgs, valueField = 'id', title } = column.record.options
 
   var actualValue
   if (typeof valueField === 'function') {
@@ -20,33 +20,49 @@ function openResourceSelector(column: ColumnConfig, value: any, confirmCallback:
   }
 
   var template = html`
-    <ox-selector-resource-id
+    <ox-selector-resource-object
       .value=${actualValue}
       .confirmCallback=${confirmCallback}
       .queryName=${queryName}
-      .select=${select}
+      .columns=${select}
       .list=${list}
       .basicArgs=${basicArgs}
       .valueField=${valueField}
-    ></ox-selector-resource-id>
+    ></ox-selector-resource-object>
   `
 
   const popup = openPopup(template, {
     backdrop: true,
     size: 'large',
-    title: i18next.t('title.select_item')
+    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()
+      }
+    }
   })
 }
 
-export const FilterResourceSelect: FilterSelectRenderer = (column, value, owner) => {
+export const FilterResourceSelect: FilterSelectRenderer = (column, value, owner: any) => {
   const filter = column.filter as FilterConfigObject
   const { operator = 'like' } = filter
+  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = column.record.options || {};
+  const hideValue = value ? value[idField] : '';
+  const text = value ? value[nameField] : '';
 
   return operator === 'like'
     ? html` <input
         type="text"
         name=${column.name}
-        .value=${value}
+        .value=${text}
         @change=${(e: CustomEvent) => {
           const input = e.target as HTMLInputElement
           input.dispatchEvent(
@@ -66,23 +82,44 @@ export const FilterResourceSelect: FilterSelectRenderer = (column, value, owner)
     ? html``
     : operator === 'eq'
     ? html`
+        <input name='${column.name}' .value=${hideValue} type="text" hidden></input>
         <input
-          style="min-width: 100px; min-height: 24px"
           type="text"
-          name=${column.name}
-          .value=${value}
+          name='${column.name}_disp'
+          .value=${text}
           readonly
           @click=${(e: Event) => {
             e.stopPropagation()
 
+            const input = e.target as HTMLInputElement;
+
             const confirmCallback = (selected?: { [field: string]: any }) => {
-              var { idField = 'id', nameField = 'name', descriptionField = 'description' } = column.record.options || {}
+              let disp = selected ? selected[idField] : '';
+
+              if(selected && nameField){
+                disp = selected[nameField];
+              }
+
+              input.value = disp;
+
+              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
+                            ? owner.renderRoot.querySelector(`[name="${column.name}"]`)
+                            : owner.renderRoot.querySelector(`form [name="${column.name}"]`);
+
+              const objectValue = selected ? selected[idField] : '';
+              codeInput.value = objectValue;
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
 
               owner.dispatchEvent(
                 new CustomEvent('filter-change', {
                   bubbles: true,
                   composed: true,
-                  detail: selected ? selected[idField] : ''
+                  detail: {
+                    name: column.name,
+                    operator,
+                    value: objectValue
+                  }
                 })
               )
             }

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

@@ -1,5 +1,5 @@
 import '@operato/input/ox-checkbox.js'
-import '../selector/ox-selector-resource-id'
+import '../selector/ox-selector-resource-object'
 
 import { html } from 'lit-html'
 
@@ -10,7 +10,7 @@ import { openPopup } from '@operato/layout'
 type SelectedCallback = (value: { id: string; name: string; description: string }) => void
 
 function openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {
-  const { queryName, select, list, basicArgs, valueField = 'id' } = filter.options || {}
+  const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || {}
 
   var actualValue
   if (typeof valueField === 'function') {
@@ -20,32 +20,48 @@ function openResourceSelector(filter: FilterConfig, value: any, confirmCallback:
   }
 
   var template = html`
-    <ox-selector-resource-id
+    <ox-selector-resource-object
       .value=${actualValue}
       .confirmCallback=${confirmCallback}
       .queryName=${queryName}
-      .select=${select}
+      .columns=${select}
       .list=${list}
       .basicArgs=${basicArgs}
       .valueField=${valueField}
-    ></ox-selector-resource-id>
+    ></ox-selector-resource-object>
   `
 
   const popup = openPopup(template, {
     backdrop: true,
     size: 'large',
-    title: i18next.t('title.select_item')
+    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()
+      }
+    }
   })
 }
 
-export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner) => {
+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] : '';
 
   return operator === 'like'
     ? html` <input
         type="text"
         name=${name}
-        .value=${value}
+        .value=${text}
         @change=${(e: CustomEvent) => {
           const input = e.target as HTMLInputElement
           input.dispatchEvent(
@@ -65,23 +81,42 @@ export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner)
     ? html``
     : operator === 'eq'
     ? html`
-        <input
-          style="min-width: 100px; min-height: 24px"
+        <input name='${name}' .value=${hideValue} type="text" hidden></input>
+        <input 
           type="text"
-          name=${name}
-          .value=${value}
+          name='${name}_disp'
+          .value=${text}
           readonly
           @click=${(e: Event) => {
             e.stopPropagation()
+            const input = e.target as HTMLInputElement;
 
             const confirmCallback = (selected?: { [field: string]: any }) => {
-              var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {}
+              let disp = selected ? selected[idField] : '';
+
+              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}"]`);
+
+              const objectValue = selected ? selected[idField] : '';
+              codeInput.value = objectValue;
+
+              input.dispatchEvent(new Event('change', { bubbles: true }))
 
               owner.dispatchEvent(
                 new CustomEvent('filter-change', {
                   bubbles: true,
                   composed: true,
-                  detail: selected ? selected[idField] : ''
+                  detail: {
+                    name: name,
+                    operator,
+                    value: objectValue
+                  }
                 })
               )
             }