@things-factory/integration-ui 4.1.27 → 5.0.0-alpha.10

package/client/bootstrap.js

@@ -7,7 +7,8 @@ import { ConnectorSelector } from './grist/connector-selector'
 import { CrontabEditor } from './grist/crontab-editor'
 import { JsonGristEditor } from './grist/json-grist-editor'
 import { OxPropertyEditor } from '@operato/property-editor'
-import { ParametersEditor } from './grist/parameters-editor'
+import { ParametersEditor } from '@operato/app/grist/parameters-editor.js'
+// import { ParametersEditor } from './grist/parameters-editor'
 import { TaskTypeSelector } from './grist/task-type-selector'
 import { registerEditor as registerGristEditor } from '@operato/data-grist'
 

package/client/editors/entity-editor.js

@@ -5,9 +5,9 @@
 import './things-editor-entity-selector'
 
 import { html } from 'lit'
+import cloneDeep from 'lodash-es/cloneDeep'
 
 import { OxPropertyEditor } from '@operato/property-editor'
-import { deepClone } from '@things-factory/utils'
 
 export class PropertyEditorEntitySelector extends OxPropertyEditor {
   static get styles() {
@@ -41,7 +41,7 @@ export class PropertyEditorEntitySelector extends OxPropertyEditor {
   _valueChanged(e) {
     e.stopPropagation()
 
-    this.value = deepClone(e.target[this.valueProperty])
+    this.value = cloneDeep(e.target[this.valueProperty])
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
 

package/client/editors/entity-selector.js

@@ -3,10 +3,10 @@ import '@operato/data-grist'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
+import { buildArgs, client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
 
 export class EntitySelector extends LitElement {
   static get properties() {
@@ -104,7 +104,7 @@ export class EntitySelector extends LitElement {
     const response = await client.query({
       query: gql`
         query {
-          ${this.queryName} (${gqlBuilder.buildArgs(await this._buildConditions(page, limit, sorters))}) {
+          ${this.queryName} (${buildArgs(await this._buildConditions(page, limit, sorters))}) {
             ${this.getSelectFields()}
           }
         }

package/client/editors/things-editor-entity-selector.js

@@ -7,8 +7,8 @@ import './entity-selector'
 
 import { css, html, LitElement } from 'lit'
 
-import { i18next } from '@things-factory/i18n-base'
-import { openPopup } from '@things-factory/layout-base'
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
 
 export default class ThingsEditorEntitySelector extends LitElement {
   static get properties() {

package/client/grist/connection-selector.js

@@ -1,7 +1,9 @@
-import gql from 'graphql-tag'
 import '@material/mwc-icon'
 
-import { client } from '@things-factory/shell'
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+
 import { DynamicSelector } from './dynamic-selector'
 
 const FETCH_CONNECTIONS_GQL = gql`

package/client/grist/connector-selector.js

@@ -1,7 +1,9 @@
-import gql from 'graphql-tag'
 import '@material/mwc-icon'
 
-import { client } from '@things-factory/shell'
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+
 import { DynamicSelector } from './dynamic-selector'
 
 const FETCH_CONNECTORS_GQL = gql`

package/client/grist/crontab-editor-popup.js

@@ -2,8 +2,8 @@ import '@material/mwc-button'
 
 import { css, html, LitElement } from 'lit'
 
-import { i18next } from '@things-factory/i18n-base'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { i18next } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
 
 function createCronRegex(type) {
   // https://gist.github.com/dkandalov/a2aed17cfdeb65243022

package/client/grist/crontab-editor.js

@@ -6,8 +6,8 @@ import './crontab-editor-popup'
 import { html } from 'lit'
 
 import { InputEditor } from '@operato/data-grist'
-import { i18next } from '@things-factory/i18n-base'
-import { openPopup } from '@things-factory/layout-base'
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
 
 export class CrontabEditor extends InputEditor {
   get editorTemplate() {

package/client/grist/json-editor.js

@@ -12,7 +12,7 @@ import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
 import CodeMirror from 'codemirror'
 import { css, html, LitElement, unsafeCSS } from 'lit'
 
-import { i18next } from '@things-factory/i18n-base'
+import { i18next } from '@operato/i18n'
 
 /**
   WEB Component for code-mirror json editor.

package/client/grist/json-grist-editor.js

@@ -3,7 +3,7 @@ import './json-editor'
 
 import { css, html, LitElement } from 'lit'
 
-import { openPopup } from '@things-factory/layout-base'
+import { openPopup } from '@operato/layout'
 
 export class JsonGristEditor extends LitElement {
   static get properties() {

package/client/grist/parameters-editor-builder.js

@@ -2,13 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui'
+import '@operato/app/property-editor.js' /* for registering property editors */
 
-import { html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin'
+import { LitElement, html } from 'lit'
 
 import { OxPropertyEditor } from '@operato/property-editor'
-import { store } from '@things-factory/shell'
+import { connect } from 'pwa-helpers/connect-mixin'
+import { store } from '@operato/shell'
 
 /**
 모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.

package/client/grist/parameters-editor-popup.js

@@ -1,7 +1,7 @@
 import { css, html, LitElement } from 'lit'
 
-import { i18next } from '@things-factory/i18n-base'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { i18next } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
 
 export class ParametersEditorPopup extends LitElement {
   static get properties() {
@@ -104,7 +104,7 @@ export class ParametersEditorPopup extends LitElement {
   }
 
   onconfirm(e) {
-    this.confirmCallback && this.confirmCallback(this.value ? JSON.stringify(this.value) : '')
+    this.confirmCallback && this.confirmCallback(this.value)
     history.back()
   }
 }

package/client/grist/parameters-editor.js

@@ -7,8 +7,8 @@ import './parameters-editor-popup'
 
 import { css, html, LitElement } from 'lit'
 
-import { i18next } from '@things-factory/i18n-base'
-import { openPopup } from '@things-factory/layout-base'
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
 
 export class ParametersEditor extends LitElement {
   static get properties() {
@@ -35,7 +35,8 @@ export class ParametersEditor extends LitElement {
   }
 
   render() {
-    return html` ${this.value || ''} `
+    const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value
+    return html` ${value || ''} `
   }
 
   async firstUpdated() {
@@ -55,6 +56,14 @@ export class ParametersEditor extends LitElement {
       delete this.popup
     }
 
+    var { options } = this.column.record
+
+    if (typeof options === 'function') {
+      options = await options.call(this, this.value, this.column, this.record, this.row, this.field)
+    }
+
+    const { name, help, spec, context, objectified = false } = options
+
     const confirmCallback = newval => {
       this.dispatchEvent(
         new CustomEvent('field-change', {
@@ -62,7 +71,7 @@ export class ParametersEditor extends LitElement {
           composed: true,
           detail: {
             before: this.value,
-            after: newval,
+            after: !objectified ? JSON.stringify(newval) : newval,
             record: this.record,
             column: this.column,
             row: this.row
@@ -71,19 +80,12 @@ export class ParametersEditor extends LitElement {
       )
     }
 
-    var { options } = this.column.record
-    if (typeof options === 'function') {
-      options = await options.call(this, this.value, this.column, this.record, this.row, this.field)
-    }
-
     try {
-      var value = JSON.parse(this.value)
+      var value = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : this.value
     } catch (e) {
       var value = {}
     }
 
-    const { name, help, spec, context } = options
-
     /* 
       주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
       layout의 구성에 변화가 발생하면, 다시 render된다.

package/client/grist/task-type-selector.js

@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 import { html } from 'lit'
 
 import { InputEditor } from '@operato/data-grist'
-import { client } from '@things-factory/shell'
+import { client } from '@operato/graphql'
 
 const FETCH_TASK_TYPES_GQL = gql`
   query ($connectionName: String!) {

package/client/pages/connection.js

@@ -4,11 +4,12 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
+import { client } from '@operato/graphql'
 import { HelpDecoratedRenderer } from '@operato/help/help-decorated-renderer.js'
 import { i18next, localize } from '@operato/i18n'
+import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-import { client, PageView, store } from '@things-factory/shell'
 
 export class Connection extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
@@ -39,6 +40,8 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
+
+          background-color: white;
         }
 
         #filters > * {

package/client/pages/integration-monitor.js

@@ -6,9 +6,10 @@ import '../viewparts/connections-monitor'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client, PageView, subscribe } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { client, subscribe } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PageView } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
 
 function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'

package/client/pages/scenario-detail.js

@@ -5,7 +5,6 @@ import { client } from '@operato/graphql'
 import { HelpDecoratedRenderer } from '@operato/help/help-decorated-renderer.js'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { MultiColumnFormStyles } from '@things-factory/form-ui'
 
 class ScenarioDetail extends localize(i18next)(LitElement) {
   static get properties() {
@@ -18,7 +17,6 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
 
   static get styles() {
     return [
-      MultiColumnFormStyles,
       css`
         :host {
           display: flex;
@@ -81,7 +79,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
           gutterName: 'button',
           icon: 'add',
           handlers: {
-            click: (...args) => this._copyRecord(...args)
+            click: 'record-copy'
           }
         },
         { type: 'gutter', gutterName: 'sequence' },
@@ -90,7 +88,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
           gutterName: 'button',
           icon: 'arrow_upward',
           handlers: {
-            click: (...args) => this._moveRecord(-1, ...args)
+            click: 'move-up'
           }
         },
         {
@@ -98,7 +96,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
           gutterName: 'button',
           icon: 'arrow_downward',
           handlers: {
-            click: (...args) => this._moveRecord(1, ...args)
+            click: 'move-down'
           }
         },
         {
@@ -320,47 +318,6 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
     )
   }
 
-  _moveRecord(steps, columns, data, column, record, rowIndex) {
-    var moveTo = rowIndex + steps,
-      length = data.records.length
-    if (rowIndex >= length || moveTo < 0 || moveTo >= length) return
-    var grist = this.dataGrist
-    grist._data.records.splice(rowIndex, 1)
-    grist._data.records.splice(moveTo, 0, record)
-    grist.dispatchEvent(
-      new CustomEvent('record-change', {
-        bubbles: true,
-        composed: true
-      })
-    )
-    grist.grist.dispatchEvent(
-      new CustomEvent('focus-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          row: rowIndex + steps,
-          column: column
-        }
-      })
-    )
-  }
-
-  _copyRecord(columns, data, column, record, rowIndex) {
-    if (rowIndex >= data.records.length) return
-    var grist = this.dataGrist
-    var copiedRecord = {}
-    this.select.forEach(field => {
-      copiedRecord[field] = record[field]
-    })
-    grist._data.records.splice(rowIndex + 1, 0, copiedRecord)
-    grist.dispatchEvent(
-      new CustomEvent('record-change', {
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
   requestRefresh() {
     this.dispatchEvent(new CustomEvent('requestRefresh'))
   }

package/client/pages/scenario-importer.js

@@ -3,9 +3,9 @@ import '@operato/data-grist'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
-import { i18next } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
 
 export class ScenarioImporter extends LitElement {
   static get properties() {

package/client/pages/scenario.js

@@ -7,11 +7,12 @@ import { css, html } from 'lit'
 import moment from 'moment-timezone'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { notify, openPopup } from '@things-factory/layout-base'
-import { client, navigate, PageView, store } from '@things-factory/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { notify, openPopup } from '@operato/layout'
+import { navigate, PageView, store } from '@operato/shell'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'
@@ -46,6 +47,8 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
+
+          background-color: white;
         }
 
         #filters > * {

package/client/viewparts/connections-monitor.js

@@ -3,8 +3,8 @@ import '@material/mwc-icon-button'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
-import { client } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { client } from '@operato/graphql'
+import { ScrollbarStyles } from '@operato/styles'
 
 export class ConnectionsMonitor extends LitElement {
   static get styles() {

package/client/viewparts/monitoring-summary.js

@@ -2,8 +2,8 @@ import '@operato/data-grist'
 
 import { css, html, LitElement } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
 
 export class IntegrationMonitoringSummary extends localize(i18next)(LitElement) {
   static get properties() {

package/client/viewparts/pending-q-monitor.js

@@ -1,10 +1,10 @@
-import { LitElement, css, html } from 'lit'
-
-import { ScrollbarStyles } from '@things-factory/styles'
+import { css, html, LitElement } from 'lit'
 import { asyncReplace } from 'lit/directives/async-replace.js'
-import { sleep } from '@things-factory/utils'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 
+import { ScrollbarStyles } from '@operato/styles'
+import { sleep } from '@operato/utils'
+
 export class PendingQMonitor extends LitElement {
   static get styles() {
     return [

package/client/viewparts/scenario-instance-log-view.js

@@ -2,8 +2,9 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { store, subscribe } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { subscribe } from '@operato/graphql'
+import { store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
 
 export class ScenarioInstanceLogView extends connect(store)(LitElement) {
   static get styles() {

package/client/viewparts/scenario-instance-monitor.js

@@ -5,10 +5,10 @@ import './scenario-instance-view'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { notify, openPopup } from '@things-factory/layout-base'
-import { client } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { notify, openPopup } from '@operato/layout'
+import { ScrollbarStyles } from '@operato/styles'
 
 function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'

package/client/viewparts/scenario-instance-view.js

@@ -4,8 +4,9 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { store, subscribe } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { subscribe } from '@operato/graphql'
+import { store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
 
 export class ScenarioInstanceView extends connect(store)(LitElement) {
   static get styles() {

package/client/viewparts/scenario-monitor.js

@@ -5,10 +5,10 @@ import './scenario-instance-monitor'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { notify, openPopup } from '@things-factory/layout-base'
-import { client } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { notify, openPopup } from '@operato/layout'
+import { ScrollbarStyles } from '@operato/styles'
 
 function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'

package/client/viewparts/scenarios-monitor.js

@@ -4,8 +4,8 @@ import './scenario-monitor'
 
 import { css, html, LitElement } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
 
 function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/integration-ui",
-  "version": "4.1.27",
+  "version": "5.0.0-alpha.10",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,20 +24,20 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@operato/data-grist": "^0.3.28",
-    "@operato/graphql": "^0.3.28",
-    "@operato/help": "^0.3.28",
-    "@operato/i18n": "^0.3.28",
-    "@operato/layout": "^0.3.28",
-    "@operato/property-editor": "^0.3.28",
-    "@operato/styles": "^0.3.28",
-    "@operato/utils": "^0.3.28",
-    "@things-factory/export-base": "^4.1.27",
-    "@things-factory/import-base": "^4.1.27",
-    "@things-factory/integration-base": "^4.1.27",
-    "@things-factory/modeller-ui": "^4.1.27",
+    "@operato/app": "^1.0.0-alpha.23",
+    "@operato/data-grist": "1.0.0-alpha.23",
+    "@operato/graphql": "1.0.0-alpha.23",
+    "@operato/help": "1.0.0-alpha.23",
+    "@operato/i18n": "1.0.0-alpha.23",
+    "@operato/layout": "1.0.0-alpha.23",
+    "@operato/property-editor": "1.0.0-alpha.23",
+    "@operato/styles": "1.0.0-alpha.23",
+    "@operato/utils": "1.0.0-alpha.23",
+    "@things-factory/export-base": "^5.0.0-alpha.10",
+    "@things-factory/import-base": "^5.0.0-alpha.10",
+    "@things-factory/integration-base": "^5.0.0-alpha.10",
     "moment-timezone": "^0.5.27",
     "subscriptions-transport-ws": "^0.11.0"
   },
-  "gitHead": "d2bcc934a52e1a2f68738ec8b56ad72503172f6f"
+  "gitHead": "24e85b0265d10cb664b8279bb927ea2a86227775"
 }