@things-factory/dataset 8.0.0-beta.9 → 8.0.2

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

@@ -0,0 +1,304 @@
+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 { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+import { DataGrist, FetchOption } from '@operato/data-grist'
+import { CommonHeaderStyles } from '@operato/styles'
+
+const DataItemStats = ['sum', 'mean', 'stddev', 'variance', 'min', 'max', 'range', 'median', 'mode']
+
+@customElement('data-item-list')
+class DataItemList extends localize(i18next)(LitElement) {
+  @property({ type: Object }) dataSet: any
+
+  @state() gristConfig: any
+
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @query('ox-grist') private grist!: DataGrist
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+
+      <div class="footer">
+        <div filler></div>
+        <button danger @click=${this._deleteDataItems.bind(this)}>
+          <md-icon>delete_forever</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button @click=${this._updateDataItems.bind(this)} done>
+          <md-icon>save</md-icon>${i18next.t('button.save')}
+        </button>
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    this.gristConfig = {
+      list: { fields: ['name', 'description', 'active'] },
+      columns: [
+        { type: 'gutter', gutterName: 'row-selector', fixed: true, multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          fixed: true,
+          icon: 'add',
+          handlers: {
+            click: 'record-copy'
+          }
+        },
+        { type: 'gutter', gutterName: 'sequence', fixed: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          fixed: true,
+          icon: 'arrow_upward',
+          handlers: {
+            click: 'move-up'
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          fixed: true,
+          icon: 'arrow_downward',
+          handlers: {
+            click: 'move-down'
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          fixed: true,
+          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: 'checkbox',
+          name: 'hidden',
+          label: true,
+          header: i18next.t('field.hidden'),
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'varname',
+          name: 'tag',
+          header: i18next.t('field.tag'),
+          record: {
+            editable: true
+          },
+          width: 180
+        },
+        {
+          type: 'string',
+          name: 'group',
+          header: i18next.t('field.subgroup'),
+          record: {
+            editable: true
+          },
+          width: 180
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          record: {
+            options: ['', 'number', 'text', 'select', 'radio', 'boolean', 'date', 'datetime', 'file', 'signature'],
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'parameters',
+          name: 'options',
+          header: i18next.t('field.options'),
+          record: {
+            editable: true,
+            renderer: 'json5',
+            options: async (value, column, record, row, field) => {
+              return {
+                name: record.type,
+                help: '',
+                spec:
+                  record.type === 'select' || record.type === 'radio'
+                    ? [
+                        {
+                          type: 'options' /* property-editor type */,
+                          name: 'options',
+                          label: 'options'
+                        }
+                      ]
+                    : [],
+                context: this.grist,
+                objectified: true
+              }
+            }
+          },
+          width: 120
+        },
+        {
+          type: 'select',
+          name: 'stat',
+          header: i18next.t('field.finalizing-function'),
+          record: {
+            options: ['', ...DataItemStats],
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'select',
+          name: 'agg',
+          header: i18next.t('field.agg-function'),
+          record: {
+            options: ['', ...DataItemStats],
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'unit',
+          header: i18next.t('field.unit'),
+          record: {
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'number',
+          name: 'quota',
+          header: i18next.t('field.quota'),
+          record: {
+            editable: true
+          },
+          width: 60
+        },
+        {
+          type: 'data-item-spec',
+          name: 'spec',
+          header: i18next.t('field.spec'),
+          record: {
+            editable: true,
+            options: {
+              name: '',
+              help: '',
+              objectified: true /* prevent from stringifying */
+            }
+          },
+          width: 200
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      pagination: {
+        infinite: true
+      },
+      sorters: []
+    }
+  }
+
+  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
+    const dataItems = this.dataSet.dataItems || []
+
+    return {
+      total: dataItems.length,
+      records: dataItems
+    }
+  }
+
+  async _updateDataItems() {
+    this.grist.commit()
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $patch: DataSetPatch!) {
+          updateDataSet(id: $id, patch: $patch) {
+            name
+          }
+        }
+      `,
+      variables: {
+        id: this.dataSet.id,
+        patch: {
+          dataItems: this.grist.data.records,
+          cuFlag: 'M'
+        }
+      }
+    })
+
+    if (!response.errors) {
+      await document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.info_x_successfully', {
+              x: i18next.t('button.save')
+            })
+          }
+        })
+      )
+    }
+  }
+
+  async _deleteDataItems() {
+    if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+      return
+    }
+
+    this.grist.deleteSelectedRecords(false)
+  }
+}

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

@@ -0,0 +1,89 @@
+import '@material/web/icon/icon.js'
+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'
+import { CommonHeaderStyles } from '@operato/styles'
+@customElement('data-set-importer')
+export class DataSetImporter extends LitElement {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @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="footer">
+        <div filler></div>
+        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</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'))
+  }
+}