@things-factory/worklist 6.0.24 → 6.0.26

package/client/activity-summary-generator.ts

@@ -0,0 +1,132 @@
+import debounce from 'lodash-es/debounce'
+import gql from 'graphql-tag'
+import { client, subscribe } from '@operato/graphql'
+import { AsyncLock } from '@operato/utils'
+
+async function subscribeActivityInstance() {
+  return await subscribe(
+    {
+      query: gql`
+        subscription {
+          activityInstance {
+            name
+          }
+        }
+      `
+    },
+    {
+      next: async ({ data }) => {
+        if (data) {
+          fetchActivitySummary()
+        }
+      }
+    }
+  )
+}
+
+async function subscribeActivityThread() {
+  return await subscribe(
+    {
+      query: gql`
+        subscription {
+          activityThread {
+            transaction
+          }
+        }
+      `
+    },
+    {
+      next: async ({ data }) => {
+        if (data) {
+          fetchActivitySummary()
+        }
+      }
+    }
+  )
+}
+
+async function subscribeActivityApproval() {
+  return await subscribe(
+    {
+      query: gql`
+        subscription {
+          activityApproval {
+            judgment
+          }
+        }
+      `
+    },
+    {
+      next: async ({ data }) => {
+        if (data) {
+          fetchActivitySummary()
+        }
+      }
+    }
+  )
+}
+
+var summary = {}
+var generatorLocks = {
+  numberOfToDos: new AsyncLock(true),
+  numberOfApprovalWaitings: new AsyncLock(true),
+  numberOfPicks: new AsyncLock(true),
+  numberOfDrafts: new AsyncLock(true)
+}
+
+const fetchActivitySummary = debounce(async () => {
+  const response = await client.query({
+    query: gql`
+      query {
+        activitySummary {
+          numberOfToDos
+          numberOfApprovalWaitings
+          numberOfPicks
+          numberOfDrafts
+        }
+      }
+    `
+  })
+
+  if (response.data) {
+    const { numberOfToDos, numberOfApprovalWaitings, numberOfPicks, numberOfDrafts } = response.data.activitySummary
+
+    summary['numberOfToDos'] = numberOfToDos
+    summary['numberOfApprovalWaitings'] = numberOfApprovalWaitings
+    summary['numberOfPicks'] = numberOfPicks
+    summary['numberOfDrafts'] = numberOfDrafts
+
+    generatorLocks['numberOfToDos']?.unlock(numberOfToDos)
+    generatorLocks['numberOfApprovalWaitings']?.unlock(numberOfApprovalWaitings)
+    generatorLocks['numberOfPicks']?.unlock(numberOfPicks)
+    generatorLocks['numberOfDrafts']?.unlock(numberOfDrafts)
+  }
+}, 1000)
+
+export async function* generateActivitySummary(name: string) {
+  /* 1. 앞에 사용되었던 generator가 종료될 기회를 준다. */
+  generatorLocks[name]?.unlock()
+
+  /* 2. 마지막 값을 일단 yield 한다. */
+  yield summary[name]
+
+  while (true) {
+    generatorLocks[name].lock()
+
+    let badge = await generatorLocks[name].promise
+    if (badge === undefined) {
+      /* 새로운 generator가 생성된 경우이면, 기존 generator는 종료한다. */
+      return
+    }
+
+    yield badge
+  }
+}
+
+export async function startSubscribeActivitySummary() {
+  await subscribeActivityInstance()
+  await subscribeActivityThread()
+  await subscribeActivityApproval()
+
+  fetchActivitySummary()
+}

package/client/bootstrap.ts

@@ -1,10 +1,47 @@
+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'
 import { OxGristRendererDuration } from '@operato/grist-editor/ox-grist-renderer-duration.js'
 import { OxGristRendererQuantifier } from '@operato/grist-editor/ox-grist-renderer-quantifier.js'
 
+import './templates/activity-approval-context-template.js'
+import './templates/activity-thread-context-template.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

@@ -77,6 +77,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
       input,
       state,
       approvalLine,
+      assignees,
       threadsMin = 0,
       threadsMax = 0
     } = this.activityInstance || {}
@@ -123,6 +124,19 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
           />
         </section>
 
+        <section>
+          <label>Assignees</label>
+          ${assignees
+            ? html`
+                <assignees-view
+                  .value=${assignees}
+                  @click=${this.onClickAssignees.bind(this)}
+                  @change=${e => (this.activityInstance.assignees = e.currentTarget.value)}
+                ></assignees-view>
+              `
+            : html`<mwc-icon-button icon="group_add" @click=${this.onClickAssignees.bind(this)}></mwc-icon-button>`}
+        </section>
+
         <section>
           <label>Approval Line</label>
           ${approvalLine
@@ -130,6 +144,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
                 <approval-line-view
                   .model=${approvalLine}
                   @click=${this.onClickApprovalLine.bind(this)}
+                  @change=${e => (this.activityInstance.approvalLine = e.currentTarget.value)}
                 ></approval-line-view>
               `
             : html`<mwc-icon-button icon="group_add" @click=${this.onClickApprovalLine.bind(this)}></mwc-icon-button>`}
@@ -230,6 +245,15 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             description
             input
             state
+            assignees {
+              type
+              assignee {
+                id
+                name
+                description
+                controlNo
+              }
+            }
             approvalLine {
               type
               approver {
@@ -260,7 +284,16 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
   }
 
   async updateActivityInstance() {
-    const { id, name, description, input, threadsMin = 0, threadsMax = 0, approvalLine } = this.activityInstance
+    const {
+      id,
+      name,
+      description,
+      input,
+      threadsMin = 0,
+      threadsMax = 0,
+      assignees,
+      approvalLine
+    } = this.activityInstance
 
     const patch = {
       name: name || this.activity.name,
@@ -268,6 +301,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
       input,
       threadsMin,
       threadsMax,
+      assignees,
       approvalLine
     }
 
@@ -280,6 +314,15 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             description
             input
             state
+            assignees {
+              type
+              assignee {
+                id
+                name
+                description
+                controlNo
+              }
+            }
             approvalLine {
               type
               approver {
@@ -311,7 +354,16 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
   }
 
   async postActivityInstance() {
-    const { id, name, description, input, threadsMin = 0, threadsMax = 0 } = this.activityInstance
+    const {
+      id,
+      name,
+      description,
+      input,
+      threadsMin = 0,
+      threadsMax = 0,
+      assignees,
+      approvalLine
+    } = this.activityInstance
 
     const activityInstance = {
       id,
@@ -319,7 +371,9 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
       description: description || this.activity.description,
       threadsMin,
       threadsMax,
-      input
+      input,
+      assignees,
+      approvalLine
     }
 
     const response = await client.mutate({
@@ -331,6 +385,15 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             description
             input
             state
+            assignees {
+              type
+              assignee {
+                id
+                name
+                description
+                controlNo
+              }
+            }
             approvalLine {
               type
               approver {
@@ -360,6 +423,29 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
     }
   }
 
+  onClickAssignees() {
+    const { assignees } = this.activityInstance || {}
+
+    const popup = openPopup(
+      html`
+        <assignees-editor-popup
+          .value=${assignees}
+          .confirmCallback=${value => {
+            this.activityInstance.assignees = value
+            this.requestUpdate()
+          }}
+        ></assignees-editor-popup>
+      `,
+      {
+        backdrop: true,
+        help: 'organization/assignees-editor',
+        size: 'large',
+        title: i18next.t('title.assignee list')
+      }
+    )
+    popup.onclosed = () => {}
+  }
+
   onClickApprovalLine() {
     const { approvalLine } = this.activityInstance || {}
 

package/client/index.ts

@@ -1 +1,2 @@
 export * from './pages/activity/activity-page.js'
+export * from './activity-summary-generator'

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

@@ -15,8 +15,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
@@ -100,23 +98,6 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         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%;
@@ -154,41 +135,13 @@ 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>
-      </div>
-
-      <div content>${this.activityContent()}</div>
-    `
+    return html` ${this.activityContent()}`
   }
 
   activityContent() {
@@ -341,6 +294,8 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
     this.activityApproval = response.data.activityApproval
     this.activityThread = this.activityApproval.activityThread
+
+    this.updateContext()
   }
 
   async _rejectActivityApproval() {

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

@@ -15,8 +15,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
@@ -91,23 +89,6 @@ 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%;
@@ -167,35 +148,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() {
@@ -347,6 +306,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     })
 
     this.activityThread = response.data.activityThread
+
+    this.updateContext()
   }
 
   async _startActivityThread() {