@things-factory/dataset 9.1.19 → 10.0.0-beta.2

package/dist-client/pages/data-ooc/data-ooc-list-page.js

@@ -8,20 +8,16 @@ import './data-ooc-view.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
-import { connect } from 'pwa-helpers/connect-mixin';
 import { GhostPrint } from '@operato/ghost-print';
 function getOocStatus() {
     return [
-        {
-            display: i18next.t('label.state-issued'),
+        { display: i18next.t('label.state-issued'),
             value: 'ISSUED'
         },
-        {
-            display: i18next.t('label.state-reviewed'),
+        { display: i18next.t('label.state-reviewed'),
             value: 'REVIEWED'
         },
-        {
-            display: i18next.t('label.state-corrected'),
+        { display: i18next.t('label.state-corrected'),
             value: 'CORRECTED'
         }
     ];
@@ -30,10 +26,10 @@ import { DataGrist } 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 { PageView } from '@operato/shell';
 import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
 import { isMobileDevice, adjustFilters } from '@operato/utils';
-let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize(i18next)(PageView))) {
+let DataOocListPage = class DataOocListPage extends p13n(localize(i18next)(PageView)) {
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
@@ -43,53 +39,43 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
         CommonGristStyles,
         CommonHeaderStyles,
         css `
-      :host {
-        display: flex;
+      :host {         display: flex;
         flex-direction: column;
 
         overflow: hidden;
 
         --grid-header-padding: 2px 0 2px 9px;
-      }
+ }
 
-      ox-grist {
-        overflow-y: auto;
+      ox-grist {         overflow-y: auto;
         flex: 1;
-      }
+ }
 
-      .header {
-        grid-template-areas: 'filters actions';
-      }
+      .header {         grid-template-areas: 'filters actions';
+ }
     `
     ]; }
     get context() {
-        return {
-            title: i18next.t('title.data-ooc list'),
-            search: {
-                handler: (search) => {
+        return { title: i18next.t('title.data-ooc list'),
+            search: { handler: (search) => {
                     this.grist.searchText = search;
                 },
-                value: this.grist?.searchText || ''
-            },
-            filter: {
-                handler: () => {
+                value: this.grist?.searchText || '' },
+            filter: { handler: () => {
                     this.grist.toggleHeadroom();
                 }
             },
             help: 'dataset/data-ooc',
             actions: [
-                {
-                    title: i18next.t('button.print'),
+                { title: i18next.t('button.print'),
                     action: this.printOocs.bind(this),
                     icon: 'print'
                 }
             ],
-            exportable: {
-                name: i18next.t('title.data-ooc list'),
+            exportable: { name: i18next.t('title.data-ooc list'),
                 data: this._exportableData.bind(this)
             },
-            toolbar: false
-        };
+            toolbar: false };
     }
     render() {
         const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID');
@@ -120,15 +106,12 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
     `;
     }
     async pageInitialized(lifecycle) {
-        this.gristConfig = {
-            list: {
-                fields: ['dataSet', 'data', 'correctiveAction', 'corrector', 'correctedAt', 'collectedAt', 'creator']
+        this.gristConfig = { list: { fields: ['dataSet', 'data', 'correctiveAction', 'corrector', 'correctedAt', 'collectedAt', 'creator']
             },
             columns: [
                 { type: 'gutter', gutterName: 'sequence', fixed: true },
                 { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
-                {
-                    type: 'gutter',
+                { type: 'gutter',
                     gutterName: 'button',
                     fixed: true,
                     icon: 'assignment_turned_in',
@@ -136,235 +119,193 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
                     title: i18next.t('button.detail'),
                     width: 72
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'name',
                     fixed: true,
                     label: true,
                     header: i18next.t('field.name'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     filter: 'search',
                     sortable: true,
                     width: 120,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'description',
                     label: true,
                     header: i18next.t('field.description'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     filter: 'search',
                     width: 150,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'history',
                     hidden: true,
                     imex: true
                 },
-                {
-                    type: 'checkbox',
+                { type: 'checkbox',
                     name: 'ooc',
                     header: i18next.t('field.ooc'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     width: 30
                 },
-                {
-                    type: 'checkbox',
+                { type: 'checkbox',
                     name: 'oos',
                     header: i18next.t('field.oos'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     width: 30
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'state',
                     label: true,
                     header: i18next.t('field.status'),
-                    record: {
-                        editable: false,
+                    record: { editable: false,
                         options: [{ display: '', value: '' }, ...getOocStatus()]
                     },
                     width: 100,
                     filter: true,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'correctiveInstruction',
                     label: true,
                     header: i18next.t('field.corrective-instruction'),
-                    record: {
-                        editable: false,
+                    record: { editable: false,
                         language: 'text'
                     },
                     width: 150,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'correctiveAction',
                     label: true,
                     header: i18next.t('field.corrective-action'),
-                    record: {
-                        editable: false,
+                    record: { editable: false,
                         language: 'text'
                     },
                     width: 150,
                     imex: true
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'dataSet',
                     header: i18next.t('field.data-set'),
                     sortable: true,
                     width: 120,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'key01',
-                    header: {
-                        renderer: i18next.t('field.key-01'),
+                    header: { renderer: i18next.t('field.key-01'),
                         group: i18next.t('field.key')
                     },
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     sortable: true,
                     width: 120,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'key02',
-                    header: {
-                        renderer: i18next.t('field.key-02'),
+                    header: { renderer: i18next.t('field.key-02'),
                         group: i18next.t('field.key')
                     },
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     sortable: true,
                     width: 120,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'key03',
-                    header: {
-                        renderer: i18next.t('field.key-03'),
+                    header: { renderer: i18next.t('field.key-03'),
                         group: i18next.t('field.key')
                     },
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     sortable: true,
                     width: 120,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'key04',
-                    header: {
-                        renderer: i18next.t('field.key-04'),
+                    header: { renderer: i18next.t('field.key-04'),
                         group: i18next.t('field.key')
                     },
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     sortable: true,
                     width: 120,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'key05',
-                    header: {
-                        renderer: i18next.t('field.key-05'),
+                    header: { renderer: i18next.t('field.key-05'),
                         group: i18next.t('field.key')
                     },
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     sortable: true,
                     width: 120,
                     imex: true
                 },
-                {
-                    type: 'json5',
+                { type: 'json5',
                     name: 'partitionKeys',
                     header: i18next.t('field.partition-keys'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     width: 200,
                     imex: true
                 },
-                {
-                    type: 'json5',
+                { type: 'json5',
                     name: 'data',
                     header: i18next.t('field.data'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     width: 200,
                     imex: true
                 },
-                {
-                    type: 'text',
+                { type: 'text',
                     name: 'rawData',
                     header: i18next.t('field.raw-data'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     width: 200,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'workDate',
                     header: i18next.t('field.work-date'),
                     sortable: true,
                     width: 80,
                     imex: true
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'workShift',
                     header: i18next.t('field.work-shift'),
                     sortable: true,
                     width: 40,
                     imex: true
                 },
-                {
-                    type: 'datetime',
+                { type: 'datetime',
                     name: 'collectedAt',
                     header: i18next.t('field.collected-at'),
                     sortable: true,
                     width: 180,
                     imex: true
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'updater',
                     header: i18next.t('field.updater'),
                     sortable: true,
                     width: 120,
                     imex: true
                 },
-                {
-                    type: 'datetime',
+                { type: 'datetime',
                     name: 'updatedAt',
                     header: i18next.t('field.updated_at'),
                     sortable: true,
@@ -372,27 +313,21 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
                     imex: true
                 }
             ],
-            rows: {
-                appendable: false,
-                selectable: {
-                    multiple: true
+            rows: { appendable: false,
+                selectable: { multiple: true
                 },
-                handlers: {
-                    click: (columns, data, column, record, rowIndex) => {
-                        const popup = openPopup(html ` <data-ooc-view data-ooc-id=${record.id} style="background-color: white;"></data-ooc-view> `, {
-                            backdrop: true,
+                handlers: { click: (columns, data, column, record, rowIndex) => {
+                        const popup = openPopup(html ` <data-ooc-view data-ooc-id=${record.id} style="background-color: white;"></data-ooc-view> `, { backdrop: true,
                             size: 'large',
                             title: i18next.t('title.data-ooc view')
                         });
                         popup.onclosed = () => {
-                            // this.grist.fetch()
                         };
                     }
                 }
             },
             sorters: [
-                {
-                    name: 'collectedAt',
+                { name: 'collectedAt',
                     desc: true
                 }
             ]
@@ -402,27 +337,21 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
         if (this.state) {
             filters = adjustFilters(filters, [{ name: 'state', operator: 'eq', value: this.state }]);
         }
-        const response = await client.query({
-            query: gql `
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: dataOocs(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
+        const response = await client.query({ query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: dataOocs(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
               name
               description
               useCase
-              dataSet {
-                id
+              dataSet {                 id
                 name
-              }
+ }
               key01
               key02
               key03
               key04
               key05
               partitionKeys
-              dataItems {
-                name
+              dataItems {                 name
                 description
                 active
                 hidden
@@ -434,7 +363,7 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
                 quota
                 spec
                 stat
-              }
+ }
               data
               rawData
               judgment
@@ -447,34 +376,29 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
               correctiveInstruction
               correctiveAction
               reviewedAt
-              reviewer {
-                id
+              reviewer {                 id
                 name
-              }
+ }
               correctedAt
-              corrector {
-                id
+              corrector {                 id
                 name
-              }
-              updater {
-                id
+ }
+              updater {                 id
                 name
-              }
+ }
               updatedAt
               collectedAt
-            }
+ }
             total
-          }
-        }
+ }
+ }
       `,
-            variables: {
-                filters,
+            variables: { filters,
                 pagination: { page, limit },
                 sortings
             }
         });
-        return {
-            total: response.data.responses.total || 0,
+        return { total: response.data.responses.total || 0,
             records: response.data.responses.items || []
         };
     }
@@ -490,8 +414,7 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
             .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
             .map(column => {
             return column.imex === true
-                ? {
-                    header: column.header.renderer(column),
+                ? { header: column.header.renderer(column),
                     key: column.name,
                     width: column.width,
                     type: column.type
@@ -499,8 +422,7 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
                 : column.imex;
         });
         var data = records.map(item => {
-            return {
-                id: item.id,
+            return { id: item.id,
                 ...this.gristConfig.columns
                     .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
                     .reduce((record, column) => {
@@ -517,8 +439,7 @@ let DataOocListPage = class DataOocListPage extends connect(store)(p13n(localize
     printOocs() {
         const selected = this.grist.selected;
         const ids = selected.map(record => record.id).join('|');
-        GhostPrint.print({
-            src: `./data-oocs?ids=${ids}`
+        GhostPrint.print({ src: `./data-oocs?ids=${ids}`
             // pending: 200 * selected.length
         });
     }