@operato/process 1.1.35 → 1.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.1.35",
+  "version": "1.1.36",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -19,6 +19,10 @@
     "./ox-process-list.js": "./dist/src/ox-process-list.js",
     "./ox-process-viewer.js": "./dist/src/ox-process-viewer.js",
     "./ox-process-modeller.js": "./dist/src/ox-process-modeller.js",
+    "./ox-editor-process-selector.js": "./dist/src/ox-editor-process-selector.js",
+    "./ox-property-editor-process-selector.js": "./dist/src/ox-property-editor-process-selector.js",
+    "./ox-process-selector.js": "./dist/src/selector/ox-process-selector.js",
+    "./ox-process-creation-card.js": "./dist/src/selector/ox-process-creation-card.js",
     "./register-default-groups.js": "./dist/src/component/register-default-groups.js"
   },
   "typesVersions": {
@@ -32,6 +36,18 @@
       "ox-process-modeller.js": [
         "./dist/src/ox-process-modeller.d.ts"
       ],
+      "ox-editor-process-selector.js": [
+        "./dist/src/ox-editor-process-selector.d.ts"
+      ],
+      "ox-property-editor-process-selector.js": [
+        "./dist/src/ox-property-editor-process-selector.d.ts"
+      ],
+      "ox-process-selector.js": [
+        "./dist/src/selector/ox-process-selector.d.ts"
+      ],
+      "ox-process-creation-card.js": [
+        "./dist/src/selector/ox-process-creation-card.d.ts"
+      ],
       "register-default-groups.js": [
         "./dist/src/register-default-groups.d.ts"
       ]
@@ -51,16 +67,16 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^1.1.35",
-    "@operato/board": "^1.1.35",
-    "@operato/data-grist": "^1.1.35",
-    "@operato/font": "^1.1.35",
+    "@operato/app": "^1.1.36",
+    "@operato/board": "^1.1.36",
+    "@operato/data-grist": "^1.1.36",
+    "@operato/font": "^1.1.36",
     "@operato/graphql": "^1.1.13",
     "@operato/i18n": "^1.1.13",
-    "@operato/input": "^1.1.35",
+    "@operato/input": "^1.1.36",
     "@operato/markdown": "^1.1.28",
     "@operato/popup": "^1.1.28",
-    "@operato/property-editor": "^1.1.35",
+    "@operato/property-editor": "^1.1.36",
     "@operato/styles": "^1.1.28",
     "@operato/utils": "^1.1.15",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -111,5 +127,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b82d99051caa643ebe7b042afd53be5bbc092195"
+  "gitHead": "115403ba66873bd4b8e59644095930653c49206b"
 }

package/src/modeller/property-sidebar/effects/property-event-hover.ts

@@ -47,11 +47,7 @@ export class PropertyEventHover extends LitElement {
 
       ${action == 'popup'
         ? html`
-            <things-editor-board-selector
-              value-key="target"
-              .value=${target}
-              custom-editor
-            ></things-editor-board-selector>
+            <ox-editor-process-selector value-key="target" .value=${target} custom-editor></ox-editor-process-selector>
           `
         : html`
             <input

package/src/modeller/property-sidebar/effects/property-event-tap.ts

@@ -4,6 +4,7 @@
 
 import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
+import '../../../ox-editor-process-selector.js'
 
 import { html, LitElement } from 'lit'
 import { property, state } from 'lit/decorators.js'
@@ -71,11 +72,7 @@ export class PropertyEventTap extends LitElement {
 
       ${action === 'goto' || action?.includes('popup')
         ? html`
-            <things-editor-board-selector
-              value-key="target"
-              .value=${target}
-              custom-editor
-            ></things-editor-board-selector>
+            <ox-editor-process-selector value-key="target" .value=${target} custom-editor></ox-editor-process-selector>
           `
         : action !== 'run'
         ? html`

package/src/ox-editor-process-selector.ts

@@ -0,0 +1,91 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+import './selector/ox-process-selector'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+@customElement('ox-editor-process-selector')
+export class ProcessSelector extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          position: relative;
+          display: inline-block;
+        }
+
+        input[type='text'] {
+          box-sizing: border-box;
+          width: 100%;
+          height: 100%;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+        }
+
+        mwc-icon {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      `
+    ]
+  }
+
+  @property({ type: String }) value?: string
+  @property({ type: Object }) properties?: any
+
+  private popup: any
+
+  render() {
+    return html`
+      <input id="text" type="text" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />
+
+      <mwc-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</mwc-icon>
+    `
+  }
+
+  _onInputChanged(e: Event) {
+    this.value = (e.target as any)?.value
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var value = this.value || {}
+
+    var template = html`
+      <ox-process-selector
+        .creatable=${true}
+        .value=${value}
+        @process-selected=${async (e: CustomEvent) => {
+          var process = e.detail.process
+          this.value = process.id
+
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+
+          this.popup && this.popup.close()
+        }}
+      ></ox-process-selector>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select process')
+    })
+  }
+}

package/src/ox-property-editor-process-selector.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-editor-process-selector'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
+
+@customElement('ox-property-editor-process-selector')
+class PropertyEditorProcessSelector extends OxPropertyEditor {
+  static get styles() {
+    return [...OxPropertyEditor.styles]
+  }
+
+  editorTemplate(value: any, spec: PropertySpec) {
+    return html`
+      <ox-editor-process-selector id="editor" .value=${value} .properties=${spec.property}></ox-editor-process-selector>
+    `
+  }
+}

package/src/selector/ox-process-creation-card.ts

@@ -0,0 +1,94 @@
+import '@material/mwc-icon'
+import './process-creation-popup'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+@customElement('ox-process-creation-card')
+export class ProcessCreationCard extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          border: var(--card-list-create-border);
+          border-radius: var(--card-list-create-border-radius);
+
+          background-color: #fff;
+
+          align-content: center;
+          justify-content: center;
+        }
+
+        div {
+          text-align: center;
+          font-size: 0.8em;
+          color: var(--card-list-create-color);
+          text-transform: capitalize;
+        }
+
+        mwc-icon {
+          display: block;
+          font-size: 3.5em;
+          color: var(--card-list-create-icon-color);
+        }
+      `
+    ]
+  }
+
+  /* default group id */
+  @property({ type: String }) defaultGroup?: string
+  @property({ type: Array }) groups: any
+
+  private popup: any
+
+  render() {
+    return html`<div @click=${(e: Event) => this.onClick()}>
+      <mwc-icon>add_circle_outline</mwc-icon>create process
+    </div> `
+  }
+
+  onClick() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var template = html`
+      <process-creation-popup
+        .defaultGroup=${this.defaultGroup}
+        .groups=${this.groups}
+        @create-process=${async (e: CustomEvent) => {
+          var { name, description, groupId } = e.detail
+
+          this.dispatchEvent(
+            new CustomEvent('create-process', {
+              detail: {
+                name,
+                description,
+                groupId
+              }
+            })
+          )
+
+          this.popup && this.popup.close()
+        }}
+      ></process-creation-popup>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.create-process')
+    })
+  }
+
+  reset() {}
+}

package/src/selector/ox-process-selector.ts

@@ -0,0 +1,321 @@
+import './ox-process-creation-card'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { buildArgs, client, gqlContext } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'
+
+const FETCH_PROCESS_LIST_GQL = (listParam: any) => {
+  return gql`
+  {
+    processes(${buildArgs(listParam)}) {
+      items {
+        id
+        name
+        description
+        thumbnail
+      }
+      total
+    }
+  }
+`
+}
+
+const FETCH_PROCESS_GROUP_LIST_GQL = gql`
+  {
+    processGroups {
+      items {
+        id
+        name
+        description
+      }
+      total
+    }
+  }
+`
+
+const CREATE_PROCESS_GQL = gql`
+  mutation CreateProcess($process: NewProcess!) {
+    createProcess(process: $process) {
+      id
+      name
+      description
+      model
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+@customElement('ox-process-selector')
+export class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: grid;
+          grid-template-rows: auto auto 1fr;
+          overflow: hidden;
+          background-color: var(--popup-content-background-color);
+        }
+
+        #main {
+          overflow: auto;
+          padding: var(--popup-content-padding);
+          display: grid;
+          grid-template-columns: var(--card-list-template);
+          grid-auto-rows: var(--card-list-rows-height);
+          grid-gap: 20px;
+        }
+
+        .card {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          overflow: hidden;
+          border-radius: var(--card-list-border-radius);
+          background-color: var(--card-list-background-color);
+        }
+
+        .card[selected] {
+          border: red solid;
+        }
+
+        .card.create {
+          overflow: visible;
+        }
+
+        .card:hover {
+          cursor: pointer;
+        }
+
+        .card > .name {
+          background-color: var(--board-renderer-name-background-color);
+          opacity: 0.8;
+          margin-top: -35px;
+          width: 100%;
+          color: #fff;
+          font-weight: bolder;
+          font-size: 13px;
+          text-indent: 7px;
+        }
+
+        .card > .description {
+          background-color: rgba(0, 0, 0, 0.7);
+          width: 100%;
+          min-height: 15px;
+          font-size: 0.6rem;
+          color: #fff;
+          text-indent: 7px;
+        }
+        .card img {
+          max-height: 100%;
+          min-height: 100%;
+        }
+
+        #filter {
+          padding: var(--popup-content-padding);
+          background-color: #fff;
+          box-shadow: var(--box-shadow);
+        }
+
+        #filter * {
+          font-size: 15px;
+        }
+
+        select {
+          text-transform: capitalize;
+          float: right;
+        }
+      `
+    ]
+  }
+
+  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []
+  @property({ type: Array }) processes: any[] = []
+  @property({ type: String }) group?: string
+  @property({ type: Boolean }) creatable: boolean = false
+  @property({ type: String }) value?: string
+
+  private _page: number = 1
+  private _total: number = 0
+
+  constructor() {
+    super()
+
+    this._infiniteScrollOptions.limit = 20
+  }
+
+  render() {
+    return html`
+      <div id="filter">
+        <select
+          @change=${(e: Event) => {
+            this.group = (e.currentTarget as any)?.value
+            this.requestUpdate()
+          }}
+        >
+          <option value="">${i18next.t('label.all')}</option>
+          ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}
+        </select>
+      </div>
+
+      <div
+        id="main"
+        @scroll=${(e: Event) => {
+          this.onScroll(e)
+        }}
+      >
+        ${this.creatable
+          ? html`
+              <ox-process-creation-card
+                class="card create"
+                .groups=${this.groups}
+                .defaultGroup=${this.group}
+                @create-process=${(e: CustomEvent) => this.onCreateProcess(e)}
+              ></ox-process-creation-card>
+            `
+          : html``}
+        ${this.processes.map(
+          process => html`
+            <div
+              class="card"
+              @click=${(e: Event) => this.onClickSelect(process)}
+              ?selected=${this.value === process.id}
+            >
+              <img src=${process.thumbnail} />
+              <div class="name">${process.name}</div>
+              <div class="description">${process.description}</div>
+            </div>
+          `
+        )}
+      </div>
+    `
+  }
+
+  //@ts-ignore
+  get scrollTargetEl(): HTMLElement | null {
+    return this.renderRoot.querySelector('#main') as HTMLElement
+  }
+
+  async scrollAction() {
+    return this.appendProcesses()
+  }
+
+  firstUpdated() {
+    this.refreshGroups()
+  }
+
+  async updated(changed: PropertyValues<this>) {
+    if (changed.has('group')) {
+      this.refreshProcesses()
+    }
+  }
+
+  onClickSelect(process: any) {
+    this.dispatchEvent(
+      new CustomEvent('process-selected', {
+        composed: true,
+        bubbles: true,
+        detail: {
+          process
+        }
+      })
+    )
+  }
+
+  async onCreateProcess(e: CustomEvent) {
+    var { name, description, groupId } = e.detail
+
+    await this.createProcess(name, description, groupId)
+    this.refreshProcesses()
+  }
+
+  async refreshGroups() {
+    var groupListResponse = await client.query({
+      query: FETCH_PROCESS_GROUP_LIST_GQL,
+      context: gqlContext()
+    })
+
+    if (!groupListResponse || !groupListResponse.data) return
+
+    var groups = groupListResponse.data.processGroups.items
+    this.groups = [...groups]
+
+    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''
+  }
+
+  async refreshProcesses() {
+    var processes = await this.getProcesses()
+    this.processes = [...processes]
+
+    var creationCard = this.renderRoot.querySelector('ox-process-creation-card')
+    if (creationCard) {
+      ;(creationCard as any).reset()
+    }
+  }
+
+  async appendProcesses() {
+    var processes = await this.getProcesses({ page: this._page + 1 })
+    this.processes = [...this.processes, ...processes]
+  }
+
+  async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
+    var filters = []
+    var sortings = [] as any[]
+    var pagination = {
+      limit,
+      page
+    }
+
+    if (this.group)
+      filters.push({
+        name: 'groupId',
+        operator: 'eq',
+        value: this.group
+      })
+
+    var params = {
+      filters,
+      sortings,
+      pagination
+    }
+    var processListResponse = await client.query({
+      query: FETCH_PROCESS_LIST_GQL(params),
+      context: gqlContext()
+    })
+
+    if (!processListResponse || !processListResponse.data) return []
+    this._total = processListResponse.data.processes.total
+    this._page = page
+
+    return processListResponse.data.processes.items
+  }
+
+  async createProcess(name: string, description: string, groupId: string) {
+    var model = JSON.stringify({
+      width: 800,
+      height: 600
+    })
+
+    const response = await client.mutate({
+      mutation: CREATE_PROCESS_GQL,
+      variables: {
+        process: {
+          name,
+          description,
+          groupId,
+          model
+        }
+      },
+      context: gqlContext()
+    })
+
+    return response.data
+  }
+}