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

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

@@ -1,156 +0,0 @@
-import '../selector/ox-selector-resource-object.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')
-export class OxGristEditorResourceObject 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 {
-      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.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: 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,
-            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
-          .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/ox-grist-renderer-crontab.ts

@@ -1,18 +0,0 @@
-import cronstrue from 'cronstrue/i18n'
-import i18next from 'i18next'
-import { html } from 'lit'
-
-import { FieldRenderer } from '@operato/data-grist'
-
-export const OxGristRendererCrontab: FieldRenderer = (value, column, record, rowIndex, field) => {
-  let text = ''
-
-  try {
-    const language = (i18next.language || 'en').substring(0, 2)
-    text = !value ? '' : cronstrue.toString(value, { locale: language || 'en' })
-  } catch (e) {
-    console.error(e)
-  }
-
-  return html`<span data-reactive-tooltip>${text}</span>`
-}

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

@@ -1,85 +0,0 @@
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { client, gqlContext } from '@operato/graphql'
-import { customElement } from 'lit/decorators.js'
-
-import { OxGristRenderer } from '@operato/data-grist'
-
-type CommonCodeDetail = {
-  name: string
-  description: string
-  rank: number
-}
-
-@customElement('ox-grist-renderer-resource-code')
-export class OxGristRendererResourceCode extends OxGristRenderer {
-  static styles = css`
-    :host {
-      display: block;
-      position: relative;
-
-      width: 100%;
-    }
-
-    span {
-      text-overflow: ellipsis;
-      display: block;
-      overflow: hidden;
-    }
-  `
-
-  async connectedCallback() {
-    var { codeName, codes } = this.column.record || {}
-
-    if (!codes && codeName) {
-      let response = await client.query({
-        query: gql`
-          query CommonCode($name: String!) {
-            commonCode(name: $name) {
-              details {
-                name
-                description
-                rank
-              }
-            }
-          }
-        `,
-        variables: {
-          name: codeName
-        }
-      })
-
-      var commonCode = response?.data?.commonCode
-
-      this.column.record.codes = [{ name: '', description: '' }].concat(
-        (commonCode?.details || []).sort(function (a: CommonCodeDetail, b: CommonCodeDetail) {
-          return a.rank - b.rank
-        })
-      )
-    }
-
-    super.connectedCallback()
-  }
-
-  get rendererTemplate() {
-    if (!this.value) {
-      return html``
-    }
-
-    var { codes, renderDispOpt = 'name' } = this.column.record || {}
-
-    if (codes) {
-      for (let idx = 0; idx < codes.length; idx++) {
-        let code = codes[idx]
-
-        if (code.name == this.value) {
-          return html`<span data-reactive-tooltip
-            >${code.name == '' ? '' : renderDispOpt.replace('name', code.description).replace('code', code.name)}</span
-          > `
-        }
-      }
-    }
-
-    return html`<span data-reactive-tooltip>${this.value}</span> `
-  }
-}

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

@@ -1,17 +0,0 @@
-import { html } from 'lit'
-
-import { FieldRenderer } from '@operato/data-grist'
-
-export const OxGristRendererResourceId: FieldRenderer = (value, column, record, rowIndex, field) => {
-  if (!value) {
-    return ''
-  }
-
-  const { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
-
-  const name = value[nameField] || ''
-  const description = value[descriptionField] || ''
-  const suffix = description ? `(${description})` : ''
-
-  return html`<span>${name}${suffix}</span> `
-}

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

@@ -1,26 +0,0 @@
-import { html } from 'lit-html'
-
-import { FieldRenderer } from '@operato/data-grist'
-
-export const OxGristRendererResourceObject: FieldRenderer = (value, column, record, rowIndex, field) => {
-  if (!value) {
-    return ''
-  }
-
-  var { nameField = 'name', descriptionField = 'description' } = 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`<span>${name || ''}${description || ''}</span> `
-}

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

@@ -1,69 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-code.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { closePopup } from '@operato/popup'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-popup-code-input')
-export class OxPopupCodeInput extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    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-input-code {
-        flex: 1;
-        overflow-y: auto;
-        margin: var(--spacing-small);
-      }
-    `
-  ]
-
-  @property({ type: Object }) value: any
-  @property({ type: String }) mode: string = 'javascript'
-  @property({ type: Object }) confirmCallback!: (newval: any) => void
-  @property({ type: String }) language?: string = 'javascript'
-
-  render() {
-    return html`
-      <ox-input-code .value=${this.value} @change=${this.onChange.bind(this)} .language=${this.language}>
-      </ox-input-code>
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.onCancel.bind(this)} danger>
-          <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>
-    `
-  }
-
-  private onChange(e: CustomEvent) {
-    e.stopPropagation()
-
-    this.value = e.detail
-  }
-
-  private onCancel(e: Event) {
-    closePopup(this)
-  }
-
-  private onConfirm(e: Event) {
-    this.confirmCallback && this.confirmCallback(this.value)
-    closePopup(this)
-  }
-}

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

@@ -1,93 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-privilege.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement, PropertyValueMap } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { closePopup } from '@operato/popup'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-import { client } from '@operato/graphql'
-
-@customElement('ox-popup-privilege-input')
-export class OxPopupPrivilegeInput extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    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-input-privilege {
-        flex: 1;
-        overflow-y: auto;
-      }
-    `
-  ]
-
-  @property({ type: Object }) value?: { category: string; privilege: string; owner: boolean; super: boolean } | null
-
-  @property({ type: Object }) confirmCallback!: (newval: any) => void
-
-  @state() privileges: { privilege: string; category: string; description: string }[] = []
-
-  render() {
-    return html`
-      <ox-input-privilege .value=${this.value} .privileges=${this.privileges} @change=${this.onChange.bind(this)}>
-      </ox-input-privilege>
-
-      <div class="footer">
-        <button @click=${this.onReset.bind(this)}><md-icon>restart_alt</md-icon>${i18next.t('button.reset')}</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>
-    `
-  }
-
-  async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {
-    const response = await client.query({
-      query: gql`
-        query privileges {
-          privileges {
-            items {
-              privilege
-              category
-              description
-            }
-            total
-          }
-        }
-      `
-    })
-
-    this.privileges = response.data.privileges.items
-  }
-
-  private onChange(e: CustomEvent) {
-    e.stopPropagation()
-
-    this.value = e.detail
-  }
-
-  private onReset(e: Event) {
-    this.value = null
-  }
-
-  private onCancel(e: Event) {
-    closePopup(this)
-  }
-
-  private onConfirm(e: Event) {
-    this.confirmCallback && this.confirmCallback(this.value)
-    closePopup(this)
-  }
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './input/index.js'
-export * from './property-editor/index.js'
-export * from './grist-editor/index.js'
-export * from './filter-renderer/index.js'

package/src/input/index.ts

@@ -1,3 +0,0 @@
-export * from './ox-input-background-pattern.js'
-export * from './ox-input-fill-style.js'
-export * from './ox-input-graphql.js'

package/src/input/ox-input-background-pattern.ts

@@ -1,196 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/i18n/ox-i18n.js'
-import '@operato/input/ox-input-color.js'
-import '@operato/attachment/ox-attachment-selector.js'
-
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxFormField } from '@operato/input'
-
-export type BackgroundPatternOption = {
-  image?: HTMLImageElement | string
-  color?: string
-  align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
-  offsetX?: number
-  offsetY?: number
-  width?: number
-  height?: number
-  fitPattern?: boolean
-  noRepeat?: boolean
-}
-
-/**
- * 컴포넌트의 fill pattern을 편집하는 element
- *
- * Example:
- *  <ox-input-background-pattern
- *    @change="${e => { this.pattern = e.target.value }}"
- *    .value=${this.pattern}"
- *  ></ox-input-background-pattern>
- */
-
-@customElement('ox-input-background-pattern')
-export class OxInputBackgroundPattern extends OxFormField {
-  static styles = css`
-    :host,
-    .grid-10 {
-      display: grid;
-      grid-template-columns: repeat(10, 1fr);
-      grid-gap: 5px;
-      grid-auto-rows: minmax(24px, auto);
-
-      align-items: center;
-    }
-
-    * {
-      align-self: stretch;
-    }
-
-    label {
-      grid-column: span 2;
-      text-align: right;
-      text-transform: capitalize;
-
-      align-self: center;
-    }
-
-    .grid-10 {
-      grid-column: span 10;
-    }
-
-    select,
-    input,
-    [custom-editor] {
-      grid-column: span 8;
-    }
-
-    select {
-      height: 100%;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    input[type='checkbox'] {
-      grid-column: 3 / 4;
-      align-self: center;
-    }
-
-    input[type='checkbox'] ~ label {
-      grid-column: span 7;
-      text-align: left;
-    }
-
-    .grid-10 > input[type='number'] {
-      grid-column: span 3;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    .grid-10 > label {
-      grid-column: span 2;
-      text-align: right;
-    }
-
-    .grid-10 > .icon-only-label {
-      grid-column: span 2;
-
-      background: var(--url-icon-properties-label) no-repeat;
-      float: left;
-      margin: 0;
-      align-self: stretch;
-    }
-
-    .icon-only-label.color {
-      background-position: 100% -500px;
-    }
-
-    .grid-10 > ox-input-color {
-      grid-column: span 8;
-    }
-  `
-
-  @property({ type: Object }) value?: BackgroundPatternOption
-
-  render() {
-    const value = this.value || ({} as BackgroundPatternOption)
-
-    return html`
-      <label> <ox-i18n msgid="label.image">image</ox-i18n> </label>
-
-      <ox-attachment-selector
-        value-key="image"
-        .value=${value.image || ''}
-        .properties=${{
-          category: 'image'
-        }}
-        custom-editor
-      ></ox-attachment-selector>
-
-      <label> <ox-i18n msgid="label.align">align</ox-i18n> </label>
-
-      <select value-key="align" class="select-content" .value=${value.align}>
-        <option value="left-top">Left Top</option>
-        <option value="top">Center Top</option>
-        <option value="right-top">Right Top</option>
-        <option value="left">Left Center</option>
-        <option value="center">Center Center</option>
-        <option value="right">Right Center</option>
-        <option value="left-bottom">Left Bottom</option>
-        <option value="bottom">Center Bottom</option>
-        <option value="right-bottom">Right Bottom</option>
-      </select>
-
-      <div class="grid-10">
-        <label> <ox-i18n msgid="label.offset-x">offsetX</ox-i18n> </label>
-        <input type="number" value-key="offsetX" .value=${value.offsetX} />
-
-        <label> <ox-i18n msgid="label.offset-y">offsetY</ox-i18n> </label>
-        <input type="number" value-key="offsetY" .value=${value.offsetY} />
-
-        <label> <ox-i18n msgid="label.width">width</ox-i18n> </label>
-        <input type="number" value-key="width" .value=${value.width} />
-
-        <label> <ox-i18n msgid="label.height">height</ox-i18n> </label>
-        <input type="number" value-key="height" .value=${value.height} />
-      </div>
-
-      <div class="grid-10">
-        <label class="icon-only-label color"></label>
-        <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
-      </div>
-
-      <div class="grid-10">
-        <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
-        <label> <ox-i18n msgid="label.fit">fit</ox-i18n> </label>
-      </div>
-
-      <div class="grid-10">
-        <input value-key="noRepeat" type="checkbox" .checked=${value.noRepeat} required />
-        <label> <ox-i18n msgid="label.no-repeat">no repeat</ox-i18n> </label>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  _onChange(e: Event) {
-    var element = e.target as HTMLInputElement
-    var key = element.getAttribute('value-key')
-    var value: any = element.value
-
-    if (key === 'fitPattern' || key === 'noRepeat') {
-      value = element.checked
-    }
-
-    this.value = {
-      ...this.value,
-      [key!]: value
-    }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}