@things-factory/dataset 5.0.0-alpha.40 → 5.0.0-alpha.41

package/client/pages/data-ooc/data-ooc-list-page.js

@@ -9,20 +9,22 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
 export class DataOocListPage extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       active: String,
-      gristConfig: Object
+      gristConfig: Object,
+      mode: String
     }
   }
 
   static get styles() {
     return [
       ScrollbarStyles,
+      CommonGristStyles,
       css`
         :host {
           display: flex;
@@ -35,18 +37,6 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           overflow-y: auto;
           flex: 1;
         }
-
-        #filters {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-
-          background-color: white;
-        }
-
-        #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
-        }
       `
     ]
   }
@@ -70,14 +60,42 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
   }
 
   render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
     return html`
       <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .mode=${mode}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        url-params-sensitive
       >
-        <div slot="headroom" id="filters">
-          <ox-filters-form></ox-filters-form>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
         </div>
       </ox-grist>
     `
@@ -87,30 +105,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     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
-    // })
-  }
-
-  // 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
-    //   }
-    // })
-  }
-
   async pageInitialized(lifecycle) {
-    this._updateSearchConfig(lifecycle)
-
     this.gristConfig = {
       list: {
         fields: ['dataSet', 'data', 'spec', 'correctiveAction', 'corrector', 'correctedAt', 'collectedAt', 'creator']
@@ -321,15 +316,15 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     this.grist.fetch()
   }
 
-  async pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      // update with url params value
-      this._updateSearchConfig(lifecycle)
-      await this.updateComplete
+  // async pageUpdated(changes, lifecycle) {
+  //   if (this.active) {
+  //     // update with url params value
+  //     this._updateSearchConfig(lifecycle)
+  //     await this.updateComplete
 
-      this.grist.fetch()
-    }
-  }
+  //     this.grist.fetch()
+  //   }
+  // }
 
   async fetchHandler({ page, limit, sortings = [], filters = [] }) {
     const response = await client.query({

package/client/pages/data-report/data-report-list-page.js

@@ -25,7 +25,7 @@ const USECASE_OPTIONS = () => {
 }
 
 const showMonitorView = (columns, data, column, record, rowIndex) => {
-  const { name, monitorType, monitorView } = record
+  const { id, name, monitorType, monitorView } = record
   const title = `${name} - ${i18next.t('title.data-monitor-view')}`
 
   switch (monitorType) {
@@ -73,7 +73,7 @@ const showMonitorView = (columns, data, column, record, rowIndex) => {
 }
 
 const showReportView = (columns, data, column, record, rowIndex) => {
-  const { name, reportType, reportView } = record
+  const { id, name, reportType, reportView } = record
   const title = `${name} - ${i18next.t('title.data-report-view')}`
 
   switch (reportType) {
@@ -99,7 +99,7 @@ const showReportView = (columns, data, column, record, rowIndex) => {
       break
 
     case 'page':
-      navigate(reportView)
+      navigate(reportView + `/${id}`)
       break
 
     case 'external':

package/client/pages/data-report/jasper-report-oocs-page.js

@@ -0,0 +1,115 @@
+import { css, html } from 'lit'
+import '@operato/data-grist'
+import '@things-factory/form-ui'
+
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@things-factory/shell'
+import { throws } from 'assert'
+
+class JasperReportOocsPage extends localize(i18next)(PageView) {
+  static get properties() {
+    return {
+      _grnNo: String,
+      _status: String,
+      searchFields: Array,
+      resourceId: String,
+      params: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          padding: 0;
+        }
+
+        #container {
+          flex: 1;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    this.searchFields = [
+      {
+        label: i18next.t('field.from'),
+        name: 'fromDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq'
+        }
+      },
+      {
+        label: i18next.t('field.to'),
+        name: 'toDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq'
+        }
+      }
+    ]
+    var actions = [
+      {
+        title: i18next.t('button.print'),
+        action: () => {
+          this.renderRoot.querySelector('iframe').contentWindow.print()
+        },
+        ...CommonButtonStyles.print
+      }
+    ]
+    return {
+      title: 'jasper-report',
+      actions
+    }
+  }
+  render() {
+    return html`
+      <search-form
+        .fields=${this.searchFields}
+        @submit=${() => {
+          this._reportTemplate()
+        }}
+      ></search-form>
+      <iframe id="container"></iframe>
+    `
+  }
+
+  get searchForm() {
+    return this.renderRoot.querySelector('search-form')
+  }
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.updateContext()
+    }
+  }
+
+  async _reportTemplate() {
+    const params = await this.searchForm.getQueryFilters()
+
+    /** urlencoded params including test values */
+    const urlParams = {
+      table: 'oocs',
+      dataSetId: this.lifecycle.resourceId,
+      fromWorkDate: params[0].value,
+      toWorkDate: params[1].value,
+      workShift: 'NA'
+    }
+    
+    const encodedUrlParams = Object.keys(urlParams).map(key =>
+      `${key}=${encodeURIComponent(urlParams[key])}`
+    ).join('&')
+
+    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+  }
+}
+
+window.customElements.define('jasper-report-oocs-page', JasperReportOocsPage)

package/client/pages/data-report/jasper-report-samples-page.js

@@ -0,0 +1,115 @@
+import { css, html } from 'lit'
+import '@operato/data-grist'
+import '@things-factory/form-ui'
+
+import { i18next, localize } from '@operato/i18n'
+import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@things-factory/shell'
+import { throws } from 'assert'
+
+class JasperReportSamplesPage extends localize(i18next)(PageView) {
+  static get properties() {
+    return {
+      _grnNo: String,
+      _status: String,
+      searchFields: Array,
+      resourceId: String,
+      params: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          padding: 0;
+        }
+
+        #container {
+          flex: 1;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+      `
+    ]
+  }
+
+  get context() {
+    this.searchFields = [
+      {
+        label: i18next.t('field.from'),
+        name: 'fromDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq'
+        }
+      },
+      {
+        label: i18next.t('field.to'),
+        name: 'toDate',
+        type: 'date',
+        props: {
+          searchOper: 'eq'
+        }
+      }
+    ]
+    var actions = [
+      {
+        title: i18next.t('button.print'),
+        action: () => {
+          this.renderRoot.querySelector('iframe').contentWindow.print()
+        },
+        ...CommonButtonStyles.print
+      }
+    ]
+    return {
+      title: 'jasper-report',
+      actions
+    }
+  }
+  render() {
+    return html`
+      <search-form
+        .fields=${this.searchFields}
+        @submit=${() => {
+          this._reportTemplate()
+        }}
+      ></search-form>
+      <iframe id="container"></iframe>
+    `
+  }
+
+  get searchForm() {
+    return this.renderRoot.querySelector('search-form')
+  }
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.updateContext()
+    }
+  }
+
+  async _reportTemplate() {
+    const params = await this.searchForm.getQueryFilters()
+
+    /** urlencoded params including test values */
+    const urlParams = {
+      table: 'samples',
+      dataSetId: this.lifecycle.resourceId,
+      fromWorkDate: params[0].value,
+      toWorkDate: params[1].value,
+      workShift: 'NA'
+    }
+    
+    const encodedUrlParams = Object.keys(urlParams).map(key =>
+      `${key}=${encodeURIComponent(urlParams[key])}`
+    ).join('&')
+
+    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+  }
+}
+
+window.customElements.define('jasper-report-samples-page', JasperReportSamplesPage)

package/client/pages/data-sample/data-sample-list-page.js

@@ -9,20 +9,22 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
 export class DataSampleListPage extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       active: String,
-      gristConfig: Object
+      gristConfig: Object,
+      mode: String
     }
   }
 
   static get styles() {
     return [
       ScrollbarStyles,
+      CommonGristStyles,
       css`
         :host {
           display: flex;
@@ -35,18 +37,6 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
           overflow-y: auto;
           flex: 1;
         }
-
-        #filters {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-
-          background-color: white;
-        }
-
-        #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
-        }
       `
     ]
   }
@@ -64,14 +54,42 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
   }
 
   render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
     return html`
       <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .mode=${mode}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        url-params-sensitive
       >
-        <div slot="headroom" id="filters">
-          <ox-filters-form></ox-filters-form>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
         </div>
       </ox-grist>
     `
@@ -81,30 +99,7 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
     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
-    // })
-  }
-
-  // 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
-    //   }
-    // })
-  }
-
   async pageInitialized(lifecycle) {
-    this._updateSearchConfig(lifecycle)
-
     this.gristConfig = {
       list: { fields: ['dataSet', 'data', 'spec', 'updater', 'updatedAt'] },
       columns: [
@@ -292,15 +287,15 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
     this.grist.fetch()
   }
 
-  async pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      // update with url params value
-      this._updateSearchConfig(lifecycle)
-      await this.updateComplete
+  // async pageUpdated(changes, lifecycle) {
+  //   if (this.active) {
+  //     // update with url params value
+  //     this._updateSearchConfig(lifecycle)
+  //     await this.updateComplete
 
-      this.grist.fetch()
-    }
-  }
+  //     this.grist.fetch()
+  //   }
+  // }
 
   async fetchHandler({ page, limit, sortings = [], filters = [] }) {
     const response = await client.query({

package/client/pages/data-sensor/data-sensor-list-page.js

@@ -8,20 +8,22 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
 export class DataSensorListPage extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       active: String,
-      gristConfig: Object
+      gristConfig: Object,
+      mode: String
     }
   }
 
   static get styles() {
     return [
       ScrollbarStyles,
+      CommonGristStyles,
       css`
         :host {
           display: flex;
@@ -34,18 +36,6 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
           overflow-y: auto;
           flex: 1;
         }
-
-        #filters {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-
-          background-color: white;
-        }
-
-        #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
-        }
       `
     ]
   }
@@ -75,14 +65,42 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
   }
 
   render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
     return html`
       <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .mode=${mode}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        url-params-sensitive
       >
-        <div slot="headroom" id="filters">
-          <ox-filters-form></ox-filters-form>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
         </div>
       </ox-grist>
     `
@@ -92,30 +110,7 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
     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
-    // })
-  }
-
-  // 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
-    //   }
-    // })
-  }
-
   async pageInitialized(lifecycle) {
-    this._updateSearchConfig(lifecycle)
-
     this.gristConfig = {
       list: { fields: ['name', 'description', 'active'] },
       columns: [
@@ -273,8 +268,8 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
         },
         {
           type: 'datetime',
-          name: 'collectedAt',
-          header: i18next.t('field.collected-at'),
+          name: 'updatedAt',
+          header: i18next.t('field.updated-at'),
           record: {
             editable: false
           },
@@ -299,16 +294,6 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
     this.grist.fetch()
   }
 
-  async pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      // update with url params value
-      this._updateSearchConfig(lifecycle)
-      await this.updateComplete
-
-      this.grist.fetch()
-    }
-  }
-
   async fetchHandler({ page, limit, sortings = [], filters = [] }) {
     const response = await client.query({
       query: gql`
@@ -414,7 +399,6 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
         }
-        this._setDefaultFieldsValue(patchField)
         patchField.cuFlag = patch.__dirty__
 
         return patchField