@operato/process 1.5.25 → 1.5.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.5.25",
+  "version": "1.5.27",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -68,16 +68,16 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^1.5.25",
-    "@operato/board": "^1.5.25",
-    "@operato/data-grist": "^1.5.25",
-    "@operato/font": "^1.5.25",
+    "@operato/app": "^1.5.27",
+    "@operato/board": "^1.5.27",
+    "@operato/data-grist": "^1.5.27",
+    "@operato/font": "^1.5.27",
     "@operato/graphql": "^1.4.76",
     "@operato/i18n": "^1.5.14",
-    "@operato/input": "^1.5.25",
+    "@operato/input": "^1.5.27",
     "@operato/markdown": "^1.4.64",
-    "@operato/popup": "^1.5.13",
-    "@operato/property-editor": "^1.5.25",
+    "@operato/popup": "^1.5.27",
+    "@operato/property-editor": "^1.5.27",
     "@operato/styles": "^1.4.64",
     "@operato/utils": "^1.4.64",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -128,5 +128,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c00ba4544ea5bfbd329520f0b7a865d6a6ee038d"
+  "gitHead": "014457ceb1f2671743226ac18423ead229c8b571"
 }

package/src/ox-process-list.ts

@@ -409,15 +409,17 @@ class ProcessList extends LitElement {
         .groups=${this.groups}
         @create-process=${async (e: CustomEvent) => {
           try {
-            var { name, description, groupId } = e.detail
+            var { name, description, groupId, model, thumbnail } = e.detail
+
             var process: Process = {
               name,
               description,
               groupId,
-              model: {
+              model: model || {
                 width: 1200,
                 height: 800
-              }
+              },
+              thumbnail
             }
 
             const { createProcess: created } = await createProcess(process)

package/src/ox-process-template-list.ts

@@ -0,0 +1,265 @@
+import '@operato/data-grist'
+import '@operato/input/ox-input-file.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import {
+  ColumnConfig,
+  DataGrist,
+  FetchOption,
+  FilterValue,
+  GristData,
+  GristRecord,
+  PaginationConfig,
+  SortersConfig
+} from '@operato/data-grist'
+import { buildArgs, client } from '@operato/graphql'
+import { ScrollbarStyles, TooltipStyles } from '@operato/styles'
+
+const FETCH_PROCESS_TEMPLATE_LIST_GQL = (listParam: any) => {
+  return gql`
+  {
+    processTemplates(${buildArgs(listParam)}) {
+      items {
+        id
+        name
+        description
+        visibility
+        thumbnail
+      }
+      total
+    }
+  }
+`
+}
+
+const FETCH_PROCESS_TEMPLATE_GQL = (id: string) => {
+  return gql`
+  {
+    processTemplate(id: "${id}") {
+      id
+      name
+      description
+      visibility
+      model
+      thumbnail
+    }
+  }
+`
+}
+
+@customElement('ox-process-template-list')
+export class OxProcessTemplateList extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    TooltipStyles,
+    css`
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      ox-grist {
+        flex: 1;
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      #headroom {
+        align-items: center;
+        padding: var(--padding-default) var(--padding-wide);
+        border-top: 2px solid rgba(0, 0, 0, 0.2);
+        background-color: var(--theme-white-color);
+        box-shadow: var(--box-shadow);
+      }
+
+      #filters {
+        display: flex;
+        flex-direction: row;
+        place-content: space-between;
+        margin: var(--margin-default) 0;
+      }
+
+      select {
+        border: 0;
+        outline: none;
+        text-align: right;
+      }
+
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false
+
+  @query('ox-grist') grist!: DataGrist
+
+  render() {
+    return html`
+      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    const { items: records, total } = await this.getProcessTemplates({ page, limit, filters, sortings })
+
+    return {
+      total,
+      records
+    }
+  }
+
+  get gristConfig() {
+    return {
+      list: {
+        thumbnail: 'thumbnail',
+        fields: ['name'],
+        details: ['description']
+      },
+      columns: [
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: 'name',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          filter: 'search',
+          sortable: true
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: 'description',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          filter: 'search'
+        },
+        {
+          type: 'select-buttons',
+          name: 'visibility',
+          header: 'visibility',
+          record: {
+            editable: false
+          },
+          hidden: true,
+          filter: {
+            operator: 'in',
+            options: ['private', 'domain', 'public'],
+            label: ''
+          }
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          hidden: true,
+          record: {
+            editable: false
+          }
+        }
+      ],
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: false
+        },
+        handlers: {
+          click: 'select-row-toggle'
+        }
+      },
+      sorters: [
+        {
+          name: 'name',
+          desc: false
+        }
+      ],
+      pagination: {
+        pages: [20, 30, 50, 100, 200]
+      }
+    }
+  }
+
+  async firstUpdated() {
+    this.refreshProcessTemplates()
+  }
+
+  async getSelected() {
+    const selected = this.grist.selected
+    const templateId = selected && selected[0]?.id
+
+    if (!templateId) {
+      return
+    }
+
+    var processTemplateResponse = await client.query({
+      query: FETCH_PROCESS_TEMPLATE_GQL(templateId)
+    })
+
+    var template = processTemplateResponse.data?.processTemplate
+
+    if (template) {
+      template = {
+        ...template,
+        model: JSON.parse(template.model)
+      }
+    }
+
+    return template
+  }
+
+  async refreshProcessTemplates() {
+    this.grist.fetch()
+  }
+
+  async getProcessTemplates({
+    page = 1,
+    limit = 30,
+    filters = [],
+    sortings = []
+  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {
+    var pagination: PaginationConfig = {
+      limit,
+      page
+    }
+
+    var params = {
+      filters,
+      sortings,
+      pagination
+    }
+
+    var processTemplateListResponse = await client.query({
+      query: FETCH_PROCESS_TEMPLATE_LIST_GQL(params)
+    })
+
+    return processTemplateListResponse?.data?.processTemplates || {}
+  }
+}

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

@@ -66,14 +66,16 @@ export class ProcessCreationCard extends localize(i18next)(LitElement) {
         .defaultGroup=${this.defaultGroup}
         .groups=${this.groups}
         @create-process=${async (e: CustomEvent) => {
-          var { name, description, groupId } = e.detail
+          var { name, description, groupId, model, thumbnail } = e.detail
 
           this.dispatchEvent(
             new CustomEvent('create-process', {
               detail: {
                 name,
                 description,
-                groupId
+                groupId,
+                model,
+                thumbnail
               }
             })
           )

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

@@ -229,9 +229,9 @@ export class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitEle
   }
 
   async onCreateProcess(e: CustomEvent) {
-    var { name, description, groupId } = e.detail
+    var { name, description, groupId, model, thumbnail } = e.detail
 
-    await this.createProcess(name, description, groupId)
+    await this.createProcess(name, description, groupId, model, thumbnail)
     this.refreshProcesses()
   }
 
@@ -296,12 +296,14 @@ export class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitEle
     return processListResponse.data.processes.items
   }
 
-  async createProcess(name: string, description: string, groupId: string) {
-    var model = JSON.stringify({
-      width: 1200,
-      height: 800,
-      fillStyle: 'white'
-    })
+  async createProcess(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string) {
+    var model = JSON.stringify(
+      modelTemplate || {
+        width: 1200,
+        height: 800,
+        fillStyle: 'white'
+      }
+    )
 
     const response = await client.mutate({
       mutation: CREATE_PROCESS_GQL,

package/src/selector/process-creation-popup.ts

@@ -3,11 +3,13 @@ import '@material/mwc-textarea'
 import '@material/mwc-select'
 import '@material/mwc-list/mwc-list-item'
 import '@material/mwc-button'
+import '../ox-process-template-list'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { OxProcessTemplateList } from '../ox-process-template-list'
 
 @customElement('process-creation-popup')
 export class ProcessCreationPopup extends localize(i18next)(LitElement) {
@@ -17,24 +19,46 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
         :host {
           display: flex;
           flex-direction: column;
-
+          gap: 10px;
           padding: 10px;
+
           background-color: white;
         }
 
-        :host > * {
-          margin: 10px;
+        [body] {
+          flex: 1;
+
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
+
+          overflow: hidden;
         }
 
         [content] {
           flex: 1;
+
           display: flex;
           flex-direction: column;
+          gap: 10px;
+
           overflow: auto;
         }
 
-        [content] > * {
-          margin: 10px 0;
+        [content] > mwc-textarea {
+          flex: 1;
+        }
+
+        [templates] {
+          flex: 2;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        [templates] > ox-process-template-list {
+          flex: 1;
+          overflow: hidden;
         }
       `
     ]
@@ -43,28 +67,39 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
   @property({ type: String }) defaultGroup?: string
   @property({ type: Array }) groups?: { id: string; name: string }[]
 
+  @query('ox-process-template-list') processTemplateList!: OxProcessTemplateList
+
   render() {
     var groups = this.groups || []
 
     return html`
-      <div content>
-        <mwc-textfield label=${String(i18next.t('label.name'))} name="name" required field-name></mwc-textfield>
-        <mwc-textarea
-          label=${String(i18next.t('label.description'))}
-          name="description"
-          field-description
-        ></mwc-textarea>
-        <mwc-select
-          label=${String(i18next.t('label.group'))}
-          field-group
-          helper="If there is no group to choose, you can leave it empty."
-        >
-          ${groups.map(
-            group => html`
-              <mwc-list-item value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</mwc-list-item>
-            `
-          )}
-        </mwc-select>
+      <div body>
+        <div content>
+          <mwc-textfield label=${String(i18next.t('label.name'))} name="name" required field-name></mwc-textfield>
+          <mwc-textarea
+            label=${String(i18next.t('label.description'))}
+            name="description"
+            field-description
+          ></mwc-textarea>
+          <mwc-select
+            label=${String(i18next.t('label.group'))}
+            field-group
+            helper="If there is no group to choose, you can leave it empty."
+          >
+            ${groups.map(
+              group => html`
+                <mwc-list-item value=${group.id} ?selected=${this.defaultGroup == group.id}
+                  >${group.name}</mwc-list-item
+                >
+              `
+            )}
+          </mwc-select>
+        </div>
+
+        <div templates>
+          <div>${i18next.t('label.process-template')}</div>
+          <ox-process-template-list></ox-process-template-list>
+        </div>
       </div>
 
       <mwc-button
@@ -81,7 +116,7 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
     }, 100)
   }
 
-  onClickSubmit() {
+  async onClickSubmit() {
     var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
       return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value
     })
@@ -90,12 +125,16 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
       return
     }
 
+    const template = await this.processTemplateList.getSelected()
+
     this.dispatchEvent(
       new CustomEvent('create-process', {
         detail: {
           name,
           description,
-          groupId
+          groupId,
+          model: template?.model,
+          thumbnail: template?.thumbnail
         }
       })
     )

package/src/types.ts

@@ -47,6 +47,7 @@ export type Process = {
   description?: string
   model?: any
   groupId?: string
+  thumbnail?: string
 }
 
 export type ProcessGroup = {