@operato/app 1.1.77 → 1.1.80

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "1.1.77",
+  "version": "1.1.80",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -118,18 +118,18 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^1.1.77",
-    "@operato/data-grist": "^1.1.77",
-    "@operato/font": "^1.1.77",
-    "@operato/form": "^1.1.77",
-    "@operato/graphql": "^1.1.53",
-    "@operato/i18n": "^1.1.53",
-    "@operato/input": "^1.1.77",
-    "@operato/layout": "^1.1.77",
-    "@operato/property-editor": "^1.1.77",
-    "@operato/shell": "^1.1.77",
-    "@operato/styles": "^1.1.77",
-    "@operato/utils": "^1.1.66",
+    "@operato/attachment": "^1.1.80",
+    "@operato/data-grist": "^1.1.80",
+    "@operato/font": "^1.1.80",
+    "@operato/form": "^1.1.79",
+    "@operato/graphql": "^1.1.79",
+    "@operato/i18n": "^1.1.79",
+    "@operato/input": "^1.1.80",
+    "@operato/layout": "^1.1.80",
+    "@operato/property-editor": "^1.1.80",
+    "@operato/shell": "^1.1.79",
+    "@operato/styles": "^1.1.79",
+    "@operato/utils": "^1.1.79",
     "codemirror": "^5.64.0",
     "codemirror-graphql": "^1.3.2",
     "cronstrue": "^2.2.0",
@@ -170,5 +170,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "58e6e0aa8134ef783d85f42bf4e789edc6566f87"
+  "gitHead": "d35d64d05d106e8039e98312414223c5b9c2cb39"
 }

package/src/grist-editor/ox-grist-editor-resource-object.ts

@@ -60,6 +60,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
     }
 
     var {
+      title = '',
       idField = 'id',
       nameField = 'name',
       descriptionField = 'description',
@@ -72,6 +73,11 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       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
 
@@ -131,7 +137,19 @@ export class OxGristEditorResourceObject extends OxGristEditor {
     this.popup = openPopup(template, {
       backdrop: true,
       size: 'large',
-      title: i18next.t('title.select_item')
+      search: {
+        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/ox-property-editor-resource-object.ts

@@ -61,6 +61,7 @@ export class OxPropertyEditorResourceObject extends OxPropertyEditor {
     }
 
     var {
+      title,
       idField = 'id',
       nameField = 'name',
       descriptionField = 'description',
@@ -125,7 +126,19 @@ export class OxPropertyEditorResourceObject extends OxPropertyEditor {
     this.popup = openPopup(template, {
       backdrop: true,
       size: 'large',
-      title: i18next.t('title.select_item')
+      search: {
+        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/selector/ox-selector-resource-object.ts

@@ -1,7 +1,7 @@
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
 import { DataGrist, FetchHandler, GristData, GristEventHandler, GristRecord, ZERO_DATA } from '@operato/data-grist'
@@ -82,7 +82,7 @@ export class OxSelectorResourceObject extends LitElement {
         .selectedRecords=${this.selectedRecords}
       >
         <div id="filters" slot="headroom">
-          <ox-filters-form autofocus></ox-filters-form>
+          <ox-filters-form autofocus without-search></ox-filters-form>
         </div>
       </ox-grist>
 
@@ -94,8 +94,16 @@ export class OxSelectorResourceObject extends LitElement {
     `
   }
 
+  searchText(value: string) {
+    this.grist.searchText = value
+  }
+
+  toggleFilter() {
+    this.grist.toggleHeadroom()
+  }
+
   onEmpty() {
-    this.confirmCallback && this.confirmCallback()
+    this.confirmCallback && this.confirmCallback(null)
     closePopup(this)
   }
 
@@ -158,6 +166,7 @@ export class OxSelectorResourceObject extends LitElement {
 
   async firstUpdated() {
     const config = {
+      list: this.list,
       columns: [
         {
           type: 'gutter',
@@ -229,6 +238,11 @@ export class OxSelectorResourceObject extends LitElement {
         })
       ]
     }
+
+    requestAnimationFrame(() => {
+      /* start with hidden headroom */
+      this.grist.hideHeadroom()
+    })
   }
 
   getQueryFields() {