@things-factory/worklist 6.0.25 → 6.0.27

package/client/bootstrap.ts

@@ -1,3 +1,12 @@
+import '@material/mwc-icon'
+import './templates/activity-approval-context-template.js'
+import './templates/activity-thread-context-template.js'
+
+import { html } from 'lit-html'
+import { store } from '@operato/shell'
+import { openOverlay, TOOL_POSITION } from '@operato/layout'
+import { APPEND_CONTEXT_TOOL } from '@things-factory/context-ui'
+
 import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'
 import { OxGristEditorDuration } from '@operato/grist-editor/ox-grist-editor-duration.js'
 import { OxGristEditorQuantifier } from '@operato/grist-editor/ox-grist-editor-quantifier.js'
@@ -5,6 +14,35 @@ import { OxGristRendererDuration } from '@operato/grist-editor/ox-grist-renderer
 import { OxGristRendererQuantifier } from '@operato/grist-editor/ox-grist-renderer-quantifier.js'
 
 export default function bootstrap() {
+  ;[
+    {
+      template: html` <activity-approval-context-template></activity-approval-context-template> `,
+      context: 'activityApproval'
+    },
+    {
+      template: html` <activity-thread-context-template></activity-thread-context-template> `,
+      context: 'activityThread'
+    }
+  ].forEach(({ template, context }) => {
+    store.dispatch({
+      type: APPEND_CONTEXT_TOOL,
+      tool: {
+        position: TOOL_POSITION.FRONT,
+        template: html`
+          <mwc-icon
+            @click=${async e => {
+              openOverlay('context-toolbar-overlay', {
+                template
+              })
+            }}
+            >info</mwc-icon
+          >
+        `,
+        context
+      }
+    })
+  })
+
   registerGristEditor('duration', OxGristEditorDuration)
   registerGristRenderer('duration', OxGristRendererDuration)
   registerGristEditor('quantifier', OxGristEditorQuantifier)

package/client/components/activity-starter-form.ts

@@ -247,6 +247,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             state
             assignees {
               type
+              value
               assignee {
                 id
                 name
@@ -256,6 +257,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             }
             approvalLine {
               type
+              value
               approver {
                 id
                 name
@@ -316,6 +318,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             state
             assignees {
               type
+              value
               assignee {
                 id
                 name
@@ -325,6 +328,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             }
             approvalLine {
               type
+              value
               approver {
                 id
                 name
@@ -387,6 +391,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             state
             assignees {
               type
+              value
               assignee {
                 id
                 name
@@ -396,6 +401,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             }
             approvalLine {
               type
+              value
               approver {
                 id
                 name

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

@@ -1,11 +1,10 @@
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/board/ox-board-viewer.js'
-import '@things-factory/organization'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { keyed } from 'lit/directives/keyed.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
@@ -15,8 +14,6 @@ import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { provider } from '@things-factory/board-ui'
 
-const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
-
 const ActivityApprovalFetchResult = `\
 {
   id
@@ -59,6 +56,7 @@ const ActivityApprovalFetchResult = `\
       }
       approvalLine {
         type
+        value
         approver {
           id
           name
@@ -94,39 +92,47 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
       :host {
         display: flex;
         flex-direction: column;
+        position: relative;
 
         width: 100%;
         padding: 5px;
         overflow: auto;
       }
 
-      [header] {
-        display: flex;
-        padding: 5px;
+      ox-board-viewer {
+        width: 100%;
+        height: 100%;
       }
 
-      [header] > div {
+      #custom-content {
         flex: 1;
       }
 
-      [content] {
-        clear: left;
-
-        flex: 1;
-        display: block;
-        padding: 5px;
+      div[comment] {
+        display: flex;
+        width: 100%;
+        height: 100px;
+        right: 0;
+        bottom: 0;
+        margin: 0;
+        padding: 0;
+        opacity: 0.8;
       }
 
-      ox-board-viewer {
-        width: 100%;
-        height: 100%;
+      textarea {
+        flex: 1;
+        padding: 10px;
+        resize: none;
+        background-color: black;
+        color: yellow;
+        outline: none;
       }
     `
   ]
 
-  @property({ type: Object }) activityApproval: any
-  @property({ type: Object }) activityThread: any
-  @property({ type: Object }) board: any
+  @state() activityApproval: any
+  @state() activityThread: any
+  @state() board: any
 
   get context() {
     const judgment = this.activityApproval?.judgment
@@ -154,40 +160,23 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
               action: this._saveActivityApproval.bind(this),
               ...CommonButtonStyles.save
             }
-          ]
+          ],
+      activityApproval: this.activityApproval
     }
   }
 
   render() {
-    const { round, order, approver, createdAt } = this.activityApproval || {}
-    const { state, dueAt, assignedAt, assignee, activityInstance } = this.activityThread || {}
-    const { name, description, thumbnail, approvalLine } = activityInstance || {}
-
     return html`
-      <div header>
-        <div>
-          <div>name: ${name}</div>
-          <div>description: ${description}</div>
-          <div>state: ${state}</div>
-          <div>round: ${round}</div>
-          <div>order: ${order}</div>
-          <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-          <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
-          <div>assignee: ${assignee?.name}</div>
-          <div>approver: ${approver?.name}</div>
-          <div>waited since: ${createdAt && formatter.format(new Date(createdAt))}</div>
-        </div>
-        <div>
-          <div approval-line>
-            ${approvalLine
-              ? html` <approval-line-view .model=${approvalLine} .current=${order}></approval-line-view> `
-              : html``}
-          </div>
-          <img src=${thumbnail} />
-        </div>
+      ${this.activityContent()}
+      <div comment>
+        <textarea
+          placeholder="Jot down your comment here."
+          .value=${this.activityApproval?.comment}
+          @change=${(e: Event) => {
+            this.activityApproval.comment = (e.target as HTMLTextAreaElement).value
+          }}
+        ></textarea>
       </div>
-
-      <div content>${this.activityContent()}</div>
     `
   }
 
@@ -199,6 +188,8 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         return this.generatedContent()
       case 'board':
         return this.boardContent()
+      case 'custom-element':
+        return this.customElementContent()
       case 'page':
       case 'external':
       default:
@@ -254,7 +245,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     }
 
     return keyed(
-      activityInstance.id,
+      this.activityApproval.id,
       html`
         <fieldset>
           <legend>Input</legend>
@@ -289,7 +280,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     }
 
     return keyed(
-      activityInstance.id,
+      this.activityApproval.id,
       html`
         <ox-board-viewer
           style="background-color: white;"
@@ -303,6 +294,18 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     )
   }
 
+  customElementContent() {
+    const { output, activityInstance } = this.activityThread
+    const { uiSource: tagName, input } = activityInstance || {}
+
+    const element = document.createElement(tagName)
+    element.id = 'custom-content'
+    element.input = input
+    element.output = output
+
+    return element
+  }
+
   @query('ox-board-viewer') oxBoardViewer: any
 
   getOutputFromBoard() {
@@ -341,11 +344,12 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
     this.activityApproval = response.data.activityApproval
     this.activityThread = this.activityApproval.activityThread
+
+    this.updateContext()
   }
 
   async _rejectActivityApproval() {
-    var { id } = this.activityApproval
-    var comment = 'xxxxxxxxxxxxxxxxxxx'
+    var { id, comment } = this.activityApproval
 
     const response = await client.mutate({
       mutation: gql`
@@ -373,8 +377,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   async _approveActivityApproval() {
-    var { id } = this.activityApproval
-    var comment = 'xxxxxxxxxxxxxxxxxxx'
+    var { id, comment } = this.activityApproval
 
     const response = await client.mutate({
       mutation: gql`
@@ -402,8 +405,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   async _saveActivityApproval() {
-    var { id } = this.activityApproval
-    var comment = 'yyyyyyyyyyyyyyyyyyy'
+    var { id, comment } = this.activityApproval
 
     const response = await client.mutate({
       mutation: gql`

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

@@ -57,6 +57,10 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
         width: 100%;
         height: 100%;
       }
+
+      #custom-content {
+        flex: 1;
+      }
     `
   ]
 
@@ -111,6 +115,8 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
         return this.generatedContent()
       case 'board':
         return this.boardContent()
+      case 'custom-element':
+        return this.customElementContent()
       case 'page':
       case 'external':
       default:
@@ -203,6 +209,17 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
     `
   }
 
+  customElementContent() {
+    const { uiSource: tagName, input, output } = this.activityInstance
+
+    const element = document.createElement(tagName)
+    element.id = 'custom-content'
+    element.input = input
+    element.output = output
+
+    return element
+  }
+
   getOutputFromBoard() {
     const outputSpec = this.getOutputSpec()
     const data = this.viewer?.getSceneValues() || {}
@@ -255,6 +272,7 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
             uiSource
             approvalLine {
               type
+              value
               approver {
                 id
                 name

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

@@ -1,6 +1,5 @@
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/board/ox-board-viewer.js'
-import '@things-factory/organization'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -15,8 +14,6 @@ import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { provider } from '@things-factory/board-ui'
 
-const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
-
 const ActivityThreadFetchResult = `\
 {
   id
@@ -50,6 +47,7 @@ const ActivityThreadFetchResult = `\
     }
     approvalLine {
       type
+      value
       approver {
         id
         name
@@ -91,27 +89,14 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         overflow: auto;
       }
 
-      [header] {
-        display: flex;
-        padding: 5px;
-      }
-
-      [header] > div {
-        flex: 1;
-      }
-
-      [content] {
-        clear: left;
-
-        flex: 1;
-        display: block;
-        padding: 5px;
-      }
-
       ox-board-viewer {
         width: 100%;
         height: 100%;
       }
+
+      #custom-content {
+        flex: 1;
+      }
     `
   ]
 
@@ -167,35 +152,13 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
           action: this._abortActivityThread.bind(this),
           ...CommonButtonStyles.cancel
         }
-      ].filter(Boolean /* truthy only */)
+      ].filter(Boolean /* truthy only */),
+      activityThread: this.activityThread
     }
   }
 
   render() {
-    const { state, round, dueAt, assignedAt, assignee, activityInstance } = this.activityThread || {}
-    const { name, description, thumbnail, approvalLine } = activityInstance || {}
-
-    return html`
-      <div header>
-        <div>
-          <div>name: ${name}</div>
-          <div>description: ${description}</div>
-          <div>state: ${state}</div>
-          <div>round: ${round}</div>
-          <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-          <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
-          <div>assignee: ${assignee?.name}</div>
-        </div>
-        <div>
-          <div approval-line>
-            ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}
-          </div>
-          <img src=${thumbnail} />
-        </div>
-      </div>
-
-      <div content>${this.activityContent()}</div>
-    `
+    return html` ${this.activityContent()}`
   }
 
   activityContent() {
@@ -206,6 +169,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         return this.generatedContent()
       case 'board':
         return this.boardContent()
+      case 'custom-element':
+        return this.customElementContent()
       case 'page':
       case 'external':
       default:
@@ -261,7 +226,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     }
 
     return keyed(
-      activityInstance.id,
+      this.activityThread.id,
       html`
         <fieldset>
           <legend>Input</legend>
@@ -296,7 +261,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     }
 
     return keyed(
-      activityInstance.id,
+      this.activityThread.id,
       html`
         <ox-board-viewer
           style="background-color: white;"
@@ -310,6 +275,21 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     )
   }
 
+  customElementContent() {
+    const { output, activityInstance } = this.activityThread
+    const { uiSource: tagName, input } = activityInstance || {}
+
+    const element = document.createElement(tagName)
+    element.id = 'custom-content'
+    element.input = input
+    element.output = output
+    element.addEventListener('change', (e: CustomEvent) => {
+      this.activityThread.output = e.detail
+    })
+
+    return element
+  }
+
   @query('ox-board-viewer') oxBoardViewer: any
 
   getOutputFromBoard() {
@@ -347,6 +327,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     })
 
     this.activityThread = response.data.activityThread
+
+    this.updateContext()
   }
 
   async _startActivityThread() {

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

@@ -99,7 +99,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
       list: {
         thumbnail: 'thumbnail',
         fields: ['name', 'description'],
-        details: ['visibility', 'updatedAt']
+        details: ['provider', 'release']
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
@@ -165,8 +165,8 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
         },
         {
           type: 'string',
-          name: 'version',
-          header: i18next.t('field.version'),
+          name: 'release',
+          header: i18next.t('field.release'),
           record: {
             editable: false
           },
@@ -284,16 +284,6 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
           // filter: true,
           sortable: true,
           width: 60
-        },
-        {
-          type: 'resource-object',
-          name: 'updater',
-          header: i18next.t('field.updater'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 120
         }
       ],
       rows: {

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

@@ -6,13 +6,14 @@ import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { DataGrist, getRenderer } from '@operato/data-grist'
+import { DataGrist, FetchOption, getRenderer } 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 { isMobileDevice } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
 
 import { ActivityInstanceStatus, Priorities } from '../../types.js'
 
@@ -59,7 +60,7 @@ export class DraftListPage extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  @query('#sorter-control') sorterControl?: any
+  @query('#sorter-control') sorterControl!: OxPopup
   @query('ox-grist') grist!: DataGrist
 
   render() {
@@ -283,7 +284,7 @@ export class DraftListPage 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!]) {
@@ -303,6 +304,7 @@ export class DraftListPage extends connect(store)(localize(i18next)(PageView)) {
               activityType
               assignees {
                 type
+                value
                 assignee {
                   id
                   name
@@ -312,6 +314,7 @@ export class DraftListPage extends connect(store)(localize(i18next)(PageView)) {
               }
               approvalLine {
                 type
+                value
                 approver {
                   id
                   name

package/client/templates/activity-approval-context-template.ts

@@ -0,0 +1,67 @@
+import '@material/mwc-icon'
+
+import { html, css, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'
+import { store } from '@operato/shell'
+import { i18next } from '@operato/i18n'
+
+import '@things-factory/organization/dist-client/component/approval-line-view.js'
+
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+@customElement('activity-approval-context-template')
+class ActivityApprovalContextTemplate extends connect(store)(LitElement) {
+  static styles = [
+    ContextToolbarOverlayStyle,
+    css`
+      :host {
+        background-color: white;
+
+        width: 100%;
+        padding: 5px;
+        overflow: auto;
+      }
+    `
+  ]
+
+  @state() private context
+
+  render() {
+    const activityApproval = this.context.activityApproval || {}
+
+    const { round, order, approver, createdAt, activityThread } = activityApproval || {}
+    const { state, dueAt, assignedAt, assignee, activityInstance } = activityThread || {}
+    const { name, description, thumbnail, approvalLine } = activityInstance || {}
+
+    return html`
+      <div>
+        <div>name: ${name}</div>
+        <div>description: ${description}</div>
+        <div>state: ${state}</div>
+        <div>round: ${round}</div>
+        <div>order: ${order}</div>
+        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
+        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
+        <div>assignee: ${assignee?.name}</div>
+        <div>approver: ${approver?.name}</div>
+        <div>waited since: ${createdAt && formatter.format(new Date(createdAt))}</div>
+      </div>
+      <div>
+        <div approval-line>
+          ${approvalLine
+            ? html` <approval-line-view .model=${approvalLine} .current=${order}></approval-line-view> `
+            : html``}
+        </div>
+        <img src=${thumbnail} />
+      </div>
+    `
+  }
+
+  stateChanged(state) {
+    this.context = state.route.context
+  }
+}