@things-factory/worklist 6.0.24 → 6.0.26

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

@@ -0,0 +1,400 @@
+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: ['provider', 'release']
+      },
+      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: 'release',
+          header: i18next.t('field.release'),
+          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
+        }
+      ],
+      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()
+  }
+}

package/client/pages/installable-activity/installable-activity-model-item-list.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { isMobileDevice } from '@operato/utils'
+import { ActivityModelItemList } from '../activity/activity-model-item-list'
+
+@customElement('installable-activity-model-item-list')
+class InstallableActivityModelItemList extends ActivityModelItemList {
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+    `
+  }
+}

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

@@ -301,6 +301,15 @@ export class DraftListPage extends connect(store)(localize(i18next)(PageView)) {
                 id
               }
               activityType
+              assignees {
+                type
+                assignee {
+                  id
+                  name
+                  description
+                  controlNo
+                }
+              }
               approvalLine {
                 type
                 approver {

package/client/route.ts

@@ -75,5 +75,9 @@ export default function route(page: string) {
     case 'activity-approval-list':
       import('./pages/activity-approval/activity-approval-list-page')
       return page
+
+    case 'installable-activity-list':
+      import('./pages/installable-activity/installable-activity-list-page')
+      return page
   }
 }

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
+  }
+}

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

@@ -0,0 +1,62 @@
+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-thread-context-template')
+class ActivityThreadContextTemplate extends connect(store)(LitElement) {
+  static styles = [
+    ContextToolbarOverlayStyle,
+    css`
+      :host {
+        background-color: white;
+
+        width: 100%;
+        padding: 5px;
+        overflow: auto;
+      }
+    `
+  ]
+
+  @state() private context
+
+  render() {
+    const activityThread = this.context.activityThread || {}
+
+    const { state, round, 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>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>
+    `
+  }
+
+  stateChanged(state) {
+    this.context = state.route.context
+  }
+}

package/dist-client/activity-summary-generator.d.ts

@@ -0,0 +1,2 @@
+export declare function generateActivitySummary(name: string): AsyncGenerator<any, void, unknown>;
+export declare function startSubscribeActivitySummary(): Promise<void>;

package/dist-client/activity-summary-generator.js

@@ -0,0 +1,114 @@
+import { __asyncGenerator, __await } from "tslib";
+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 () => {
+    var _a, _b, _c, _d;
+    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;
+        (_a = generatorLocks['numberOfToDos']) === null || _a === void 0 ? void 0 : _a.unlock(numberOfToDos);
+        (_b = generatorLocks['numberOfApprovalWaitings']) === null || _b === void 0 ? void 0 : _b.unlock(numberOfApprovalWaitings);
+        (_c = generatorLocks['numberOfPicks']) === null || _c === void 0 ? void 0 : _c.unlock(numberOfPicks);
+        (_d = generatorLocks['numberOfDrafts']) === null || _d === void 0 ? void 0 : _d.unlock(numberOfDrafts);
+    }
+}, 1000);
+export function generateActivitySummary(name) {
+    var _a;
+    return __asyncGenerator(this, arguments, function* generateActivitySummary_1() {
+        /* 1. 앞에 사용되었던 generator가 종료될 기회를 준다. */
+        (_a = generatorLocks[name]) === null || _a === void 0 ? void 0 : _a.unlock();
+        /* 2. 마지막 값을 일단 yield 한다. */
+        yield yield __await(summary[name]);
+        while (true) {
+            generatorLocks[name].lock();
+            let badge = yield __await(generatorLocks[name].promise);
+            if (badge === undefined) {
+                /* 새로운 generator가 생성된 경우이면, 기존 generator는 종료한다. */
+                return yield __await(void 0);
+            }
+            yield yield __await(badge);
+        }
+    });
+}
+export async function startSubscribeActivitySummary() {
+    await subscribeActivityInstance();
+    await subscribeActivityThread();
+    await subscribeActivityApproval();
+    fetchActivitySummary();
+}
+//# sourceMappingURL=activity-summary-generator.js.map