@things-factory/dataset 6.2.63 → 6.2.65

package/client/pages/data-archive/data-archive-list-page.ts

@@ -1,26 +1,18 @@
 import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.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 { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
+import { PopupHandle, openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-import { OxPopup, PopupHandle } from '@operato/popup'
 
 import './data-archive-request-popup'
 
@@ -28,7 +20,7 @@ import './data-archive-request-popup'
 export class DataArchiveListPage extends connect(store)(localize(i18next)(PageView)) {
   static styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -48,7 +40,6 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
   @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   private popup?: PopupHandle
 
@@ -69,7 +60,6 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
       help: 'dataset/data-archive',
       actions: [
         {
-          ...CommonButtonStyles.save,
           title: i18next.t('button.request-archive'),
           action: this.openArchivePopup.bind(this),
           icon: 'archive'
@@ -78,7 +68,8 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
       exportable: {
         name: i18next.t('title.data-archive list'),
         data: this._exportableData.bind(this)
-      }
+      },
+      toolbar: false
     }
   }
 
@@ -92,33 +83,17 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
         .fetchHandler=${this.fetchHandler.bind(this)}
         ?url-params-sensitive=${false /* this.active */}
       >
-        <div slot="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus without-search></ox-filters-form>
+        <div slot="headroom" class="header">
+          <div class="title">
+            <mwc-icon>summarize</mwc-icon>
+            ${i18next.t('title.data-archive list')}
           </div>
 
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.sortersControl.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 class="filters">
+            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
+          </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>
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
       </ox-grist>
     `

package/client/pages/data-key-set/data-key-item-list.ts

@@ -5,7 +5,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { getEditor, getRenderer, ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { DataGrist, FetchOption } from '@operato/data-grist'
 
 @customElement('data-key-item-list')
 export class DataKeyItemList extends localize(i18next)(LitElement) {

package/client/pages/data-key-set/data-key-set-list-page.ts

@@ -1,4 +1,5 @@
 import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
 import './data-key-set-importer.js'
 import './data-key-item-list'
 
@@ -7,23 +8,13 @@ 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,
-  GristData,
-  GristRecord
-} from '@operato/data-grist'
+import { getEditor, getRenderer, DataGrist, FetchOption } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { navigate, PageView, store } from '@operato/shell'
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice, encodeUrlParams } from '@operato/utils'
-import { OxPopup } from '@operato/popup'
 
 const REPORT_TYPES = [
   {
@@ -64,7 +55,7 @@ const REPORT_TYPES = [
 export class DataKeySetListPage extends connect(store)(localize(i18next)(PageView)) {
   static styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -74,6 +65,11 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
         --grid-record-emphasized-background-color: red;
         --grid-record-emphasized-color: yellow;
       }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
     `
   ]
 
@@ -81,7 +77,6 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
   @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
@@ -102,12 +97,12 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
         {
           title: i18next.t('button.save'),
           action: this._updateDataKeySet.bind(this),
-          ...CommonButtonStyles.save
+          icon: 'save'
         },
         {
           title: i18next.t('button.delete'),
           action: this._deleteDataKeySet.bind(this),
-          ...CommonButtonStyles.delete
+          icon: 'delete'
         }
       ],
       exportable: {
@@ -116,7 +111,8 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
       },
       importable: {
         handler: this.importHandler.bind(this)
-      }
+      },
+      toolbar: false
     }
   }
 
@@ -125,33 +121,17 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
 
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus without-search></ox-filters-form>
+        <div slot="headroom" class="header">
+          <div class="title">
+            <mwc-icon>summarize</mwc-icon>
+            ${i18next.t('title.data-key-set list')}
           </div>
 
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.sortersControl.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 class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </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>
+          <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
         </div>
       </ox-grist>
     `

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

@@ -25,23 +25,13 @@ function getOocStatus() {
   ]
 }
 
-import {
-  getEditor,
-  getRenderer,
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl,
-  GristData,
-  GristRecord
-} from '@operato/data-grist'
+import { DataGrist, FetchOption, 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 { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice, adjustFilters } from '@operato/utils'
-import { OxPopup } from '@operato/popup'
 
 @customElement('data-ooc-list-page')
 export class DataOocListPage extends connect(store)(localize(i18next)(PageView)) {
@@ -217,7 +207,8 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           label: true,
           header: i18next.t('field.corrective-action'),
           record: {
-            editable: true
+            editable: true,
+            language: 'text'
           },
           width: 150,
           imex: true

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

@@ -1,4 +1,5 @@
 import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/board/ox-board-viewer.js'
 
 import gql from 'graphql-tag'
@@ -6,14 +7,13 @@ 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 } from '@operato/data-grist'
+import { getRenderer, DataGrist, FetchOption } 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 { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { encodeUrlParams } from '@operato/utils'
 
 import { provider } from '@things-factory/board-ui'
@@ -120,7 +120,7 @@ const showReportView = (columns, data, column, record, rowIndex) => {
 export class DataReportListPage extends connect(store)(localize(i18next)(PageView)) {
   static styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -130,17 +130,23 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
         --grid-record-emphasized-background-color: red;
         --grid-record-emphasized-color: yellow;
       }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
     `
   ]
 
   @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'),
+      help: 'dataset/data-report-list',
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
@@ -152,7 +158,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
           this.grist.toggleHeadroom()
         }
       },
-      help: 'dataset/data-report-list'
+      toolbar: false
     }
   }
 
@@ -166,27 +172,17 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
         .fetchHandler=${this.fetchHandler.bind(this)}
         ?url-params-sensitive=${this.active}
       >
-        <div slot="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus without-search></ox-filters-form>
+        <div slot="headroom" class="header">
+          <div class="title">
+            <mwc-icon>summarize</mwc-icon>
+            ${i18next.t('title.data-report list')}
           </div>
 
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.sortersControl.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 class="filters">
+            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
           </div>
+
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
       </ox-grist>
     `

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

@@ -1,4 +1,5 @@
 import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
 import './data-sample-view.js'
 
 import gql from 'graphql-tag'
@@ -7,28 +8,19 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 import moment from 'moment-timezone'
 
-import {
-  getEditor,
-  getRenderer,
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl,
-  GristRecord
-} from '@operato/data-grist'
+import { DataGrist, FetchOption, 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 { CommonHeaderStyles, 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 styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -48,7 +40,6 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
   @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
@@ -69,7 +60,8 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
       exportable: {
         name: i18next.t('title.data-sample list'),
         data: this._exportableData.bind(this)
-      }
+      },
+      toolbar: false
     }
   }
 
@@ -83,33 +75,17 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
         .fetchHandler=${this.fetchHandler.bind(this)}
         ?url-params-sensitive=${false /* this.active */}
       >
-        <div slot="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus without-search></ox-filters-form>
+        <div slot="headroom" class="header">
+          <div class="title">
+            <mwc-icon>summarize</mwc-icon>
+            ${i18next.t('title.data-sample list')}
           </div>
 
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.sortersControl.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 class="filters">
+            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
           </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>
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
       </ox-grist>
     `

package/client/pages/data-sample/data-sample-search-page.ts

@@ -1,4 +1,5 @@
 import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
 import './data-sample-view.js'
 
 import gql from 'graphql-tag'
@@ -7,28 +8,19 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 import moment from 'moment-timezone'
 
-import {
-  getEditor,
-  getRenderer,
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl,
-  GristRecord
-} from '@operato/data-grist'
+import { DataGrist, FetchOption, 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 { CommonHeaderStyles, 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 styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -52,7 +44,6 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
   @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
@@ -73,7 +64,8 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
       exportable: {
         name: i18next.t('title.data-sample search'),
         data: this._exportableData.bind(this)
-      }
+      },
+      toolbar: false
     }
   }
 
@@ -82,33 +74,17 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
 
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus without-search></ox-filters-form>
+        <div slot="headroom" class="header">
+          <div class="title">
+            <mwc-icon>summarize</mwc-icon>
+            ${i18next.t('title.data-sample search')}
           </div>
 
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.sortersControl.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 class="filters">
+            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
           </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>
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
       </ox-grist>
     `

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

@@ -11,10 +11,9 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
-import { OxPopup } from '@operato/popup'
+import { DataGrist, FetchOption } from '@operato/data-grist'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 @customElement('data-sensor-list-page')
@@ -68,25 +67,19 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
       help: 'dataset/data-sensor',
       actions: [
         {
-          type: 'icon',
-          // icon: 'copy',
+          icon: 'content_copy',
           title: i18next.t('button.copy'),
-          action: this._copyDataSensor.bind(this),
-          ...CommonButtonStyles.copy
+          action: this._copyDataSensor.bind(this)
         },
         {
-          type: 'icon',
           icon: 'save',
           title: i18next.t('button.save'),
           action: this._updateDataSensor.bind(this)
-          // ...CommonButtonStyles.save
         },
         {
-          type: 'icon',
-          // icon: 'delete',
+          icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this._deleteDataSensor.bind(this),
-          ...CommonButtonStyles.delete
+          action: this._deleteDataSensor.bind(this)
         }
       ],
       toolbar: false

package/client/pages/data-set/data-item-list.ts

@@ -8,18 +8,6 @@ import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 
-enum DataItemStatType {
-  sum = 'sum',
-  mean = 'mean',
-  stddev = 'stddev',
-  variance = 'variance',
-  min = 'min',
-  max = 'max',
-  range = 'range',
-  median = 'median',
-  mode = 'mode'
-}
-
 const DataItemStats = ['sum', 'mean', 'stddev', 'variance', 'min', 'max', 'range', 'median', 'mode']
 
 @customElement('data-item-list')