@things-factory/dataset 5.0.0-alpha.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+<!-- ## [Unreleased] -->

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Hatiolab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/client/bootstrap.js

@@ -0,0 +1,3 @@
+import { store } from '@things-factory/shell'
+
+export default function bootstrap() {}

package/client/pages/data-item-list.js

@@ -0,0 +1,280 @@
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+
+class DataItemList extends localize(i18next)(LitElement) {
+  static get properties() {
+    return {
+      dataSet: Object,
+      gristConfig: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      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);
+        }
+
+        form {
+          position: relative;
+        }
+        [danger] {
+          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+        }
+        mwc-button {
+          margin-left: var(--margin-default);
+        }
+      `
+    ]
+  }
+
+  get dataGrist() {
+    return this.renderRoot.querySelector('ox-grist')
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+      <div class="button-container">
+        <mwc-button raised danger @click=${this._deleteDataItems.bind(this)}>${i18next.t('button.delete')}</mwc-button>
+        <mwc-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+      </div>
+    `
+  }
+
+  async updated(changedProps) {}
+
+  async firstUpdated() {
+    this.gristConfig = {
+      list: { fields: ['name', 'description', 'active'] },
+      columns: [
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'add',
+          handlers: {
+            click: 'record-copy'
+          }
+        },
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_upward',
+          handlers: {
+            click: 'move-up'
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_downward',
+          handlers: {
+            click: 'move-down'
+          }
+        },
+        {
+          type: 'number',
+          name: 'sequence',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          width: 140
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          width: 180
+        },
+        {
+          type: 'checkbox',
+          name: 'active',
+          label: true,
+          header: i18next.t('field.active'),
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          record: {
+            options: ['number', 'text', 'select', 'boolean'],
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'number',
+          name: 'quota',
+          header: i18next.t('field.quota'),
+          record: {
+            editable: true
+          },
+          width: 60
+        },
+        {
+          type: 'json',
+          name: 'spec',
+          header: i18next.t('field.spec'),
+          record: {
+            editable: true
+          },
+          width: 200
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      pagination: {
+        infinite: true
+      },
+      sorters: [
+        {
+          name: 'sequence'
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ filters, page, limit, sorters = [] }) {
+    const response = await client.query({
+      query: gql`
+        query {
+          dataItems ( 
+            filters: { 
+              name: "dataSet",
+              value: "${this.dataSet.id}",
+              operator: "eq" 
+            },
+            sortings: { name: "sequence" }
+          ) {
+            items {
+              id
+              name
+              description
+              sequence
+              active
+              type
+              quota
+              spec
+            }
+            total
+          }
+        }
+      `
+    })
+
+    return {
+      total: response.data.dataItems.total || 0,
+      records: response.data.dataItems.items || []
+    }
+  }
+
+  async _updateDataItems() {
+    let patches = this.dataGrist._data.records
+    if (patches && patches.length) {
+      patches = patches.map(patch => {
+        var patchField = {}
+        const dirtyFields = patch.__dirtyfields__
+        for (let key in dirtyFields) {
+          patchField[key] = dirtyFields[key].after
+        }
+
+        return { ...patch.__origin__, ...patchField }
+      })
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($dataSetId: String!, $patches: [DataItemPatch!]!) {
+            updateMultipleDataItem(dataSetId: $dataSetId, patches: $patches) {
+              name
+            }
+          }
+        `,
+        variables: {
+          dataSetId: this.dataSet.id,
+          patches
+        }
+      })
+
+      if (!response.errors) this.dataGrist.fetch()
+    }
+  }
+
+  async _deleteDataItems() {
+    if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) return
+
+    const ids = this.dataGrist.selected.map(record => record.id)
+    if (!(ids && ids.length > 0)) return
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($ids: [String!]!) {
+          deleteDataItems(ids: $ids)
+        }
+      `,
+      variables: {
+        ids
+      }
+    })
+
+    if (response.errors) return
+
+    this.dataGrist.fetch()
+    await document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          message: i18next.t('text.info_x_successfully', {
+            x: i18next.t('text.delete')
+          })
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('data-item-list', DataItemList)

package/client/pages/data-sample.js

@@ -0,0 +1,272 @@
+import '@operato/data-grist'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+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 { isMobileDevice } from '@operato/utils'
+
+export class DataSample extends connect(store)(localize(i18next)(PageView)) {
+  static get properties() {
+    return {
+      active: String,
+      gristConfig: Object
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          overflow: hidden;
+        }
+
+        ox-grist {
+          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);
+        }
+      `
+    ]
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.data-sample list'),
+      help: 'integration/ui/data-sample',
+      actions: [
+        {
+          title: i18next.t('button.delete'),
+          action: this._deleteDataSample.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ]
+    }
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
+        <div slot="headroom" id="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  get grist() {
+    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: ['dataSet', 'data', 'spec', 'updater', 'updatedAt'] },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'name',
+          label: true,
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          label: true,
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'dataSetId',
+          hidden: true
+        },
+        {
+          type: 'json',
+          name: 'data',
+          header: i18next.t('field.data'),
+          record: {
+            editable: false
+          },
+          width: 200
+        },
+        {
+          type: 'json',
+          name: 'spec',
+          header: i18next.t('field.spec'),
+          record: {
+            editable: false
+          },
+          width: 200
+        },
+
+        {
+          type: 'object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          sortable: true,
+          width: 180
+        }
+      ],
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [
+        {
+          name: 'name'
+        }
+      ]
+    }
+
+    await this.updateComplete
+
+    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`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: dataSamples(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              dataSetId
+              data
+              spec
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  async _deleteDataSample() {
+    if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+      const ids = this.grist.selected.map(record => record.id)
+      if (ids && ids.length > 0) {
+        const response = await client.mutate({
+          mutation: gql`
+            mutation ($ids: [String!]!) {
+              deleteDataSamples(ids: $ids)
+            }
+          `,
+          variables: {
+            ids
+          }
+        })
+
+        if (!response.errors) {
+          this.grist.fetch()
+          notify({
+            message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+          })
+        }
+      }
+    }
+  }
+
+  async stateChanged(state) {
+    if (this.active && this._currentPopupName && !state.layout.viewparts[this._currentPopupName]) {
+      this.grist.fetch()
+      this._currentPopupName = null
+    }
+  }
+}
+
+window.customElements.define('data-sample-page', DataSample)

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

@@ -0,0 +1,103 @@
+import '@operato/data-grist'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+
+export class DataSetImporter extends LitElement {
+  static get properties() {
+    return {
+      columns: Object,
+      scenarios: Array
+    }
+  }
+
+  constructor() {
+    super()
+    this.columns = {
+      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
+        }
+      ]
+    }
+  }
+
+  static get styles() {
+    return [
+      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);
+        }
+      `
+    ]
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data="${{ records: this.scenarios }}"
+      ></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.error?.length) return
+
+    this.dispatchEvent(new CustomEvent('imported'))
+  }
+}
+
+customElements.define('data-set-importer', DataSetImporter)