@things-factory/dataset 6.0.25 → 6.0.28

package/client/pages/data-report/{data-report-list-page.js → data-report-list-page.ts}

@@ -3,17 +3,20 @@ import '@operato/board/ox-board-viewer.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { getRenderer } from '@operato/data-grist'
+import { getEditor, getRenderer, ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { OxDataUseCase } from '@operato/dataset'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { navigate, PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { OxPopup } from '@operato/popup'
+import { encodeUrlParams } from '@operato/utils'
+
 import { provider } from '@things-factory/board-ui'
-import { encodeUrlParams } from '@things-factory/utils'
 
 const USECASE_OPTIONS = () => {
   return ['', ...OxDataUseCase.getUseCaseNames()].map(name => {
@@ -62,6 +65,9 @@ const showMonitorView = (columns, data, column, record, rowIndex) => {
       // navigate(`board-viewer/${monitorView}?interactive=true&title=${title}`)
       break
 
+    case 'custom-element':
+      break
+
     case 'page':
       navigate(monitorView)
       break
@@ -73,8 +79,8 @@ const showMonitorView = (columns, data, column, record, rowIndex) => {
 }
 
 const showReportView = (columns, data, column, record, rowIndex) => {
-  const { id:datasetId, dataKeySet, name, reportType, reportView, reportTemplate } = record
-  const { id:dataKeySetId } = dataKeySet || { id: '' }
+  const { id: datasetId, dataKeySet, name, reportType, reportView, reportTemplate } = record
+  const { id: dataKeySetId } = dataKeySet || { id: '' }
   const title = `${name} - ${i18next.t('title.data-report-view')}`
 
   switch (reportType) {
@@ -89,55 +95,63 @@ const showReportView = (columns, data, column, record, rowIndex) => {
     case 'embed':
       break
 
+    case 'custom-element':
+      break
+
     case 'page':
       break
 
     case 'external':
       window.open(reportView, '_blank')
       break
-    
+
     case 'jasper':
     case 'shiny':
       const encodedUrlParams = encodeUrlParams({ datasetId, dataKeySetId, reportType, reportView, reportTemplate })
       navigate(`/data-report-samples/?${encodedUrlParams}`)
       break
-    
+
     default:
       break
   }
 }
 
+@customElement('data-report-list-page')
 export class DataReportListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      active: String,
-      gristConfig: Object,
-      filters: Object,
-      sorters: Object,
-      mode: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
+        width: 100%;
 
-          width: 100%;
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+    `
+  ]
 
-          --grid-record-emphasized-background-color: red;
-          --grid-record-emphasized-color: yellow;
-        }
-      `
-    ]
-  }
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = 'CARD'
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
-      title: i18next.t('title.data-report list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-report list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-report-list'
     }
   }
@@ -149,13 +163,12 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
       <ox-grist
         .mode=${mode}
         .config=${this.gristConfig}
-        .filters=${this.filters}
-        .orders=${this.orders}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
       >
         <div slot="headroom">
           <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
 
           <div id="sorters">
@@ -163,7 +176,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sortersControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -179,10 +192,6 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -275,8 +284,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
           record: {
             editable: false
           },
-          width: 80,
-          label: true
+          width: 80
         },
         {
           type: 'resource-object',
@@ -358,7 +366,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 
-  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -430,5 +438,3 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 }
-
-window.customElements.define('data-report-list-page', DataReportListPage)

package/client/pages/data-report/{data-report-samples-page.js → data-report-samples-page.ts}

@@ -6,46 +6,41 @@ import '@operato/data-grist'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { PageView, store } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
+import { encodeUrlParams } from '@operato/utils'
+import { FetchOption } from '@operato/data-grist'
 
-import { encodeUrlParams } from '@things-factory/utils'
-
+@customElement('data-report-samples-page')
 export class DataReportSamplesPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      dataKeySetId: String,
-      dataKeySet: Object,
-      active: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          padding: 0;
-        }
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
 
-        #container {
-          flex: 1;
-          padding: 0;
-          margin: 0;
-          border: 0;
-        }
-      `
-    ]
-  }
+  @state() dataKeySetId?: string
+  @state() dataKeySet: any
+  @query('iframe') container!: HTMLIFrameElement
 
   get context() {
-
     const today = new Date().toISOString().split('T')[0]
 
     const filters = [
@@ -82,12 +77,7 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
 
   render() {
     // clear if pre-loaded
-    const container = this.shadowRoot.querySelector('#container')
-    if (container) {
-      container.src = ""
-      // @TODO: Clear filters
-      /** */
-    }
+    this.container.src = ''
 
     return html`
       <ox-filters-form-base
@@ -98,7 +88,8 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
         }}
         ?url-params-sensitive=${this.active}
       ></ox-filters-form-base>
-      <iframe id="container"></iframe>
+
+      <iframe></iframe>
     `
   }
 
@@ -132,7 +123,7 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
     const encodedUrlParams = encodeUrlParams(urlParams)
 
     const reportUrl = `/data-report/${urlParams.reportType}/`
-    this.shadowRoot.querySelector('#container').src = `${reportUrl}?${encodedUrlParams}`
+    this.container.src = `${reportUrl}?${encodedUrlParams}`
   }
 
   pageUpdated(changes, lifecycle) {
@@ -143,14 +134,12 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
     }
   }
 
-  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
-
-  }
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {}
 
   async updated(changes) {
     if (changes.has('dataKeySetId')) {
       if (!this.dataKeySetId) {
-        this.dataKeySet  = null
+        this.dataKeySet = null
         return
       }
 
@@ -180,7 +169,4 @@ export class DataReportSamplesPage extends connect(store)(localize(i18next)(Page
       this.dataKeySet = response.data.dataKeySet
     }
   }
-
 }
-
-window.customElements.define('data-report-samples-page', DataReportSamplesPage)

package/client/pages/data-report/{jasper-report-oocs-page.js → jasper-report-oocs-page.ts}

@@ -2,40 +2,33 @@ import '@operato/data-grist'
 import '@operato/form'
 
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { PageView } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView } from '@things-factory/shell'
 
+@customElement('jasper-report-oocs-page')
 class JasperReportOocsPage extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      _grnNo: String,
-      _status: String,
-      resourceId: String,
-      params: Object
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          padding: 0;
-        }
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
 
-        #container {
-          flex: 1;
-          padding: 0;
-          margin: 0;
-          border: 0;
-        }
-      `
-    ]
-  }
+  @query('iframe') container!: HTMLIFrameElement
 
   get context() {
     const filters = [
@@ -50,7 +43,7 @@ class JasperReportOocsPage extends localize(i18next)(PageView) {
       {
         title: i18next.t('button.print'),
         action: () => {
-          this.renderRoot.querySelector('iframe').contentWindow.print()
+          this.container.contentWindow?.print()
         },
         ...CommonButtonStyles.print
       }
@@ -76,9 +69,6 @@ class JasperReportOocsPage extends localize(i18next)(PageView) {
     `
   }
 
-  get searchForm() {
-    return this.renderRoot.querySelector('ox-filters-form-base')
-  }
   async pageUpdated(changes, lifecycle) {
     if (this.active) {
       this.updateContext()
@@ -115,8 +105,6 @@ class JasperReportOocsPage extends localize(i18next)(PageView) {
       .map(key => `${key}=${encodeURIComponent(urlParams[key])}`)
       .join('&')
 
-    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+    this.container.src = `/data-report/jasper?${encodedUrlParams}`
   }
 }
-
-window.customElements.define('jasper-report-oocs-page', JasperReportOocsPage)

package/client/pages/data-report/{jasper-report-samples-crosstab-page.js → jasper-report-samples-crosstab-page.ts}

@@ -2,40 +2,33 @@ import '@operato/data-grist'
 import '@operato/form'
 
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { PageView } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView } from '@things-factory/shell'
 
+@customElement('jasper-report-samples-crosstab-page')
 class JasperReportSamplesCrosstabPage extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      _grnNo: String,
-      _status: String,
-      resourceId: String,
-      params: Object
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          padding: 0;
-        }
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
 
-        #container {
-          flex: 1;
-          padding: 0;
-          margin: 0;
-          border: 0;
-        }
-      `
-    ]
-  }
+  @query('iframe') container!: HTMLIFrameElement
 
   get context() {
     const filters = [
@@ -50,7 +43,7 @@ class JasperReportSamplesCrosstabPage extends localize(i18next)(PageView) {
       {
         title: i18next.t('button.print'),
         action: () => {
-          this.renderRoot.querySelector('iframe').contentWindow.print()
+          this.container.contentWindow?.print()
         },
         ...CommonButtonStyles.print
       }
@@ -76,9 +69,6 @@ class JasperReportSamplesCrosstabPage extends localize(i18next)(PageView) {
     `
   }
 
-  get searchForm() {
-    return this.renderRoot.querySelector('ox-filters-form-base')
-  }
   async pageUpdated(changes, lifecycle) {
     if (this.active) {
       this.updateContext()
@@ -115,8 +105,6 @@ class JasperReportSamplesCrosstabPage extends localize(i18next)(PageView) {
       .map(key => `${key}=${encodeURIComponent(urlParams[key])}`)
       .join('&')
 
-    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+    this.container.src = `/data-report/jasper?${encodedUrlParams}`
   }
 }
-
-window.customElements.define('jasper-report-samples-crosstab-page', JasperReportSamplesCrosstabPage)

package/client/pages/data-report/{jasper-report-samples-page.js → jasper-report-samples-page.ts}

@@ -2,40 +2,33 @@ import '@operato/data-grist'
 import '@operato/form'
 
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { PageView } from '@operato/shell'
 import { i18next, localize } from '@operato/i18n'
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView } from '@things-factory/shell'
 
+@customElement('jasper-report-samples-page')
 class JasperReportSamplesPage extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      _grnNo: String,
-      _status: String,
-      resourceId: String,
-      params: Object
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          padding: 0;
-        }
+      #container {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    `
+  ]
 
-        #container {
-          flex: 1;
-          padding: 0;
-          margin: 0;
-          border: 0;
-        }
-      `
-    ]
-  }
+  @query('iframe') container!: HTMLIFrameElement
 
   get context() {
     const filters = [
@@ -50,7 +43,7 @@ class JasperReportSamplesPage extends localize(i18next)(PageView) {
       {
         title: i18next.t('button.print'),
         action: () => {
-          this.renderRoot.querySelector('iframe').contentWindow.print()
+          this.container.contentWindow?.print()
         },
         ...CommonButtonStyles.print
       }
@@ -76,9 +69,6 @@ class JasperReportSamplesPage extends localize(i18next)(PageView) {
     `
   }
 
-  get searchForm() {
-    return this.renderRoot.querySelector('ox-filters-form-base')
-  }
   async pageUpdated(changes, lifecycle) {
     if (this.active) {
       this.updateContext()
@@ -115,8 +105,6 @@ class JasperReportSamplesPage extends localize(i18next)(PageView) {
       .map(key => `${key}=${encodeURIComponent(urlParams[key])}`)
       .join('&')
 
-    this.shadowRoot.querySelector('#container').src = `/data-report/jasper?${encodedUrlParams}`
+    this.container.src = `/data-report/jasper?${encodedUrlParams}`
   }
 }
-
-window.customElements.define('jasper-report-samples-page', JasperReportSamplesPage)