@operato/app 1.0.0-beta.9 → 1.0.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "WebApplication production supporting components following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -20,15 +20,12 @@
     "./grist-editor/ox-grist-renderer-resource-id.js": "./dist/src/grist-editor/ox-grist-renderer-resource-id.js",
     "./grist-editor/ox-selector-resource-object.js": "./dist/src/grist-editor/ox-selector-resource-object.js",
     "./grist-editor/ox-grist-renderer-resource-object.js": "./dist/src/grist-editor/ox-grist-renderer-resource-object.js",
-    "./grist-editor/ox-grist-editor-crontab.js": "./dist/src/grist-editor/ox-grist-editor-crontab.js",
     "./grist-editor/ox-grist-renderer-crontab.js": "./dist/src/grist-editor/ox-grist-renderer-crontab.js",
     "./grist-editor/ox-grist-editor-json.js": "./dist/src/grist-editor/ox-grist-editor-json.js",
     "./grist-editor/ox-grist-editor-code.js": "./dist/src/grist-editor/ox-grist-editor-code.js",
     "./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",
-    "./grist-editor/ox-grist-editor-parameters.js": "./dist/src/grist-editor/ox-grist-editor-parameters.js",
-    "./grist-editor/ox-grist-editor-value-map.js": "./dist/src/grist-editor/ox-grist-editor-value-map.js",
-    "./grist-editor/ox-grist-editor-partition-keys.js": "./dist/src/grist-editor/ox-grist-editor-partition-keys.js",
     "./filter-renderer.js": "./dist/src/filter-renderer/index.js"
   },
   "publishConfig": {
@@ -53,31 +50,29 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@graphql-tools/load": "^7.3.2",
-    "@graphql-tools/url-loader": "^7.2.0",
-    "@graphql-tools/wrap": "^8.1.1",
-    "@material/mwc-button": "^0.25.3",
-    "@material/mwc-icon": "^0.25.3",
-    "@material/mwc-icon-button": "^0.25.3",
-    "@operato/attachment": "^1.0.0-beta.9",
-    "@operato/data-grist": "^1.0.0-beta.9",
-    "@operato/font": "^1.0.0-beta.9",
-    "@operato/form": "^1.0.0-beta.9",
-    "@operato/graphql": "^1.0.0-beta.9",
-    "@operato/i18n": "^1.0.0-beta.9",
-    "@operato/input": "^1.0.0-beta.9",
-    "@operato/layout": "^1.0.0-beta.9",
-    "@operato/property-editor": "^1.0.0-beta.9",
-    "@operato/shell": "^1.0.0-beta.9",
-    "@operato/styles": "^1.0.0-beta.9",
-    "@operato/utils": "^1.0.0-beta.9",
-    "codemirror": "^5.59.1",
-    "codemirror-graphql": "^0.15.2",
+    "@graphql-tools/wrap": "^8.5.0",
+    "@material/mwc-button": "^0.26.1",
+    "@material/mwc-icon": "^0.26.1",
+    "@material/mwc-icon-button": "^0.26.1",
+    "@operato/attachment": "^1.0.1",
+    "@operato/data-grist": "^1.0.1",
+    "@operato/font": "^1.0.1",
+    "@operato/form": "^1.0.1",
+    "@operato/graphql": "^1.0.0",
+    "@operato/i18n": "^1.0.0",
+    "@operato/input": "^1.0.1",
+    "@operato/layout": "^1.0.1",
+    "@operato/property-editor": "^1.0.1",
+    "@operato/shell": "^1.0.1",
+    "@operato/styles": "^1.0.0",
+    "@operato/utils": "^1.0.1",
+    "codemirror": "^5.64.0",
+    "codemirror-graphql": "^1.3.2",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
-    "graphql": "^15.7.2",
+    "graphql": "^16.5.0",
     "graphql-tag": "^2.12.6",
-    "lit": "^2.2.1"
+    "lit": "^2.2.7"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -87,12 +82,12 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@web/dev-server-storybook": "^0.5.0",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
+    "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -111,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "606d63e98857aa60d32673f388a9e7cc5c8aa714"
+  "gitHead": "dcd7b17f0019192e7c052bcf524acc2902e16367"
 }

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

@@ -0,0 +1,94 @@
+import '@operato/input/ox-checkbox.js'
+import '../grist-editor/ox-selector-resource-id'
+
+import { html } from 'lit-html'
+
+import { FilterConfig, FilterSelectRenderer } from '@operato/form'
+import { i18next } from '@operato/i18n'
+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 || {}
+
+  var actualValue
+  if (typeof valueField === 'function') {
+    actualValue = valueField(value)
+  } else {
+    actualValue = value?.[valueField]
+  }
+
+  var template = html`
+    <ox-selector-resource-id
+      .value=${actualValue}
+      .confirmCallback=${confirmCallback}
+      .queryName=${queryName}
+      .select=${select}
+      .list=${list}
+      .basicArgs=${basicArgs}
+      .valueField=${valueField}
+    ></ox-selector-resource-id>
+  `
+
+  const popup = openPopup(template, {
+    backdrop: true,
+    size: 'large',
+    title: i18next.t('title.select_item')
+  })
+}
+
+export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner) => {
+  const { name, operator = 'like' } = filter
+
+  return operator === 'like'
+    ? html` <input
+        type="text"
+        name=${name}
+        .value=${value}
+        @change=${(e: CustomEvent) => {
+          const input = e.target as HTMLInputElement
+          input.dispatchEvent(
+            new CustomEvent('filter-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                name,
+                operator,
+                value: input.value
+              }
+            })
+          )
+        }}
+      />`
+    : operator == 'in'
+    ? html``
+    : operator === 'eq'
+    ? html`
+        <input
+          style="min-width: 100px; min-height: 24px"
+          type="text"
+          name=${name}
+          .value=${value}
+          readonly
+          @click=${(e: Event) => {
+            e.stopPropagation()
+
+            const confirmCallback = (selected?: { [field: string]: any }) => {
+              var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {}
+
+              owner.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: selected ? selected[idField] : ''
+                })
+              )
+            }
+
+            openResourceSelector(filter, value, confirmCallback)
+          }}
+        />
+      `
+    : html``
+}

package/src/filters-form/index.ts

@@ -0,0 +1,6 @@
+import { registerFilterRenderer } from '@operato/form'
+
+import { FilterResourceSelect } from './filter-resource-select.js'
+
+registerFilterRenderer('resource-object', [FilterResourceSelect])
+registerFilterRenderer('resource-id', [FilterResourceSelect])

package/src/grist-editor/index.ts

@@ -1,14 +1,10 @@
 import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
 
-import { OxGristEditorCrontab } from './ox-grist-editor-crontab.js'
 import { OxGristEditorJson } from './ox-grist-editor-json.js'
-import { OxGristEditorParameters } from './ox-grist-editor-parameters.js'
-import { OxGristEditorPartitionKeys } from './ox-grist-editor-partition-keys.js'
 import { OxGristEditorResourceCode } from './ox-grist-editor-resource-code.js'
 import { OxGristEditorResourceId } from './ox-grist-editor-resource-id.js'
 import { OxGristEditorResourceObject } from './ox-grist-editor-resource-object.js'
-import { OxGristEditorValueMap } from './ox-grist-editor-value-map.js'
-import { OxGristRendererCrontab } from './ox-grist-renderer-crontab.js'
+import { OxGristRendererCrontab } from './ox-grist-renderer-crontab'
 import { OxGristRendererResourceId } from './ox-grist-renderer-resource-id.js'
 import { OxGristRendererResourceObject } from './ox-grist-renderer-resource-object.js'
 
@@ -16,10 +12,6 @@ import { OxGristRendererResourceObject } from './ox-grist-renderer-resource-obje
 registerEditor('resource-id', OxGristEditorResourceId)
 registerEditor('resource-object', OxGristEditorResourceObject)
 registerEditor('resource-code', OxGristEditorResourceCode)
-registerEditor('parameters', OxGristEditorParameters)
-registerEditor('value-map', OxGristEditorValueMap)
-registerEditor('partition-keys', OxGristEditorPartitionKeys)
-registerEditor('crontab', OxGristEditorCrontab)
 registerEditor('json', OxGristEditorJson)
 
 registerRenderer('resource-id', OxGristRendererResourceId)

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

@@ -0,0 +1,123 @@
+import './ox-selector-resource-object-legacy.js'
+
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
+
+@customElement('ox-grist-editor-resource-object-legacy')
+export class OxGristEditorResourceObjectLegacy extends OxGristEditor {
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  get editorTemplate() {
+    var value = this.value || {}
+
+    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
+    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` ${!value ? html`` : html` <span style="flex:1">${name || ''}${description || ''}</span> `} `
+  }
+
+  async firstUpdated() {
+    this.template = ((this.column.record || {}).options || {}).template
+
+    await this.updateComplete
+
+    this.renderRoot.addEventListener('click', e => {
+      e.stopPropagation()
+
+      this.openSelector()
+    })
+
+    this.openSelector()
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    var {
+      idField = 'id',
+      nameField = 'name',
+      descriptionField = 'description',
+      valueField = 'id',
+      queryName,
+      basicArgs,
+      select,
+      list
+    } = this.column.record.options || {}
+
+    const confirmCallback = (selected?: { [field: string]: any }) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected
+              ? {
+                  ...(this.column.record.options.select || [])
+                    .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,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var value = this.value || {}
+    var actualValue
+    if (typeof valueField === 'function') {
+      actualValue = valueField(value)
+    } else {
+      actualValue = value[valueField]
+    }
+
+    var template =
+      this.template ||
+      html`
+        <ox-selector-resource-object-legacy
+          .value=${actualValue}
+          .confirmCallback=${confirmCallback.bind(this)}
+          .queryName=${queryName}
+          .select=${select}
+          .list=${list}
+          .basicArgs=${basicArgs}
+          .valueField=${valueField}
+        ></ox-selector-resource-object-legacy>
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select_item')
+    })
+  }
+}

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

@@ -1,4 +1,3 @@
-import '@material/mwc-icon'
 import './ox-selector-resource-object.js'
 
 import { html, TemplateResult } from 'lit'
@@ -30,10 +29,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       description = value[descriptionField] && `(${value[descriptionField]})`
     }
 
-    return html`
-      ${!value ? html`` : html` <span>${name || ''}${description || ''}</span> `}
-      <mwc-icon>arrow_drop_down</mwc-icon>
-    `
+    return html` ${!value ? html`` : html` <span style="flex:1">${name || ''}${description || ''}</span> `} `
   }
 
   async firstUpdated() {
@@ -55,9 +51,22 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       delete this.popup
     }
 
-    const confirmCallback = (selected?: { [field: string]: any }) => {
-      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
+    var {
+      idField = 'id',
+      nameField = 'name',
+      descriptionField = 'description',
+      valueField = 'id',
+      queryName,
+      basicArgs,
+      select,
+      columns,
+      list
+    } = this.column.record.options || {}
+
+    /* select options is only for compatability, it might be able to be deprecated. */
+    columns = columns || select
 
+    const confirmCallback = (selected?: { [field: string]: any }) => {
       this.dispatchEvent(
         new CustomEvent('field-change', {
           bubbles: true,
@@ -66,7 +75,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
             before: this.value,
             after: selected
               ? {
-                  ...(this.column.record.options.select || [])
+                  ...(columns || [])
                     .map((field: any) => field.name)
                     .reduce((obj: { [field: string]: any }, fieldName: string) => {
                       return (obj = {
@@ -88,7 +97,6 @@ export class OxGristEditorResourceObject extends OxGristEditor {
     }
 
     var value = this.value || {}
-    var valueField: string | ((item: any) => any) = this.column.record.options.valueField || 'id'
     var actualValue
     if (typeof valueField === 'function') {
       actualValue = valueField(value)
@@ -102,11 +110,11 @@ export class OxGristEditorResourceObject extends OxGristEditor {
         <ox-selector-resource-object
           .value=${actualValue}
           .confirmCallback=${confirmCallback.bind(this)}
-          .queryName=${this.column.record.options.queryName}
-          .select=${this.column.record.options.select}
-          .list=${this.column.record.options.list}
-          .basicArgs=${this.column.record.options.basicArgs}
-          .valueField=${this.column.record.options.valueField}
+          .queryName=${queryName}
+          .columns=${columns}
+          .list=${list}
+          .basicArgs=${basicArgs}
+          .valueField=${valueField}
         ></ox-selector-resource-object>
       `
 

package/src/grist-editor/ox-grist-renderer-crontab.ts

@@ -1,8 +1,9 @@
-import { FieldRenderer } from '@operato/data-grist'
 import cronstrue from 'cronstrue/i18n'
-import { detectOverflow } from '@operato/utils'
-import { html } from 'lit'
 import i18next from 'i18next'
+import { html } from 'lit'
+
+import { FieldRenderer } from '@operato/data-grist'
+import { detectOverflow } from '@operato/utils'
 
 function onmouseover(e: Event) {
   const element = e.target as HTMLSpanElement
@@ -21,7 +22,7 @@ export const OxGristRendererCrontab: FieldRenderer = (value, column, record, row
 
   try {
     const language = (i18next.language || 'en').substring(0, 2)
-    text = value === undefined ? '' : cronstrue.toString(value, { locale: language || 'en' })
+    text = !value ? '' : cronstrue.toString(value, { locale: language || 'en' })
   } catch (e) {
     console.error(e)
   }

package/src/grist-editor/ox-grist-renderer-resource-id.ts

@@ -7,7 +7,11 @@ export const OxGristRendererResourceId: FieldRenderer = (value, column, record,
     return ''
   }
 
-  var { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
+  const { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
 
-  return html`<span>${value[nameField] || ''}(${value[descriptionField] || ''})</span> `
+  const name = value[nameField] || ''
+  const description = value[descriptionField] || ''
+  const suffix = description ? `(${description})` : ''
+
+  return html`<span>${name}${suffix}</span> `
 }

package/src/grist-editor/ox-popup-code-input.ts

@@ -1,10 +1,11 @@
 import '@operato/input/ox-input-code.js'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { ScrollbarStyles } from '@operato/styles'
 import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-code-input')
 export class OxPopupCodeInput extends LitElement {
@@ -55,11 +56,11 @@ export class OxPopupCodeInput extends LitElement {
   }
 
   private onCancel(e: Event) {
-    history.back()
+    closePopup(this)
   }
 
   private onConfirm(e: Event) {
     this.confirmCallback && this.confirmCallback(this.value)
-    history.back()
+    closePopup(this)
   }
 }

package/src/grist-editor/ox-selector-resource-id.ts

@@ -7,6 +7,7 @@ import { customElement, property, query } from 'lit/decorators.js'
 import { DataGrist, FetchOption, GristData, GristRecord, ZERO_DATA } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
 import { isMobileDevice } from '@operato/utils'
 
 @customElement('ox-selector-resource-id')
@@ -61,7 +62,7 @@ export class OxSelectorResourceId extends LitElement {
         .selectedRecords=${this.selectedRecords}
       >
         <div id="filters" slot="headroom">
-          <ox-filters-form></ox-filters-form>
+          <ox-filters-form autofocus></ox-filters-form>
         </div>
       </ox-grist>
 
@@ -75,16 +76,16 @@ export class OxSelectorResourceId extends LitElement {
 
   onempty() {
     this.confirmCallback && this.confirmCallback()
-    history.back()
+    closePopup(this)
   }
 
   oncancel() {
-    history.back()
+    closePopup(this)
   }
 
   onconfirm() {
     this.confirmCallback && this.confirmCallback(this.selected)
-    history.back()
+    closePopup(this)
   }
 
   async firstUpdated() {