Process result and context (#9782)

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

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import core, { Ref } from '@hcengineering/core'
   import { Card, createQuery, getClient } from '@hcengineering/presentation'
-  import { Process, State, Trigger } from '@hcengineering/process'
+  import { Process, State, Trigger, TriggerResult } from '@hcengineering/process'
   import { Component, Dropdown, DropdownIntlItem, DropdownLabelsIntl, Label, ListItem } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../../plugin'
@@ -25,6 +25,7 @@
   const dispatch = createEventDispatcher()
   let to: Ref<State> | undefined = undefined
   let states: State[] = []
+  let result: TriggerResult | null = null
 
   const query = createQuery()
   query.query(plugin.class.State, { process: process._id }, (res) => {
@@ -66,13 +67,19 @@
       trigger,
       triggerParams: params,
       process: process._id,
+      result,
       actions: []
     })
     dispatch('close')
   }
 
   function change (e: CustomEvent<Record<string, any>>): void {
-    params = e.detail
+    if (e.detail?.params !== undefined) {
+      params = e.detail.params
+    }
+    if (e.detail?.result !== undefined) {
+      result = e.detail.result
+    }
   }
 </script>
 
@@ -111,13 +118,17 @@
       items={triggersItems}
       bind:selected={trigger}
       label={plugin.string.Trigger}
+      on:selected={() => {
+        params = {}
+        result = null
+      }}
       justify={'left'}
       width={'100%'}
       kind={'no-border'}
     />
   </div>
   {#if triggerValue?.editor}
-    <Component is={triggerValue.editor} props={{ process, params }} on:change={change} />
+    <Component is={triggerValue.editor} props={{ process, params, result }} on:change={change} />
   {/if}
 </Card>
 

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

@@ -20,11 +20,12 @@
   export let transition: Transition
 
   let params = transition.triggerParams ?? {}
+  let result = transition.result ?? null
 
   const client = getClient()
 
   async function save (): Promise<void> {
-    await client.update(transition, { triggerParams: params, trigger: selectedTrigger })
+    await client.update(transition, { triggerParams: params, trigger: selectedTrigger, result })
     clearSettingsStore()
   }
 
@@ -34,7 +35,12 @@
   }
 
   function change (e: CustomEvent<Record<string, any>>): void {
-    params = e.detail
+    if (e.detail?.params !== undefined) {
+      params = e.detail.params
+    }
+    if (e.detail?.result !== undefined) {
+      result = e.detail.result
+    }
   }
 
   let selectedTrigger: Ref<Trigger> = transition.trigger
@@ -79,7 +85,7 @@
       </div>
       {#if trigger.editor !== undefined}
         <div class="editor">
-          <Component is={trigger.editor} props={{ process, params, readonly }} on:change={change} />
+          <Component is={trigger.editor} props={{ process, params, result, readonly }} on:change={change} />
         </div>
       {/if}
     {/if}

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

@@ -35,7 +35,7 @@
   function change (e: CustomEvent<any>): void {
     if (readonly || e.detail == null) return
     params = e.detail
-    dispatch('change', params)
+    dispatch('change', { params })
   }
 
   function getKeys (_class: Ref<Class<MasterTag>>): AnyAttribute[] {
@@ -87,7 +87,7 @@
       keys = keys.filter((k) => k !== key)
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete (params as any)[key]
-      dispatch('change', params)
+      dispatch('change', { params })
     }
   }
 </script>

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

@@ -16,33 +16,23 @@
 <script lang="ts">
   import { Doc } from '@hcengineering/core'
   import { Process, Step } from '@hcengineering/process'
-  import ProcessContextPresenter from '../contextEditors/ProcessContextPresenter.svelte'
   import { Label } from '@hcengineering/ui'
   import processPlugin from '../../plugin'
+  import ProcessContextPresenter from '../contextEditors/ProcessContextPresenter.svelte'
 
   export let process: Process
   export let step: Step<Doc>
 
   $: currentContext = step.context ? process.context[step.context._id] : undefined
-
-  $: currentResultContext = step.result ? process.context[step.result._id] : undefined
 </script>
 
-{#if currentContext || currentResultContext}
-  <Label label={processPlugin.string.Result} />
-{/if}
 {#if currentContext}
+  <Label label={processPlugin.string.Result} />
   <div class="container">
     <ProcessContextPresenter context={currentContext} />
   </div>
 {/if}
 
-{#if currentResultContext}
-  <div class="container">
-    <ProcessContextPresenter context={currentResultContext} />
-  </div>
-{/if}
-
 <style lang="scss">
   .container {
     padding: 0.25rem 0.5rem;

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

@@ -13,9 +13,9 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { Class, Doc, PropertyType, Ref, Type } from '@hcengineering/core'
+  import core, { Class, PropertyType, Ref, Type } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { Step } from '@hcengineering/process'
+  import { TriggerResult } from '@hcengineering/process'
   import setting from '@hcengineering/setting-resources/src/plugin'
   import {
     AnyComponent,
@@ -32,10 +32,10 @@
   import plugin from '../../plugin'
   import { generateContextId } from '../../utils'
 
-  export let step: Step<Doc>
+  export let result: TriggerResult | null
 
-  let type: Type<any> | undefined | null = step.result?.type
-  let name: string = step.result?.name ?? ''
+  let type: Type<any> | undefined | null = result?.type
+  let name: string = result?.name ?? ''
   let is: AnyComponent | undefined
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -43,15 +43,15 @@
 
   function update (): void {
     if (type == null) {
-      step.result = undefined
+      result = null
     } else {
-      step.result = {
+      result = {
         _id: generateContextId(),
         name,
         type
       }
     }
-    dispatch('change', step)
+    dispatch('change', result)
   }
 
   function getTypes (): DropdownIntlItem[] {
@@ -91,9 +91,9 @@
   }
 
   function handleNameChange (e: any): void {
-    if (step.result != null) {
-      step.result.name = name
-      dispatch('change', step)
+    if (result != null) {
+      result.name = name
+      dispatch('change', result)
     }
   }
 
@@ -110,7 +110,7 @@
 <div class="grid">
   <Label label={plugin.string.Result} />
   <Toggle
-    on={step.result !== undefined}
+    on={result != null}
     on:change={(e) => {
       changeRequired(e.detail)
     }}
@@ -150,14 +150,12 @@
 <style lang="scss">
   .grid {
     display: grid;
-    grid-template-columns: 1fr 1.5fr;
+    grid-template-columns: 1fr 3fr;
     grid-auto-rows: minmax(2rem, max-content);
     justify-content: start;
     align-items: center;
     row-gap: 0.5rem;
     column-gap: 1rem;
-    margin: 0.25rem 2rem 0;
-    width: calc(100% - 4rem);
     height: min-content;
   }
 </style>

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

@@ -36,13 +36,6 @@
   }
 
   const keys = ['title', 'user', 'dueDate']
-
-  function changeResult (e: CustomEvent<any>): void {
-    if (e.detail !== undefined) {
-      step = e.detail
-      dispatch('change', step)
-    }
-  }
 </script>
 
 <ParamsEditor _class={plugin.class.ProcessToDo} {process} {keys} {params} on:change={changeParams} />
@@ -60,10 +53,6 @@
     }}
   />
 </div>
-<div class="divider" />
-{#key step._id}
-  <ResultEditor {step} on:change={changeResult} />
-{/key}
 
 <style lang="scss">
   .divider {

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

@@ -14,23 +14,32 @@
 -->
 
 <script lang="ts">
-  import { Process } from '@hcengineering/process'
+  import { Process, TriggerResult } from '@hcengineering/process'
   import { Label } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../../plugin'
   import ToDoContextSelector from '../contextEditors/ToDoContextSelector.svelte'
+  import ResultEditor from './ResultEditor.svelte'
 
   export let readonly: boolean
   export let process: Process
   export let params: Record<string, any>
   export let skipRollback: boolean = false
+  export let result: TriggerResult | null = null
 
   const dispatch = createEventDispatcher()
 
   function change (e: CustomEvent<string>): void {
     if (readonly || e.detail == null) return
     params._id = e.detail
-    dispatch('change', params)
+    dispatch('change', { params })
+  }
+
+  function changeResult (e: CustomEvent<any>): void {
+    if (e.detail !== undefined) {
+      result = e.detail
+      dispatch('change', { result })
+    }
   }
 </script>
 
@@ -38,8 +47,17 @@
   <Label label={plugin.string.ToDo} />
   <ToDoContextSelector {readonly} {skipRollback} {process} value={params._id} on:change={change} />
 </div>
+{#if !skipRollback}
+  <div class="divider" />
+  <ResultEditor {result} on:change={changeResult} />
+{/if}
 
 <style lang="scss">
+  .divider {
+    border-bottom: 1px solid var(--divider-color);
+    margin: 1rem 0;
+  }
+
   .grid {
     display: grid;
     grid-template-columns: 1fr 3fr;

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

@@ -14,7 +14,7 @@
 -->
 
 <script lang="ts">
-  import { parseContext, Process, SelectedContext, SelectedExecutonContext } from '@hcengineering/process'
+  import { parseContext, Process, SelectedContext, SelectedExecutionContext } from '@hcengineering/process'
   import ui, { Label } from '@hcengineering/ui'
   import ExecutionContextPresenter from '../attributeEditors/ExecutionContextPresenter.svelte'
 
@@ -23,7 +23,7 @@
 
   $: context = getContext(params._id)
 
-  function getContext (value: string | undefined): SelectedExecutonContext | undefined {
+  function getContext (value: string | undefined): SelectedExecutionContext | undefined {
     if (value === undefined) return
     const context = parseContext(value)
     if (context !== undefined && isExecutionContext(context)) {
@@ -31,7 +31,7 @@
     }
   }
 
-  function isExecutionContext (context: SelectedContext): context is SelectedExecutonContext {
+  function isExecutionContext (context: SelectedContext): context is SelectedExecutionContext {
     return context.type === 'context'
   }
 </script>