@things-factory/dataset 6.0.25 → 6.0.27

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)

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

@@ -3,47 +3,66 @@ import './data-sample-view.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 {
+  getEditor,
+  getRenderer,
+  ColumnConfig,
+  DataGrist,
+  FetchOption,
+  SortersControl,
+  GristRecord
+} from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
 
+@customElement('data-sample-list-page')
 export class DataSampleListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      active: String,
-      gristConfig: Object,
-      mode: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+        overflow: hidden;
+      }
 
-          overflow: hidden;
-        }
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
 
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-      `
-    ]
-  }
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
-      title: i18next.t('title.data-sample list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-sample list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-sample',
       actions: [],
       exportable: {
@@ -65,7 +84,7 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
       >
         <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">
@@ -73,7 +92,7 @@ export class DataSampleListPage 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
                 })
@@ -95,10 +114,6 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     const today = new Date().toISOString().split('T')[0]
 
@@ -318,7 +333,7 @@ export class DataSampleListPage 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!]) {
@@ -365,7 +380,7 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
   }
 
   _exportableData() {
-    let records = []
+    let records = [] as GristRecord[]
     if (this.grist.selected && this.grist.selected.length > 0) {
       records = this.grist.selected
     } else {
@@ -377,7 +392,7 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
       .map(column => {
         return column.imex === true
           ? {
-              header: column.header.renderer(),
+              header: column.header.renderer(column),
               key: column.name,
               width: column.width,
               type: column.type
@@ -403,5 +418,3 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
     return { header: headerSetting, data: data }
   }
 }
-
-window.customElements.define('data-sample-list-page', DataSampleListPage)

package/client/pages/data-sample/{data-sample-search-page.js → data-sample-search-page.ts}

@@ -3,49 +3,69 @@ import './data-sample-view.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 {
+  getEditor,
+  getRenderer,
+  ColumnConfig,
+  DataGrist,
+  FetchOption,
+  SortersControl,
+  GristRecord
+} from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
 
+@customElement('data-sample-search-page')
 export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      dataKeySetId: String,
-      dataKeySet: Object,
-      active: String,
-      gristConfig: Object,
-      mode: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+        overflow: hidden;
+      }
 
-          overflow: hidden;
-        }
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
 
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-      `
-    ]
-  }
+  @state() dataKeySetId?: string
+  @state() dataKeySet: any
+
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
-      title: i18next.t('title.data-sample search'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-sample search'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-sample-search',
       actions: [],
       exportable: {
@@ -63,11 +83,11 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
         .mode=${mode}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${false /* this.active */}
+        ?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">
@@ -75,7 +95,7 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sortersControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -97,10 +117,6 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   pageUpdated(changes, lifecycle) {
     if (this.active) {
       this.dataKeySetId = lifecycle.resourceId
@@ -311,7 +327,7 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
     }
   }
 
-  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
     if (!this.dataKeySetId) {
       return { records: [], total: 0 }
     }
@@ -367,7 +383,7 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
   }
 
   _exportableData() {
-    let records = []
+    let records = [] as GristRecord[]
     if (this.grist.selected && this.grist.selected.length > 0) {
       records = this.grist.selected
     } else {
@@ -379,7 +395,7 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
       .map(column => {
         return column.imex === true
           ? {
-              header: column.header.renderer(),
+              header: column.header.renderer(column),
               key: column.name,
               width: column.width,
               type: column.type
@@ -405,5 +421,3 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
     return { header: headerSetting, data: data }
   }
 }
-
-window.customElements.define('data-sample-search-page', DataSampleSearchPage)

package/client/pages/data-sample/{data-sample-view.js → data-sample-view.ts}

@@ -2,48 +2,46 @@ import '@operato/dataset/ox-data-sample-view.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
+import { DataSample } from '@operato/dataset'
 
+@customElement('data-sample-view')
 class DataSampleView extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      dataSampleId: {
-        type: String,
-        attribute: 'data-sample-id'
-      },
-      dataSample: Object
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+        background-color: #fff;
+      }
 
-          background-color: #fff;
-        }
+      div[content] {
+        flex: 1;
 
-        div[content] {
-          flex: 1;
+        display: flex;
+        overflow: auto;
+      }
 
-          display: flex;
-          overflow: auto;
-        }
+      ox-data-sample-view {
+        flex: 1;
+        padding: var(--padding-wide);
+        overflow: auto;
+      }
+    `
+  ]
 
-        ox-data-sample-view {
-          flex: 1;
-          padding: var(--padding-wide);
-          overflow: auto;
-        }
-      `
-    ]
-  }
+  @property({
+    type: String,
+    attribute: 'data-sample-id'
+  })
+  dataSampleId?: string
+  @state() dataSample?: DataSample
 
   render() {
     return html`
@@ -110,5 +108,3 @@ class DataSampleView extends localize(i18next)(LitElement) {
     this.dataSample = response.data.dataSample
   }
 }
-
-window.customElements.define('data-sample-view', DataSampleView)