@things-factory/dataset 6.0.25 → 6.0.28

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

@@ -2,51 +2,79 @@ 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 {
+  getEditor,
+  getRenderer,
+  ColumnConfig,
+  DataGrist,
+  FetchOption,
+  SortersControl,
+  GristRecord
+} from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { OxPopup, PopupHandle } from '@operato/popup'
 
 import './data-archive-request-popup'
 
+@customElement('data-archive-list-page')
 export class DataArchiveListPage 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
+
+  private popup?: PopupHandle
 
   get context() {
     return {
-      title: i18next.t('title.data-archive list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-archive list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-archive',
-      actions: [],
+      actions: [
+        {
+          ...CommonButtonStyles.save,
+          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)
@@ -66,7 +94,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
       >
         <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">
@@ -74,7 +102,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
+                this.sortersControl.open({
                   right: 0,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -91,23 +119,11 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
             <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>
-
-          <mwc-button
-            dense
-            raised
-            label=${i18next.t('button.request')}
-            @click=${this.openArchivePopup.bind(this)}
-            icon="archive"
-          ></mwc-button>
         </div>
       </ox-grist>
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     const today = new Date().toISOString().split('T')[0]
 
@@ -190,25 +206,25 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
   }
 
   closePopupAndRefesh() {
-    this.popup && this.popup.close()
+    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>`, 
+      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 = [] }) {
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -248,7 +264,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
   }
 
   _exportableData() {
-    let records = []
+    let records = [] as GristRecord[]
     if (this.grist.selected && this.grist.selected.length > 0) {
       records = this.grist.selected
     } else {
@@ -260,7 +276,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
       .map(column => {
         return column.imex === true
           ? {
-              header: column.header.renderer(),
+              header: column.header.renderer(column),
               key: column.name,
               width: column.width,
               type: column.type
@@ -286,5 +302,3 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
     return { header: headerSetting, data: data }
   }
 }
-
-window.customElements.define('data-archive-list-page', DataArchiveListPage)

package/client/pages/data-archive/{data-archive-request-popup.js → data-archive-request-popup.ts}

@@ -1,38 +1,41 @@
-import { SingleColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client, CustomAlert } from '@things-factory/shell'
 import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit-element'
+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 '@things-factory/form-ui'
+
 import moment from 'moment-timezone'
+import Swal from 'sweetalert2'
 
+@customElement('data-archive-request-popup')
 class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      dataSetTypes: Array
-    }
-  }
+  static styles = [
+    SingleColumnFormStyles,
+    css`
+      :host {
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        overflow-x: overlay;
+        background-color: var(--main-section-background-color);
+      }
 
-  static get styles() {
-    return [
-      SingleColumnFormStyles,
-      css`
-        :host {
-          padding: 10px;
-          display: flex;
-          flex-direction: column;
-          overflow-x: overlay;
-          background-color: var(--main-section-background-color);
-        }
-        .button-container {
-          padding: var(--button-container-padding);
-          margin: var(--button-container-margin);
-          text-align: var(--button-container-align);
-          background-color: var(--button-container-background);
-          height: var(--button-container-height);
-        }
-      `
-    ]
-  }
+      form {
+        overflow: auto;
+      }
+
+      .button-container {
+        display: flex;
+        margin-top: auto;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+    `
+  ]
+
+  @state() dataSetTypes: any
 
   render() {
     return html`
@@ -44,13 +47,13 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
           <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>`)}
+            ${(this.dataSetTypes || []).map(t => html`<option value=${t && t.value}>${t && t.display}</option>`)}
           </select>
         </fieldset>
       </form>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.requestArchive}" label="${i18next.t('button.submit')}"></mwc-button>
+        <mwc-button raised @click=${this.requestArchive} label=${String(i18next.t('button.submit'))}></mwc-button>
       </div>
     `
   }
@@ -65,9 +68,10 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
   serializeFormData() {
     const obj = {}
 
-    Array.from(this.shadowRoot.querySelectorAll('form#input-form input, select')).forEach(field => {
-      if (!field.hasAttribute('hidden') && field.value) {
-        obj[field.name] = field.type === 'checkbox' ? field.checked : field.value
+    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
       }
     })
 
@@ -116,12 +120,12 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
 
       this._generateArchiveAndDownloadUrl(dataArchive)
 
-      await CustomAlert({
+      await Swal.fire({
         type: 'info',
         title: i18next.t('title.ready'),
         text: i18next.t('text.data-archive waits'),
         confirmButton: { text: i18next.t('button.confirm') }
-      })
+      } as any)
     } else {
       console.error(response.errors)
       this.showToast(i18next.t('text.failed'))
@@ -171,5 +175,3 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
     ]
   }
 }
-
-window.customElements.define('data-archive-request-popup', DataArchiveRequestPopup)

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

@@ -4,9 +4,11 @@ import '../../components/data-entry-form.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 { getRenderer } from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl, getRenderer } from '@operato/data-grist'
 import { OxDataUseCase } from '@operato/dataset'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
@@ -14,6 +16,7 @@ import { openPopup } from '@operato/layout'
 import { navigate, PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { provider } from '@things-factory/board-ui'
+import { OxPopup } from '@operato/popup'
 
 const USECASE_OPTIONS = () => {
   return ['', ...OxDataUseCase.getUseCaseNames()].map(name => {
@@ -63,6 +66,9 @@ const showEntryView = async (columns, data, column, record, rowIndex) => {
       // navigate(`board-viewer/${entryView}?interactive=true&title=${title}`)
       break
 
+    case 'custom-element':
+      break
+
     case 'page':
       navigate(entryView)
       break
@@ -73,37 +79,42 @@ const showEntryView = async (columns, data, column, record, rowIndex) => {
   }
 }
 
+@customElement('data-entry-list-page')
 export class DataEntryListPage extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      active: String,
-      gristConfig: Object,
-      filters: Object,
-      sorters: 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
+
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
-      title: i18next.t('title.data-entry list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.data-entry list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       help: 'dataset/data-entry-list'
     }
   }
@@ -115,13 +126,12 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
       <ox-grist
         .mode=${mode}
         .config=${this.gristConfig}
-        .filters=${this.filters}
-        .orders=${this.orders}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
       >
         <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">
@@ -129,7 +139,7 @@ export class DataEntryListPage 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
                 })
@@ -145,10 +155,6 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
     `
   }
 
-  get grist() {
-    return this.renderRoot.querySelector('ox-grist')
-  }
-
   async pageInitialized(lifecycle) {
     this.gristConfig = {
       list: {
@@ -233,8 +239,7 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
           record: {
             editable: false
           },
-          width: 80,
-          label: true
+          width: 80
         },
         {
           type: 'resource-object',
@@ -316,7 +321,7 @@ export class DataEntryListPage 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!]) {
@@ -385,5 +390,3 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
     }
   }
 }
-
-window.customElements.define('data-entry-list-page', DataEntryListPage)

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

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

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

@@ -0,0 +1,95 @@
+import '@operato/data-grist'
+
+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 } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+
+@customElement('data-key-set-importer')
+export class DataKeySetImporter 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 }) dataKeySets: any[] = []
+
+  private 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
+      }
+    ]
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data=${{
+          records: this.dataKeySets
+        }}
+      ></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 importDataKeySets($dataKeySets: [DataKeySetPatch!]!) {
+          importDataKeySets(dataKeySets: $dataKeySets)
+        }
+      `,
+      variables: { dataKeySets: this.dataKeySets }
+    })
+
+    if (response.errors?.length) return
+
+    this.dispatchEvent(new CustomEvent('imported'))
+  }
+}