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

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

@@ -0,0 +1,109 @@
+import '@material/web/icon/icon.js'
+import '@operato/dataset/ox-data-entry-form.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 { CommonHeaderStyles, 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 = [
+    CommonHeaderStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-data-entry-form {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+
+      .footer span {
+        font-size: 0.8em;
+        color: var(--md-sys-color-on-surface);
+        line-height: 1.5;
+        padding: 10px;
+      }
+    `
+  ]
+
+  @property({ type: Object }) dataSet?: DataSet & { id: string }
+
+  @state() dataSample?: { id: string; collectedAt: Date }
+
+  @query('ox-data-entry-form') entryForm!: OxDataEntryForm
+
+  render() {
+    return html`
+      <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
+
+      <div class="footer">
+        <div filler></div>
+        ${!this.dataSample
+          ? html`
+              <button @click=${this.updateDataItems.bind(this)} done>
+                <md-icon>save</md-icon>${i18next.t('button.save')}
+              </button>
+            `
+          : html` <span>${i18next.t('field.collected-at')}: ${this.dataSample.collectedAt.toLocaleString()}</span> `}
+      </div>
+    `
+  }
+
+  private async updateDataItems() {
+    //@ts-ignore TODO replace with following line and confirm
+    const data = this.entryForm.buildValue()
+
+    const dataSample = {
+      dataSet: {
+        id: this.dataSet?.id
+      },
+      data
+    } as any
+
+    if (this.dataSample?.collectedAt) {
+      dataSample.collectedAt = this.dataSample.collectedAt
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($dataSample: NewDataSample!) {
+          createDataSample(dataSample: $dataSample) {
+            id
+            collectedAt
+          }
+        }
+      `,
+      variables: {
+        dataSample
+      },
+      context: {
+        hasUpload: true
+      }
+    })
+
+    if (!response.errors) {
+      const { id, collectedAt } = response.data.createDataSample
+      this.dataSample = {
+        id,
+        collectedAt: new Date(collectedAt)
+      }
+
+      document.dispatchEvent(
+        new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } })
+      )
+    }
+  }
+}

package/client/index.ts

@@ -0,0 +1 @@
+export * from './components/data-entry-form.js'

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

@@ -0,0 +1,277 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
+
+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 { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PopupHandle, openPopup } from '@operato/layout'
+import { PageView, store } from '@operato/shell'
+import { CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+import './data-archive-request-popup'
+
+@customElement('data-archive-list-page')
+export class DataArchiveListPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      .header {
+        grid-template-areas: 'filters actions';
+      }
+    `
+  ]
+
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+
+  private popup?: PopupHandle
+
+  get context() {
+    return {
+      title: i18next.t('title.data-archive list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || ''
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'dataset/data-archive',
+      actions: [
+        {
+          title: i18next.t('button.request-archive'),
+          action: this.openArchivePopup.bind(this),
+          icon: 'archive'
+        }
+      ],
+      exportable: {
+        name: i18next.t('title.data-archive list'),
+        data: this._exportableData.bind(this)
+      },
+      toolbar: false
+    }
+  }
+
+  render() {
+    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 */}
+      >
+        <div slot="headroom" class="header">
+          <!-- <div class="filters">
+            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
+          </div> -->
+
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle) {
+    this.gristConfig = {
+      list: { fields: ['updater', 'updatedAt'] },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        // { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'resource-object',
+          name: 'creator',
+          header: i18next.t('field.creator'),
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: i18next.t('field.created_at'),
+          sortable: true,
+          width: 180,
+          imex: true
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          sortable: true,
+          width: 180,
+          imex: true
+        },
+        {
+          type: 'json5',
+          name: 'requestParams',
+          header: i18next.t('field.request-params'),
+          record: {
+            editable: false
+          },
+          width: 200,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'downloadUrl',
+          label: true,
+          header: i18next.t('field.download-url'),
+          record: {
+            editable: false
+          },
+          width: 240,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'status',
+          label: true,
+          header: i18next.t('field.status'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120,
+          imex: true
+        }
+      ],
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [
+        {
+          name: 'createdAt',
+          desc: true
+        }
+      ]
+    }
+  }
+
+  closePopupAndRefesh() {
+    this.popup?.close()
+    this.grist.fetch()
+  }
+
+  async openArchivePopup() {
+    this.popup = openPopup(
+      html` <data-archive-request-popup
+        @requested=${this.closePopupAndRefesh.bind(this)}
+        @created=${this.closePopupAndRefesh.bind(this)}
+      ></data-archive-request-popup>`,
+      {
+        backdrop: true,
+        size: 'small',
+        title: i18next.t('title.data-archive request popup')
+      }
+    )
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: dataArchives(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              type
+              requestParams
+              downloadUrl
+              status
+              creator {
+                id
+                name
+              }
+              updater {
+                id
+                name
+              }
+              updatedAt
+              createdAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  _exportableData() {
+    let records = [] as GristRecord[]
+    if (this.grist.selected && this.grist.selected.length > 0) {
+      records = this.grist.selected
+    } else {
+      records = this.grist.data.records
+    }
+
+    var headerSetting = this.grist.compiledConfig.columns
+      .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+      .map(column => {
+        return column.imex === true
+          ? {
+              header: column.header.renderer(column),
+              key: column.name,
+              width: column.width,
+              type: column.type
+            }
+          : column.imex
+      })
+
+    var data = records.map(item => {
+      return {
+        id: item.id,
+        ...this.gristConfig.columns
+          .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)
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+}

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

@@ -0,0 +1,177 @@
+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 '@operato/form'
+import { CommonHeaderStyles } from '@operato/styles'
+
+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 = [
+    CommonHeaderStyles,
+    SingleColumnFormStyles,
+    css`
+      :host {
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        overflow-x: overlay;
+        background-color: var(--md-sys-color-background);
+      }
+
+      form {
+        overflow: auto;
+      }
+    `
+  ]
+
+  @state() dataSetTypes: any
+
+  render() {
+    return html`
+      <form id="input-form" name="generation" class="single-column-form" @submit=${e => this.onSubmit(e)}>
+        <fieldset>
+          <label>${i18next.t('label.start-date')}</label>
+          <input type="month" name="startDate" required />
+          <label>${i18next.t('label.end-date')}</label>
+          <input type="month" name="endDate" .value=${moment().format('YYYY-MM')} />
+          <label>${i18next.t('label.data-set-type')}</label>
+          <select name="type" required>
+            ${(this.dataSetTypes || []).map(t => html`<option value=${t && t.value}>${t && t.display}</option>`)}
+          </select>
+        </fieldset>
+      </form>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.requestArchive} done>
+          <md-icon>archive</md-icon>${String(i18next.t('button.submit'))}
+        </button>
+      </div>
+    `
+  }
+
+  async firstUpdated() {}
+
+  async onSubmit(e) {
+    e.preventDefault()
+    this.requestArchive()
+  }
+
+  serializeFormData() {
+    const obj = {}
+
+    Array.from(this.shadowRoot!.querySelectorAll('form#input-form input, select')).forEach((field: Element) => {
+      const input = field as HTMLInputElement
+      if (!input.hasAttribute('hidden') && input.value) {
+        obj[input.name] = input.type === 'checkbox' ? input.checked : input.value
+      }
+    })
+
+    if (obj['startDate']) {
+      obj['startDate'] += '-01'
+    }
+
+    if (obj['endDate']) {
+      const endDate = moment(obj['endDate']).endOf('month')
+      const today = moment()
+      const format = 'YYYY-MM-DD'
+
+      obj['endDate'] = endDate > today ? today.format(format) : endDate.format(format)
+    }
+
+    return obj
+  }
+
+  /** request download url. */
+  async requestArchive() {
+    // #1 request download url
+    const dataArchive = {
+      requestParams: this.serializeFormData(),
+      status: 'requested'
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation createDataArchive($dataArchive: NewDataArchive!) {
+          createDataArchive(dataArchive: $dataArchive) {
+            id
+            status
+          }
+        }
+      `,
+      variables: { dataArchive }
+    })
+
+    if (!response.errors) {
+      this.dispatchEvent(new CustomEvent('requested', {}))
+
+      const {
+        createDataArchive: { id }
+      } = response.data
+      dataArchive['id'] = id
+
+      this._generateArchiveAndDownloadUrl(dataArchive)
+
+      await CustomAlert({
+        type: 'info',
+        title: i18next.t('title.ready'),
+        text: i18next.t('text.data-archive waits'),
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+    } else {
+      console.error(response.errors)
+      this.showToast(i18next.t('text.failed'))
+    }
+  }
+
+  async _generateArchiveAndDownloadUrl(dataArchive) {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation generatePresignedUrl($patch: DataArchivePatch!) {
+          generatePresignedUrl(patch: $patch) {
+            id
+            downloadUrl
+            status
+          }
+        }
+      `,
+      variables: { patch: dataArchive }
+    })
+
+    if (!response.errors) {
+      this.showToast(i18next.t('title.data-archive downloads ready'))
+      this.dispatchEvent(new CustomEvent('created', {}))
+    } else {
+      console.error(response.errors)
+      this.showToast(i18next.t('text.failed'))
+    }
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
+  }
+
+  constructor() {
+    super()
+
+    this.dataSetTypes = [
+      {},
+      {
+        display: i18next.t('text.manually collected'),
+        value: 'manual'
+      },
+      {
+        display: i18next.t('text.automatically collected'),
+        value: 'automatic'
+      }
+    ]
+  }
+}