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

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

@@ -1,133 +0,0 @@
-import '@operato/input/ox-checkbox.js'
-import '../selector/ox-selector-resource-id'
-
-import { html } from 'lit-html'
-
-import { ColumnConfig, FilterConfigObject, FilterSelectRenderer } from '@operato/data-grist'
-import { i18next } from '@operato/i18n'
-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', title } = column.record.options
-
-  var actualValue
-  if (typeof valueField === 'function') {
-    actualValue = valueField(value)
-  } else {
-    actualValue = value?.[valueField]
-  }
-
-  var template = html`
-    <ox-selector-resource-object
-      .value=${actualValue}
-      .confirmCallback=${confirmCallback}
-      .queryName=${queryName}
-      .columns=${select}
-      .list=${list}
-      .basicArgs=${basicArgs}
-      .valueField=${valueField}
-    ></ox-selector-resource-object>
-  `
-
-  const 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()
-      }
-    }
-  })
-}
-
-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=${text}
-        @change=${(e: CustomEvent) => {
-          const input = e.target as HTMLInputElement
-          input.dispatchEvent(
-            new CustomEvent('filter-change', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                name: column.name,
-                operator,
-                value: input.value
-              }
-            })
-          )
-        }}
-      />`
-    : operator == 'in'
-      ? html``
-      : operator === 'eq'
-        ? html`
-            <input name="${column.name}" .value=${hideValue} type="text" hidden />
-            <input
-              type="text"
-              name="${column.name}_disp"
-              .value=${text}
-              readonly
-              @click=${(e: Event) => {
-                e.stopPropagation()
-
-                const input = e.target as HTMLInputElement
-
-                const confirmCallback = (selected?: { [field: string]: any }) => {
-                  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: {
-                        name: column.name,
-                        operator,
-                        value: objectValue
-                      }
-                    })
-                  )
-                }
-
-                openResourceSelector(column, value, confirmCallback)
-              }}
-            />
-          `
-        : html``
-}

package/src/filter-renderer/index.ts

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

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

@@ -1,11 +0,0 @@
-import './ox-filter-resource-code.js'
-
-import { html } from 'lit-html'
-
-import { FilterSelectRenderer } from '@operato/data-grist'
-
-export const FilterResourceCode: FilterSelectRenderer = (column, value, owner) => {
-  return html`
-    <ox-filter-resource-code name=${column?.name} .column=${column} .value=${value}></ox-filter-resource-code>
-  `
-}

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

@@ -1,11 +0,0 @@
-import './ox-filter-resource-object.js'
-
-import { html } from 'lit-html'
-
-import { FilterSelectRenderer } from '@operato/data-grist'
-
-export const FilterResourceObject: FilterSelectRenderer = (column, value, owner) => {
-  return html`
-    <ox-filter-resource-object name=${column?.name} .column=${column} .value=${value}></ox-filter-resource-object>
-  `
-}

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

@@ -1,130 +0,0 @@
-import '@operato/input/ox-checkbox.js'
-import '../selector/ox-selector-resource-object'
-
-import { html } from 'lit-html'
-
-import { FilterConfig, FilterSelectRenderer } from '@operato/form'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-import { GristRecord } from '@operato/data-grist'
-
-type SelectedCallback = (value?: Partial<GristRecord>) => void
-
-function openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {
-  const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || ({} as any)
-
-  var template = html`
-    <ox-selector-resource-object
-      .value=${value}
-      .confirmCallback=${confirmCallback}
-      .queryName=${queryName}
-      .columns=${select}
-      .list=${list}
-      .basicArgs=${basicArgs}
-      .valueField=${valueField}
-    ></ox-selector-resource-object>
-  `
-
-  const 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()
-      }
-    }
-  })
-}
-
-export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner: any) => {
-  const { name, operator = 'like' } = filter
-  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || ({} as any)
-  const hideValue = value ? value[idField] : ''
-  const text = value ? value[nameField] : ''
-
-  return operator === 'like'
-    ? html` <input
-        type="text"
-        name=${name}
-        .value=${text}
-        @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 name="${name}" .value=${hideValue} type="text" hidden />
-            <input
-              type="text"
-              name="${name}_disp"
-              .value=${text}
-              readonly
-              @change=${() => false}
-              @click=${(e: Event) => {
-                e.stopPropagation()
-
-                const input = e.target as HTMLInputElement
-                const codeInput =
-                  owner.tagName.toLowerCase() == 'ox-grid-header'
-                    ? owner.renderRoot.querySelector(`[name="${name}"]`)
-                    : owner.renderRoot.querySelector(`form [name="${name}"]`)
-
-                const confirmCallback = (selected?: { [field: string]: any }) => {
-                  let disp = selected ? selected[idField] : ''
-
-                  if (selected && nameField) {
-                    disp = selected[nameField]
-                  }
-                  input.value = disp
-
-                  const value = selected ? selected[idField] : ''
-                  codeInput.value = value
-
-                  codeInput.dispatchEvent(
-                    new Event('change', {
-                      bubbles: true,
-                      composed: true
-                    })
-                  )
-
-                  owner.dispatchEvent(
-                    new CustomEvent('filter-change', {
-                      bubbles: true,
-                      composed: true,
-                      detail: {
-                        name: name,
-                        operator,
-                        value
-                      }
-                    })
-                  )
-                }
-
-                openResourceSelector(filter, codeInput.value, confirmCallback)
-              }}
-            />
-          `
-        : html``
-}

package/src/filters-form/index.ts

@@ -1,14 +0,0 @@
-import { registerFilterRenderer } from '@operato/form'
-import { registerFilterRenderer as dataGristFilterRenderer } from '@operato/data-grist'
-
-import { FilterResourceSelect } from './filter-resource-select.js'
-
-import { FilterResourceCode } from './filter-resource-code.js'
-import { FilterResourceObject } from './filter-resource-object.js'
-
-registerFilterRenderer('resource-object', [FilterResourceSelect])
-registerFilterRenderer('resource-id', [FilterResourceSelect])
-
-dataGristFilterRenderer('code', [FilterResourceCode])
-dataGristFilterRenderer('object', [FilterResourceObject])
-dataGristFilterRenderer('resource-object', [FilterResourceObject])

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

@@ -1,154 +0,0 @@
-import '@operato/input/ox-select.js'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { FilterConfigObject } from '@operato/data-grist'
-import { client, gqlContext } from '@operato/graphql'
-import { OxFormField } from '@operato/input'
-
-type CommonCodeDetail = {
-  name: string
-  description: string
-  rank: number
-}
-
-const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
-{
-  commonCode(name: "${codeName}") {
-    details {
-      name
-      description
-      rank
-    }
-  }
-}
-`
-
-@customElement('ox-filter-resource-code')
-export class OxFilterResourceCode extends OxFormField {
-  static styles = css`
-    :host {
-      min-width: 100px;
-    }
-  `
-
-  @property({ type: Object }) column: any
-  @property({ type: String }) value?: string
-
-  @state() codes?: CommonCodeDetail[]
-
-  render() {
-    const { name, filter } = this.column
-    const operator = (filter as FilterConfigObject).operator
-    const { selectDispOpt = 'code-name' } = this.column.record || {}
-
-    if (!this.codes) {
-      return html`<p>Loading...</p>`
-    }
-
-    return operator === 'in'
-      ? html`
-          <ox-select
-            .value=${this.value}
-            @change=${(e: CustomEvent) => {
-              let val = e.detail
-              this.value = val?.length > 0 ? val : undefined
-
-              this?.dispatchEvent(
-                new CustomEvent('change', {
-                  detail: {
-                    name,
-                    operator,
-                    value: this.value
-                  }
-                })
-              )
-            }}
-          >
-            <ox-popup-list multiple attr-selected="checked" with-search align-left>
-              <ox-checkbox
-                checkAll
-                @click=${(e: any) => {
-                  const checked = e.target.checked
-                  const val = checked ? this.codes!.map((code: CommonCodeDetail) => code.name) : []
-
-                  e.target?.dispatchEvent(new CustomEvent('select', { bubbles: true, detail: val }))
-                }}
-                >${i18next.t('label.all')}</ox-checkbox
-              >
-              ${this.codes
-                ?.filter((code: CommonCodeDetail) => !!code.name)
-                .map(
-                  (code: CommonCodeDetail) => html`
-                    <ox-checkbox
-                      option
-                      value=${code.name}
-                      @change=${(e: any) => {
-                        const parent = e.target.parentElement
-                        const checkCnt = e.target.checked ? 1 : -1
-                        const checkedLen = parent.querySelectorAll('ox-checkbox[option][checked]').length + checkCnt
-
-                        parent.querySelector('ox-checkbox[checkAll]').checked =
-                          this.codes!.filter((code: CommonCodeDetail) => !!code.name).length === checkedLen
-                      }}
-                      >${selectDispOpt.replace('name', code.description).replace('code', code.name)}</ox-checkbox
-                    >
-                  `
-                )}
-            </ox-popup-list>
-          </ox-select>
-        `
-      : html`
-          <ox-select
-            .value=${this.value}
-            @change=${(e: CustomEvent) => {
-              this.value = e.detail
-              this.dispatchEvent(
-                new CustomEvent('change', {
-                  detail: {
-                    name,
-                    operator,
-                    value: this.value
-                  }
-                })
-              )
-            }}
-          >
-            <ox-popup-list with-search>
-              <div option value="">&nbsp;</div>
-              ${this.codes?.map(
-                (code: CommonCodeDetail) => html`
-                  <div option value=${code.name}>
-                    ${selectDispOpt.replace('name', code.description).replace('code', code.name)}
-                  </div>
-                `
-              )}
-            </ox-popup-list>
-          </ox-select>
-        `
-  }
-
-  async fetchCodes() {
-    const { codeName } = this.column.record || {}
-
-    if (codeName) {
-      const response = await client.query({
-        query: FETCH_COMMON_CODE_GQL(codeName),
-        context: gqlContext()
-      })
-
-      this.codes = response?.data?.commonCode?.details || []
-
-      this.requestUpdate()
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.fetchCodes()
-  }
-}

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()
-        }
-      }
-    })
-  }
-}