@things-factory/integration-ui 4.0.38 → 4.0.42

package/client/pages/connection.js

@@ -4,17 +4,16 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { HelpDecoratedRenderer } from '@things-factory/help'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { HelpDecoratedRenderer } from '@operato/help/help-decorated-renderer.js'
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 import { client, PageView, store } from '@things-factory/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
 
 export class Connection extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       active: String,
-      searchConfig: Array,
       gristConfig: Object,
       connectors: Object
     }
@@ -31,15 +30,20 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           overflow: hidden;
         }
 
-        search-form {
-          overflow: visible;
-          --mdc-icon-size: 24px;
-        }
-
         ox-grist {
           overflow-y: auto;
           flex: 1;
         }
+
+        #filters {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+        }
+
+        #filters > * {
+          padding: var(--padding-default) var(--padding-wide);
+        }
       `
     ]
   }
@@ -70,61 +74,24 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
       >
-        <search-form
-          slot="headroom"
-          .fields=${this.searchConfig}
-          @submit=${async () => this.dataGrist.fetch()}
-        ></search-form>
+        <div slot="headroom" id="filters">
+          <ox-filters-form @change=${e => this.grist.fetch()}></ox-filters-form>
+        </div>
       </ox-grist>
     `
   }
 
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
+  get filtersForm() {
+    return this.renderRoot.querySelector('ox-filters-form')
   }
 
-  get dataGrist() {
-    return this.shadowRoot.querySelector('ox-grist')
+  get grist() {
+    return this.renderRoot.querySelector('ox-grist')
   }
 
   async pageInitialized() {
     this.fetchConnectors()
 
-    this.searchConfig = [
-      {
-        name: 'name',
-        type: 'text',
-        props: {
-          placeholder: i18next.t('field.name'),
-          searchOper: 'like'
-        }
-      },
-      {
-        name: 'description',
-        type: 'text',
-        props: {
-          placeholder: i18next.t('field.description'),
-          searchOper: 'like'
-        }
-      },
-      {
-        name: 'type',
-        type: 'text',
-        props: {
-          placeholder: i18next.t('field.type'),
-          searchOper: 'like'
-        }
-      },
-      {
-        name: 'endpoint',
-        type: 'text',
-        props: {
-          placeholder: i18next.t('field.endpoint'),
-          searchOper: 'like'
-        }
-      }
-    ]
-
     this.gristConfig = {
       list: { fields: ['name', 'description', 'type', 'active'] },
       columns: [
@@ -212,6 +179,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
             editable: true,
             help: value => this.connectors?.[value]?.help
           },
+          filter: 'search',
           sortable: true,
           width: 200
         },
@@ -222,6 +190,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           sortable: true,
           width: 200
         },
@@ -233,7 +202,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
             editable: true,
             options: async (value, column, record, row, field) => {
               const { name, help, parameterSpec: spec } = record.type ? this.connectors?.[record.type] : {}
-              const context = this.dataGrist
+              const context = this.grist
               return { name, help, spec, context }
             }
           },
@@ -274,14 +243,14 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
 
     await this.updateComplete
 
-    this.dataGrist.fetch()
+    this.grist.fetch()
   }
 
   async pageUpdated(changes, lifecycle) {
     if (this.active) {
       await this.updateComplete
 
-      this.dataGrist.fetch()
+      this.grist.fetch()
     }
   }
 
@@ -316,7 +285,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
         }
       `,
       variables: {
-        filters: this._conditionParser(),
+        filters: await this.filtersForm.getQueryFilters(),
         pagination: { page, limit },
         sortings: sorters
       }
@@ -359,25 +328,6 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  _conditionParser() {
-    return this.searchForm.formFields
-      .filter(field => (field.type !== 'checkbox' && field.value && field.value !== '') || field.type === 'checkbox')
-      .map(field => {
-        return {
-          name: field.name,
-          value:
-            field.type === 'text'
-              ? field.value
-              : field.type === 'checkbox'
-              ? field.checked
-              : field.type === 'number'
-              ? parseFloat(field.value)
-              : field.value,
-          operator: field.getAttribute('searchOper')
-        }
-      })
-  }
-
   async _deleteConnections(name) {
     if (
       confirm(
@@ -386,7 +336,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
         })
       )
     ) {
-      const names = this.dataGrist.selected.map(record => record.name)
+      const names = this.grist.selected.map(record => record.name)
       if (names && names.length > 0) {
         const response = await client.mutate({
           mutation: gql`
@@ -400,7 +350,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
         })
 
         if (!response.errors) {
-          this.dataGrist.fetch()
+          this.grist.fetch()
           await document.dispatchEvent(
             new CustomEvent('notify', {
               detail: {
@@ -417,13 +367,13 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
 
   async stateChanged(state) {
     if (this.active && this._currentPopupName && !state.layout.viewparts[this._currentPopupName]) {
-      this.dataGrist.fetch()
+      this.grist.fetch()
       this._currentPopupName = null
     }
   }
 
   async _updateConnectionManager() {
-    let patches = this.dataGrist.dirtyRecords
+    let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(connection => {
         let patchField = connection.id ? { id: connection.id } : {}
@@ -449,7 +399,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
         }
       })
 
-      if (!response.errors) this.dataGrist.fetch()
+      if (!response.errors) this.grist.fetch()
     }
   }
 
@@ -471,7 +421,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
 
     record.state = state
 
-    this.dataGrist.refresh()
+    this.grist.refresh()
 
     document.dispatchEvent(
       new CustomEvent('notify', {
@@ -501,7 +451,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
 
     record.state = state
 
-    this.dataGrist.refresh()
+    this.grist.refresh()
 
     document.dispatchEvent(
       new CustomEvent('notify', {

package/client/pages/scenario-detail.js

@@ -1,11 +1,11 @@
-import { LitElement, css, html } from 'lit-element'
-import { i18next, localize } from '@things-factory/i18n-base'
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
 
-import { HelpDecoratedRenderer } from '@things-factory/help'
+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'
-import { client } from '@things-factory/shell'
-import gql from 'graphql-tag'
-import { isMobileDevice } from '@things-factory/utils'
 
 class ScenarioDetail extends localize(i18next)(LitElement) {
   static get properties() {
@@ -235,7 +235,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
   async fetchTaskType(name) {
     const response = await client.query({
       query: gql`
-        query($name: String!) {
+        query ($name: String!) {
           taskType(name: $name) {
             name
             description
@@ -273,7 +273,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
 
       const response = await client.mutate({
         mutation: gql`
-          mutation($scenarioId: String!, $patches: [StepPatch!]!) {
+          mutation ($scenarioId: String!, $patches: [StepPatch!]!) {
             updateMultipleStep(scenarioId: $scenarioId, patches: $patches) {
               name
             }
@@ -297,7 +297,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
 
     const response = await client.mutate({
       mutation: gql`
-        mutation($ids: [String!]!) {
+        mutation ($ids: [String!]!) {
           deleteSteps(ids: $ids)
         }
       `,

package/client/pages/scenario.js

@@ -21,7 +21,6 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       active: String,
-      searchConfig: Array,
       gristConfig: Object,
       taskTypes: Object
     }
@@ -38,15 +37,20 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           overflow: hidden;
         }
 
-        search-form {
-          overflow: visible;
-          --mdc-icon-size: 24px;
-        }
-
         ox-grist {
           overflow-y: auto;
           flex: 1;
         }
+
+        #filters {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+        }
+
+        #filters > * {
+          padding: var(--padding-default) var(--padding-wide);
+        }
       `
     ]
   }
@@ -96,74 +100,45 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
       >
-        <search-form
-          slot="headroom"
-          .fields=${this.searchConfig}
-          @submit=${async () => this.dataGrist.fetch()}
-        ></search-form>
+        <div slot="headroom" id="filters">
+          <ox-filters-form @change=${e => this.grist.fetch()}></ox-filters-form>
+        </div>
       </ox-grist>
     `
   }
 
-  get searchForm() {
-    return this.renderRoot.querySelector('search-form')
+  get filtersForm() {
+    return this.renderRoot.querySelector('ox-filters-form')
   }
 
-  get dataGrist() {
+  get grist() {
     return this.renderRoot.querySelector('ox-grist')
   }
 
   // update with url params value
   _updateSearchConfig(lifecycle) {
-    this.searchConfig = this.searchConfig.map(conf => {
-      if (conf.name in lifecycle.params) {
-        conf.value = lifecycle.params[conf.name]
-      } else {
-        delete conf.value
-      }
-      return conf
-    })
+    // this.searchConfig = this.searchConfig.map(conf => {
+    // if (conf.name in lifecycle.params) {
+    //   conf.value = lifecycle.params[conf.name]
+    // } else {
+    //   delete conf.value
+    // }
+    // return conf
+    // })
   }
 
   // set default field value to record with searchConfig
   _setDefaultFieldsValue(fields) {
-    this.searchConfig.forEach(conf => {
-      if (!fields[conf.name] && conf.value) {
-        fields[conf.name] = conf.value
-      }
-    })
+    // this.searchConfig.forEach(conf => {
+    //   if (!fields[conf.name] && conf.value) {
+    //     fields[conf.name] = conf.value
+    //   }
+    // })
   }
 
   async pageInitialized(lifecycle) {
     this.fetchTaskTypes()
 
-    this.searchConfig = [
-      {
-        name: 'name',
-        type: 'text',
-        props: {
-          placeholder: i18next.t('field.name'),
-          searchOper: 'like'
-        }
-      },
-      {
-        name: 'type',
-        type: 'text',
-        props: {
-          placeholder: i18next.t('field.type'),
-          searchOper: 'like'
-        }
-      },
-      {
-        name: 'description',
-        type: 'text',
-        props: {
-          placeholder: i18next.t('field.description'),
-          searchOper: 'like'
-        }
-      }
-    ]
-
     this._updateSearchConfig(lifecycle)
 
     this.gristConfig = {
@@ -202,7 +177,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
                   <scenario-detail
                     .scenario=${record}
                     .taskTypes=${this.taskTypes}
-                    @requestRefresh="${() => this.dataGrist.fetch()}"
+                    @requestRefresh="${() => this.grist.fetch()}"
                   ></scenario-detail>
                 `,
                 {
@@ -245,6 +220,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           width: 100
         },
         {
@@ -325,7 +301,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
 
     await this.updateComplete
 
-    this.dataGrist.fetch()
+    this.grist.fetch()
   }
 
   async pageUpdated(changes, lifecycle) {
@@ -334,7 +310,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
       this._updateSearchConfig(lifecycle)
       await this.updateComplete
 
-      this.dataGrist.fetch()
+      this.grist.fetch()
     }
   }
 
@@ -373,7 +349,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
         }
       `,
       variables: {
-        filters: this._conditionParser(),
+        filters: await this.filtersForm.getQueryFilters(),
         pagination: { page, limit },
         sortings: sorters
       }
@@ -417,28 +393,9 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  _conditionParser() {
-    return this.searchForm.formFields
-      .filter(field => (field.type !== 'checkbox' && field.value && field.value !== '') || field.type === 'checkbox')
-      .map(field => {
-        return {
-          name: field.name,
-          value:
-            field.type === 'text'
-              ? field.value
-              : field.type === 'checkbox'
-              ? field.checked
-              : field.type === 'number'
-              ? parseFloat(field.value)
-              : field.value,
-          operator: field.getAttribute('searchOper')
-        }
-      })
-  }
-
   async _deleteScenario() {
     if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
-      const ids = this.dataGrist.selected.map(record => record.id)
+      const ids = this.grist.selected.map(record => record.id)
       if (ids && ids.length > 0) {
         const response = await client.mutate({
           mutation: gql`
@@ -452,7 +409,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
         })
 
         if (!response.errors) {
-          this.dataGrist.fetch()
+          this.grist.fetch()
           notify({
             message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
           })
@@ -463,13 +420,13 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
 
   async stateChanged(state) {
     if (this.active && this._currentPopupName && !state.layout.viewparts[this._currentPopupName]) {
-      this.dataGrist.fetch()
+      this.grist.fetch()
       this._currentPopupName = null
     }
   }
 
   async _copyScenario() {
-    var selected = this.dataGrist.selected
+    var selected = this.grist.selected
     if (selected.length == 0) return
 
     if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.copy') }))) return
@@ -486,11 +443,11 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
       }
     })
 
-    if (!response.errors) this.dataGrist.fetch()
+    if (!response.errors) this.grist.fetch()
   }
 
   async _updateScenario() {
-    let patches = this.dataGrist.dirtyRecords
+    let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
         let patchField = patch.id ? { id: patch.id } : {}
@@ -519,7 +476,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
         }
       })
 
-      if (!response.errors) this.dataGrist.fetch()
+      if (!response.errors) this.grist.fetch()
     }
   }
 
@@ -541,7 +498,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
     const state = response.data.startScenario.state
     record.state = state
 
-    this.dataGrist.refresh()
+    this.grist.refresh()
 
     notify({
       level: 'info',
@@ -566,7 +523,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
     const state = response.data.stopScenario.state
     record.state = state
 
-    this.dataGrist.refresh()
+    this.grist.refresh()
 
     notify({
       level: 'info',
@@ -575,7 +532,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
   }
 
   async exportHandler() {
-    const exportTargets = this.dataGrist.selected.length ? this.dataGrist.selected : this.dataGrist.dirtyData.records
+    const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
     const targetFieldSet = new Set(['id', 'name', 'type', 'description', 'active', 'schedule', 'timezone', 'steps'])
 
     return exportTargets.map(scenario => {
@@ -595,7 +552,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           .scenarios="${records}"
           @imported="${() => {
             history.back()
-            this.dataGrist.fetch()
+            this.grist.fetch()
           }}"
         ></scenario-importer>
       `,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/integration-ui",
-  "version": "4.0.38",
+  "version": "4.0.42",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,14 +24,20 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@operato/data-grist": "^0.3.18",
-    "@operato/property-editor": "^0.3.18",
-    "@things-factory/export-base": "^4.0.38",
-    "@things-factory/import-base": "^4.0.38",
-    "@things-factory/integration-base": "^4.0.38",
-    "@things-factory/modeller-ui": "^4.0.38",
+    "@operato/data-grist": "^0.3.24",
+    "@operato/graphql": "^0.3.24",
+    "@operato/help": "^0.3.24",
+    "@operato/i18n": "^0.3.24",
+    "@operato/layout": "^0.3.24",
+    "@operato/property-editor": "^0.3.24",
+    "@operato/styles": "^0.3.24",
+    "@operato/utils": "^0.3.24",
+    "@things-factory/export-base": "^4.0.42",
+    "@things-factory/import-base": "^4.0.42",
+    "@things-factory/integration-base": "^4.0.42",
+    "@things-factory/modeller-ui": "^4.0.42",
     "moment-timezone": "^0.5.27",
     "subscriptions-transport-ws": "^0.11.0"
   },
-  "gitHead": "c2b2638e6efec319d4024cedc8da513d560c126e"
+  "gitHead": "794709ebadf4ae0f89a107a86a41a381ce26b465"
 }