@things-factory/worklist 7.0.0-alpha.8 → 7.0.0

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

@@ -1,475 +0,0 @@
-import '@things-factory/organization/dist-client/component/approval-line-view.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { ActivityInstance } from '../../types/activity-instance'
-import { ActivityThread } from '../../types/activity-thread'
-import { ActivityApproval } from '../../types/activity-approval'
-
-const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' })
-
-@customElement('activity-instance-view')
-export class ActivityInstanceView extends localize(i18next)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        overflow: auto;
-        font-size: var(--fontsize-default);
-      }
-      :host([state='assigned']) {
-        --worklist-status-color: #5f7184;
-      }
-
-      :host([state='started']) {
-        --worklist-status-color: #56af45;
-      }
-
-      :host([state='delegated']) {
-        --worklist-status-color: #8654b0;
-      }
-
-      :host([state='submitted']) {
-        --worklist-status-color: #428df3;
-      }
-
-      :host([state='escalated']) {
-        --worklist-status-color: #595de5;
-      }
-
-      :host([state='rejected']) {
-        --worklist-status-color: #f27429;
-      }
-
-      :host([state='ended']) {
-        --worklist-status-color: #02acae;
-      }
-
-      :host([state='aborted']) {
-        --worklist-status-color: #cb3a33;
-      }
-      [instance-container] {
-        flex: 1;
-        background-color: var(--main-section-background-color);
-        border-right: var(--border-dark-color);
-        padding: var(--padding-wide);
-        color: var(--primary-text-color);
-      }
-      [thread-container] {
-        flex: 2;
-        padding: var(--padding-wide);
-      }
-      [instance-container] div {
-        margin-bottom: var(--margin-default);
-        padding-bottom: var(--padding-default);
-        border-bottom: var(--border-dark-color);
-      }
-      [header] mwc-icon {
-        background-color: var(--worklist-status-color, tomato);
-        float: left;
-        margin-right: var(--margin-default);
-        padding: var(--padding-default);
-        border-radius: 50%;
-        float: left;
-        font-size: 1.8em;
-        color: var(--theme-white-color);
-      }
-      [header] strong {
-        display: block;
-        font: bold 22px / 1.1 var(--theme-font);
-      }
-      [header] {
-        overflow: hidden;
-        font-size: var(--fontsize-small);
-      }
-      [instance-container] div label {
-        display: inline-block;
-        margin-right: var(--margin-default);
-        min-width: 50px;
-      }
-      [issuer] mwc-icon {
-        opacity: 0.5;
-        position: relative;
-        top: 4px;
-        font-size: 20px;
-      }
-      span[status] {
-        width: 15px;
-        height: 15px;
-        position: relative;
-        top: 2px;
-        background-color: var(--worklist-status-color, tomato);
-        display: inline-block;
-        margin-right: var(--margin-narrow);
-        border-radius: 50%;
-      }
-      [thread-container] table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-      [thread-container] th {
-        background-color: rgba(var(--primary-color-rgb), 0.05);
-        border-top: var(--grid-header-top-border);
-        border-bottom: var(--grid-header-bottom-border);
-        padding: var(--grid-header-padding);
-        text-overflow: ellipsis;
-        font: var(--grid-header-font);
-        color: var(--grid-header-color);
-      }
-      [thread-container] td {
-        padding: var(--padding-narrow);
-        border-bottom: var(--grid-record-border-bottom);
-      }
-      [assignee] * {
-        vertical-align: middle;
-      }
-      [assignee] mwc-icon {
-        opacity: 0.5;
-      }
-      [subtitle] {
-        display: block;
-        margin: var(--margin-wide) 0 var(--margin-narrow) 0;
-        font: bold 16px var(--theme-font);
-        color: var(--secondary-text-color);
-      }
-      [timeline] ol {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      [timeline] li {
-        display: flex;
-      }
-      [timeline] [info] {
-        flex: 1;
-      }
-      [timeline] [date] {
-        opacity: 0.7;
-        width: 130px;
-        font-size: var(--fontsize-small);
-      }
-      [timeline] [info] strong {
-        float: right;
-      }
-      [timeline] [status] {
-        margin: 0 var(--margin-narrow);
-        display: block;
-        border-radius: 50%;
-        width: 12px;
-        height: 12px;
-        position: relative;
-        top: 3px;
-        border: 2px solid #fff;
-        background-color: var(--worklist-status-color, tomato);
-      }
-      [timeline] [status]::before {
-        content: '';
-        height: 60px;
-        width: 2px;
-        display: block;
-        position: relative;
-        margin-left: 5px;
-        background-color: var(--worklist-status-color, tomato);
-        opacity: 0.2;
-      }
-      [timeline] [info] mwc-icon {
-        position: relative;
-        top: 3px;
-        font-size: var(--fontsize-large);
-      }
-      [timeline] [info] p {
-        background-color: #f4f4f4;
-        margin: var(--margin-narrow) 0 var(--margin-default) 0;
-        padding: var(--padding-narrow) var(--padding-default);
-        border-radius: var(--border-radius);
-        font-size: var(--fontsize-small);
-        text-align: justify;
-      }
-      [timeline] [info] p::before {
-        content: '';
-        float: right;
-        margin-top: -10px;
-        margin-right: 20px;
-        border: 7px solid transparent;
-        border-bottom-color: #f4f4f4;
-        border-top: 0;
-      }
-      [thread] div {
-        border-bottom: var(--border-dark-color);
-        padding: var(--padding-narrow);
-        text-align: right;
-        overflow: hidden;
-      }
-      [thread] div label {
-        float: left;
-        width: 25%;
-        text-align: left;
-      }
-    `
-  ]
-
-  @property({
-    type: String,
-    attribute: 'activity-instance-id'
-  })
-  activityInstanceId?: string
-
-  @state() activityInstance?: ActivityInstance
-
-  render() {
-    if (!this.activityInstance) {
-      return html`<div>no activity instance info.</div>`
-    }
-
-    const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } = this.activityInstance
-
-    return html`
-      <div instance-container>
-        <div header>
-          <mwc-icon>description</mwc-icon>
-          <strong>${name}</strong>
-          ${description}
-        </div>
-
-        <div>
-          <label>${i18next.t('label.status')}</label>
-          <span status></span>
-          <strong>${i18next.t('label.activity-state-' + state)}</strong>
-        </div>
-
-        <div issuer>
-          <label>${i18next.t('field.issuer')}</label>
-          <mwc-icon>account_circle</mwc-icon>
-          <strong>${issuer?.name || ''}</strong>
-        </div>
-        <div><label>${i18next.t('field.assigned-at')}</label>${assignedAt && formatter.format(new Date(assignedAt))}</div>
-        <div><label>${i18next.t('field.started-at')}</label>${startedAt && formatter.format(new Date(startedAt))}</div>
-        <div><label>${i18next.t('field.updated-at')}</label>${updatedAt && formatter.format(new Date(updatedAt))}</div>
-        <div><label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
-      </div>
-      <div thread-container>${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}</div>
-    `
-  }
-
-  renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread) {
-    const { state, assignee, output, round, activityApprovals = [], assignedAt, startedAt, terminatedAt } = activityThread
-    const { approvalLine } = activityInstance!
-    const { name, email } = assignee || {}
-    const approvals = activityApprovals.sort((a, b) => (a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1))
-    const current = approvals[0]?.round == round ? approvals[0].order : -1
-
-    return html`
-      <div assignee>
-        <mwc-icon>account_circle</mwc-icon>
-        <strong>${name}</strong>
-      </div>
-
-      <div thread>
-        <span subtitle>${i18next.t('label.information')}</span>
-        <div>
-          <label>${i18next.t('label.status')}</label>
-          <span status></span>
-          <strong>${i18next.t('label.activity-state-' + state)}</strong>
-        </div>
-        <div><label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-        <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
-        <div><label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
-        <div><label>${i18next.t('field.round')}</label> ${round}</div>
-      </div>
-
-      <div>
-        <span subtitle>${i18next.t('field.artifact')}</span>
-        ${this.renderInOut(output || {})}
-      </div>
-      <div timeline>
-        <span subtitle>${i18next.t('label.timeline')}</span>
-
-        <div>${approvalLine ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>` : html``}</div>
-
-        <ol>
-          ${approvals.map(approval => this.renderActivityApproval(approval))}
-        </ol>
-      </div>
-    `
-  }
-
-  renderActivityApproval(activityApproval: ActivityApproval) {
-    const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval
-    const { name, email } = approver || {}
-
-    return html`
-      <li>
-        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>
-        <span status></span>
-        <span info>
-          ${i18next.t('label.activity-state-' + (judgment || 'started'))}
-          <strong><mwc-icon>account_circle</mwc-icon>${name}</strong>
-          <p>${comment}</p>
-        </span>
-      </li>
-    `
-  }
-
-  renderSearchKeys() {
-    const { activity } = this.activityInstance!
-    const { searchKeys = [] } = activity! || {}
-
-    return html`
-      <table>
-        <tr>
-          <th>${i18next.t('label.name')}</th>
-          <th>${i18next.t('label.value')}</th>
-        </tr>
-
-        ${searchKeys?.map(
-          (item, index) => html`
-            <tr>
-              <td>${item.tKey ? i18next.t(item.tKey) : item.name}</td>
-              <td>${this.activityInstance![`key0${index + 1}`]}</td>
-            </tr>
-          `
-        )}
-      </table>
-    `
-  }
-
-  renderInOut(data) {
-    const { activity } = this.activityInstance!
-    const { model } = activity || {}
-
-    return html`
-      <table>
-        <tr>
-          <th>${i18next.t('label.name')}</th>
-          <th>${i18next.t('label.value')}</th>
-        </tr>
-        ${model?.map(
-          item => html`
-            <tr>
-              <td>${item.name}</td>
-              <td>${item.tag ? data[item.tag] : ''}</td>
-            </tr>
-          `
-        )}
-      </table>
-    `
-  }
-
-  updated(changes) {
-    if (changes.has('activityInstanceId')) {
-      this.fetchActivityInstance()
-    }
-  }
-
-  async fetchActivityInstance() {
-    const id = this.activityInstanceId
-
-    const response = await client.query({
-      query: gql`
-        query ($id: String!) {
-          activityInstance(id: $id) {
-            id
-            name
-            description
-            state
-            key01
-            key02
-            key03
-            key04
-            key05
-            input
-            output
-            issuer {
-              name
-              email
-            }
-            starter {
-              name
-              email
-            }
-            activity {
-              id
-              name
-              description
-              searchKeys {
-                name
-                description
-                inputKey
-                tKey
-              }
-              model {
-                name
-                description
-                active
-                tag
-                inout
-                type
-                unit
-                options
-                quantifier
-                spec
-              }
-            }
-            approvalLine {
-              type
-              value
-              approver {
-                id
-                name
-                description
-                controlNo
-              }
-            }
-            activityThreads {
-              state
-              transaction
-              output
-              assignee {
-                id
-                name
-                email
-              }
-              round
-              activityApprovals {
-                round
-                order
-                approver {
-                  name
-                  email
-                }
-                judgment
-                comment
-                createdAt
-                terminatedAt
-              }
-              assignedAt
-              startedAt
-              terminatedAt
-            }
-            updater {
-              id
-              name
-            }
-            assignedAt
-            startedAt
-            terminatedAt
-            updatedAt
-          }
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    this.activityInstance = response.data.activityInstance
-    this.setAttribute('state', this.activityInstance?.state || '')
-  }
-}

package/client/pages/activity-stats/activity-stats-importer.ts

@@ -1,97 +0,0 @@
-import '@operato/data-grist'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import { i18next } from '@operato/i18n'
-import { isMobileDevice } from '@operato/utils'
-
-export class ActivityStatsImporter extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: #fff;
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
-    `
-  ]
-
-  @property({ type: Array }) activityStats: any[] = []
-  @property({ type: Object }) columns = {
-    list: { fields: ['name', 'description'] },
-    pagination: { infinite: true },
-    columns: [
-      {
-        type: 'string',
-        name: 'name',
-        header: i18next.t('field.name'),
-        width: 150
-      },
-      {
-        type: 'string',
-        name: 'description',
-        header: i18next.t('field.description'),
-        width: 200
-      },
-      {
-        type: 'checkbox',
-        name: 'active',
-        header: i18next.t('field.active'),
-        width: 60
-      }
-    ]
-  }
-
-
-  render() {
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.columns}
-        .data=${
-          { 
-            records: this.activityStats 
-          }
-        }
-      ></ox-grist>
-
-      <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
-      </div>
-    `
-  }
-
-  async save() {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation importActivityStats($activityStats: [ActivityStatsPatch!]!) {
-          importActivityStats(activityStats: $activityStats)
-        }
-      `,
-      variables: { activityStats: this.activityStats }
-    })
-
-    if (response.errors?.length) return
-
-    this.dispatchEvent(new CustomEvent('imported'))
-  }
-}
-