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

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

@@ -1,297 +0,0 @@
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { OxPropertyEditor } from '@operato/property-editor'
-import { isMobileDevice } from '@operato/utils'
-
-
-@customElement('activity-model-item-list')
-export class ActivityModelItemList extends localize(i18next)(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);
-        }
-
-        [danger] {
-          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-        }
-        mwc-button {
-          margin-left: var(--margin-default);
-        }
-      `
-    ]
-
-  @property({ type: Object }) gristConfig?:any
-  @property({ type: Object }) activity: any
-
-  @query('ox-grist') grist?: HTMLElement & { fetch: any; commit: any; deleteSelectedRecords: any; data: any }
-
-  render() {
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      ></ox-grist>
-      <div class="button-container">
-        <mwc-button raised danger @click=${this._deleteDataItems.bind(this)}>${i18next.t('button.delete')}</mwc-button>
-        <mwc-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
-      </div>
-    `
-  }
-
-  async firstUpdated() {
-    this.gristConfig = {
-      list: {
-        fields: ['name', 'description', 'active']
-      },
-      columns: [
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'add',
-          handlers: {
-            click: 'record-copy'
-          }
-        },
-        { type: 'gutter', gutterName: 'sequence' },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'arrow_upward',
-          handlers: {
-            click: 'move-up'
-          }
-        },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'arrow_downward',
-          handlers: {
-            click: 'move-down'
-          }
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: {
-            editable: true
-          },
-          width: 140,
-          validation: (after, before, record, column) => {
-            return after
-          }
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: {
-            editable: true
-          },
-          width: 180
-        },
-        {
-          type: 'checkbox',
-          name: 'active',
-          label: true,
-          header: i18next.t('field.active'),
-          record: {
-            editable: true
-          },
-          sortable: true,
-          width: 60
-        },
-        {
-          type: 'checkbox',
-          name: 'mandatory',
-          label: true,
-          header: i18next.t('field.mandatory'),
-          record: {
-            editable: true
-          },
-          sortable: true,
-          width: 60
-        },
-        {
-          type: 'checkbox',
-          name: 'hidden',
-          label: true,
-          header: i18next.t('field.hidden'),
-          record: {
-            editable: true
-          },
-          sortable: true,
-          width: 60
-        },
-        {
-          type: 'string',
-          name: 'tag',
-          header: i18next.t('field.tag'),
-          record: {
-            editable: true
-          },
-          width: 180
-        },
-        {
-          type: 'select',
-          name: 'inout',
-          header: i18next.t('field.inout'),
-          record: {
-            options: ['', 'in', 'out', 'inout'],
-            editable: true
-          },
-          width: 60
-        },
-        {
-          type: 'select',
-          name: 'type',
-          header: i18next.t('field.type'),
-          record: {
-            options: ['', ...Object.keys(OxPropertyEditor.registry)],
-            editable: true
-          },
-          width: 120
-        },
-        {
-          type: 'parameters',
-          name: 'options',
-          header: i18next.t('field.options'),
-          record: {
-            editable: true,
-            renderer: 'json5',
-            options: async (value, column, record, row, field) => {
-              return {
-                name: record.type,
-                help: '',
-                spec:
-                  record.type === 'select'
-                    ? [
-                        {
-                          type: 'options' /* property-editor type */,
-                          name: 'options',
-                          label: 'options'
-                        }
-                      ]
-                    : [],
-                context: this.grist,
-                objectified: true
-              }
-            }
-          },
-          width: 120
-        },
-        {
-          type: 'string',
-          name: 'unit',
-          header: i18next.t('field.unit'),
-          record: {
-            editable: true
-          },
-          width: 120
-        },
-        {
-          type: 'quantifier',
-          name: 'quantifier',
-          header: i18next.t('field.quantifier'),
-          record: {
-            editable: true
-          },
-          width: 60
-        },
-        {
-          type: 'data-item-spec',
-          name: 'spec',
-          header: i18next.t('field.spec'),
-          record: {
-            editable: true,
-            options: {
-              name: '',
-              help: '',
-              objectified: true /* prevent from stringifying */
-            }
-          },
-          width: 200
-        }
-      ],
-      rows: {
-        selectable: {
-          multiple: true
-        }
-      },
-      pagination: {
-        infinite: true
-      },
-      sorters: []
-    }
-  }
-
-  async fetchHandler({ filters, page, limit, sortings = [] }) {
-    const model = this.activity.model || []
-
-    return {
-      total: model.length,
-      records: model
-    }
-  }
-
-  async _updateDataItems() {
-    this.grist?.commit()
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $patch: ActivityPatch!) {
-          updateActivity(id: $id, patch: $patch) {
-            name
-          }
-        }
-      `,
-      variables: {
-        id: this.activity.id,
-        patch: {
-          model: this.grist?.data.records,
-          cuFlag: 'M'
-        }
-      }
-    })
-
-    if (!response.errors) {
-      await document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.info_x_successfully', {
-              x: i18next.t('button.save')
-            })
-          }
-        })
-      )
-    }
-  }
-
-  async _deleteDataItems() {
-    if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
-      return
-    }
-
-    this.grist?.deleteSelectedRecords(false)
-  }
-}

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

@@ -1,431 +0,0 @@
-import '@operato/property-editor/ox-properties-dynamic-view.js'
-import '@operato/board/ox-board-viewer.js'
-
-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 { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { PageView, store } from '@operato/shell'
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
-import { provider } from '@things-factory/board-ui'
-
-const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
-
-export const ActivityInstanceStatus = {
-  Draft: 'draft',
-  Issued: 'issued',
-  PendingAssignment: 'pending-assignment',
-  Assigned: 'assigned',
-  Started: 'started',
-  Pending: 'pending',
-  Ended: 'ended',
-  Aborted: 'aborted'
-}
-
-@customElement('activity-page')
-export class ActivityPage extends connect(store)(localize(i18next)(PageView)) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        width: 100%;
-        padding: 5px;
-        overflow: auto;
-      }
-
-      [header] {
-        display: block;
-        padding: 5px;
-      }
-
-      [content] {
-        flex: 1;
-        display: block;
-        padding: 5px;
-      }
-
-      ox-board-viewer {
-        width: 100%;
-        height: 100%;
-      }
-    `
-  ]
-
-  @property({ type: Object }) activityInstance: any
-  @property({ type: Object }) board: any
-
-  get context() {
-    const startable = [ActivityInstanceStatus.Assigned, ActivityInstanceStatus.Issued].includes(
-      this.activityInstance?.state
-    )
-
-    const finishable = [ActivityInstanceStatus.Started].includes(this.activityInstance?.state)
-    const savable = finishable
-
-    return {
-      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
-      help: 'worklist/activity',
-      actions: [
-        startable && {
-          title: i18next.t('button.play'),
-          action: this._startActivityInstance.bind(this),
-          ...CommonButtonStyles.play
-        },
-
-        savable && {
-          title: i18next.t('button.save'),
-          action: this._saveActivityInstance.bind(this),
-          ...CommonButtonStyles.save
-        },
-
-        finishable && {
-          title: i18next.t('button.finish'),
-          action: this._endActivityInstance.bind(this),
-          ...CommonButtonStyles.save
-        }
-      ].filter(Boolean /* truthy only */)
-    }
-  }
-
-  render() {
-    const { name, description, state, thumbnail, dueAt, createdAt } = this.activityInstance || {}
-    return html`
-      <div header>
-        <div>name: ${name}</div>
-        <div>description: ${description}</div>
-        <div>state: ${state}</div>
-        <div>posted at: ${createdAt && formatter.format(new Date(createdAt))}</div>
-        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
-        <img src=${thumbnail} />
-      </div>
-
-      <div content>${this.activityContent()}</div>
-    `
-  }
-
-  activityContent() {
-    switch (this.activityInstance?.uiType) {
-      case 'template':
-        return this.templateContent()
-      case 'generated':
-        return this.generatedContent()
-      case 'board':
-        return this.boardContent()
-      case 'page':
-      case 'external':
-      default:
-        return html``
-    }
-  }
-
-  templateContent() {
-    const { uiSource: template } = this.activityInstance
-    return unsafeHTML(template)
-  }
-
-  getInputSpec() {
-    const model = this.activityInstance?.activity?.model
-
-    return (model || [])
-      .filter(item => item.inout === 'in' || item.inout === 'inout')
-      .map(item => {
-        return {
-          ...item,
-          name: item.tag,
-          label: item.tKey || item.name,
-          property: item.options
-        }
-      })
-  }
-
-  getOutputSpec() {
-    const model = this.activityInstance?.activity?.model
-
-    return (model || [])
-      .filter(item => item.inout === 'inout' || item.inout === 'out')
-      .map(item => {
-        return {
-          ...item,
-          name: item.tag,
-          label: item.tKey || item.name,
-          property: item.options
-        }
-      })
-  }
-
-  generatedContent() {
-    var { input, output } = this.activityInstance || {}
-
-    const inputSpec = this.getInputSpec()
-    const outputSpec = this.getOutputSpec()
-
-    if (!output) {
-      output = inputSpec
-        .filter(item => item.inout === 'inout')
-        .reduce((inout, item) => {
-          inout[item.name] = input[item.name]
-          return inout
-        }, {})
-    }
-
-    return html`
-      <fieldset>
-        <legend>Input</legend>
-        <ox-properties-dynamic-view data-name="input" .props=${inputSpec} .value=${input}></ox-properties-dynamic-view>
-      </fieldset>
-
-      <fieldset>
-        <legend>Output</legend>
-        <ox-properties-dynamic-view
-          data-name="output"
-          .props=${outputSpec}
-          .value=${output}
-          @property-change=${e => (this.activityInstance.output = e.currentTarget.value)}
-        ></ox-properties-dynamic-view>
-      </fieldset>
-    `
-  }
-
-  boardContent() {
-    const { uiSource: boardId, input, output } = this.activityInstance
-
-    if (!this.board || this.board.id !== boardId) {
-      this.board = {
-        id: boardId
-      }
-    }
-
-    return html`
-      <ox-board-viewer
-        style="background-color: white;"
-        .board=${this.board}
-        .provider=${provider}
-        .values=${{ ...input, ...output }}
-        hide-fullscreen
-        hide-navigation
-      ></ox-board-viewer>
-    `
-  }
-
-  @query('ox-board-viewer') boardViewer: any
-
-  getOutputFromBoard() {
-    const outputSpec = this.getOutputSpec()
-    const data = this.boardViewer.getSceneValues()
-
-    return outputSpec.reduce((output, spec) => {
-      output[spec.name] = data[spec.name]
-      return output
-    }, {})
-  }
-
-  updated(changes) {
-    if (changes.has('activityInstance')) {
-      this.updateContext()
-    }
-  }
-
-  async pageUpdated(changes, lifecycle, changedBefore) {
-    if (this.active) {
-      this.fetchActivityInstance(lifecycle.resourceId)
-    }
-  }
-
-  async fetchActivityInstance(id) {
-    const response = await client.query({
-      query: gql`
-        query activityInstance($id: String!) {
-          activityInstance(id: $id) {
-            id
-            name
-            description
-            state
-            activity {
-              model {
-                name
-                description
-                active
-                tag
-                inout
-                type
-                unit
-                options
-                quantifier
-                spec
-              }
-            }
-            thumbnail
-            input
-            output
-            uiType
-            uiSource
-            dueAt
-            createdAt
-          }
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    this.activityInstance = response.data.activityInstance
-  }
-
-  async _startActivityInstance() {
-    var { id, output, reason, uiType } = this.activityInstance
-    if (uiType === 'board') {
-      output = this.getOutputFromBoard()
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $output: Object) {
-          startActivityInstance(id: $id, output: $output) {
-            name
-          }
-        }
-      `,
-      variables: {
-        id,
-        output
-      }
-    })
-
-    if (!response.errors) {
-      await this.fetchActivityInstance(this.activityInstance.id)
-
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.task_is_started_successfully')
-          }
-        })
-      )
-    }
-  }
-
-  async _saveActivityInstance() {
-    var { id, output, reason, uiType } = this.activityInstance
-    if (uiType === 'board') {
-      output = this.getOutputFromBoard()
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $save: ActivityInstanceSave!) {
-          draftActivityInstance(id: $id, save: $save) {
-            id
-            name
-            description
-            state
-            activity {
-              model {
-                name
-                description
-                active
-                tag
-                inout
-                type
-                unit
-                options
-                quantifier
-                spec
-              }
-            }
-            thumbnail
-            input
-            output
-            uiType
-            uiSource
-            dueAt
-            createdAt
-          }
-        }
-      `,
-      variables: {
-        id,
-        save: {
-          output
-        }
-      }
-    })
-
-    if (!response.errors) {
-      this.activityInstance = response.data.saveActivityInstance
-
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.task_is_saved_successfully')
-          }
-        })
-      )
-    }
-  }
-
-  async _endActivityInstance() {
-    var { id, output, reason, uiType } = this.activityInstance
-    if (uiType === 'board') {
-      output = this.getOutputFromBoard()
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $output: Object, $reason: String) {
-          endActivityInstance(id: $id, output: $output, reason: $reason) {
-            id
-            name
-            description
-            state
-            activity {
-              model {
-                name
-                description
-                active
-                tag
-                inout
-                type
-                unit
-                options
-                quantifier
-                spec
-              }
-            }
-            thumbnail
-            input
-            output
-            uiType
-            uiSource
-            dueAt
-            createdAt
-          }
-        }
-      `,
-      variables: {
-        id,
-        output,
-        reason
-      }
-    })
-
-    if (!response.errors) {
-      this.activityInstance = response.data.endActivityInstance
-
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.task_is_finished_successfully')
-          }
-        })
-      )
-    }
-  }
-}