@operato/app 8.0.0-alpha.9 → 8.0.0-beta.1

package/src/input/ox-input-graphql.ts

@@ -1,153 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { print } from 'graphql'
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { graphql } from 'cm6-graphql'
-
-import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
-import { bracketMatching, syntaxHighlighting } from '@codemirror/language'
-import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
-import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'
-
-import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
-import { GRAPHQL_URI } from '@operato/graphql'
-import { OxFormField } from '@operato/input'
-import { togglefullscreen } from '@operato/utils'
-
-/**
- WEB Component for code-mirror graphql editor.
- 
- Example:
- 
-   <ox-input-graphql value=${text} link=${link}>
-   </ox-input-graphql>
- */
-@customElement('ox-input-graphql')
-export default class OxInputGraphql extends OxFormField {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background: white;
-        overflow: auto;
-      }
-
-      .cm-editor {
-        flex: 1;
-      }
-    `
-  ]
-
-  /**
-   * `value`는 에디터에서 작성중인 contents이다.
-   */
-  @property({ type: String }) value?: string
-  @property({ type: String }) link?: string
-  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false
-
-  private _self_changing: boolean = false
-  private _editor?: EditorView
-  private _changed: boolean = false
-
-  async updated(changes: PropertyValues<this>) {
-    const editor = await this.getEditor()
-    if (changes.has('value') && editor && !this._self_changing) {
-      const to = editor.state.doc.toString().length
-      editor.dispatch({
-        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
-      })
-    }
-  }
-
-  async getSchema() {
-    const executor = async ({ document, variables }: any) => {
-      const query = print(document)
-      const uri = this.link || GRAPHQL_URI
-
-      const fetchResult = await fetch(uri, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ query, variables })
-      })
-      return fetchResult.json()
-    }
-
-    return await wrapSchema({
-      schema: await introspectSchema(executor),
-      executor
-    })
-  }
-
-  async getEditor() {
-    if (!this._editor) {
-      var schema
-      try {
-        schema = await this.getSchema()
-      } catch (err) {
-        console.error(err)
-      }
-
-      this._editor = new EditorView({
-        doc: this.value,
-        extensions: [
-          ...(this.showLineNumbers ? [lineNumbers()] : []),
-          bracketMatching(),
-          closeBrackets(),
-          history(),
-          autocompletion(),
-          oneDark,
-          syntaxHighlighting(oneDarkHighlightStyle),
-          graphql(schema, {
-            onShowInDocs(field, type, parentType) {
-              alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`)
-            },
-            onFillAllFields(view, schema, _query, cursor, token) {
-              alert(`Filling all fields. Token: ${token}`)
-            }
-          }),
-          highlightActiveLine(),
-          history(),
-          keymap.of([...historyKeymap, indentWithTab]),
-          EditorView.updateListener.of(async v => {
-            if (v.docChanged) {
-              this._self_changing = true
-              this._changed = true
-
-              await this.updateComplete
-
-              this._self_changing = false
-            }
-          })
-        ],
-        parent: this.renderRoot
-      })
-    }
-
-    this._editor.contentDOM.addEventListener('keydown', event => {
-      event.stopPropagation()
-
-      if (event.key === 'Escape') {
-        togglefullscreen(this._editor!.contentDOM)
-      }
-    })
-
-    this._editor.contentDOM.addEventListener('blur', e => {
-      if (!this._changed) {
-        return
-      }
-
-      this.value = this._editor!.state.doc.toString()
-      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-    })
-
-    return this._editor
-  }
-}

package/src/property-editor/index.ts

@@ -1,83 +0,0 @@
-import '@operato/property-editor/ox-property-editor-3axis.js'
-import '@operato/property-editor/ox-property-editor-3dish.js'
-import '@operato/property-editor/ox-property-editor-legend.js'
-import '@operato/property-editor/ox-property-editor-number.js'
-import '@operato/property-editor/ox-property-editor-unit-number.js'
-import '@operato/property-editor/ox-property-editor-password.js'
-import '@operato/property-editor/ox-property-editor-action.js'
-import '@operato/property-editor/ox-property-editor-angle.js'
-import '@operato/property-editor/ox-property-editor-string.js'
-import '@operato/property-editor/ox-property-editor-data.js'
-import '@operato/property-editor/ox-property-editor-date.js'
-import '@operato/property-editor/ox-property-editor-month.js'
-import '@operato/property-editor/ox-property-editor-time.js'
-import '@operato/property-editor/ox-property-editor-datetime.js'
-import '@operato/property-editor/ox-property-editor-checkbox.js'
-import '@operato/property-editor/ox-property-editor-options.js'
-import '@operato/property-editor/ox-property-editor-select.js'
-import '@operato/property-editor/ox-property-editor-scene-component-id.js'
-import '@operato/property-editor/ox-property-editor-color.js'
-import '@operato/property-editor/ox-property-editor-multiple-colors.js'
-import '@operato/property-editor/ox-property-editor-solid-colorstops.js'
-import '@operato/property-editor/ox-property-editor-gradient-colorstops.js'
-import '@operato/property-editor/ox-property-editor-textarea.js'
-import '@operato/property-editor/ox-property-editor-table.js'
-import '@operato/property-editor/ox-property-editor-key-values.js'
-import '@operato/property-editor/ox-property-editor-partition-keys.js'
-import '@operato/property-editor/ox-property-editor-value-map.js'
-import '@operato/property-editor/ox-property-editor-value-ranges.js'
-import '@operato/property-editor/ox-property-editor-hashtags.js'
-import '@operato/property-editor/ox-property-editor-image.js'
-import '@operato/property-editor/ox-property-editor-file.js'
-import '@operato/attachment/ox-property-editor-attachment-selector.js'
-import '@operato/attachment/ox-property-editor-image-selector.js'
-import '@operato/font/ox-property-editor-font-selector.js'
-import './ox-property-editor-graphql.js'
-import './ox-property-editor-resource-object.js'
-
-import { OxPropertyEditor } from '@operato/property-editor'
-
-OxPropertyEditor.register({
-  '3axis': 'ox-property-editor-3axis',
-  '3dish': 'ox-property-editor-3dish',
-  legend: 'ox-property-editor-legend',
-  number: 'ox-property-editor-number',
-  'unit-number': 'ox-property-editor-unit-number',
-  slider: 'ox-property-editor-range',
-  password: 'ox-property-editor-password',
-  action: 'ox-property-editor-action',
-  angle: 'ox-property-editor-angle',
-  string: 'ox-property-editor-string',
-  textarea: 'ox-property-editor-textarea',
-  javascript: 'ox-property-editor-textarea',
-  script: 'ox-property-editor-textarea',
-  checkbox: 'ox-property-editor-checkbox',
-  boolean: 'ox-property-editor-checkbox',
-  select: 'ox-property-editor-select',
-  date: 'ox-property-editor-date',
-  month: 'ox-property-editor-month',
-  datetime: 'ox-property-editor-datetime',
-  time: 'ox-property-editor-time',
-  options: 'ox-property-editor-options',
-  data: 'ox-property-editor-data',
-  file: 'ox-property-editor-file',
-  image: 'ox-property-editor-image',
-  'range-input': 'ox-property-editor-range',
-  'attachment-selector': 'ox-property-editor-attachment-selector',
-  'gltf-selector': 'ox-property-editor-attachment-selector',
-  'image-selector': 'ox-property-editor-image-selector',
-  color: 'ox-property-editor-color',
-  'solid-color-stops': 'ox-property-editor-solid-colorstops',
-  'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
-  'multiple-color': 'ox-property-editor-multiple-colors',
-  map: 'ox-property-editor-value-map',
-  range: 'ox-property-editor-value-ranges',
-  graphql: 'ox-property-editor-graphql',
-  'editor-table': 'ox-property-editor-table',
-  'id-input': 'ox-property-editor-scene-component-id',
-  'font-selector': 'ox-property-editor-font-selector',
-  'partition-keys': 'ox-property-editor-partion-keys',
-  'key-values': 'ox-property-editor-key-values',
-  hashtags: 'ox-property-editor-hashtags',
-  'resource-object': 'ox-property-editor-resource-object'
-})

package/src/property-editor/ox-property-editor-graphql.ts

@@ -1,22 +0,0 @@
-import '../input/ox-input-graphql.js'
-
-import { css, html, TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-@customElement('ox-property-editor-graphql')
-export class OxPropertyEditorGraphQL extends OxPropertyEditor {
-  static styles = [
-    ...OxPropertyEditor.styles,
-    css`
-      :host {
-        grid-template-rows: auto 1fr;
-      }
-    `
-  ]
-
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    return html` <ox-input-graphql class="multiline-input" id="editor" .value=${value} fullwidth> </ox-input-graphql> `
-  }
-}

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

@@ -1,148 +0,0 @@
-import '../selector/ox-selector-resource-object.js'
-
-import { html, TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { openPopup, PopupHandle } from '@operato/layout'
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-@customElement('ox-property-editor-resource-object')
-export class OxPropertyEditorResourceObject extends OxPropertyEditor {
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  private popup?: PopupHandle
-
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    var { nameField = 'name', descriptionField = 'description' } = spec.property || {}
-    var name, description
-
-    if (typeof nameField === 'function') {
-      name = nameField(value)
-    } else {
-      name = value && value[nameField]
-    }
-
-    if (typeof descriptionField === 'function') {
-      description = descriptionField(value)
-    } else {
-      description = value && value[descriptionField] && `(${value[descriptionField]})`
-    }
-
-    return html`
-      ${!value
-        ? html`<span tabindex="0" @click=${this.onClick.bind(this)} @keydown=${this.onKeyDown.bind(this)}></span>`
-        : html`
-            <span tabindex="0" @click=${this.onClick.bind(this)} @keydown=${this.onKeyDown.bind(this)}
-              >${name || ''}${description || ''}</span
-            >
-          `}
-    `
-  }
-
-  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.property || {}
-
-    /* select options is only for compatability, it might be able to be deprecated. */
-    columns = columns || select
-
-    const confirmCallback = (selected?: { [field: string]: any }) => {
-      this.value = 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.dispatchEvent(
-        new CustomEvent('change', {
-          bubbles: true,
-          composed: true
-        })
-      )
-    }
-
-    var value = this.value || {}
-    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/selector/ox-selector-resource-id.ts

@@ -1,201 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/data-grist'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { DataGrist, FetchOption, GristData, GristRecord, InheritedValueType, 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'
-import { CommonHeaderStyles } from '@operato/styles'
-
-@customElement('ox-selector-resource-id')
-export class OxSelectorResourceId extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-
-      #filters {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      #filters > * {
-        padding: var(--padding-default) var(--spacing-large);
-      }
-    `
-  ]
-
-  @property({ type: String }) value?: string
-  @property({ type: Object }) config: any
-  @property({ type: Object }) data: GristData = ZERO_DATA
-  @property({ type: String }) queryName!: string
-  @property({ type: Object }) basicArgs: any
-  @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include
-  @property({ type: Object }) confirmCallback?: (record?: GristRecord) => void
-  @property({ type: Array }) selectedRecords: GristRecord[] = []
-
-  @query('ox-grist') grist!: DataGrist
-
-  render() {
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        .selectedRecords=${this.selectedRecords}
-      >
-        <div id="filters" slot="headroom">
-          <ox-filters-form autofocus></ox-filters-form>
-        </div>
-      </ox-grist>
-
-      <div class="footer">
-        <button @click=${this.onEmpty.bind(this)}>
-          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
-        </button>
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
-        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
-      </div>
-    `
-  }
-
-  onEmpty() {
-    this.confirmCallback && this.confirmCallback()
-    closePopup(this)
-  }
-
-  onCancel() {
-    closePopup(this)
-  }
-
-  onConfirm() {
-    this.confirmCallback && this.confirmCallback(this.selected)
-    closePopup(this)
-  }
-
-  async firstUpdated() {
-    this.config = {
-      columns: [
-        {
-          type: 'gutter',
-          gutterName: 'sequence'
-        },
-        {
-          type: 'gutter',
-          gutterName: 'row-selector',
-          multiple: false
-        },
-        {
-          type: 'string',
-          name: 'id',
-          header: i18next.t('field.id'),
-          hidden: true
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: {
-            align: 'left'
-          },
-          filter: 'search',
-          sortable: true,
-          width: 160
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: {
-            align: 'left'
-          },
-          filter: 'search',
-          sortable: true,
-          width: 300
-        }
-      ],
-      rows: {
-        selectable: {
-          multiple: false
-        },
-        handlers: {
-          click: 'select-row'
-        }
-      },
-      pagination: {
-        infinite: true
-      }
-    }
-
-    await this.updateComplete
-
-    /* TODO config가 설정될 때, fetch() 가 동작하므로, fetch 완료 이벤트를 받아서, selected를 설정해주는 것이 좋겠다. 
-       현재는 fetch() 가 두번 일어난다.
-       */
-    await this.grist.fetch()
-
-    var selected = this.grist.data.records.find(item => this.value == item.id)
-    if (selected) {
-      this.selectedRecords = [selected]
-    }
-    /* TODO config가 설정될 때, fetch() 가 동작하므로, fetch 완료 이벤트를 받아서, selected를 설정해주는 것이 좋겠다. */
-
-    await this.updateComplete
-    this.grist.focus()
-  }
-
-  async fetchHandler({ page = 1, limit = 100, sorters = [], filters = [], inherited }: FetchOption) {
-    const response = await client.query({
-      query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited) {
-          q: ${this.queryName}(filters: $filters, pagination: $pagination, sortings: $sortings, inhereted: $inherited) {
-            items {
-              id
-              name
-              description
-            }
-            total
-          }
-        }
-      `,
-      variables: {
-        filters,
-        pagination: { page, limit },
-        sortings: sorters,
-        inherited: inherited || this.inherited
-      }
-    })
-
-    return {
-      total: response.data.q.total || 0,
-      records: response.data.q.items || []
-    }
-  }
-
-  get selected() {
-    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist
-
-    var selected = grist.selected
-
-    return selected && selected.length > 0 ? selected[0] : undefined
-  }
-}