@things-factory/dataset 5.0.0-alpha.5 → 5.0.0-alpha.52

package/client/pages/data-sample/data-sample-view.js

@@ -0,0 +1,98 @@
+import '@operato/dataset/ox-data-sample-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+class DataSampleView extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      dataSet: Object,
+      dataSample: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          background-color: #fff;
+        }
+
+        div[content] {
+          flex: 1;
+
+          display: flex;
+          overflow: auto;
+        }
+
+        ox-data-sample-view {
+          flex: 1;
+          padding: var(--padding-wide);
+          overflow: auto;
+        }
+      `
+    ]
+  }
+
+  get sampleView() {
+    return this.renderRoot.querySelector('ox-data-sample-view')
+  }
+
+  render() {
+    return html`
+      <div content>
+        <ox-data-sample-view .dataSet=${this.dataSet} .dataSample=${this.dataSample}></ox-data-sample-view>
+      </div>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('dataSample')) {
+      this.fetchDataSet()
+    }
+  }
+
+  async fetchDataSet() {
+    const id = this.dataSample?.dataSet?.id
+
+    if (id) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            dataSet(id: $id) {
+              id
+              name
+              description
+              useCase
+              dataItems {
+                id
+                name
+                description
+                active
+                unit
+                tag
+                type
+                spec
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.dataSample.dataSet.id
+        }
+      })
+
+      this.dataSet = response.data.dataSet
+    }
+  }
+}
+
+window.customElements.define('data-sample-view', DataSampleView)

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

@@ -8,20 +8,22 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
-export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
+export class DataSensorListPage extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       active: String,
-      gristConfig: Object
+      gristConfig: Object,
+      mode: String
     }
   }
 
   static get styles() {
     return [
       ScrollbarStyles,
+      CommonGristStyles,
       css`
         :host {
           display: flex;
@@ -34,18 +36,6 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
           overflow-y: auto;
           flex: 1;
         }
-
-        #filters {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-
-          background-color: white;
-        }
-
-        #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
-        }
       `
     ]
   }
@@ -53,7 +43,7 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
   get context() {
     return {
       title: i18next.t('title.data-sensor list'),
-      help: 'integration/ui/data-sensor',
+      help: 'dataset/data-sensor',
       actions: [
         {
           title: i18next.t('button.copy'),
@@ -75,14 +65,42 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
   }
 
   render() {
+    const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
+
     return html`
       <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .mode=${mode}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
       >
-        <div slot="headroom" id="filters">
-          <ox-filters-form></ox-filters-form>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').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>
         </div>
       </ox-grist>
     `
@@ -92,30 +110,7 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
     return this.renderRoot.querySelector('ox-grist')
   }
 
-  // update with url params value
-  _updateSearchConfig(lifecycle) {
-    // this.searchConfig = this.searchConfig.map(conf => {
-    // if (conf.name in lifecycle.params) {
-    //   conf.value = lifecycle.params[conf.name]
-    // } else {
-    //   delete conf.value
-    // }
-    // return conf
-    // })
-  }
-
-  // set default field value to record with searchConfig
-  _setDefaultFieldsValue(fields) {
-    // this.searchConfig.forEach(conf => {
-    //   if (!fields[conf.name] && conf.value) {
-    //     fields[conf.name] = conf.value
-    //   }
-    // })
-  }
-
   async pageInitialized(lifecycle) {
-    this._updateSearchConfig(lifecycle)
-
     this.gristConfig = {
       list: { fields: ['name', 'description', 'active'] },
       columns: [
@@ -153,6 +148,7 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
             editable: true
           },
           sortable: true,
+          filter: true,
           width: 60
         },
         {
@@ -176,6 +172,7 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
             editable: true
           },
           sortable: true,
+          filter: 'search',
           width: 150
         },
         {
@@ -194,7 +191,7 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
         {
           type: 'object',
           name: 'dataSet',
-          header: i18next.t('field.dataSet'),
+          header: i18next.t('field.data-set'),
           record: {
             editable: true,
             options: {
@@ -271,8 +268,8 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
         },
         {
           type: 'datetime',
-          name: 'collectedAt',
-          header: i18next.t('field.collected_at'),
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
           record: {
             editable: false
           },
@@ -297,16 +294,6 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
     this.grist.fetch()
   }
 
-  async pageUpdated(changes, lifecycle) {
-    if (this.active) {
-      // update with url params value
-      this._updateSearchConfig(lifecycle)
-      await this.updateComplete
-
-      this.grist.fetch()
-    }
-  }
-
   async fetchHandler({ page, limit, sortings = [], filters = [] }) {
     const response = await client.query({
       query: gql`
@@ -382,13 +369,6 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  async stateChanged(state) {
-    if (this.active && this._currentPopupName && !state.layout.viewparts[this._currentPopupName]) {
-      this.grist.fetch()
-      this._currentPopupName = null
-    }
-  }
-
   async _copyDataSensor() {
     var selected = this.grist.selected
     if (selected.length == 0) return
@@ -419,7 +399,6 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
         }
-        this._setDefaultFieldsValue(patchField)
         patchField.cuFlag = patch.__dirty__
 
         return patchField
@@ -443,4 +422,4 @@ export class DataSensor extends connect(store)(localize(i18next)(PageView)) {
   }
 }
 
-window.customElements.define('data-sensor-page', DataSensor)
+window.customElements.define('data-sensor-list-page', DataSensorListPage)

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

@@ -61,8 +61,6 @@ class DataItemList extends localize(i18next)(LitElement) {
     `
   }
 
-  async updated(changedProps) {}
-
   async firstUpdated() {
     this.gristConfig = {
       list: { fields: ['name', 'description', 'active'] },
@@ -132,6 +130,17 @@ class DataItemList extends localize(i18next)(LitElement) {
           sortable: true,
           width: 60
         },
+        {
+          type: 'checkbox',
+          name: 'hidden',
+          label: true,
+          header: i18next.t('field.hidden'),
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
         {
           type: 'string',
           name: 'tag',
@@ -157,9 +166,7 @@ class DataItemList extends localize(i18next)(LitElement) {
           header: i18next.t('field.options'),
           record: {
             editable: true,
-            renderer: (value, column, record, rowIndex, field) => {
-              return typeof value === 'string' ? value : typeof value === 'object' ? JSON.stringify(value) : ''
-            },
+            renderer: 'json5',
             options: async (value, column, record, row, field) => {
               return {
                 name: record.type,
@@ -168,7 +175,7 @@ class DataItemList extends localize(i18next)(LitElement) {
                   record.type === 'select'
                     ? [
                         {
-                          type: 'options',
+                          type: 'options' /* property-editor type */,
                           name: 'options',
                           label: 'options'
                         }
@@ -181,6 +188,15 @@ class DataItemList extends localize(i18next)(LitElement) {
           },
           width: 120
         },
+        {
+          type: 'string',
+          name: 'unit',
+          header: i18next.t('field.unit'),
+          record: {
+            editable: true
+          },
+          width: 120
+        },
         {
           type: 'number',
           name: 'quota',
@@ -191,11 +207,16 @@ class DataItemList extends localize(i18next)(LitElement) {
           width: 60
         },
         {
-          type: 'json',
+          type: 'data-item-spec',
           name: 'spec',
           header: i18next.t('field.spec'),
           record: {
-            editable: true
+            editable: true,
+            options: {
+              name: '',
+              help: '',
+              objectified: true /* prevent from stringifying */
+            }
           },
           width: 200
         }
@@ -216,7 +237,7 @@ class DataItemList extends localize(i18next)(LitElement) {
     }
   }
 
-  async fetchHandler({ filters, page, limit, sorters = [] }) {
+  async fetchHandler({ filters, page, limit, sortings = [] }) {
     const response = await client.query({
       query: gql`
         query {
@@ -234,9 +255,11 @@ class DataItemList extends localize(i18next)(LitElement) {
               description
               sequence
               active
+              hidden
               tag
               type
               options
+              unit
               quota
               spec
             }
@@ -279,7 +302,9 @@ class DataItemList extends localize(i18next)(LitElement) {
         }
       })
 
-      if (!response.errors) this.grist.fetch()
+      if (!response.errors) {
+        this.grist.fetch()
+      }
     }
   }