@operato/process 1.1.1

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@operato/process",
+  "version": "1.1.1",
+  "description": "Webcomponent for business process modeling following open-wc recommendations",
+  "author": "heartyoh",
+  "license": "MIT",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "publishConfig": {
+    "access": "public",
+    "@ioperato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heartyoh/ioperato.git",
+    "directory": "packages/process"
+  },
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./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",
+    "./register-default-groups.js": "./dist/src/component/register-default-groups.js"
+  },
+  "typesVersions": {
+    "*": {
+      "ox-process-list.js": [
+        "./dist/src/ox-process-list.d.ts"
+      ],
+      "ox-process-viewer.js": [
+        "./dist/src/ox-process-viewer.d.ts"
+      ],
+      "ox-process-modeller.js": [
+        "./dist/src/ox-process-modeller.d.ts"
+      ],
+      "register-default-groups.js": [
+        "./dist/src/register-default-groups.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
+  },
+  "dependencies": {
+    "@open-wc/scoped-elements": "^2.1.3",
+    "@operato/app": "^1.1.1",
+    "@operato/data-grist": "^1.1.1",
+    "@operato/font": "^1.1.1",
+    "@operato/graphql": "^1.1.1",
+    "@operato/i18n": "^1.1.1",
+    "@operato/input": "^1.1.1",
+    "@operato/markdown": "^1.1.1",
+    "@operato/popup": "^1.1.1",
+    "@operato/property-editor": "^1.1.1",
+    "@operato/styles": "^1.1.1",
+    "@operato/utils": "^1.1.1",
+    "@polymer/paper-dropdown-menu": "^3.2.0",
+    "@types/file-saver": "^2.0.4",
+    "@types/sortablejs": "^1.10.7",
+    "dexie": "^3.2.2",
+    "file-saver": "^2.0.5",
+    "lit": "^2.4.0",
+    "lodash-es": "^4.17.21",
+    "sortablejs": "^1.14.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@hatiolab/things-scene": "^3.0.22",
+    "@material/mwc-fab": "^0.27.0",
+    "@material/mwc-icon": "^0.27.0",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^3.0.4",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@types/lodash-es": "^4.17.6",
+    "@types/w3c-web-usb": "^1.0.5",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.29",
+    "@web/dev-server-storybook": "^0.5.0",
+    "@web/test-runner": "next",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^7.0.2",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.8.4"
+  },
+  "customElements": "custom-elements.json",
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "8acd5da56c7d09d5c2ad4e03e8009a6fbf1a4f56"
+}

package/src/data-storage/data-storage.ts

@@ -0,0 +1,47 @@
+import Dexie from 'dexie'
+
+import { Component, PersistentDataStorage } from '@hatiolab/things-scene'
+
+class ProcessDatabase extends Dexie {
+  process_data!: Dexie.Table<IProcessData, number> // number = type of the primkey
+  //...other tables goes here...
+
+  constructor() {
+    super('operato-process-database')
+    this.version(1).stores({
+      process_data: '[process+refid]'
+      //...other tables goes here...
+    })
+  }
+}
+
+interface IProcessData {
+  id?: number
+  process: string
+  refid: string | number
+  data: any
+  timestamp: number
+}
+
+const db = new ProcessDatabase()
+
+export class DataStorage implements PersistentDataStorage {
+  private id: string
+
+  constructor(id: string) {
+    this.id = id
+  }
+
+  public async load(key: Component): Promise<any> {
+    const saved = await db.process_data.where({ process: this.id, refid: key.state.refid }).first()
+    return saved?.data
+  }
+
+  public async save(key: Component, value: any): Promise<void> {
+    await db.process_data.put({ process: this.id, refid: key.state.refid, data: value, timestamp: Date.now() })
+  }
+
+  public async clear(key: Component): Promise<void> {
+    await db.process_data.where({ process: this.id, refid: key.state.refid }).delete()
+  }
+}

package/src/graphql/data-subscription.ts

@@ -0,0 +1,30 @@
+import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'
+
+import gql from 'graphql-tag'
+import { subscribe } from '@operato/graphql'
+
+export class DataSubscriptionProviderImpl implements DataSubscriptionProvider {
+  async subscribe(tag: string, component: Component) {
+    return await subscribe(
+      {
+        query: gql`
+                  subscription {
+                    data(tag: "${tag}") {
+                      tag
+                      data
+                    }
+                  }
+                `
+      },
+      {
+        next: async ({ data }: { data: any }) => {
+          if (data) {
+            component.data = data.data.data
+          }
+        }
+      }
+    )
+  }
+
+  dispose() {}
+}

package/src/graphql/favorite-process.ts

@@ -0,0 +1,25 @@
+import { buildArgs, client } from '@operato/graphql'
+
+import gql from 'graphql-tag'
+
+export async function fetchFavoriteProcessList(listParam = {}) {
+  const response = await client.query({
+    query: gql`
+      {
+        favoriteProcesses(${buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}

package/src/graphql/index.ts

@@ -0,0 +1,3 @@
+export * from './process'
+export * from './process-group'
+export * from './favorite-process'

package/src/graphql/process-group.ts

@@ -0,0 +1,138 @@
+import { ProcessGroup } from '../types'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+export async function fetchProcessGroup(id: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchProcessGroupById($id: String!) {
+        group(id: $id) {
+          id
+          name
+          description
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: { id }
+  })
+
+  return response.data
+}
+
+export async function updateProcessGroup(group: ProcessGroup) {
+  var { id, name, description } = group
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateProcessGroup($id: String!, $patch: ProcessGroupPatch!) {
+        updateProcessGroup(id: $id, patch: $patch) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description }
+    }
+  })
+
+  return response.data
+}
+
+export async function deleteProcessGroup(id: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteProcessGroup(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+
+  return response.data
+}
+
+export async function fetchProcessGroupList() {
+  const response = await client.query({
+    query: gql`
+      {
+        processGroups {
+          items {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function createProcessGroup(group: ProcessGroup) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateProcessGroup($group: NewProcessGroup!) {
+        createProcessGroup(group: $group) {
+          id
+          name
+          description
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: { group }
+  })
+
+  return response.data
+}
+
+export async function joinProcessGroup(processId: string, groupId: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation JoinProcessGroup($id: String!, $processIds: [String!]!) {
+        joinProcessGroup(id: $id, processIds: $processIds) {
+          id
+          name
+          description
+          processes {
+            id
+            name
+            description
+            createdAt
+            updatedAt
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id: groupId,
+      processIds: [processId]
+    }
+  })
+
+  return response.data
+}

package/src/graphql/process.ts

@@ -0,0 +1,144 @@
+import { buildArgs, client } from '@operato/graphql'
+
+import { Process } from '../types'
+import gql from 'graphql-tag'
+
+export async function fetchProcessList(listParam = {}) {
+  const response = await client.query({
+    query: gql`
+      {
+        processes(${buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function fetchProcess(id: string) {
+  const response = await client.query({
+    query: gql`
+      query FetchProcessById($id: String!) {
+        process(id: $id) {
+          id
+          name
+          description
+          group {
+            id
+            name
+          }
+          thumbnail
+          model
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: { id }
+  })
+
+  return response.data
+}
+
+export async function createProcess(process: Process) {
+  /*
+    input NewProcess {
+      name        : String!
+      description : String
+      model       : String!
+      groupId     : String!
+    }
+  */
+
+  process.model = JSON.stringify(process.model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateProcess($process: NewProcess!) {
+        createProcess(process: $process) {
+          id
+          name
+          description
+          model
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      process
+    }
+  })
+
+  return response.data
+}
+
+export async function updateProcess(process: Process) {
+  /*
+    input ProcessPatch {
+      name        : String
+      description : String
+      model       : String
+    }
+    */
+  var { id, name, description, model, groupId } = process
+  model = JSON.stringify(model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateProcess($id: String!, $patch: ProcessPatch!) {
+        updateProcess(id: $id, patch: $patch) {
+          id
+          name
+          description
+          model
+          group {
+            id
+            name
+          }
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description, model, groupId }
+    }
+  })
+
+  return response.data
+}
+
+export async function deleteProcess(id: string) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteProcess(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+
+  return response.data
+}

package/src/graphql/scenario.ts

@@ -0,0 +1,79 @@
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+
+export const scenarios = async (): Promise<{ name: string; description: string }[]> => {
+  var response = await client.query({
+    query: gql`
+      query {
+        scenarios {
+          items {
+            name
+            description
+          }
+        }
+      }
+    `
+  })
+
+  if (response.errors) {
+    return []
+  }
+
+  return response.data.scenarios.items
+}
+
+export const startScenario = async (
+  scenarioName: string,
+  instanceName: string,
+  variables: string | number | object
+) => {
+  if (!scenarioName) {
+    return
+  }
+
+  if (client) {
+    var response = await client.query({
+      query: gql`
+        mutation ($instanceName: String, $scenarioName: String!, $variables: Object) {
+          startScenario(instanceName: $instanceName, scenarioName: $scenarioName, variables: $variables) {
+            state
+            message
+            data
+          }
+        }
+      `,
+      variables: {
+        instanceName: instanceName,
+        scenarioName: scenarioName,
+        variables
+      }
+    })
+
+    return response?.data?.startScenario?.data
+  }
+}
+
+export const runScenario = async (scenarioName: string, variables: string | number | object) => {
+  if (!scenarioName) return
+
+  if (client) {
+    var response = await client.query({
+      query: gql`
+        mutation ($scenarioName: String!, $variables: Object) {
+          runScenario(scenarioName: $scenarioName, variables: $variables) {
+            state
+            message
+            data
+          }
+        }
+      `,
+      variables: {
+        scenarioName: scenarioName,
+        variables
+      }
+    })
+
+    return response?.data?.runScenario?.data
+  }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './types.js'
+
+export { DataStorage } from './data-storage/data-storage.js'
+
+export * from './ox-process-viewer.js'
+export * from './ox-process-modeller.js'
+export * from './ox-process-list.js'

package/src/modeller/component-toolbar/component-detail.ts

@@ -0,0 +1,58 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/markdown'
+
+import { css, html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+
+export class ComponentDetail extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: stretch;
+
+        background-color: var(--component-detail-background-color, white);
+        margin: 0px;
+        padding: 0px;
+
+        overflow: hidden;
+
+        border: 2px solid var(--component-detail-border-color, gray);
+        box-sizing: border-box;
+
+        top: 0px;
+
+        z-index: 1;
+      }
+
+      ox-markdown,
+      iframe {
+        flex: 1;
+        padding: 10px;
+        overflow: auto;
+      }
+    `
+  ]
+
+  @property({ type: Object }) template: { about: string } | null = null
+
+  render() {
+    const { about } = this.template || {}
+
+    if (about) {
+      var aboutURL = new URL(about, location.origin)
+      if (aboutURL.origin !== location.origin) {
+        return html`<iframe src=${about}></iframe>`
+      }
+    }
+
+    return html` <ox-markdown .src=${about}></ox-markdown> `
+  }
+}