@things-factory/meta-ui 8.0.0-beta.9 → 8.0.2

package/client/pages/activity/meta-activity-define-page.js

@@ -0,0 +1,422 @@
+import '@material/web/icon/icon.js'
+
+import '@operato/data-grist'
+import { p13n } from '@operato/p13n'
+import '@things-factory/worklist/dist-client/pages/activity/activity-model-item-list.js'
+import { ActivityStatus } from '@things-factory/worklist/dist-client/types/types.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { notify, openPopup } from '@operato/layout'
+import { PageView } from '@operato/shell'
+import { CommonButtonStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { adjustFilters, isMobileDevice } from '@operato/utils'
+
+import { MetaApi } from './../../utils/meta-api'
+
+class MetaActivityDefinePage extends p13n(localize(i18next)(PageView)) {
+  /**
+   * @description 스타일 정의
+   ***********************************
+   * @returns {Object} 화면의 스타일 정의
+   */
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      CommonGristStyles,
+      CommonHeaderStyles,
+      css`
+        :host {
+          display: flex;
+
+          width: 100%;
+
+          --grid-record-emphasized-background-color: red;
+          --grid-record-emphasized-color: yellow;
+        }
+      `
+    ]
+  }
+
+  /**
+   * @description 프로퍼티 정의
+   ***********************************
+   * @returns {Object} 화면의 프로퍼티 정의
+   */
+  static get properties() {
+    return {
+      gristConfig: Object,
+      mode: String,
+      grist: Object,
+      filters: []
+    }
+  }
+
+  get grist() {
+    return this.shadowRoot.querySelector('ox-grist')
+  }
+
+  async connectedCallback() {
+    this.mode = isMobileDevice() ? 'CARD' : 'GRID'
+    this.filters = ['released']
+
+    if (super.connectedCallback) {
+      await super.connectedCallback()
+    }
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.activity list'),
+      search: {
+        handler: search => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || ''
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'worklist/activity',
+      actions: [
+        {
+          title: i18next.t('button.save'),
+          action: this.updateActivity.bind(this),
+          ...CommonButtonStyles.save
+        }
+      ]
+    }
+  }
+
+  render() {
+    const mode = this.mode
+
+    return html`
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-input-select-buttons
+              .value=${this.filters}
+              .options=${[
+                {
+                  display: i18next.t('label.filter-draft'),
+                  value: 'draft'
+                },
+                {
+                  display: i18next.t('label.filter-released'),
+                  value: 'released'
+                },
+                {
+                  display: i18next.t('label.filter-deprecated'),
+                  value: 'deprecated'
+                }
+              ]}
+              @change=${e => {
+                if (e.currentTarget) {
+                  this.filters = e.currentTarget.value
+                }
+                this.grist.fetch()
+              }}
+            ></ox-input-select-buttons>
+          </div>
+
+          <div id="modes">
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
+        </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+      </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle) {
+    this.gristConfig = {
+      pagination: MetaApi.getGristPagination100Config(),
+      list: {
+        thumbnail: 'thumbnail',
+        fields: ['name', 'description'],
+        details: ['updatedAt']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          title: i18next.t('title.activity model item list'),
+          icon: 'reorder',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              if (!record.id) return
+              const popup = openPopup(
+                html` <activity-model-item-list .activity=${record}></activity-model-item-list> `,
+                {
+                  backdrop: true,
+                  help: 'worklist/activity/activity-model-item-list',
+                  size: 'large',
+                  title: i18next.t('title.activity model item list')
+                }
+              )
+              popup.onclosed = () => {
+                this.grist?.fetch()
+              }
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 290
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          width: 290
+        },
+        {
+          type: 'approval-line',
+          name: 'approvalLine',
+          header: i18next.t('field.approval-line'),
+          record: {
+            editable: true,
+            align: 'center'
+          },
+          width: 60
+        },
+        {
+          type: 'select',
+          name: 'state',
+          header: i18next.t('label.status'),
+          record: {
+            editable: true,
+            options: ActivityStatus
+          },
+          filter: true,
+          width: 80
+        },
+        {
+          type: 'activity-search-keys',
+          name: 'searchKeys',
+          label: true,
+          header: i18next.t('field.search-keys'),
+          record: {
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'resource-object',
+          name: 'supervisoryRole',
+          header: i18next.t('field.supervisory-role'),
+          record: {
+            editable: true,
+            options: {
+              title: i18next.t('title.lookup role'),
+              queryName: 'roles'
+            }
+          },
+          filter: 'search',
+          width: 90
+        },
+        {
+          type: 'resource-object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 90
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        },
+        handlers: {
+          click: 'select-row-toggle'
+        }
+      },
+      sorters: [
+        {
+          name: 'name'
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+    const status = ['draft', 'released', 'deprecated'].filter(state => this.filters?.includes(state))
+
+    if (status.length > 0) {
+      filters = adjustFilters(filters, [{ name: 'state', operator: 'in', value: status }])
+    }
+
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: activities(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              activityType
+              searchKeys {
+                name
+                description
+                inputKey
+                tKey
+              }
+              state
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+              }
+              thumbnail
+              priority
+              issuerRole {
+                id
+                name
+              }
+              assigneeRole {
+                id
+                name
+              }
+              supervisoryRole {
+                id
+                name
+              }
+              assignees {
+                type
+                value
+                assignee {
+                  id
+                  name
+                  description
+                  controlNo
+                }
+              }
+              approvalLine {
+                type
+                value
+                approver {
+                  id
+                  name
+                  description
+                  controlNo
+                }
+              }
+              uiType
+              uiSource
+              viewType
+              viewSource
+              reportType
+              reportSource
+              startingType
+              multiple
+              schedule
+              timezone
+              scheduleId
+              standardTime
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  async updateActivity() {
+    let patches = this.grist?.dirtyRecords
+    if (patches && patches.length) {
+      patches = patches.map(patch => {
+        let patchField = patch.id ? { id: patch.id } : {}
+        const dirtyFields = patch.__dirtyfields__
+        for (let key in dirtyFields) {
+          patchField[key] = dirtyFields[key].after
+        }
+        patchField.cuFlag = patch.__dirty__
+
+        return patchField
+      })
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($patches: [ActivityPatch!]!) {
+            updateMultipleActivity(patches: $patches) {
+              name
+            }
+          }
+        `,
+        variables: {
+          patches
+        },
+        context: {
+          hasUpload: true
+        }
+      })
+
+      if (!response.errors) {
+        this.grist?.fetch()
+      }
+    }
+  }
+}
+
+window.customElements.define('meta-activity-define-page', MetaActivityDefinePage)

package/client/pages/activity/meta-activity-list-page.js

@@ -0,0 +1,262 @@
+import '@operato/data-grist'
+
+import gql from 'graphql-tag'
+
+import { html } from 'lit'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
+import { PageView } from '@operato/shell'
+import { CommonButtonStyles } from '@operato/styles'
+
+import { ActivityStatus } from '@things-factory/worklist/dist-client/types/types.js'
+
+import { MetaApi } from './../../utils/meta-api'
+import { MetaUiUtil } from './../../utils/meta-ui-util'
+import { ValueUtil } from './../../utils/value-util'
+import { TermsUtil } from './../../utils/terms-util'
+import { ServiceUtil } from '../../utils/service-util'
+import { UiUtil } from '../../utils/ui-util'
+
+class MetaActivityListPage extends p13n(localize(i18next)(PageView)) {
+  static get styles() {
+    return MetaApi.getBasicGristStyles()
+  }
+
+  get context() {
+    return {
+      title: TermsUtil.tTitle('meta_activity_list'),
+      actions: [
+        {
+          title: TermsUtil.tButton('save'),
+          action: this.save.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: TermsUtil.tButton('delete'),
+          action: this.delete.bind(this),
+          ...CommonButtonStyles.delete
+        },
+        {
+          title: TermsUtil.tButton('install_activity'),
+          action: this.deploy.bind(this),
+          ...{
+            icon: 'system_update',
+            emphasis: {
+              raised: true,
+              outlined: false,
+              dense: false,
+              danger: false
+            }
+          }
+        }
+      ]
+    }
+  }
+
+  get grist() {
+    return this.shadowRoot.querySelector('ox-grist')
+  }
+
+  async connectedCallback() {
+    // 그리드 뷰 옵션
+    this.grid_view_options = ['LIST', 'GRID', 'CARD']
+
+    // 그리드 모드 설정
+    this.gridMode = MetaApi.isMobileEnv() ? 'LIST' : 'GRID'
+
+    // 그리드 설정
+    this.gridConfig = {
+      option: { view_mode: this.grid_view_options },
+      rows: MetaApi.getGristSelectableConfig(true),
+      pagination: MetaApi.getGristPagination100Config(),
+      sorters: [{ name: 'name', desc: false }],
+      appendable: true,
+      columns: [
+        ...MetaApi.getGristGuttersConfig(true, false),
+        {
+          type: 'string',
+          name: 'id',
+          sortable: false,
+          hidden: true
+        },
+        MetaUiUtil.getGristColumnConfig2('string', 'name', 'name', 'left', true, true, 300),
+        MetaUiUtil.getGristColumnConfig2('string', 'description', 'description', 'left', true, true, 350),
+        MetaUiUtil.getGristSelectorColumnConfig('state', 'status', 'left', true, 85, false, ActivityStatus),
+        {
+          type: 'resource-object',
+          name: 'menu',
+          header: TermsUtil.tLabel('menu'),
+          record: {
+            editable: true,
+            options: {
+              queryName: 'menus',
+              pagination: { pages: [1000] },
+              basicArgs: {
+                filters: [
+                  { name: 'menuType', operator: 'in', value: ['SCREEN', 'POPUP'] },
+                  { name: 'routing', operator: 'is_not_null', value: '' },
+                  { name: 'template', operator: 'is_not_null', value: '' }
+                ]
+              },
+              columns: [
+                { name: 'id', hidden: true },
+                {
+                  name: 'name',
+                  header: TermsUtil.tLabel('name'),
+                  width: 500,
+                  filter: 'search',
+                  record: {
+                    editable: true,
+                    align: 'left',
+                    renderer: function (value, column, record, rowIndex, field) {
+                      let menuName = TermsUtil.tMenu(value)
+                      if (value == menuName) {
+                        return value
+                      } else {
+                        return value + ' (' + menuName + ')'
+                      }
+                    }
+                  }
+                },
+                await MetaApi.getGristCodeSelectorColumnConfig(
+                  'menuType',
+                  'menu_type',
+                  'left',
+                  false,
+                  110,
+                  false,
+                  'MENU_PAGE_TYPE'
+                ),
+                MetaUiUtil.getGristColumnConfig2('string', 'routing', 'routing', 'left', false, false, 250)
+              ],
+              list: { fields: ['name', 'routing'] },
+              nameField: 'routing'
+            }
+          },
+          width: 190
+        },
+        MetaUiUtil.getGristColumnConfig2('object', 'updater', 'updater', 'left', false, false, 90),
+        MetaUiUtil.getGristColumnConfig2('datetime', 'updatedAt', 'updated_at', 'left', false, true, 180),
+        { name: 'activityType', hidden: true },
+        { name: 'multiple', hidden: true },
+        { name: 'startingType', hidden: true }
+      ],
+      sorters: [{ name: 'name', desc: false }]
+    }
+
+    // 조회 조건
+    let searchFields = { name: 'like' }
+    this.gridConfig.columns
+      .filter(x => searchFields[x.name])
+      .forEach(x => {
+        x.filter = searchFields[x.name]
+      })
+
+    if (this.connectedCallback) {
+      await super.connectedCallback()
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [], filters = [] }) {
+    filters.push({
+      name: 'model',
+      operator: 'like',
+      value: '"relation-menu"'
+    })
+
+    // 조회 컬럼 추출 후 조회
+    let selectFields = MetaApi.getSelectColumns(this.gridConfig.columns.filter(x => x.name != 'menu'))
+    selectFields += `
+      model {
+        name
+        description
+      }
+    `
+
+    let response = await MetaApi.searchByPagination('metaActivities', filters, sorters, page, limit, selectFields)
+
+    response.records.forEach(x => {
+      let menu = x.model.filter(y => y.name == 'relation-menu')
+      if (menu && menu.length > 0) {
+        x.menu = JSON.parse(menu[0].description)
+      }
+      delete x.model
+    })
+
+    return response
+  }
+
+  async deploy() {
+    try {
+      var response = await client.query({
+        query: gql`
+          mutation {
+            installActivityTemplate
+          }
+        `
+      })
+
+      if (!response.errors) {
+        UiUtil.showToast('info', TermsUtil.tText('install_activity_success'))
+        return true
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
+      }
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
+    }
+  }
+
+  async save() {
+    let patches = ServiceUtil.patchesForUpdateMultiple(this.grist)
+    if (ValueUtil.isNotEmpty(patches)) {
+      patches.forEach(x => {
+        Object.assign(x, {
+          uiSource: 'meta-activity-writer-element',
+          uiType: 'custom-element',
+          viewSource: 'meta-activity-viewer-element',
+          viewType: 'custom-element'
+        })
+
+        if (!x.multiple) x.multiple = 'single'
+        if (!x.activityType) x.activityType = 'task'
+        if (!x.startingType) x.startingType = 'post'
+      })
+
+      let result = await ServiceUtil.updateMultiple('updateMultipleMetaActivity', patches)
+      if (result) {
+        this.grist.fetch()
+        return result
+      }
+    }
+  }
+
+  async delete() {
+    await MetaApi.deleteListByGristSelected(this.grist, 'deleteMetaActivities')
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        auto-fetch
+        id="ox-grist"
+        .config=${this.gridConfig}
+        .mode=${this.gridMode}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+        </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+      </ox-grist>
+    `
+  }
+}
+
+window.customElements.define('meta-activity-list-page', MetaActivityListPage)

package/client/pages/activity/meta-activity-viewer-element.js

@@ -0,0 +1,35 @@
+import gql from 'graphql-tag'
+
+import { css, html, LitElement } from 'lit'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ServiceUtil } from './../../utils/service-util'
+import { MetaApi } from './../../utils/meta-api'
+import { UiUtil } from './../../utils/ui-util'
+import { ValueUtil } from './../../utils/value-util'
+import { MetaActivityMixin } from './meta-activiy-mixin.js'
+
+
+/**
+ * @description Auto Generate Activity Viewer Element
+ */
+export class MetaActivityViewerElement extends MetaActivityMixin(localize(i18next)(LitElement)) {
+
+  render(){
+    if(this.relationMenu && !this.contentElement){
+      let tagName = this.relationMenu.tagName;
+      let routing = this.relationMenu.routing;
+      let name = this.relationMenu.name;
+
+      let htmlText = `<${tagName} id='${name}' route_name='${routing}' style="flex:1;" is_activity=true is_readonly=true is_detail=true></${tagName}>`;
+      this.contentElement = UiUtil.htmlToElement(htmlText);
+      this.contentElement.activityDataSet = ValueUtil.isEmpty(this.output) ? undefined : this.output.customData;
+    }
+
+    return html`
+      ${this.contentElement}
+    `
+  }
+}
+
+customElements.define('meta-activity-viewer-element', MetaActivityViewerElement)