@things-factory/worklist 6.0.24 → 6.0.25

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/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/installable-activity/installable-activity-list-page.ts

@@ -0,0 +1,410 @@
+import '@operato/data-grist'
+import './installable-activity-model-item-list.js'
+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 { 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 { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+import { ActivityTypes, ActivityUITypes } from '../../types.js'
+
+@customElement('installable-activity-list-page')
+export class ActivityTemplateListPage 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;
+      }
+    `
+  ]
+
+  @property({ type: Object }) gristConfig: any
+  @property({ type: String }) mode?: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  get context() {
+    return {
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.installable activity list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'worklist/installable-activity',
+      actions: []
+    }
+  }
+
+  @query('#sorter-control') sorterControl?: any
+  @query('ox-grist') grist!: DataGrist
+
+  render() {
+    const mode = this.mode
+
+    return html`
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.sorterControl.open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </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: ['visibility', 'updatedAt']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'reorder',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              const popup = openPopup(
+                html`
+                  <installable-activity-model-item-list .activity=${record}></installable-activity-model-item-list>
+                `,
+                {
+                  backdrop: true,
+                  help: 'worklist/activity-model-item-list',
+                  size: 'large',
+                  title: i18next.t('title.activity model item list')
+                }
+              )
+              popup.onclosed = () => {
+                this.grist?.fetch()
+              }
+            }
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          name: 'state',
+          icon: record => (record && record.active ? 'pause' : 'play_arrow'),
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              if (record.active) {
+                this.deactivate(record)
+              } else {
+                this.activate(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: 'version',
+          header: i18next.t('field.version'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'provider',
+          header: i18next.t('field.provider'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'select',
+          name: 'activityType',
+          label: true,
+          header: i18next.t('field.activity-type'),
+          record: {
+            editable: false,
+            options: ActivityTypes
+          },
+          sortable: true,
+          // filter: true,
+          width: 60
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          header: i18next.t('field.thumbnail'),
+          record: { editable: false },
+          width: 120
+        },
+        {
+          type: 'select',
+          name: 'uiType',
+          label: true,
+          header: i18next.t('field.ui-type'),
+          record: {
+            editable: false,
+            options: ActivityUITypes
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'uiSource',
+          header: i18next.t('field.ui-source'),
+          record: {
+            editable: false,
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.uiType !== 'board' ? 'script' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          width: 140
+        },
+        {
+          type: 'select',
+          name: 'reportType',
+          label: true,
+          header: i18next.t('field.report-type'),
+          record: {
+            editable: false,
+            options: ActivityUITypes
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'reportSource',
+          header: i18next.t('field.report-source'),
+          record: {
+            editable: false,
+            editor: function (value, column, record, rowIndex, field) {
+              var type = record.reportType !== 'board' ? 'script' : 'board'
+              return getEditor(type)(value, column, record, rowIndex, field)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.reportType !== 'board' ? 'script' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          width: 140
+        },
+        {
+          type: 'checkbox',
+          name: 'startable',
+          label: true,
+          header: i18next.t('field.startable'),
+          record: {
+            editable: false
+          },
+          // filter: true,
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'checkbox',
+          name: 'active',
+          label: true,
+          header: i18next.t('field.active'),
+          record: {
+            editable: false,
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.reportType !== 'board' ? 'script' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          // filter: true,
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'resource-object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120
+        }
+      ],
+      rows: {
+        selectable: false,
+        appendable: false
+      },
+      sorters: [
+        {
+          name: 'name'
+        }
+      ]
+    }
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: installableActivities(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              activity {
+                id
+                state
+              }
+              name
+              description
+              provider
+              release
+              activityType
+              startable
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+              }
+              thumbnail
+              uiType
+              uiSource
+              reportType
+              reportSource
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    if (!response.data) {
+      return
+    }
+
+    const { total, items: records } = response.data?.responses
+
+    for (var item of records) {
+      item.active = item.activity && item.activity.state == 'released'
+    }
+
+    return {
+      total,
+      records
+    }
+  }
+
+  async activate(record) {
+    await client.mutate({
+      mutation: gql`
+        mutation ($name: String!) {
+          activateInstallableActivity(name: $name) {
+            name
+          }
+        }
+      `,
+      variables: {
+        name: record.name
+      }
+    })
+
+    this.grist?.fetch()
+  }
+
+  async deactivate(record) {
+    await client.mutate({
+      mutation: gql`
+        mutation ($name: String!) {
+          deactivateInstallableActivity(name: $name) {
+            name
+          }
+        }
+      `,
+      variables: {
+        name: record.name
+      }
+    })
+
+    this.grist?.fetch()
+  }
+}