@operato/app 8.0.0-beta.0 → 8.0.0-beta.1

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

@@ -1,224 +0,0 @@
-import '../selector/ox-selector-resource-object.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'
-import { OxFormField } from '@operato/input'
-
-@customElement('ox-filter-resource-object')
-export class OxFilterResourceObject extends OxFormField {
-  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: String }) value?: string
-
-  @state() resourceObject?: any
-
-  private popup?: PopupHandle
-
-  render() {
-    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-
-    var value = this.resourceObject || {}
-    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`
-      <div @click=${this._onclick} @keydown=${this._onkeydown}>
-        <span tabindex="0" style="flex:1">${name || ''}${(description && `(${description})`) || ''}</span>
-        <md-icon>search</md-icon>
-      </div>
-    `
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.openSelector()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.openSelector()
-    }
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    var {
-      title = '',
-      idField = 'id',
-      nameField = 'name',
-      descriptionField = 'description',
-      valueField = 'id',
-      queryName,
-      basicArgs,
-      select,
-      columns,
-      pagination,
-      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
-
-    const confirmCallback = (selected?: { [field: string]: any }) => {
-      // 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)
-              .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
-
-      this.value = this.resourceObject?.[nameField]
-
-      this.dispatchEvent(
-        new CustomEvent('change', {
-          detail: this.value
-        })
-      )
-    }
-
-    var value = this.resourceObject || {}
-    var actualValue
-    if (typeof valueField === 'function') {
-      actualValue = valueField(value)
-    } else {
-      actualValue = value[valueField]
-    }
-
-    var template = html`
-      <ox-selector-resource-object
-        .value=${actualValue}
-        .confirmCallback=${confirmCallback.bind(this)}
-        .queryName=${queryName}
-        .columns=${columns}
-        .pagination=${pagination}
-        .list=${list}
-        .basicArgs=${basicArgs}
-        .valueField=${valueField}
-      ></ox-selector-resource-object>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      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()
-        }
-      }
-    })
-  }
-}

package/src/grist-editor/index.ts

@@ -1,26 +0,0 @@
-import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
-
-import { OxGristEditorJson } from './ox-grist-editor-json.js'
-import { OxGristEditorCode } from './ox-grist-editor-code.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 { OxGristRendererCrontab } from './ox-grist-renderer-crontab'
-import { OxGristRendererResourceId } from './ox-grist-renderer-resource-id.js'
-import { OxGristRendererResourceCode } from './ox-grist-renderer-resource-code.js'
-import { OxGristRendererResourceObject } from './ox-grist-renderer-resource-object.js'
-
-/* register grist renderer/editor for id */
-registerEditor('resource-id', OxGristEditorResourceId)
-registerEditor('resource-code', OxGristEditorResourceCode)
-registerEditor('resource-object', OxGristEditorResourceObject)
-registerEditor('json', OxGristEditorJson)
-registerEditor('template', OxGristEditorCode)
-
-registerRenderer('resource-id', OxGristRendererResourceId)
-registerRenderer('resource-code', OxGristRendererResourceId)
-registerRenderer('resource-object', OxGristRendererResourceObject)
-registerRenderer('parameters', OxGristRendererJson5)
-registerRenderer('value-map', OxGristRendererJson5)
-registerRenderer('partition-keys', OxGristRendererJson5)
-registerRenderer('crontab', OxGristRendererCrontab)

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

@@ -1,64 +0,0 @@
-import './ox-popup-code-input.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxGristEditor } from '@operato/data-grist'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-grist-editor-code')
-export class OxGristEditorCode extends OxGristEditor {
-  get editorTemplate() {
-    return html` <div tabindex="0">${this.value || ''}</div> `
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.showEditorPopup()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.showEditorPopup()
-    }
-  }
-
-  showEditorPopup() {
-    var { mode, language = 'javascript' } = this.column.record?.options || {}
-
-    var change = (value: string) => {
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: value,
-            column: this.column,
-            record: this.record,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var popup = openPopup(
-      html`
-        <ox-popup-code-input
-          .value=${this.value}
-          mode=${mode}
-          .confirmCallback=${change.bind(this)}
-          language=${language}
-        ></ox-popup-code-input>
-      `,
-      {
-        backdrop: true,
-        title: i18next.t('title.edit code'),
-        help: 'data-grist/grist-editor/code'
-      }
-    )
-  }
-}

package/src/grist-editor/ox-grist-editor-json.ts

@@ -1,64 +0,0 @@
-import './ox-popup-code-input.js'
-
-import { OxGristEditor } from '@operato/data-grist'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-grist-editor-json')
-export class OxGristEditorJson extends OxGristEditor {
-  get editorTemplate() {
-    return html` <div tabindex="0">${this.value || ''}</div> `
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.showEditorPopup()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.showEditorPopup()
-    }
-  }
-
-  showEditorPopup() {
-    var change = (value: string) => {
-      this.dispatchEvent(
-        new CustomEvent('change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: value,
-            column: this.column,
-            record: this.record,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var popup = openPopup(
-      html`
-        <ox-popup-code-input
-          .value=${this.value}
-          mode="javascript"
-          @change=${(e: CustomEvent) => {
-            change(e.detail.value)
-            popup.close()
-          }}
-          lanugage="json"
-        ></ox-popup-code-input>
-      `,
-      {
-        backdrop: true,
-        title: i18next.t('title.edit json'),
-        help: 'data-grist/grist-editor/json'
-      }
-    )
-  }
-}

package/src/grist-editor/ox-grist-editor-privilege.ts

@@ -1,58 +0,0 @@
-import './ox-popup-privilege-input.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxGristEditor } from '@operato/data-grist'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-grist-editor-privilege')
-export class OxGristEditorPrivilege extends OxGristEditor {
-  get editorTemplate() {
-    return html` <div tabindex="0">...</div> `
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.showEditorPopup()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.showEditorPopup()
-    }
-  }
-
-  showEditorPopup() {
-    var change = (value: string) => {
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: value,
-            column: this.column,
-            record: this.record,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var popup = openPopup(
-      html`
-        <ox-popup-privilege-input .value=${this.value} .confirmCallback=${change.bind(this)}></ox-popup-privilege-input>
-      `,
-      {
-        backdrop: true,
-        title: i18next.t('title.edit privilege'),
-        size: 'medium',
-        help: 'data-grist/grist-editor/privilege'
-      }
-    )
-  }
-}

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

@@ -1,30 +0,0 @@
-import '@material/web/icon/icon.js'
-import { OxGristEditor, RecordConfig } from '@operato/data-grist'
-
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-type CommonCodeDetail = {
-  name: string
-  description: string
-  rank: number
-}
-
-@customElement('ox-grist-editor-resource-code')
-export class OxGristEditorResourceCode extends OxGristEditor {
-  get editorTemplate() {
-    var { codes, selectDispOpt = 'code-name' } = this.column.record || {}
-
-    return html`
-      <select>
-        ${(codes || []).map(
-          (code: CommonCodeDetail) => html`
-            <option ?selected=${code.name == this.value} value=${code.name}>
-              ${code.name == '' ? '' : selectDispOpt.replace('name', code.description).replace('code', code.name)}
-            </option>
-          `
-        )}
-      </select>
-    `
-  }
-}

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

@@ -1,88 +0,0 @@
-import '@material/web/icon/icon.js'
-import '../selector/ox-selector-resource-id.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { GristRecord, OxGristEditor } from '@operato/data-grist'
-import { openPopup, PopupHandle } from '@operato/layout'
-
-@customElement('ox-grist-editor-resource-id')
-export class OxGristEditorResourceId extends OxGristEditor {
-  private popup?: PopupHandle
-
-  render() {
-    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-    var value = this.value
-
-    return html`
-      ${!value
-        ? html`<span tabindex="0"></span>`
-        : html` <span tabindex="0">${value[nameField]} (${value[descriptionField]})</span> `}
-      <md-icon>arrow_drop_down</md-icon>
-    `
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.openSelector()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.openSelector()
-    }
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    const confirmCallback: (record?: GristRecord) => void = selected => {
-      if (!selected) {
-        return
-      }
-
-      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
-
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: selected
-              ? {
-                  [idField]: selected[idField],
-                  [nameField]: selected[nameField],
-                  [descriptionField]: selected[descriptionField]
-                }
-              : null,
-            record: this.record,
-            column: this.column,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var value = this.value || {}
-    var template = html`
-      <ox-selector-resource-id
-        .value=${value.id}
-        .confirmCallback=${confirmCallback.bind(this)}
-        .queryName=${this.column.record.options.queryName}
-        .basicArgs=${this.column.record.options.basicArgs}
-      ></ox-selector-resource-id>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: 'select item'
-    })
-  }
-}

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

@@ -1,131 +0,0 @@
-import '../selector/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`<span tabindex="0"></span>`
-        : html` <span tabindex="0" style="flex:1">${name || ''}${description || ''}</span> `}
-    `
-  }
-
-  async firstUpdated() {
-    super.firstUpdated()
-    this.template = ((this.column.record || {}).options || {}).template
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.openSelector()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      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')
-    })
-  }
-}