@things-factory/integration-ui 4.0.37 → 4.0.41

package/client/pages/connection.js

@@ -1,20 +1,19 @@
 import '@operato/data-grist'
 
-import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { PageView, client, store } from '@things-factory/shell'
+import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { connect } from 'pwa-helpers/connect-mixin'
 
 import { HelpDecoratedRenderer } from '@things-factory/help'
-import { connect } from 'pwa-helpers/connect-mixin'
-import gql from 'graphql-tag'
+import { i18next, localize } from '@things-factory/i18n-base'
+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: [
@@ -161,6 +128,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           sortable: true,
           width: 150,
           validation: function (after, before, record, column) {
@@ -187,6 +155,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           width: 200
         },
         {
@@ -210,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
         },
@@ -220,6 +190,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           sortable: true,
           width: 200
         },
@@ -231,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 }
             }
           },
@@ -272,21 +243,21 @@ 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()
     }
   }
 
   async fetchHandler({ page, limit, sorters = [] }) {
     const response = await client.query({
       query: gql`
-        query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
           responses: connections(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
@@ -314,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
       }
@@ -357,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(
@@ -384,11 +336,11 @@ 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`
-            mutation($names: [String!]!) {
+            mutation ($names: [String!]!) {
               deleteConnections(names: $names)
             }
           `,
@@ -398,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: {
@@ -415,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 } : {}
@@ -436,7 +388,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
 
       const response = await client.mutate({
         mutation: gql`
-          mutation($patches: [ConnectionPatch!]!) {
+          mutation ($patches: [ConnectionPatch!]!) {
             updateMultipleConnection(patches: $patches) {
               name
             }
@@ -447,14 +399,14 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
         }
       })
 
-      if (!response.errors) this.dataGrist.fetch()
+      if (!response.errors) this.grist.fetch()
     }
   }
 
   async connect(record) {
     var response = await client.mutate({
       mutation: gql`
-        mutation($name: String!) {
+        mutation ($name: String!) {
           connectConnection(name: $name) {
             state
           }
@@ -469,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', {
@@ -484,7 +436,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
   async disconnect(record) {
     var response = await client.mutate({
       mutation: gql`
-        mutation($name: String!) {
+        mutation ($name: String!) {
           disconnectConnection(name: $name) {
             state
           }
@@ -499,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.js

@@ -2,16 +2,16 @@ import '@operato/data-grist'
 import './scenario-detail'
 import './scenario-importer'
 
-import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { PageView, client, navigate, store } from '@things-factory/shell'
+import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
+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 { connect } from 'pwa-helpers/connect-mixin'
-import gql from 'graphql-tag'
+import { client, navigate, PageView, store } from '@things-factory/shell'
+import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
 import { isMobileDevice } from '@things-factory/utils'
-import moment from 'moment-timezone'
 
 function IS_SCENARIO_RUNNING(state) {
   return state && state !== 'UNLOADED'
@@ -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: 'eq'
-        }
-      },
-      {
-        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>
                 `,
                 {
@@ -223,6 +198,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           sortable: true,
           width: 150,
           validation: function (after, before, record, column) {
@@ -244,6 +220,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           width: 100
         },
         {
@@ -254,6 +231,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           width: 200
         },
         {
@@ -323,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) {
@@ -332,14 +310,14 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
       this._updateSearchConfig(lifecycle)
       await this.updateComplete
 
-      this.dataGrist.fetch()
+      this.grist.fetch()
     }
   }
 
   async fetchHandler({ page, limit, sorters = [] }) {
     const response = await client.query({
       query: gql`
-        query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
           responses: scenarios(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
@@ -371,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
       }
@@ -415,32 +393,13 @@ 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`
-            mutation($ids: [String!]!) {
+            mutation ($ids: [String!]!) {
               deleteScenarios(ids: $ids)
             }
           `,
@@ -450,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') })
           })
@@ -461,19 +420,19 @@ 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
     var response = await client.mutate({
       mutation: gql`
-        mutation($ids: [String!]!) {
+        mutation ($ids: [String!]!) {
           copyScenarios(ids: $ids) {
             id
           }
@@ -484,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 } : {}
@@ -506,7 +465,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
 
       const response = await client.mutate({
         mutation: gql`
-          mutation($patches: [ScenarioPatch!]!) {
+          mutation ($patches: [ScenarioPatch!]!) {
             updateMultipleScenario(patches: $patches) {
               name
             }
@@ -517,14 +476,14 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
         }
       })
 
-      if (!response.errors) this.dataGrist.fetch()
+      if (!response.errors) this.grist.fetch()
     }
   }
 
   async startScenario(record) {
     var response = await client.mutate({
       mutation: gql`
-        mutation($scenarioName: String!, $instanceName: String) {
+        mutation ($scenarioName: String!, $instanceName: String) {
           startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {
             state
           }
@@ -539,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',
@@ -550,7 +509,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
   async stopScenario(record) {
     var response = await client.mutate({
       mutation: gql`
-        mutation($instanceName: String!) {
+        mutation ($instanceName: String!) {
           stopScenario(instanceName: $instanceName) {
             state
           }
@@ -564,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',
@@ -573,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 => {
@@ -593,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.37",
+  "version": "4.0.41",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,14 +24,14 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@operato/data-grist": "^0.3.17",
-    "@operato/property-editor": "^0.3.17",
-    "@things-factory/export-base": "^4.0.37",
-    "@things-factory/import-base": "^4.0.37",
-    "@things-factory/integration-base": "^4.0.37",
-    "@things-factory/modeller-ui": "^4.0.37",
+    "@operato/data-grist": "^0.3.21",
+    "@operato/property-editor": "^0.3.21",
+    "@things-factory/export-base": "^4.0.41",
+    "@things-factory/import-base": "^4.0.41",
+    "@things-factory/integration-base": "^4.0.41",
+    "@things-factory/modeller-ui": "^4.0.41",
     "moment-timezone": "^0.5.27",
     "subscriptions-transport-ws": "^0.11.0"
   },
-  "gitHead": "7abd5ee06f7329c7fbb0c305f7b075a990bc2c18"
+  "gitHead": "1dd445b5b5e5b9e37291dc274886131199d7bf6a"
 }