@operato/app 1.0.0-beta.2 → 1.0.0-beta.20

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.2",
+  "version": "1.0.0-beta.20",
   "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.2",
-    "@operato/data-grist": "^1.0.0-beta.2",
-    "@operato/font": "^1.0.0-beta.2",
-    "@operato/form": "^1.0.0-beta.2",
-    "@operato/graphql": "^1.0.0-beta.2",
-    "@operato/i18n": "^1.0.0-beta.2",
-    "@operato/input": "^1.0.0-beta.2",
-    "@operato/layout": "^1.0.0-beta.2",
-    "@operato/property-editor": "^1.0.0-beta.2",
-    "@operato/shell": "^1.0.0-beta.2",
-    "@operato/styles": "^1.0.0-beta.2",
-    "@operato/utils": "^1.0.0-beta.2",
+    "@operato/attachment": "^1.0.0-beta.20",
+    "@operato/data-grist": "^1.0.0-beta.20",
+    "@operato/font": "^1.0.0-beta.20",
+    "@operato/form": "^1.0.0-beta.20",
+    "@operato/graphql": "^1.0.0-beta.20",
+    "@operato/i18n": "^1.0.0-beta.20",
+    "@operato/input": "^1.0.0-beta.20",
+    "@operato/layout": "^1.0.0-beta.20",
+    "@operato/property-editor": "^1.0.0-beta.20",
+    "@operato/shell": "^1.0.0-beta.20",
+    "@operato/styles": "^1.0.0-beta.20",
+    "@operato/utils": "^1.0.0-beta.20",
     "codemirror": "^5.59.1",
     "codemirror-graphql": "^0.15.2",
     "cronstrue": "^2.2.0",
@@ -86,12 +87,12 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.29",
-    "@web/dev-server-storybook": "next",
+    "@web/dev-server-storybook": "^0.5.0",
     "@web/test-runner": "next",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
+    "husky": "^7.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
@@ -110,5 +111,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "514a836d3f5e959695701ba41913aee18a1efe66"
+  "gitHead": "99a8317ab05ad2e4229476e894d88ad596ab2f1e"
 }

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/filters-form/filter-resource-select.ts

@@ -0,0 +1,94 @@
+import '@operato/input/ox-checkbox.js'
+import '../grist-editor/ox-selector-resource-id'
+
+import { html } from 'lit-html'
+
+import { FilterConfig, FilterSelectRenderer } from '@operato/form'
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+type SelectedCallback = (value: { id: string; name: string; description: string }) => void
+
+function openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {
+  const { queryName, select, list, basicArgs, valueField = 'id' } = filter.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 = (filter, value, owner) => {
+  const { name, operator = 'like' } = filter
+
+  return operator === 'like'
+    ? html` <input
+        type="text"
+        name=${name}
+        .value=${value}
+        @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
+          style="min-width: 100px; min-height: 24px"
+          type="text"
+          name=${name}
+          .value=${value}
+          readonly
+          @click=${(e: Event) => {
+            e.stopPropagation()
+
+            const confirmCallback = (selected?: { [field: string]: any }) => {
+              var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {}
+
+              owner.dispatchEvent(
+                new CustomEvent('filter-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: selected ? selected[idField] : ''
+                })
+              )
+            }
+
+            openResourceSelector(filter, value, confirmCallback)
+          }}
+        />
+      `
+    : html``
+}

package/src/filters-form/index.ts

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

package/src/grist-editor/ox-grist-renderer-crontab.ts

@@ -1,8 +1,9 @@
-import { FieldRenderer } from '@operato/data-grist'
 import cronstrue from 'cronstrue/i18n'
-import { detectOverflow } from '@operato/utils'
-import { html } from 'lit'
 import i18next from 'i18next'
+import { html } from 'lit'
+
+import { FieldRenderer } from '@operato/data-grist'
+import { detectOverflow } from '@operato/utils'
 
 function onmouseover(e: Event) {
   const element = e.target as HTMLSpanElement
@@ -21,7 +22,7 @@ export const OxGristRendererCrontab: FieldRenderer = (value, column, record, row
 
   try {
     const language = (i18next.language || 'en').substring(0, 2)
-    text = value === undefined ? '' : cronstrue.toString(value, { locale: language || 'en' })
+    text = !value ? '' : cronstrue.toString(value, { locale: language || 'en' })
   } catch (e) {
     console.error(e)
   }

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

@@ -7,7 +7,11 @@ export const OxGristRendererResourceId: FieldRenderer = (value, column, record,
     return ''
   }
 
-  var { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
+  const { nameField = 'name', descriptionField = 'description' } = column.record.options || {}
 
-  return html`<span>${value[nameField] || ''}(${value[descriptionField] || ''})</span> `
+  const name = value[nameField] || ''
+  const description = value[descriptionField] || ''
+  const suffix = description ? `(${description})` : ''
+
+  return html`<span>${name}${suffix}</span> `
 }

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

@@ -1,10 +1,10 @@
 import '@operato/input/ox-input-partition-keys.js'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { ScrollbarStyles } from '@operato/styles'
 import { i18next } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-partition-keys-input')
 export class OxPopupPartitionKeysInput extends LitElement {
@@ -24,6 +24,7 @@ export class OxPopupPartitionKeysInput extends LitElement {
       ox-input-partition-keys {
         flex: 1;
         overflow-y: auto;
+        padding: 10px;
       }
 
       span {

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
+  }
+}