feat: Implement process import/export functionality, enhance process … (#10528)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/process-resources/src/components/ProcessesSection.svelte

@@ -18,9 +18,10 @@
   import { translate } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Process, State } from '@hcengineering/process'
-  import { ButtonIcon, getCurrentLocation, Icon, IconAdd, Label, navigate } from '@hcengineering/ui'
+  import { ButtonIcon, getCurrentLocation, Icon, IconAdd, IconFile, IconOpen, Label, navigate } from '@hcengineering/ui'
   import process from '../plugin'
   import { makeRank } from '@hcengineering/rank'
+  import { importProcess } from '../exporter'
 
   export let masterTag: MasterTag
 
@@ -76,12 +77,35 @@
     loc.path[6] = id
     navigate(loc, true)
   }
+
+  function handleImport (): void {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.json'
+    input.onchange = async (evt) => {
+      const file = (evt.target as HTMLInputElement).files?.[0]
+      if (file != null) {
+        const text = await file.text()
+        await importProcess(masterTag._id, text)
+      }
+    }
+    input.click()
+  }
 </script>
 
 <div class="hulyTableAttr-header font-medium-12">
   <Icon icon={process.icon.Process} size="small" />
   <span><Label label={process.string.Processes} /></span>
-  <ButtonIcon kind="primary" icon={IconAdd} size="small" dataId={'btnAdd'} on:click={add} />
+  <div class="flex-row-center flex-gap-1">
+    <ButtonIcon
+      kind="primary"
+      icon={IconFile}
+      size="small"
+      tooltip={{ label: process.string.Import, direction: 'bottom' }}
+      on:click={handleImport}
+    />
+    <ButtonIcon kind="primary" icon={IconAdd} size="small" dataId={'btnAdd'} on:click={add} />
+  </div>
 </div>
 {#if processes.length}
   <div class="hulyTableAttr-content task">

plugins/process-resources/src/components/settings/ProcessEditor.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Ref, SortingOrder } from '@hcengineering/core'
-  import { createQuery, getClient, MessageBox } from '@hcengineering/presentation'
+  import { createQuery, getClient, MessageBox, IconDownload } from '@hcengineering/presentation'
   import { Process, State, Transition } from '@hcengineering/process'
   import { clearSettingsStore, settingsStore } from '@hcengineering/setting-resources'
   import {
@@ -30,6 +30,7 @@
     secondNavSeparators,
     showPopup
   } from '@hcengineering/ui'
+  import { exportProcess } from '../../exporter'
   import view from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import process from '../../plugin'
@@ -135,6 +136,24 @@
   function handleSettings (): void {
     showPopup(ProcesssSetting, { value })
   }
+
+  function handleExport (): void {
+    if (value === undefined) return
+    const str = JSON.stringify(
+      exportProcess(value).docs.map((doc) => {
+        const { modifiedBy, modifiedOn, createdBy, createdOn, ...rest } = doc
+        return rest
+      })
+    )
+    const blob = new Blob([str], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${value.name}.json`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
 </script>
 
 <div class="hulyComponent-content__container columns">
@@ -153,6 +172,13 @@
             />
             <div class="flex-row-center flex-gap-2">
               <ButtonIcon icon={IconSettings} size="small" kind="secondary" on:click={handleSettings} />
+              <ButtonIcon
+                icon={IconDownload}
+                tooltip={{ label: process.string.Export, direction: 'bottom' }}
+                size="small"
+                kind="secondary"
+                on:click={handleExport}
+              />
               <ButtonIcon
                 icon={IconDetails}
                 tooltip={{ label: process.string.Data, direction: 'bottom' }}

plugins/process-resources/src/components/settings/SubProcessMatchEditor.svelte

@@ -15,13 +15,11 @@
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { Process, State } from '@hcengineering/process'
+  import { Process } from '@hcengineering/process'
   import { DropdownLabels, Label } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../../plugin'
-  import { ModeId, Modes } from '../../query'
-  import { getContext } from '../../utils'
-  import BaseCriteria from '../criterias/BaseCriteria.svelte'
+  import { ModeId } from '../../query'
   import SubProcessStateCriteria from '../criterias/SubProcessStateCriteria.svelte'
 
   export let readonly: boolean