@things-factory/dataset 6.2.29 → 6.2.31

package/client/activities/activity-data-collect-assign-edit.ts

@@ -0,0 +1,99 @@
+import '@operato/dataset/ox-data-entry-form.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('activity-data-collect-assign-edit')
+export class DataCollectAssignActivityEdit extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-sample-view {
+        flex: 1;
+        padding: var(--padding-wide);
+        overflow: auto;
+      }
+
+      label[instruction] {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--padding-wide);
+      }
+
+      label[instruction] div {
+        display: flex;
+      }
+
+      mwc-icon {
+        color: var(--status-danger-color);
+      }
+
+      textarea {
+        border: var(--input-field-border);
+        border-radius: var(--input-border-radius);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+
+  @state() dataReview?: any
+
+  render() {
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSample=${this.dataReview}></ox-data-sample-view>
+      </div>
+    `
+  }
+
+  onChangeInstruction(e: Event) {
+    this.output ||= {}
+    this.output.instruction = (e.target as HTMLTextAreaElement).value
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.output
+      })
+    )
+  }
+
+  updated(changes) {
+    if (changes.has('input')) {
+      this.fetchDataAssign()
+    }
+  }
+
+  async fetchDataAssign() {
+    const dataSample = this.input?.dataSample
+    this.dataReview = dataSample
+  }
+}

package/client/activities/activity-data-collect-assign-view.ts

@@ -0,0 +1,99 @@
+import '@operato/dataset/ox-data-entry-form.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('activity-data-collect-assign-view')
+export class DataCollectAssignActivityView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      div[content] {
+        flex: 1;
+        flex-direction: column;
+
+        display: flex;
+        overflow: auto;
+      }
+
+      ox-data-sample-view {
+        flex: 1;
+        padding: var(--padding-wide);
+        overflow: auto;
+      }
+
+      label[instruction] {
+        display: flex;
+        flex-direction: column;
+
+        padding: var(--padding-wide);
+      }
+
+      label[instruction] div {
+        display: flex;
+      }
+
+      mwc-icon {
+        color: var(--status-danger-color);
+      }
+
+      textarea {
+        border: var(--input-field-border);
+        border-radius: var(--input-border-radius);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+    `
+  ]
+
+  @property({ type: Object }) input?: any
+  @property({ type: Object }) output?: any
+
+  @state() dataReview?: any
+
+  render() {
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSample=${this.dataReview}></ox-data-sample-view>
+      </div>
+    `
+  }
+
+  onChangeInstruction(e: Event) {
+    this.output ||= {}
+    this.output.instruction = (e.target as HTMLTextAreaElement).value
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.output
+      })
+    )
+  }
+
+  updated(changes) {
+    if (changes.has('input')) {
+      this.fetchDataAssign()
+    }
+  }
+
+  async fetchDataAssign() {
+    const dataSample = this.input?.dataSample
+    this.dataReview = dataSample
+  }
+}

package/client/bootstrap.ts

@@ -4,7 +4,8 @@ import './activities/activity-ooc-resolve-edit' /* refered by the activity templ
 import './activities/activity-data-collect-view' /* refered by the activity template (activity-data-collect) on server */
 import './activities/activity-ooc-review-view' /* refered by the activity template (activity-ooc-review) on server */
 import './activities/activity-ooc-resolve-view' /* refered by the activity template (activity-ooc-resolve) on server */
-
+import './activities/activity-data-collect-assign-edit'
+import './activities/activity-data-collect-assign-view'
 import '@operato/app/filter-renderer.js' /* register resource-object filter renderer */
 
 import { OxGristEditorCode } from '@operato/app/grist-editor/ox-grist-editor-code.js'

package/client/pages/data-entry/data-entry-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 '../../components/data-entry-form.js'
 
@@ -14,7 +15,7 @@ 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 { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { provider } from '@things-factory/board-ui'
 import { OxPopup } from '@operato/popup'
 
@@ -83,7 +84,7 @@ const showEntryView = async (columns, data, column, record, rowIndex) => {
 export class DataEntryListPage extends connect(store)(localize(i18next)(PageView)) {
   static styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -93,13 +94,17 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
         --grid-record-emphasized-background-color: red;
         --grid-record-emphasized-color: yellow;
       }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
     `
   ]
 
-  @state() gristConfig: any
+  @state() private gristConfig: any
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
@@ -115,7 +120,8 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
           this.grist.toggleHeadroom()
         }
       },
-      help: 'dataset/data-entry-list'
+      help: 'dataset/data-entry-list',
+      toolbar: false
     }
   }
 
@@ -129,26 +135,14 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
         .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-entry 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>
       </ox-grist>

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

@@ -1,4 +1,5 @@
 import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/input/ox-input-select-buttons.js'
 import './data-ooc-view.js'
 
@@ -38,7 +39,7 @@ 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, adjustFilters } from '@operato/utils'
 import { OxPopup } from '@operato/popup'
 
@@ -46,7 +47,7 @@ import { OxPopup } from '@operato/popup'
 export class DataOocListPage extends connect(store)(localize(i18next)(PageView)) {
   static styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -62,12 +63,11 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     `
   ]
 
-  @state() gristConfig: any
-  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
-  @state() state?: string[]
+  @state() private gristConfig: any
+  @state() private mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+  @state() private state?: string[]
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
@@ -87,7 +87,8 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
       exportable: {
         name: i18next.t('title.data-ooc list'),
         data: this._exportableData.bind(this)
-      }
+      },
+      toolbar: false
     }
   }
 
@@ -96,8 +97,13 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
 
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom">
-          <div id="filters">
+        <div slot="headroom" class="header">
+          <div class="title">
+            <mwc-icon>summarize</mwc-icon>
+            ${i18next.t('title.data-ooc list')}
+          </div>
+
+          <div class="filters">
             <ox-input-select-buttons
               .value=${this.state}
               .options=${getOocStatus()}
@@ -108,28 +114,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
             ></ox-input-select-buttons>
           </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 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

@@ -1,4 +1,5 @@
 import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -10,16 +11,17 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify } 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 { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { OxPopup } from '@operato/popup'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 @customElement('data-sensor-list-page')
 export class DataSensorListPage extends connect(store)(localize(i18next)(PageView)) {
   static styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -32,14 +34,22 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
         overflow-y: auto;
         flex: 1;
       }
+
+      @media (max-width: 450px) {
+        .header {
+          display: grid;
+          grid-template-areas:
+            'title actions'
+            'filters filters';
+        }
+      }
     `
   ]
 
-  @state() gristConfig: any
-  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+  @state() private gristConfig: any
+  @state() private mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
@@ -58,21 +68,28 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
       help: 'dataset/data-sensor',
       actions: [
         {
+          type: 'icon',
+          // icon: 'copy',
           title: i18next.t('button.copy'),
           action: this._copyDataSensor.bind(this),
           ...CommonButtonStyles.copy
         },
         {
+          type: 'icon',
+          icon: 'save',
           title: i18next.t('button.save'),
-          action: this._updateDataSensor.bind(this),
-          ...CommonButtonStyles.save
+          action: this._updateDataSensor.bind(this)
+          // ...CommonButtonStyles.save
         },
         {
+          type: 'icon',
+          // icon: 'delete',
           title: i18next.t('button.delete'),
           action: this._deleteDataSensor.bind(this),
           ...CommonButtonStyles.delete
         }
-      ]
+      ],
+      toolbar: false
     }
   }
 
@@ -86,33 +103,17 @@ export class DataSensorListPage 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-sensor 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>
     `
@@ -349,7 +350,14 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
   }
 
   async _deleteDataSensor() {
-    if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
       const ids = this.grist.selected.map(record => record.id)
       if (ids && ids.length > 0) {
         const response = await client.mutate({

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

@@ -3,30 +3,22 @@ import './data-item-list.js'
 import './data-set-importer.js'
 import '../../components/data-entry-form.js'
 
-import moment from 'moment-timezone'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { customElement, query, state } from 'lit/decorators.js'
 import { asyncReplace } from 'lit/directives/async-replace.js'
+import moment from 'moment-timezone'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import {
-  getEditor,
-  getRenderer,
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl,
-  ImexConfig
-} from '@operato/data-grist'
+import { DataGrist, FetchOption, getEditor, getRenderer, ImexConfig } from '@operato/data-grist'
 import { OxDataUseCase } from '@operato/dataset'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
+import { OxPopup } from '@operato/popup'
 import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice, sleep } from '@operato/utils'
-import { OxPopup } from '@operato/popup'
 
 const MIN = 60
 const HOUR = 60 * MIN
@@ -476,6 +468,15 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
           },
           width: 50
         },
+        {
+          type: 'approval-line',
+          name: 'outlierApprovalLine',
+          header: i18next.t('field.outlier-approval-line'),
+          record: {
+            editable: true
+          },
+          width: 50
+        },
         {
           type: 'select',
           name: 'entryType',
@@ -652,6 +653,16 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
                   controlNo
                 }
               }
+              outlierApprovalLine {
+                type
+                value
+                approver {
+                  id
+                  name
+                  description
+                  controlNo
+                }
+              }
               entryType
               entryView
               monitorType

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

@@ -1,10 +1,11 @@
 import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
 import './data-summary-view.js'
 
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import moment from 'moment-timezone'
 import { ColumnConfig, DataGrist, GristRecord, FetchOption, SortersControl } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -20,7 +21,7 @@ import gql from 'graphql-tag'
 export class DataSummaryListPage extends connect(store)(localize(i18next)(PageView)) {
   static styles = [
     ScrollbarStyles,
-    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -33,11 +34,10 @@ export class DataSummaryListPage extends connect(store)(localize(i18next)(PageVi
     `
   ]
 
-  @property({ type: Object }) gristConfig: any
-  @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+  @state() private mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+  @state() private gristConfig: any
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
@@ -57,7 +57,8 @@ export class DataSummaryListPage extends connect(store)(localize(i18next)(PageVi
       exportable: {
         name: i18next.t('title.data-summary list'),
         data: this._exportableData.bind(this)
-      }
+      },
+      toolbar: false
     }
   }
 
@@ -71,33 +72,17 @@ export class DataSummaryListPage 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-summary 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>
     `