@things-factory/worklist 6.0.28 → 6.0.32

package/client/pages/activity/activity-list-page.ts

@@ -5,6 +5,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
+import moment from 'moment-timezone'
 
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -22,6 +23,8 @@ export const ActivityStatus = [
   { display: 'Released', value: 'released' },
   { display: 'Deprecated', value: 'deprecated' }
 ]
+const DEFAULT_TZ = Intl.DateTimeFormat().resolvedOptions().timeZone
+const TIMEZONE_OPTIONS = ['', DEFAULT_TZ, ...moment.tz.names().filter(tz => tz !== DEFAULT_TZ)]
 
 @customElement('activity-list-page')
 export class ActivityListPage extends connect(store)(localize(i18next)(PageView)) {
@@ -226,6 +229,22 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           },
           width: 80
         },
+        {
+          type: 'select',
+          name: 'timezone',
+          header: i18next.t('field.timezone'),
+          record: {
+            editable: true,
+            options: TIMEZONE_OPTIONS
+          },
+          width: 120,
+          imex: {
+            width: 13,
+            header: i18next.t('field.timezone'),
+            type: 'select',
+            key: 'timezone'
+          }
+        },
         {
           type: 'image',
           name: 'thumbnail',
@@ -321,6 +340,34 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           },
           width: 140
         },
+        {
+          type: 'select',
+          name: 'viewType',
+          label: true,
+          header: i18next.t('field.view-type'),
+          record: {
+            editable: true,
+            options: ActivityUITypes
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'viewSource',
+          header: i18next.t('field.view-source'),
+          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)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.viewType !== 'board' ? 'script' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          width: 140
+        },
         {
           type: 'select',
           name: 'reportType',
@@ -495,6 +542,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
               reportSource
               startable
               schedule
+              timezone
               standardTime
               leadTime
               cycleTime

package/client/pages/activity/activity-partial-view.ts

@@ -46,6 +46,7 @@ export class ActivityView extends localize(i18next)(LitElement) {
       priority,
       startable,
       schedule,
+      timzeone,
       standardTime,
       cycleTime,
       tactTime,
@@ -57,6 +58,8 @@ export class ActivityView extends localize(i18next)(LitElement) {
       approvalLine,
       uiType,
       uiSource,
+      viewType,
+      viewSource,
       reportType,
       reportSource
     } = this.activity

package/client/pages/activity-approval/activity-approval-page.ts

@@ -67,8 +67,8 @@ const ActivityApprovalFetchResult = `\
       thumbnail
       input
       output
-      uiType
-      uiSource
+      viewType
+      viewSource
       dueAt
       createdAt
     }  
@@ -181,7 +181,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   activityContent() {
-    switch (this.activityThread?.activityInstance?.uiType) {
+    switch (this.activityThread?.activityInstance?.viewType) {
       case 'template':
         return this.templateContent()
       case 'generated':
@@ -198,7 +198,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   templateContent() {
-    const { uiSource: template } = this.activityThread?.activityInstance
+    const { viewSource: template } = this.activityThread?.activityInstance
     return unsafeHTML(template)
   }
 
@@ -271,7 +271,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
   boardContent() {
     const { output, activityInstance } = this.activityThread
-    const { uiSource: boardId, input } = activityInstance || {}
+    const { viewSource: boardId, input } = activityInstance || {}
 
     if (!this.board || this.board.id !== boardId) {
       this.board = {
@@ -296,7 +296,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
   customElementContent() {
     const { output, activityInstance } = this.activityThread
-    const { uiSource: tagName, input } = activityInstance || {}
+    const { viewSource: tagName, input } = activityInstance || {}
 
     const element = document.createElement(tagName)
     element.id = 'custom-content'

package/client/pages/activity-template/activity-template-list-page.ts

@@ -215,6 +215,34 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
           },
           width: 140
         },
+        {
+          type: 'select',
+          name: 'viewType',
+          label: true,
+          header: i18next.t('field.view-type'),
+          record: {
+            editable: true,
+            options: ActivityUITypes
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'viewSource',
+          header: i18next.t('field.view-source'),
+          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)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.viewType !== 'board' ? 'script' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          width: 140
+        },
         {
           type: 'select',
           name: 'reportType',

package/client/pages/installable-activity/installable-activity-list-page.ts

@@ -229,6 +229,34 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
           },
           width: 140
         },
+        {
+          type: 'select',
+          name: 'viewType',
+          label: true,
+          header: i18next.t('field.view-type'),
+          record: {
+            editable: true,
+            options: ActivityUITypes
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'viewSource',
+          header: i18next.t('field.view-source'),
+          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)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.viewType !== 'board' ? 'script' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          width: 140
+        },
         {
           type: 'select',
           name: 'reportType',

package/client/pages/todo/approval-waiting-list-page.ts

@@ -153,14 +153,14 @@ export class ApprovalWaitingListPage extends connect(store)(localize(i18next)(Pa
         },
         {
           type: 'string',
-          name: 'uiSource',
-          header: i18next.t('field.ui-source'),
+          name: 'viewSource',
+          header: i18next.t('field.view-source'),
           record: {
             editable: false,
             renderer: function (value, column, record, rowIndex, field) {
-              const { uiType, uiSource } = record.activity || {}
-              var type = uiType !== 'board' ? 'string' : 'board'
-              return getRenderer(type)(uiSource, column, record, rowIndex, field)
+              const { viewType, viewSource } = record.activity || {}
+              var type = viewType !== 'board' ? 'string' : 'board'
+              return getRenderer(type)(viewSource, column, record, rowIndex, field)
             }
           },
           width: 140,
@@ -314,8 +314,8 @@ export class ApprovalWaitingListPage extends connect(store)(localize(i18next)(Pa
                   input
                   refBy
                   activityType
-                  uiType
-                  uiSource
+                  viewType
+                  viewSource
                   thumbnail
                   updatedAt
                   createdAt

package/client/pages/todo/done-list-page.ts

@@ -0,0 +1,344 @@
+import '@operato/data-grist'
+import '@operato/input/ox-input-select-buttons.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, getRenderer } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { navigate, PageView, store } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice, sleep } from '@operato/utils'
+
+import { Priorities } from '../../types/types.js'
+
+const FILTERS = [
+  {
+    display: 'Important',
+    value: 'Important'
+  },
+  {
+    display: 'Imminent',
+    value: 'Imminent'
+  },
+  {
+    display: 'Disapproved',
+    value: 'Disapproved'
+  }
+]
+
+@customElement('done-list-page')
+export class DoneListPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      #modes {
+        margin-left: auto;
+      }
+    `
+  ]
+
+  @property({ type: Object }) gristConfig?: any
+  @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') grist!: DataGrist
+
+  @state() filters?: string[]
+
+  get context() {
+    return {
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.done list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'worklist/done-list',
+      actions: []
+    }
+  }
+
+  render() {
+    const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
+
+    return html`
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-input-select-buttons
+              .value=${this.filters}
+              .options=${FILTERS}
+              @change=${(e: CustomEvent) => {
+                this.filters = (e.currentTarget as any)?.value
+              }}
+              multiple
+            ></ox-input-select-buttons>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <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>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle) {
+    this.gristConfig = {
+      list: {
+        thumbnail: 'thumbnail',
+        fields: ['name', 'description'],
+        details: ['createdAt', 'due']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          name: 'start',
+          icon: 'play_arrow',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              const { id } = record
+              this.openActivityThread(record)
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'viewSource',
+          header: i18next.t('field.view-source'),
+          record: {
+            editable: false,
+            renderer: function (value, column, record, rowIndex, field) {
+              const { viewType, viewSource } = record.activity || {}
+              var type = viewType !== 'board' ? 'string' : 'board'
+              return getRenderer(type)(viewSource, column, record, rowIndex, field)
+            }
+          },
+          width: 140,
+          hidden: true
+        },
+        {
+          type: 'select',
+          name: 'priority',
+          header: i18next.t('field.priority'),
+          record: {
+            editable: false,
+            options: Priorities
+          },
+          // filter: true,
+          width: 60
+        },
+        {
+          type: 'select',
+          name: 'state',
+          header: i18next.t('field.status'),
+          record: {
+            editable: false,
+            options: [
+              { display: 'Draft', value: 'draft' },
+              { display: 'Posted', value: 'posted' },
+              { display: 'WaitingAssignment', value: 'waiting-assignment' },
+              { display: 'Assigned', value: 'assigned' },
+              { display: 'Started', value: 'started' },
+              { display: 'Pending', value: 'pending' },
+              { display: 'Escalated', value: 'escalated' },
+              { display: 'Ended', value: 'ended' },
+              { display: 'Aborted', value: 'aborted' }
+            ]
+          },
+          filter: false,
+          width: 60
+        },
+        {
+          type: 'datetime',
+          name: 'dueAt',
+          header: i18next.t('field.due-at'),
+          record: {
+            editable: false,
+            options: {
+              year: 'numeric',
+              month: 'numeric',
+              day: 'numeric'
+            }
+          },
+          sortable: true,
+          width: 100
+        },
+        {
+          type: 'datetime',
+          name: 'startedAt',
+          header: i18next.t('field.started-at'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 100
+        },
+        {
+          type: 'datetime',
+          name: 'terminatedAt',
+          header: i18next.t('field.terminated-at'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 100
+        },
+        {
+          type: 'resource-object',
+          name: 'creator',
+          header: i18next.t('field.issuer'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: i18next.t('field.posted-at'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          filter: false,
+          width: 180
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          header: i18next.t('field.thumbnail'),
+          record: { editable: false },
+          hidden: true
+        }
+      ],
+      rows: {
+        appendable: false
+      },
+      sorters: [
+        {
+          name: 'dueAt',
+          desc: false
+        }
+      ]
+    }
+  }
+
+  async pageUpdated(changes, lifecycle, changedBefore) {
+    if (this.active) {
+      this.grist?.fetch()
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: doneList(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              activityInstance {
+                activityId: id
+                name
+                description
+                priority
+                input
+                refBy
+                activityType
+                viewType
+                viewSource
+                thumbnail
+                createdAt
+                startedAt
+                terminatedAt
+                updatedAt
+                createdAt
+                creator {
+                  id
+                  name
+                }
+              }
+              state
+              output
+              dueAt
+              assignedAt
+              startedAt
+              terminatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: (response.data.responses.items || []).map(item => {
+        return {
+          id: item.id,
+          state: item.state,
+          output: item.output,
+          dueAt: item.dueAt,
+          assignedAt: item.assignedAt,
+          startedAt: item.startedAt,
+          terminatedAt: item.terminatedAt,
+          ...item.activityInstance
+        }
+      })
+    }
+  }
+
+  openActivityThread(activityThread) {
+    navigate(`activity-thread/${activityThread.id}?title=${activityThread.name}`)
+  }
+}

package/client/route.ts

@@ -16,6 +16,10 @@ export default function route(page: string) {
       import('./pages/todo/todo-list-page.js')
       return page
 
+    case 'done-list':
+      import('./pages/todo/done-list-page.js')
+      return page
+
     case 'approval-waiting-list':
       import('./pages/todo/approval-waiting-list-page.js')
       return page

package/client/types/activity.ts

@@ -57,6 +57,8 @@ export class Activity {
 
   schedule?: string
 
+  timzeone?: string
+
   standardTime?: number
 
   cycleTime?: number
@@ -79,6 +81,10 @@ export class Activity {
 
   uiSource?: string
 
+  viewType?: ActivityUIType
+
+  viewSource?: string
+
   reportType?: ActivityUIType
 
   reportSource?: string