@things-factory/dataset 7.0.0-alpha.9 → 7.0.0

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

@@ -19,7 +19,7 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-data-entry-form {
@@ -38,7 +38,13 @@ export class DataCollectActivityEdit extends localize(i18next)(LitElement) {
   @query('ox-data-entry-form') entryForm!: OxDataEntryForm
 
   render() {
-    return html` <ox-data-entry-form .dataSet=${this.dataSet} .value=${this.output} @change=${this._updateDataItems}></ox-data-entry-form> `
+    return html`
+      <ox-data-entry-form
+        .dataSet=${this.dataSet}
+        .value=${this.output}
+        @change=${this._updateDataItems}
+      ></ox-data-entry-form>
+    `
   }
 
   async _updateDataItems() {

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

@@ -18,7 +18,7 @@ export class DataCollectActivityView extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-data-entry-view {

package/client/activities/activity-data-review-edit.ts

@@ -17,7 +17,7 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       div[content] {
@@ -30,7 +30,7 @@ export class DataReviewActivityEdit extends localize(i18next)(LitElement) {
 
       ox-data-sample-view {
         flex: 1;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
     `

package/client/activities/activity-data-review-view.ts

@@ -17,7 +17,7 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       div[content] {
@@ -30,7 +30,7 @@ export class DataReviewActivityView extends localize(i18next)(LitElement) {
 
       ox-data-sample-view {
         flex: 1;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 

package/client/activities/activity-ooc-resolve-edit.ts

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-ooc-brief-view.js'
-// import '@operato/dataset/ox-data-ooc-correction-part.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
@@ -18,7 +18,7 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       div[content] {
@@ -31,7 +31,7 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
 
       ox-data-ooc-brief-view {
         flex: 1;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 
@@ -39,7 +39,7 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       label[action] h2 {
@@ -51,14 +51,14 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
         align-items: center;
       }
 
-      mwc-icon {
+      md-icon {
         color: var(--status-danger-color);
       }
 
       textarea {
         border: var(--input-field-border);
         border-radius: 10px;
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
         padding: var(--input-padding);
         font: var(--input-field-font);
 
@@ -92,8 +92,12 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
       ${editable
         ? html`
             <label action>
-              <h2><mwc-icon>build_circle</mwc-icon>&nbsp;<span>${i18next.t('label.corrective action')}</span></h2>
-              <textarea placeholder=${String(i18next.t('text.corrective action placeholder'))} .value=${action || ''} @change=${this.onChangeAction}></textarea>
+              <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective action')}</span></h2>
+              <textarea
+                placeholder=${String(i18next.t('text.corrective action placeholder'))}
+                .value=${action || ''}
+                @change=${this.onChangeAction}
+              ></textarea>
             </label>
           `
         : nothing}

package/client/activities/activity-ooc-resolve-view.ts

@@ -17,7 +17,7 @@ export class OocResolveActivityView extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       div[content] {
@@ -30,7 +30,7 @@ export class OocResolveActivityView extends localize(i18next)(LitElement) {
 
       ox-data-ooc-brief-view {
         flex: 1;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 

package/client/activities/activity-ooc-review-edit.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-sample-view.js'
 
 import gql from 'graphql-tag'
@@ -17,7 +18,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       div[content] {
@@ -30,7 +31,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
 
       ox-data-sample-view {
         flex: 1;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 
@@ -38,7 +39,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
 
         h2 {
           display: flex;
@@ -50,18 +51,18 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
         }
 
         div {
-          padding: var(--padding-wide);
+          padding: var(--spacing-large);
           font: var(--input-field-font);
         }
 
-        mwc-icon {
+        md-icon {
           color: var(--status-danger-color);
         }
 
         textarea {
           border: var(--input-field-border);
           border-radius: 10px;
-          margin: var(--margin-default);
+          margin: var(--spacing-medium);
           padding: var(--input-padding);
           font: var(--input-field-font);
 
@@ -90,7 +91,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
       </div>
 
       <label instruction>
-        <h2><mwc-icon>build_circle</mwc-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
+        <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
         ${editable
           ? html`
               <textarea

package/client/activities/activity-ooc-review-view.ts

@@ -17,7 +17,7 @@ class OocReviewActivityView extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       div[content] {
@@ -30,7 +30,7 @@ class OocReviewActivityView extends localize(i18next)(LitElement) {
 
       ox-data-ooc-brief-view {
         flex: 1;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
         overflow: auto;
       }
 

package/client/components/data-entry-form.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-entry-form.js'
 
 import gql from 'graphql-tag'
@@ -6,20 +7,21 @@ 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 { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'
 import { DataSet } from '@operato/dataset'
 
 @customElement('data-entry-form')
 export class DataEntryForm extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-data-entry-form {
@@ -28,12 +30,6 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
       .button-container span {
         font-size: 14px;
         color: #333;
@@ -52,10 +48,13 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
   render() {
     return html`
       <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
+
       <div class="button-container">
         ${!this.dataSample
           ? html`
-              <mwc-button raised @click=${this.updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+              <button @click=${this.updateDataItems.bind(this)}>
+                <md-icon>save</md-icon>${i18next.t('button.save')}
+              </button>
             `
           : html` <span>${i18next.t('field.collected-at')}: ${this.dataSample.collectedAt.toLocaleString()}</span> `}
       </div>

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

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 
@@ -77,17 +78,9 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
     const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${false /* this.active */}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${false /* this.active */}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-archive list')}
-          </div>
+          <div class="title">${i18next.t('title.data-archive list')}</div>
 
           <!-- <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
@@ -185,10 +178,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
 
   async openArchivePopup() {
     this.popup = openPopup(
-      html` <data-archive-request-popup
-        @requested=${this.closePopupAndRefesh.bind(this)}
-        @created=${this.closePopupAndRefesh.bind(this)}
-      ></data-archive-request-popup>`,
+      html` <data-archive-request-popup @requested=${this.closePopupAndRefesh.bind(this)} @created=${this.closePopupAndRefesh.bind(this)}></data-archive-request-popup>`,
       {
         backdrop: true,
         size: 'small',
@@ -264,9 +254,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
             const key = column.imex === true ? column.name : column.imex.key
-            record[key] = key
-              .split('.')
-              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[key] = key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }

package/client/pages/data-archive/data-archive-request-popup.ts

@@ -1,17 +1,21 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { client } from '@operato/graphql'
-import { SingleColumnFormStyles } from '@things-factory/form-ui'
+import { SingleColumnFormStyles } from '@operato/form'
+import { ButtonContainerStyles } from '@operato/styles'
 
-import moment from 'moment-timezone'
-import Swal from 'sweetalert2'
+import moment from '@operato/moment-timezone-es'
+import { CustomAlert } from '@operato/shell'
 
 @customElement('data-archive-request-popup')
 class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     SingleColumnFormStyles,
     css`
       :host {
@@ -19,19 +23,12 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         overflow-x: overlay;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
       }
 
       form {
         overflow: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-top: auto;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -53,7 +50,7 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
       </form>
 
       <div class="button-container">
-        <mwc-button raised @click=${this.requestArchive} label=${String(i18next.t('button.submit'))}></mwc-button>
+        <button @click=${this.requestArchive}><md-icon>archive</md-icon>${String(i18next.t('button.submit'))}</button>
       </div>
     `
   }
@@ -120,12 +117,12 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
 
       this._generateArchiveAndDownloadUrl(dataArchive)
 
-      await Swal.fire({
+      await CustomAlert({
         type: 'info',
         title: i18next.t('title.ready'),
         text: i18next.t('text.data-archive waits'),
         confirmButton: { text: i18next.t('button.confirm') }
-      } as any)
+      })
     } else {
       console.error(response.errors)
       this.showToast(i18next.t('text.failed'))

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

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/board/ox-board-viewer.js'
@@ -14,9 +15,9 @@ 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 { InheritedValueType, navigate, PageView, store } from '@operato/shell'
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-import { provider } from '@things-factory/board-ui'
+import { provider } from '@things-factory/board-ui/dist-client'
 import { OxPopup } from '@operato/popup'
 
 const USECASE_OPTIONS = () => {
@@ -46,12 +47,23 @@ const showEntryView = async (columns, data, column, record, rowIndex) => {
       const board = {
         id: entryView
       }
-      openPopup(html` <ox-board-viewer style="background-color: white;" .board=${board} .provider=${provider} hide-fullscreen hide-navigation></ox-board-viewer> `, {
-        closable: true,
-        backdrop: true,
-        size: 'large',
-        title
-      })
+      openPopup(
+        html`
+          <ox-board-viewer
+            style="background-color: white;"
+            .board=${board}
+            .provider=${provider}
+            hide-fullscreen
+            hide-navigation
+          ></ox-board-viewer>
+        `,
+        {
+          closable: true,
+          backdrop: true,
+          size: 'large',
+          title
+        }
+      )
 
       // navigate(`board-viewer/${entryView}?interactive=true&title=${title}`)
       break
@@ -118,12 +130,14 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
     const mode = 'CARD'
 
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
+      >
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-entry list')}
-          </div>
+          <div class="title">${i18next.t('title.data-entry list')}</div>
 
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>
@@ -304,8 +318,8 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
   async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: dataSetsForEntry(filters: $filters, pagination: $pagination, sortings: $sortings) {
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {
+          responses: dataSetsForEntry(filters: $filters, pagination: $pagination, sortings: $sortings, inherited: $inherited) {
             items {
               id
               name
@@ -364,7 +378,8 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
       variables: {
         filters,
         pagination: { page, limit },
-        sortings
+        sortings,
+        inherited: InheritedValueType.Include
       }
     })
 

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -6,34 +8,23 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 import { DataGrist, FetchOption } from '@operato/data-grist'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('data-key-item-list')
 export class DataKeyItemList extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -48,11 +39,14 @@ export class DataKeyItemList extends localize(i18next)(LitElement) {
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
       ></ox-grist>
+
       <div class="button-container">
-        <mwc-button raised danger @click=${this._deleteDataKeyItems.bind(this)}
-          >${i18next.t('button.delete')}</mwc-button
-        >
-        <mwc-button raised @click=${this._updateDataKeyItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this._deleteDataKeyItems.bind(this)}>
+          <md-icon>delete_forever</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button @click=${this._updateDataKeyItems.bind(this)}>
+          <md-icon>save</md-icon>${i18next.t('button.save')}
+        </button>
       </div>
     `
   }

package/client/pages/data-key-set/data-key-set-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,31 +8,23 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('data-key-set-importer')
 export class DataKeySetImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -73,7 +66,7 @@ export class DataKeySetImporter extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

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

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import './data-key-set-importer.js'
@@ -102,7 +103,10 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
         {
           title: i18next.t('button.delete'),
           action: this._deleteDataKeySet.bind(this),
-          icon: 'delete'
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
         }
       ],
       exportable: {
@@ -122,10 +126,7 @@ 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" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-key-set list')}
-          </div>
+          <div class="title">${i18next.t('title.data-key-set list')}</div>
 
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>