@operato/app 8.0.0-alpha.15 → 8.0.0-alpha.19

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.15",
+  "version": "8.0.0-alpha.19",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -147,15 +147,15 @@
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/web": "^2.0.0",
-    "@operato/attachment": "^8.0.0-alpha.10",
-    "@operato/data-grist": "^8.0.0-alpha.10",
-    "@operato/font": "^8.0.0-alpha.10",
-    "@operato/form": "^8.0.0-alpha.11",
+    "@operato/attachment": "^8.0.0-alpha.19",
+    "@operato/data-grist": "^8.0.0-alpha.19",
+    "@operato/font": "^8.0.0-alpha.19",
+    "@operato/form": "^8.0.0-alpha.19",
     "@operato/graphql": "^8.0.0-alpha.0",
     "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.10",
+    "@operato/input": "^8.0.0-alpha.19",
     "@operato/layout": "^8.0.0-alpha.4",
-    "@operato/property-editor": "^8.0.0-alpha.10",
+    "@operato/property-editor": "^8.0.0-alpha.19",
     "@operato/shell": "^8.0.0-alpha.4",
     "@operato/styles": "^8.0.0-alpha.4",
     "@operato/utils": "^8.0.0-alpha.0",
@@ -199,5 +199,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5ec48dd6e6f1d751e3c780e8634b23599b2f170c"
+  "gitHead": "9656b17ec8476c2eeace042a4e561161539e81e7"
 }

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

@@ -1,7 +1,7 @@
 import '../selector/ox-selector-resource-object.js'
 
-import { css, html, TemplateResult } from 'lit'
-import { customElement, property } from 'lit/decorators.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'
@@ -9,21 +9,68 @@ import { OxFormField } from '@operato/input'
 
 @customElement('ox-filter-resource-object')
 export class OxFilterResourceObject extends OxFormField {
-  static styles = css`
-    :host {
-      min-width: 100px;
-    }
-  `
+  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: Object }) value?: any
+  @property({ type: String }) value?: string
+
+  @state() resourceObject?: any
 
   private popup?: PopupHandle
 
   render() {
-    var value = this.value || {}
     var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
 
+    var value = this.resourceObject || {}
     var name, description
 
     if (typeof nameField === 'function') {
@@ -39,9 +86,10 @@ export class OxFilterResourceObject extends OxFormField {
     }
 
     return html`
-      ${!value
-        ? html`<span tabindex="0"></span>`
-        : html` <span tabindex="0" style="flex:1">${name || ''}${description || ''}</span> `}
+      <div @click=${this._onclick} @keydown=${this._onkeydown}>
+        <span tabindex="0" style="flex:1">${name || ''}${(description && `(${description})`) || ''}</span>
+        <md-icon>search</md-icon>
+      </div>
     `
   }
 
@@ -86,7 +134,26 @@ export class OxFilterResourceObject extends OxFormField {
     columns = columns || select
 
     const confirmCallback = (selected?: { [field: string]: any }) => {
-      this.value = selected
+      // 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)
@@ -105,6 +172,8 @@ export class OxFilterResourceObject extends OxFormField {
           }
         : null
 
+      this.value = this.resourceObject?.[nameField]
+
       this.dispatchEvent(
         new CustomEvent('change', {
           detail: this.value
@@ -112,7 +181,7 @@ export class OxFilterResourceObject extends OxFormField {
       )
     }
 
-    var value = this.value || {}
+    var value = this.resourceObject || {}
     var actualValue
     if (typeof valueField === 'function') {
       actualValue = valueField(value)