@operato/app 1.0.0-beta.1 → 1.0.0-beta.4

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.1",
+  "version": "1.0.0-beta.4",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -28,7 +28,8 @@
     "./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"
+    "./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": {
     "access": "public",
@@ -58,18 +59,18 @@
     "@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.1",
-    "@operato/data-grist": "^1.0.0-beta.1",
-    "@operato/font": "^1.0.0-beta.1",
-    "@operato/form": "^1.0.0-beta.1",
-    "@operato/graphql": "^1.0.0-beta.1",
-    "@operato/i18n": "^1.0.0-beta.1",
-    "@operato/input": "^1.0.0-beta.1",
-    "@operato/layout": "^1.0.0-beta.1",
-    "@operato/property-editor": "^1.0.0-beta.1",
-    "@operato/shell": "^1.0.0-beta.1",
-    "@operato/styles": "^1.0.0-beta.1",
-    "@operato/utils": "^1.0.0-beta.1",
+    "@operato/attachment": "^1.0.0-beta.4",
+    "@operato/data-grist": "^1.0.0-beta.4",
+    "@operato/font": "^1.0.0-beta.4",
+    "@operato/form": "^1.0.0-beta.4",
+    "@operato/graphql": "^1.0.0-beta.4",
+    "@operato/i18n": "^1.0.0-beta.4",
+    "@operato/input": "^1.0.0-beta.4",
+    "@operato/layout": "^1.0.0-beta.4",
+    "@operato/property-editor": "^1.0.0-beta.4",
+    "@operato/shell": "^1.0.0-beta.4",
+    "@operato/styles": "^1.0.0-beta.4",
+    "@operato/utils": "^1.0.0-beta.4",
     "codemirror": "^5.59.1",
     "codemirror-graphql": "^0.15.2",
     "cronstrue": "^2.2.0",
@@ -110,5 +111,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "cfa0be4c72d93b2bf3f851c09b5c62c6025edf0f"
+  "gitHead": "08201dc8c015c0d6ccceb846907dd9950363a553"
 }

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

@@ -0,0 +1,95 @@
+import '@operato/input/ox-checkbox.js'
+import '../grist-editor/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' } = column.record.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 = (column, value, owner) => {
+  const filter = column.filter as FilterConfigObject
+  const { operator = 'like' } = filter
+
+  return operator === 'like'
+    ? html` <input
+        type="text"
+        name=${column.name}
+        .value=${value}
+        @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
+          style="min-width: 100px; min-height: 24px"
+          type="text"
+          name=${column.name}
+          .value=${value}
+          readonly
+          @click=${(e: Event) => {
+            e.stopPropagation()
+
+            const confirmCallback = (selected?: { [field: string]: any }) => {
+              var { idField = 'id', nameField = 'name', descriptionField = 'description' } = column.record.options || {}
+
+              owner.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: selected ? selected[idField] : ''
+                })
+              )
+            }
+
+            openResourceSelector(column, value, confirmCallback)
+          }}
+        />
+      `
+    : html``
+}

package/src/filter-renderer/index.ts

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

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

@@ -1,8 +1,9 @@
 import './ox-popup-code-input.js'
 
-import { OxGristEditor } from '@operato/data-grist'
-import { customElement } from 'lit/decorators.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'
 
@@ -29,7 +30,7 @@ export class OxGristEditorCode extends OxGristEditor {
 
     var change = (value: string) => {
       this.dispatchEvent(
-        new CustomEvent('change', {
+        new CustomEvent('field-change', {
           bubbles: true,
           composed: true,
           detail: {
@@ -48,15 +49,12 @@ export class OxGristEditorCode extends OxGristEditor {
         <ox-popup-code-input
           .value=${this.value}
           mode=${mode}
-          @change=${(e: CustomEvent) => {
-            change(e.detail.value)
-            popup.close()
-          }}
+          .confirmCallback=${change.bind(this)}
         ></ox-popup-code-input>
       `,
       {
         backdrop: true,
-        title: i18next.t('title.setting schedule'),
+        title: i18next.t('title.edit code'),
         help: 'data-grist/grist-editor/code'
       }
     )

package/src/grist-editor/ox-grist-editor-partition-keys.ts

@@ -4,13 +4,13 @@
 
 import './ox-popup-partition-keys-input.js'
 
-import { PopupHandle, openPopup } from '@operato/layout'
-import { customElement, property } from 'lit/decorators.js'
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { cloneDeep } from 'lodash-es'
 
 import { OxGristEditor } from '@operato/data-grist'
-import { cloneDeep } from 'lodash-es'
-import { html } from 'lit'
 import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
 
 @customElement('ox-grist-editor-partition-keys')
 export class OxGristEditorPartitionKeys extends OxGristEditor {

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

@@ -1,12 +1,12 @@
 import '@material/mwc-icon'
 import './ox-selector-resource-id.js'
 
-import { GristRecord, OxGristEditor } from '@operato/data-grist'
-import { PopupHandle, openPopup } from '@operato/layout'
-import { TemplateResult, html } from 'lit'
-
+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-input-resource-id')
 export class OxGristEditorResourceId extends OxGristEditor {
   private popup?: PopupHandle
@@ -38,7 +38,7 @@ export class OxGristEditorResourceId extends OxGristEditor {
       delete this.popup
     }
 
-    const confirmCallback: (record: GristRecord | undefined) => void = selected => {
+    const confirmCallback: (record?: GristRecord) => void = selected => {
       if (!selected) {
         return
       }
@@ -51,11 +51,13 @@ export class OxGristEditorResourceId extends OxGristEditor {
           composed: true,
           detail: {
             before: this.value,
-            after: {
-              [idField]: selected[idField],
-              [nameField]: selected[nameField],
-              [descriptionField]: selected[descriptionField]
-            },
+            after: selected
+              ? {
+                  [idField]: selected[idField],
+                  [nameField]: selected[nameField],
+                  [descriptionField]: selected[descriptionField]
+                }
+              : null,
             record: this.record,
             column: this.column,
             row: this.row

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

@@ -1,12 +1,12 @@
 import '@material/mwc-icon'
 import './ox-selector-resource-object.js'
 
-import { PopupHandle, openPopup } from '@operato/layout'
-import { TemplateResult, css, html } from 'lit'
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
 
 import { OxGristEditor } from '@operato/data-grist'
-import { customElement } from 'lit/decorators.js'
 import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
 
 @customElement('ox-grist-editor-resource-object')
 export class OxGristEditorResourceObject extends OxGristEditor {
@@ -55,7 +55,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       delete this.popup
     }
 
-    const confirmCallback = (selected: { [field: string]: any }) => {
+    const confirmCallback = (selected?: { [field: string]: any }) => {
       var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}
 
       this.dispatchEvent(
@@ -64,19 +64,21 @@ export class OxGristEditorResourceObject extends OxGristEditor {
           composed: true,
           detail: {
             before: this.value,
-            after: {
-              ...(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]
-            },
+            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

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

@@ -1,11 +1,11 @@
 import '@operato/data-grist'
 
-import { DataGrist, FetchOption, GristData, GristRecord, ZERO_DATA } from '@operato/data-grist'
-import { LitElement, css, html } from 'lit'
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
 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 gql from 'graphql-tag'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 
@@ -47,7 +47,7 @@ export class OxSelectorResourceId extends LitElement {
   @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: String }) queryName!: string
   @property({ type: Object }) basicArgs: any
-  @property({ type: Object }) confirmCallback?: (record: GristRecord | undefined) => void
+  @property({ type: Object }) confirmCallback?: (record?: GristRecord) => void
   @property({ type: Array }) selectedRecords: GristRecord[] = []
 
   @query('ox-grist') grist!: DataGrist
@@ -66,12 +66,18 @@ export class OxSelectorResourceId extends LitElement {
       </ox-grist>
 
       <div class="button-container">
+        <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
         <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
         <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
       </div>
     `
   }
 
+  onempty() {
+    this.confirmCallback && this.confirmCallback()
+    history.back()
+  }
+
   oncancel() {
     history.back()
   }

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

@@ -1,6 +1,10 @@
 import '@operato/data-grist'
 import '@operato/form/ox-search-form.js'
 
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
 import {
   ColumnConfig,
   DataGrist,
@@ -11,12 +15,8 @@ import {
   GristRecord,
   ZERO_DATA
 } from '@operato/data-grist'
-import { LitElement, css, html } from 'lit'
 import { MultiColumnFormStyles, SearchForm } from '@operato/form'
 import { buildArgs, client, gqlContext } from '@operato/graphql'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import gql from 'graphql-tag'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 
@@ -57,7 +57,7 @@ export class OxSelectorResourceObject extends LitElement {
   @property({ type: Object }) data: GristData = ZERO_DATA
   @property({ type: String }) queryName!: string
   @property({ type: Object }) basicArgs: any
-  @property({ type: Object }) confirmCallback?: (record: GristRecord | undefined) => void
+  @property({ type: Object }) confirmCallback?: (record?: GristRecord | null) => void
   @property({ type: Array }) selectedRecords: GristRecord[] = []
 
   @property({ type: Array }) searchFields: any
@@ -99,12 +99,18 @@ export class OxSelectorResourceObject extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
+        <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
         <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
         <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
       </div>
     `
   }
 
+  onempty() {
+    this.confirmCallback && this.confirmCallback()
+    history.back()
+  }
+
   oncancel() {
     history.back()
   }

package/src/index.ts

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

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

@@ -0,0 +1,169 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import 'codemirror/addon/display/fullscreen'
+import 'codemirror/addon/display/autorefresh'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/lint/lint'
+import 'codemirror-graphql/hint'
+import 'codemirror-graphql/lint'
+import 'codemirror-graphql/mode'
+
+import { GRAPHQL_URI, client } from '@operato/graphql'
+import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
+
+import CodeMirror from 'codemirror'
+import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
+import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
+import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'
+import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
+import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'
+import { fetch } from 'cross-fetch'
+import { print } from 'graphql'
+
+/**
+ 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 LitElement {
+  static styles = [
+    css`
+      ${unsafeCSS(CodeMirrorStyle)}
+      ${unsafeCSS(FullScreenStyle)}
+         ${unsafeCSS(NightThemeStyle)}
+         ${unsafeCSS(LintStyle)}
+         ${unsafeCSS(ShowHintStyle)}
+    `,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      textarea {
+        display: block;
+        height: 100%;
+        width: 100%;
+        resize: none;
+        font-size: 16px;
+        line-height: 20px;
+        border: 0px;
+        padding: 0px;
+      }
+    `
+  ]
+
+  /**
+   * `value`는 에디터에서 작성중인 contents이다.
+   */
+  @property({ type: String }) value?: string
+  @property({ type: String }) link?: string
+
+  @query('textarea') textarea!: HTMLTextAreaElement
+
+  private _self_changing: boolean = false
+  private _changed: boolean = false
+  private _editor?: CodeMirror.EditorFromTextArea
+
+  async updated(changes: PropertyValues<this>) {
+    if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
+      if (changes.has('link')) {
+        this._editor = undefined
+      }
+      ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))
+      // ;(await this.getEditor()).refresh()
+    }
+  }
+
+  render() {
+    return html` <textarea></textarea> `
+  }
+
+  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) {
+      try {
+        var schema = await this.getSchema()
+      } catch (err) {
+        console.error(err)
+      }
+
+      if (this.textarea) {
+        this._editor = CodeMirror.fromTextArea(this.textarea, {
+          value: this.value,
+          mode: 'graphql',
+          lint: {
+            //@ts-ignore
+            schema
+          },
+          hintOptions: {
+            //@ts-ignore
+            schema
+          },
+          tabSize: 2,
+          lineNumbers: false,
+          showCursorWhenSelecting: true,
+          theme: 'night',
+          extraKeys: {
+            F11: function (cm) {
+              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+            },
+            Esc: function (cm) {
+              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+            }
+          },
+          autoRefresh: {
+            delay: 500
+          }
+        })
+
+        this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {
+          if (!this._changed) return
+
+          this.value = editor.getValue()
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        })
+
+        this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {
+          this._self_changing = true
+
+          this._changed = true
+
+          await this.requestUpdate()
+
+          this._self_changing = false
+        })
+      }
+    }
+
+    return this._editor
+  }
+}