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

package/dist-client/pages/activity/activity-list-page.js

@@ -5,12 +5,11 @@ import './activity-model-item-list.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.js';
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
-import { PageView, store } from '@operato/shell';
+import { PageView } from '@operato/shell';
 import { CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
 import { adjustFilters, isMobileDevice } from '@operato/utils';
 import { ActivityStartingTypes, ActivityTypes, ActivityUITypes } from '../../types/types.js';
@@ -20,7 +19,7 @@ export const ActivityStatus = [
     { display: i18next.t('label.activity-state-released'), value: 'released' },
     { display: i18next.t('label.activity-state-deprecated'), value: 'deprecated' }
 ];
-let ActivityListPage = class ActivityListPage extends connect(store)(localize(i18next)(PageView)) {
+let ActivityListPage = class ActivityListPage extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
@@ -30,49 +29,40 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
         ScrollbarStyles,
         CommonHeaderStyles,
         css `
-      :host {
-        display: flex;
+      :host {         display: flex;
 
         width: 100%;
 
         --grid-record-emphasized-background-color: #8b0000;
         --grid-record-emphasized-color: #ff6b6b;
-      }
+ }
 
-      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.activity list'),
-            search: {
-                handler: (search) => {
+        return { title: i18next.t('title.activity list'),
+            search: { handler: (search) => {
                     this.grist.searchText = search;
                 },
-                value: this.grist?.searchText || ''
-            },
-            filter: {
-                handler: () => {
+                value: this.grist?.searchText || '' },
+            filter: { handler: () => {
                     this.grist.toggleHeadroom();
                 }
             },
             help: 'worklist/activity',
             actions: [
-                {
-                    title: i18next.t('button.save'),
+                { title: i18next.t('button.save'),
                     action: this.updateActivity.bind(this),
                     ...CommonButtonStyles.save
                 }
             ],
-            toolbar: false
-        };
+            toolbar: false };
     }
     render() {
         const mode = this.mode;
@@ -83,16 +73,13 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
             <ox-input-select-buttons
               .value=${this.filters}
               .options=${[
-            {
-                display: i18next.t('label.filter-draft'),
+            { display: i18next.t('label.filter-draft'),
                 value: 'draft'
             },
-            {
-                display: i18next.t('label.filter-released'),
+            { display: i18next.t('label.filter-released'),
                 value: 'released'
             },
-            {
-                display: i18next.t('label.filter-deprecated'),
+            { display: i18next.t('label.filter-deprecated'),
                 value: 'deprecated'
             }
         ]}
@@ -109,22 +96,18 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
     `;
     }
     async pageInitialized(lifecycle) {
-        this.gristConfig = {
-            list: {
-                thumbnail: 'thumbnail',
+        this.gristConfig = { list: { thumbnail: 'thumbnail',
                 fields: ['name', 'description'],
                 details: ['updatedAt']
             },
             columns: [
                 { type: 'gutter', gutterName: 'sequence' },
                 { type: 'gutter', gutterName: 'row-selector', multiple: true },
-                {
-                    type: 'gutter',
+                { type: 'gutter',
                     gutterName: 'button',
                     icon: record => (!record ? 'calendar_add_on' : !record.id || !record.scheduleId ? '' : 'event_available'),
                     title: i18next.t('button.schedule-task'),
-                    handlers: {
-                        click: (columns, data, column, record, rowIndex) => {
+                    handlers: { click: (columns, data, column, record, rowIndex) => {
                             if (!record || !record.id || (!record.scheduleId && !record.schedule)) {
                                 return;
                             }
@@ -137,19 +120,16 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                         }
                     }
                 },
-                {
-                    type: 'gutter',
+                { type: 'gutter',
                     gutterName: 'button',
                     icon: record => (!record ? 'reorder' : record.id ? 'reorder' : ''),
                     iconOnly: false,
                     title: record => (!record ? i18next.t('button.detail') : record.id ? i18next.t('button.detail') : ''),
                     width: 72,
-                    handlers: {
-                        click: (columns, data, column, record, rowIndex) => {
+                    handlers: { click: (columns, data, column, record, rowIndex) => {
                             if (!record.id)
                                 return;
-                            const popup = openPopup(html ` <activity-model-item-list .activity=${record}></activity-model-item-list> `, {
-                                backdrop: true,
+                            const popup = openPopup(html ` <activity-model-item-list .activity=${record}></activity-model-item-list> `, { backdrop: true,
                                 help: 'worklist/activity/activity-model-item-list',
                                 size: 'large',
                                 title: i18next.t('title.activity model item list')
@@ -160,78 +140,64 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                         }
                     }
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'name',
                     header: i18next.t('field.name'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     filter: 'search',
                     sortable: true,
                     width: 175
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'description',
                     header: i18next.t('field.description'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     filter: 'search',
                     width: 225
                 },
-                {
-                    type: 'approval-line',
+                { type: 'approval-line',
                     name: 'approvalLine',
                     header: i18next.t('field.approval-line'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         align: 'center'
                     },
                     width: 60
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'state',
                     header: i18next.t('field.status'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: ActivityStatus
                     },
                     filter: true,
                     width: 75
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'activityType',
                     label: true,
                     header: i18next.t('field.activity-type'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: ActivityTypes
                     },
                     sortable: true,
                     width: 75
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'startingType',
                     label: true,
                     header: i18next.t('field.starting-type'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: ActivityStartingTypes
                     },
                     sortable: true,
                     width: 75
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'multiple',
                     header: i18next.t('field.multiple'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: [
                             { display: '', value: '' },
                             { display: 'Single', value: 'single' },
@@ -241,22 +207,18 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                     },
                     width: 90
                 },
-                {
-                    type: 'activity-search-keys',
+                { type: 'activity-search-keys',
                     name: 'searchKeys',
                     label: true,
                     header: i18next.t('field.search-keys'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     width: 60
                 },
-                {
-                    type: 'number',
+                { type: 'number',
                     name: 'priority',
                     header: i18next.t('field.priority'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         align: 'center',
                         renderer: function (value, column, record, rowIndex, field) {
                             const color = ['', '#98FB98', '#87CEEB', '#FF6B6B', '#8B0000'][value || 0];
@@ -266,103 +228,82 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                     },
                     width: 75
                 },
-                {
-                    type: 'crontab',
+                { type: 'crontab',
                     name: 'schedule',
                     label: true,
                     header: i18next.t('field.schedule'),
-                    record: {
-                        editable: true,
-                        options: {
-                            objectified: true
+                    record: { editable: true,
+                        options: { objectified: true
                         }
                     },
                     width: 80
                 },
-                {
-                    type: 'timezone',
+                { type: 'timezone',
                     name: 'timezone',
                     header: i18next.t('field.timezone'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     width: 120
                 },
-                {
-                    type: 'image',
+                { type: 'image',
                     name: 'thumbnail',
                     header: i18next.t('field.thumbnail'),
                     record: { editable: true },
                     width: 120
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'issuerRole',
                     header: i18next.t('field.issuer-role'),
-                    record: {
-                        editable: true,
-                        options: {
-                            title: i18next.t('title.lookup role'),
+                    record: { editable: true,
+                        options: { title: i18next.t('title.lookup role'),
                             queryName: 'roles'
                         }
                     },
                     filter: 'search',
                     width: 85
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'assigneeRole',
                     header: i18next.t('field.assignee-role'),
-                    record: {
-                        editable: true,
-                        options: {
-                            title: i18next.t('title.lookup role'),
+                    record: { editable: true,
+                        options: { title: i18next.t('title.lookup role'),
                             queryName: 'roles'
                         }
                     },
                     filter: 'search',
                     width: 85
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'supervisoryRole',
                     header: i18next.t('field.supervisory-role'),
-                    record: {
-                        editable: true,
-                        options: {
-                            title: i18next.t('title.lookup role'),
+                    record: { editable: true,
+                        options: { title: i18next.t('title.lookup role'),
                             queryName: 'roles'
                         }
                     },
                     filter: 'search',
                     width: 85
                 },
-                {
-                    type: 'assignees',
+                { type: 'assignees',
                     name: 'assignees',
                     header: i18next.t('field.assignees'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     width: 80
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'uiType',
                     label: true,
                     header: i18next.t('field.ui-type'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: ActivityUITypes
                     },
                     width: 80
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'uiSource',
                     header: i18next.t('field.ui-source'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         editor: function (value, column, record, rowIndex, field) {
                             var type = record.uiType !== 'board' ? 'script' : 'board';
                             return getEditor(type)(value, column, record, rowIndex, field);
@@ -374,23 +315,19 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                     },
                     width: 140
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'viewType',
                     label: true,
                     header: i18next.t('field.view-type'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: ActivityUITypes
                     },
                     width: 80
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'viewSource',
                     header: i18next.t('field.view-source'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         editor: function (value, column, record, rowIndex, field) {
                             var type = record.viewType !== 'board' ? 'script' : 'board';
                             return getEditor(type)(value, column, record, rowIndex, field);
@@ -402,23 +339,19 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                     },
                     width: 140
                 },
-                {
-                    type: 'select',
+                { type: 'select',
                     name: 'reportType',
                     label: true,
                     header: i18next.t('field.report-type'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: ActivityUITypes
                     },
                     width: 80
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'reportSource',
                     header: i18next.t('field.report-source'),
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         editor: function (value, column, record, rowIndex, field) {
                             var type = record.reportType !== 'board' ? 'script' : 'board';
                             return getEditor(type)(value, column, record, rowIndex, field);
@@ -430,48 +363,38 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                     },
                     width: 140
                 },
-                {
-                    type: 'duration',
+                { type: 'duration',
                     name: 'standardTime',
                     header: i18next.t('field.standard-time'),
-                    record: {
-                        editable: true
+                    record: { editable: true
                     },
                     sortable: true,
                     width: 105
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'updater',
                     header: i18next.t('field.updater'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     sortable: true,
                     width: 85
                 },
-                {
-                    type: 'datetime',
+                { type: 'datetime',
                     name: 'updatedAt',
                     header: i18next.t('field.updated_at'),
-                    record: {
-                        editable: false
+                    record: { editable: false
                     },
                     sortable: true,
                     width: 180
                 }
             ],
-            rows: {
-                selectable: {
-                    multiple: true
+            rows: { selectable: { multiple: true
                 },
-                handlers: {
-                    click: 'select-row-toggle'
+                handlers: { click: 'select-row-toggle'
                 }
             },
             sorters: [
-                {
-                    name: 'name'
+                { name: 'name'
                 }
             ]
         };
@@ -481,24 +404,18 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
         if (status.length > 0) {
             filters = adjustFilters(filters, [{ name: 'state', operator: 'in', value: status }]);
         }
-        const response = await client.query({
-            query: gql `
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: activities(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
+        const response = await client.query({ query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: activities(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
               name
               description
               activityType
-              searchKeys {
-                name
+              searchKeys {                 name
                 description
                 inputKey
                 tKey
-              }
+ }
               state
-              model {
-                name
+              model {                 name
                 description
                 active
                 tag
@@ -508,41 +425,34 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                 options
                 quantifier
                 spec
-              }
+ }
               thumbnail
               priority
-              issuerRole {
-                id
+              issuerRole {                 id
                 name
-              }
-              assigneeRole {
-                id
+ }
+              assigneeRole {                 id
                 name
-              }
-              supervisoryRole {
-                id
+ }
+              supervisoryRole {                 id
                 name
-              }
-              assignees {
-                type
+ }
+              assignees {                 type
                 value
-                assignee {
-                  id
+                assignee {                   id
                   name
                   description
                   controlNo
-                }
-              }
-              approvalLine {
-                type
+ }
+ }
+              approvalLine {                 type
                 value
-                approver {
-                  id
+                approver {                   id
                   name
                   description
                   controlNo
-                }
-              }
+ }
+ }
               uiType
               uiSource
               viewType
@@ -555,24 +465,21 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
               timezone
               scheduleId
               standardTime
-              updater {
-                id
+              updater {                 id
                 name
-              }
+ }
               updatedAt
-            }
+ }
             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 || []
         };
     }
@@ -588,19 +495,14 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
                 patchField.cuFlag = patch.__dirty__;
                 return patchField;
             });
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($patches: [ActivityPatch!]!) {
-            updateMultipleActivity(patches: $patches) {
-              name
-            }
-          }
+            const response = await client.mutate({ mutation: gql `
+          mutation ($patches: [ActivityPatch!]!) {             updateMultipleActivity(patches: $patches) {               name
+ }
+ }
         `,
-                variables: {
-                    patches
+                variables: { patches
                 },
-                context: {
-                    hasUpload: true
+                context: { hasUpload: true
                 }
             });
             if (!response.errors) {
@@ -609,48 +511,37 @@ let ActivityListPage = class ActivityListPage extends connect(store)(localize(i1
         }
     }
     async startActivitySchedule(record) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($activityId: String!) {
-          startActivitySchedule(activityId: $activityId) {
-            scheduleId
-          }
-        }
+        var response = await client.mutate({ mutation: gql `
+        mutation ($activityId: String!) {           startActivitySchedule(activityId: $activityId) {             scheduleId
+ }
+ }
       `,
-            variables: {
-                activityId: record.id
+            variables: { activityId: record.id
             }
         });
         const scheduleId = response.data.startActivitySchedule.scheduleId;
         record.scheduleId = scheduleId;
-        notify({
-            level: 'info',
+        notify({ level: 'info',
             message: `${record.scheduleId ? 'success' : 'fail'} to start activity schedule : ${record.name}`
         });
         this.grist.fetch();
     }
     async stopActivitySchedule(record) {
-        var response = await client.mutate({
-            mutation: gql `
-        mutation ($activityId: String!) {
-          stopActivitySchedule(activityId: $activityId) {
-            scheduleId
-          }
-        }
+        var response = await client.mutate({ mutation: gql `
+        mutation ($activityId: String!) {           stopActivitySchedule(activityId: $activityId) {             scheduleId
+ }
+ }
       `,
-            variables: {
-                activityId: record.id
+            variables: { activityId: record.id
             }
         });
         if (!response.errors) {
-            notify({
-                level: 'info',
+            notify({ level: 'info',
                 message: `success to stop activity schedule : ${record.name}`
             });
         }
         else {
-            notify({
-                level: 'error',
+            notify({ level: 'error',
                 message: `${response.errors.map(error => error.message).join('\n')}`
             });
         }