@things-factory/dataset 6.0.25 → 6.0.27

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

@@ -2,6 +2,8 @@ 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'
@@ -10,39 +12,49 @@ import { notify } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { OxPopup } from '@operato/popup'
 
+@customElement('data-sensor-list-page')
 export class DataSensorListPage 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-sensor list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-sensor list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-sensor',
       actions: [
         {
@@ -76,7 +88,7 @@ export class DataSensorListPage 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">
@@ -84,7 +96,7 @@ export class DataSensorListPage 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
                 })
@@ -106,10 +118,6 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: { fields: ['name', 'description', 'active'] },
@@ -290,7 +298,7 @@ export class DataSensorListPage 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!]) {
@@ -390,7 +398,7 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
     let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
-        let patchField = patch.id ? { id: patch.id } : {}
+        let patchField: any = patch.id ? { id: patch.id } : {}
         const dirtyFields = patch.__dirtyfields__
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
@@ -417,5 +425,3 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 }
-
-window.customElements.define('data-sensor-list-page', DataSensorListPage)

package/client/pages/data-set/{data-item-list.js → data-item-list.ts}

@@ -1,51 +1,47 @@
 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 { isMobileDevice } from '@operato/utils'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 
+@customElement('data-item-list')
 class DataItemList extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      dataSet: Object,
-      gristConfig: Object
-    }
-  }
+  @property({ type: Object }) dataSet: any
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+  @state() gristConfig: any
 
-          background-color: #fff;
-        }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-        ox-grist {
-          flex: 1;
-        }
+        background-color: #fff;
+      }
 
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
+      ox-grist {
+        flex: 1;
+      }
 
-        [danger] {
-          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-        }
-        mwc-button {
-          margin-left: var(--margin-default);
-        }
-      `
-    ]
-  }
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
+      [danger] {
+        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+      }
+      mwc-button {
+        margin-left: var(--margin-default);
+      }
+    `
+  ]
+
+  @query('ox-grist') private grist!: DataGrist
 
   render() {
     return html`
@@ -223,7 +219,7 @@ class DataItemList extends localize(i18next)(LitElement) {
     }
   }
 
-  async fetchHandler({ filters, page, limit, sortings = [] }) {
+  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
     const dataItems = this.dataSet.dataItems || []
 
     return {
@@ -273,5 +269,3 @@ class DataItemList extends localize(i18next)(LitElement) {
     this.grist.deleteSelectedRecords(false)
   }
 }
-
-window.customElements.define('data-item-list', DataItemList)

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

@@ -0,0 +1,96 @@
+import '@operato/data-grist'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+import { DataSet } from '@operato/dataset'
+
+@customElement('data-set-importer')
+export class DataSetImporter extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+
+      mwc-button {
+        margin-left: var(--margin-default);
+      }
+    `
+  ]
+
+  @property({ type: Array }) dataSets: DataSet[] = []
+
+  @state() columns: any = {
+    list: { fields: ['name', 'description'] },
+    pagination: { infinite: true },
+    columns: [
+      {
+        type: 'string',
+        name: 'name',
+        header: i18next.t('field.name'),
+        width: 150
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: i18next.t('field.description'),
+        width: 200
+      },
+      {
+        type: 'checkbox',
+        name: 'active',
+        header: i18next.t('field.active'),
+        width: 60
+      }
+    ]
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data=${{ records: this.dataSets }}
+      ></ox-grist>
+
+      <div class="button-container">
+        <mwc-button raised @click=${this.save.bind(this)}>${i18next.t('button.save')}</mwc-button>
+      </div>
+    `
+  }
+
+  async save() {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation importDataSets($dataSets: [DataSetPatch!]!) {
+          importDataSets(dataSets: $dataSets)
+        }
+      `,
+      variables: { dataSets: this.dataSets }
+    })
+
+    if (response.errors?.length) {
+      return
+    }
+
+    this.dispatchEvent(new CustomEvent('imported'))
+  }
+}

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

@@ -3,12 +3,21 @@ 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 moment from 'moment-timezone'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import { getEditor, getRenderer } from '@operato/data-grist'
+import {
+  getEditor,
+  getRenderer,
+  ColumnConfig,
+  DataGrist,
+  FetchOption,
+  SortersControl,
+  ImexConfig
+} from '@operato/data-grist'
 import { OxDataUseCase } from '@operato/dataset'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -16,6 +25,7 @@ import { notify, openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
 
 const DEFAULT_TZ = Intl.DateTimeFormat().resolvedOptions().timeZone
 const TIMEZONE_OPTIONS = ['', DEFAULT_TZ, ...moment.tz.names().filter(tz => tz !== DEFAULT_TZ)]
@@ -33,6 +43,10 @@ const ENTRY_TYPES = [
     display: 'Board',
     value: 'board'
   },
+  {
+    display: 'CustomElement',
+    value: 'custom-element'
+  },
   {
     display: 'Page',
     value: 'page'
@@ -56,6 +70,10 @@ const MONITOR_TYPES = [
     display: 'Board',
     value: 'board'
   },
+  {
+    display: 'CustomElement',
+    value: 'custom-element'
+  },
   {
     display: 'Page',
     value: 'page'
@@ -79,6 +97,10 @@ const REPORT_TYPES = [
     display: 'Embed',
     value: 'embed'
   },
+  {
+    display: 'CustomElement',
+    value: 'custom-element'
+  },
   {
     display: 'Page',
     value: 'page'
@@ -105,34 +127,44 @@ const USECASE_OPTIONS = () => {
     }
   })
 }
+
+@customElement('data-set-list-page')
 export class DataSetListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      gristConfig: 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' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
-      title: i18next.t('title.data-set list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-set list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-set',
       actions: [
         {
@@ -162,7 +194,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
   }
 
   render() {
-    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+    const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
       <ox-grist
@@ -173,7 +205,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
       >
         <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">
@@ -181,7 +213,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sortersControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -203,10 +235,6 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -383,7 +411,6 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
             }
           },
           width: 80,
-          label: true,
           imex: {
             width: 13,
             header: i18next.t('field.schedule'),
@@ -564,7 +591,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
     }
   }
 
-  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!]) {
@@ -685,7 +712,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
     let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
-        let patchField = patch.id ? { id: patch.id } : {}
+        let patchField: any = patch.id ? { id: patch.id } : {}
         const dirtyFields = patch.__dirtyfields__
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
@@ -735,7 +762,8 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
         ...this.grist._config.columns
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
-            record[column.imex.key] = column.imex.key
+            var imexKey = (column.imex as ImexConfig)!.key
+            record[imexKey] = imexKey
               .split('.')
               .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
@@ -764,5 +792,3 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
     )
   }
 }
-
-window.customElements.define('data-set-list-page', DataSetListPage)

package/client/{route.js → route.ts}

@@ -31,7 +31,7 @@ export default function route(page) {
     case 'data-report-list':
       import('./pages/data-report/data-report-list-page.js')
       return page
-  
+
     case 'data-archive-list':
       import('./pages/data-archive/data-archive-list-page.js')
       return page

package/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1,3 @@
+import './components/data-ooc-activity-view';
+import '@operato/app/filter-renderer.js';
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,14 @@
+import './components/data-ooc-activity-view'; /* refered by the activity template (activity-ooc) on server */
+import '@operato/app/filter-renderer.js'; /* register resource-object filter renderer */
+import { OxGristEditorCode } from '@operato/app/grist-editor/ox-grist-editor-code.js';
+import { OxGristRendererJson5, registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist';
+import { OxGristEditorDataItemSpec } from '@operato/dataset/grist-editor';
+import { OxGristEditorPartitionKeys } from '@operato/grist-editor/ox-grist-editor-partition-keys.js';
+export default function bootstrap() {
+    registerGristEditor('data-item-spec', OxGristEditorDataItemSpec);
+    registerGristRenderer('data-item-spec', OxGristRendererJson5);
+    registerGristEditor('script', OxGristEditorCode);
+    registerGristEditor('partition-keys', OxGristEditorPartitionKeys);
+    registerGristRenderer('partition-keys', OxGristRendererJson5);
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,qCAAqC,CAAA,CAAC,+DAA+D;AAE5G,OAAO,iCAAiC,CAAA,CAAC,8CAA8C;AAEvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAA;AACrF,OAAO,EACL,oBAAoB,EACpB,cAAc,IAAI,mBAAmB,EACrC,gBAAgB,IAAI,qBAAqB,EAC1C,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,yDAAyD,CAAA;AAEpG,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,gBAAgB,EAAE,yBAAyB,CAAC,CAAA;IAChE,qBAAqB,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,CAAA;IAE7D,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;IAEhD,mBAAmB,CAAC,gBAAgB,EAAE,0BAA0B,CAAC,CAAA;IACjE,qBAAqB,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,CAAA;AAC/D,CAAC","sourcesContent":["import './components/data-ooc-activity-view' /* refered by the activity template (activity-ooc) on server */\n\nimport '@operato/app/filter-renderer.js' /* register resource-object filter renderer */\n\nimport { OxGristEditorCode } from '@operato/app/grist-editor/ox-grist-editor-code.js'\nimport {\n  OxGristRendererJson5,\n  registerEditor as registerGristEditor,\n  registerRenderer as registerGristRenderer\n} from '@operato/data-grist'\nimport { OxGristEditorDataItemSpec } from '@operato/dataset/grist-editor'\nimport { OxGristEditorPartitionKeys } from '@operato/grist-editor/ox-grist-editor-partition-keys.js'\n\nexport default function bootstrap() {\n  registerGristEditor('data-item-spec', OxGristEditorDataItemSpec)\n  registerGristRenderer('data-item-spec', OxGristRendererJson5)\n\n  registerGristEditor('script', OxGristEditorCode)\n\n  registerGristEditor('partition-keys', OxGristEditorPartitionKeys)\n  registerGristRenderer('partition-keys', OxGristRendererJson5)\n}\n"]}

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

@@ -0,0 +1,15 @@
+import '@operato/dataset/ox-data-entry-form.js';
+import { LitElement } from 'lit';
+import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js';
+import { DataSet } from '@operato/dataset';
+declare const DataEntryForm_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class DataEntryForm extends DataEntryForm_base {
+    static styles: import("lit").CSSResult[];
+    dataSet?: DataSet & {
+        id: string;
+    };
+    entryForm: OxDataEntryForm;
+    render(): import("lit-html").TemplateResult<1>;
+    _updateDataItems(): Promise<void>;
+}
+export {};

package/dist-client/components/data-entry-form.js

@@ -0,0 +1,83 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/dataset/ox-data-entry-form.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js';
+let DataEntryForm = class DataEntryForm extends localize(i18next)(LitElement) {
+    render() {
+        return html `
+      <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
+      <div class="button-container">
+        <mwc-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+      </div>
+    `;
+    }
+    async _updateDataItems() {
+        var _a;
+        //@ts-ignore TODO replace with following line and confirm
+        const data = this.entryForm.buildValue();
+        // const data = this.entryForm.value
+        const dataSample = {
+            dataSet: {
+                id: (_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.id
+            },
+            data
+        };
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($dataSample: NewDataSample!) {
+          createDataSample(dataSample: $dataSample) {
+            id
+            collectedAt
+          }
+        }
+      `,
+            variables: {
+                dataSample
+            }
+        });
+        if (!response.errors) {
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } }));
+        }
+    }
+};
+DataEntryForm.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      ox-data-entry-form {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DataEntryForm.prototype, "dataSet", void 0);
+__decorate([
+    query('ox-data-entry-form'),
+    __metadata("design:type", OxDataEntryForm)
+], DataEntryForm.prototype, "entryForm", void 0);
+DataEntryForm = __decorate([
+    customElement('data-entry-form')
+], DataEntryForm);
+export { DataEntryForm };
+//# sourceMappingURL=data-entry-form.js.map