@things-factory/integration-ui 6.1.66 → 6.1.71

package/client/editors/{entity-editor.js → entity-editor.ts}

@@ -5,10 +5,12 @@
 import './things-editor-entity-selector'
 
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
 import cloneDeep from 'lodash-es/cloneDeep'
 
 import { OxPropertyEditor } from '@operato/property-editor'
 
+@customElement('property-editor-entity-selector')
 export class PropertyEditorEntitySelector extends OxPropertyEditor {
   static get styles() {
     return [...OxPropertyEditor.styles]
@@ -49,5 +51,3 @@ export class PropertyEditorEntitySelector extends OxPropertyEditor {
     this.observe.call(this, this.value)
   }
 }
-
-customElements.define('property-editor-entity-selector', PropertyEditorEntitySelector)

package/client/editors/{entity-selector.js → entity-selector.ts}

@@ -2,58 +2,58 @@ 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 } from '@operato/data-grist/ox-grist.js'
 import { buildArgs, client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 
+@customElement('entity-selector')
 export class EntitySelector extends LitElement {
-  static get properties() {
-    return {
-      value: String,
-      searchFields: Array,
-      config: Object,
-      data: Object,
-      queryName: String,
-      select: Array,
-      list: Object,
-      basicArgs: Object,
-      selectedRecords: Array
-    }
-  }
+  static styles = [
+    MultiColumnFormStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
 
-  static get styles() {
-    return [
-      MultiColumnFormStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+      ox-grist {
+        flex: 1;
+      }
 
-          background-color: #fff;
-        }
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
 
-        ox-grist {
-          flex: 1;
-        }
+      form {
+        position: relative;
+      }
 
-        .button-container {
-          display: flex;
-          margin-left: auto;
-        }
+      [search] {
+        position: absolute;
+        right: 0;
+      }
+    `
+  ]
 
-        form {
-          position: relative;
-        }
+  @property({ type: String }) value?: string
+  @property({ type: Array }) searchFields: any
+  @property({ type: Object }) config: any
+  @property({ type: Object }) data: any
+  @property({ type: String }) queryName!: string
+  @property({ type: Array }) select: any
+  @property({ type: Object }) list: any
+  @property({ type: Object }) basicArgs: any
+  @property({ type: Array }) selectedRecords: any
 
-        [search] {
-          position: absolute;
-          right: 0;
-        }
-      `
-    ]
-  }
+  @query('ox-grist') grist!: DataGrist
+  @query('search-form') searchForm!: HTMLFormElement
 
   render() {
     return html`
@@ -76,21 +76,17 @@ export class EntitySelector extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <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>
+        <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>
     `
   }
 
-  get grist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
-  oncancel(e) {
+  onCancel() {
     history.back()
   }
 
-  onconfirm(e) {
+  onConfirm() {
     this.dispatchEvent(
       new CustomEvent('entity-selected', {
         detail: {
@@ -151,7 +147,7 @@ export class EntitySelector extends LitElement {
         handlers: {
           click: 'select-row',
           dblclick: (columns, data, column, record, rowIndex, field) => {
-            this.onconfirm()
+            this.onConfirm()
           }
         },
         appendable: false
@@ -310,17 +306,9 @@ export class EntitySelector extends LitElement {
     return queryConditions
   }
 
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
-  }
-
   get selected() {
-    var grist = this.shadowRoot.querySelector('ox-grist')
-
-    var selected = grist.selected
+    var selected = this.grist.selected
 
     return selected && selected.length > 0 ? selected[0] : undefined
   }
 }
-
-customElements.define('entity-selector', EntitySelector)

package/client/editors/{property-editor.js → property-editor.ts}

@@ -6,6 +6,7 @@ import './things-editor-http-parameters'
 import './things-editor-http-body'
 
 import { html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { OxPropertyEditor } from '@operato/property-editor'
 

package/client/editors/{things-editor-entity-selector.js → things-editor-entity-selector.ts}

@@ -6,46 +6,44 @@ import '@material/mwc-icon'
 import './entity-selector'
 
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 
+@customElement('things-editor-entity-selector')
 export default class ThingsEditorEntitySelector extends LitElement {
-  static get properties() {
-    return {
-      value: String,
-      properties: Object
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      input[type='text'] {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+      }
+
+      mwc-icon {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `
+  ]
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-          display: inline-block;
-        }
-
-        input[type='text'] {
-          box-sizing: border-box;
-          width: 100%;
-          height: 100%;
-        }
-
-        mwc-icon {
-          position: absolute;
-          top: 0;
-          right: 0;
-        }
-      `
-    ]
-  }
+  @property({ type: String }) value?: string
+  @property({ type: Object }) properties: any
+
+  popup: any
 
   render() {
     return html`
       <input id="text" type="text" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />
 
-      <mwc-icon @click=${e => this.openSelector(e)}>dashboard</mwc-icon>
+      <mwc-icon @click=${e => this.openSelector()}>dashboard</mwc-icon>
     `
   }
 
@@ -96,5 +94,3 @@ export default class ThingsEditorEntitySelector extends LitElement {
     })
   }
 }
-
-customElements.define('things-editor-entity-selector', ThingsEditorEntitySelector)

package/client/editors/{things-editor-http-body.js → things-editor-http-body.ts}

@@ -3,6 +3,7 @@
  */
 
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 /**
 http body editor element
@@ -12,54 +13,50 @@ Example:
   <things-editor-http-body value=${map}>
   </things-editor-http-body>
 */
+
+@customElement('things-editor-http-body')
 export default class ThingsEditorHttpBody extends LitElement {
-  static get properties() {
-    return {
-      value: Object
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+
+        width: 100%;
+        overflow: hidden;
+        border: 1px solid #ccc;
+        margin: 5px 0;
+      }
+
+      div {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+      }
+
+      div[kind] {
+        border-bottom: 1px solid #aaa;
+        background-color: #ddd;
+      }
+
+      div[accessor] {
+        background-color: #eee;
+      }
+
+      label {
+        margin: 0 12px 0 3px;
+      }
+
+      #accessor {
+        flex: 1;
+        min-height: 20px;
+        margin: 2px;
+      }
+    `
+  ]
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-
-          width: 100%;
-          overflow: hidden;
-          border: 1px solid #ccc;
-          margin: 5px 0;
-        }
-
-        div {
-          display: flex;
-          flex-flow: row nowrap;
-          align-items: center;
-        }
-
-        div[kind] {
-          border-bottom: 1px solid #aaa;
-          background-color: #ddd;
-        }
-
-        div[accessor] {
-          background-color: #eee;
-        }
-
-        label {
-          margin: 0 12px 0 3px;
-        }
-
-        #accessor {
-          flex: 1;
-          min-height: 20px;
-          margin: 2px;
-        }
-      `
-    ]
-  }
+  @property({ type: Object }) value: { [key: string]: string } = {}
 
   firstUpdated() {
     this.renderRoot.addEventListener('change', this._onChange.bind(this))
@@ -133,5 +130,3 @@ export default class ThingsEditorHttpBody extends LitElement {
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
   }
 }
-
-customElements.define('things-editor-http-body', ThingsEditorHttpBody)

package/client/editors/{things-editor-http-headers.js → things-editor-http-headers.ts}

@@ -3,6 +3,7 @@
  */
 
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 /**
 http headers editor element
@@ -12,61 +13,52 @@ Example:
   <things-editor-http-headers value=${map}>
   </things-editor-http-headers>
 */
+@customElement('things-editor-http-headers')
 export default class ThingsEditorHttpHeaders extends LitElement {
-  static get properties() {
-    return {
-      value: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-
-          width: 100%;
-          overflow: hidden;
-          border: 1px solid #ccc;
-          margin: 5px 0;
-
-          background-color: #ddd;
-        }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+
+        width: 100%;
+        overflow: hidden;
+        border: 1px solid #ccc;
+        margin: 5px 0;
+
+        background-color: #ddd;
+      }
 
-        div {
-          display: flex;
-          flex-flow: row nowrap;
-          align-items: center;
-        }
+      div {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+      }
 
-        div > * {
-          min-width: 0px;
-          min-height: 20px;
-          margin: 2px;
-          padding: 0;
-        }
+      div > * {
+        min-width: 0px;
+        min-height: 20px;
+        margin: 2px;
+        padding: 0;
+      }
 
-        button {
-          width: 20px;
-          text-align: center;
-          border-radius: 50%;
-          font-size: 1em;
-        }
+      button {
+        width: 20px;
+        text-align: center;
+        border-radius: 50%;
+        font-size: 1em;
+      }
 
-        input {
-          flex: 1;
-        }
-      `
-    ]
-  }
+      input {
+        flex: 1;
+      }
+    `
+  ]
 
-  constructor() {
-    super()
+  @property({ type: Object }) value: { [key: string]: string } = {}
 
-    this.value = {}
-  }
+  _changingNow: boolean = false
 
   firstUpdated() {
     this.renderRoot.addEventListener('change', this._onChange.bind(this))
@@ -87,7 +79,7 @@ export default class ThingsEditorHttpHeaders extends LitElement {
       <div data-record-new>
         <input type="text" data-key placeholder="key" value="" />
         <input type="text" data-value placeholder="value" value="" />
-        <button class="record-action" @click=${e => this._add(e)} tabindex="-1">+</button>
+        <button class="record-action" @click=${e => this._add()} tabindex="-1">+</button>
       </div>
     `
   }
@@ -122,7 +114,7 @@ export default class ThingsEditorHttpHeaders extends LitElement {
     this._changingNow = false
   }
 
-  _build(includeNewRecord) {
+  _build(includeNewRecord?) {
     if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
     else var records = this.renderRoot.querySelectorAll('[data-record]')
 
@@ -131,11 +123,11 @@ export default class ThingsEditorHttpHeaders extends LitElement {
     for (var i = 0; i < records.length; i++) {
       var record = records[i]
 
-      var key = record.querySelector('[data-key]').value
+      var key = (record.querySelector('[data-key]') as HTMLInputElement).value
       var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])')
       if (!inputs || inputs.length == 0) continue
 
-      var input = inputs[inputs.length - 1]
+      var input = inputs[inputs.length - 1] as HTMLInputElement
 
       var value = input.value
 
@@ -148,7 +140,7 @@ export default class ThingsEditorHttpHeaders extends LitElement {
 
   /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
   _toArray(map) {
-    var array = []
+    var array: { key: any; value: any }[] = []
 
     for (var key in map) {
       array.push({
@@ -160,17 +152,17 @@ export default class ThingsEditorHttpHeaders extends LitElement {
     return array
   }
 
-  _add(e) {
+  _add() {
     this._build(true)
 
     var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])')
 
     for (var i = 0; i < inputs.length; i++) {
-      let input = inputs[i]
+      let input = inputs[i] as HTMLInputElement
       input.value = ''
     }
 
-    inputs[0].focus()
+    ;(inputs[0] as HTMLInputElement).focus()
   }
 
   _delete(e) {
@@ -179,5 +171,3 @@ export default class ThingsEditorHttpHeaders extends LitElement {
     this._build()
   }
 }
-
-customElements.define('things-editor-http-headers', ThingsEditorHttpHeaders)