Fix process ui (#9898)

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

plugins/process-resources/src/components/contextEditors/ProcessContextPresenter.svelte

@@ -13,13 +13,15 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { ProcessContext } from '@hcengineering/process'
+  import { ProcessContextView } from '../../types'
   import ProcessContextRawPresenter from './ProcessContextRawPresenter.svelte'
 
-  export let context: ProcessContext
+  export let context: ProcessContextView
 </script>
 
-{context.index}:
+{#if context.index !== undefined}
+  {context.index}:
+{/if}
 {#if context.name !== undefined && context.name !== ''}
   {context.name}
 {:else}

plugins/process-resources/src/components/contextEditors/ProcessContextRawPresenter.svelte

@@ -14,10 +14,10 @@
 -->
 <script lang="ts">
   import { getClient } from '@hcengineering/presentation'
-  import { ProcessContext } from '@hcengineering/process'
   import { Label } from '@hcengineering/ui'
+  import { ProcessContextView } from '../../types'
 
-  export let context: ProcessContext
+  export let context: ProcessContextView
 
   const client = getClient()
   const hierarchy = client.getHierarchy()

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

@@ -93,28 +93,30 @@
   }
 </script>
 
-<div class="editor-grid">
-  <span
-    class="labelOnPanel"
-    use:tooltip={{
-      props: { label: cardPlugin.string.Tag }
-    }}
-  >
-    <Label label={cardPlugin.string.Tag} />
-  </span>
-  <TagSelector {process} tag={_id} on:change={changeTag} />
-</div>
-<ParamsEditor
-  {process}
-  _class={_id}
-  allowRemove
-  bind:params={props}
-  {keys}
-  on:change={change}
-  on:remove={removeParam}
-/>
-{#if possibleAttrs.length > 0}
-  <div class="flex-center">
-    <Button label={presentation.string.Add} width={'100%'} kind={'link-bordered'} size={'large'} on:click={onAdd} />
+<div class="flex-col flex-gap-2">
+  <div class="editor-grid">
+    <span
+      class="labelOnPanel"
+      use:tooltip={{
+        props: { label: cardPlugin.string.Tag }
+      }}
+    >
+      <Label label={cardPlugin.string.Tag} />
+    </span>
+    <TagSelector {process} tag={_id} on:change={changeTag} />
   </div>
-{/if}
+  <ParamsEditor
+    {process}
+    _class={_id}
+    allowRemove
+    bind:params={props}
+    {keys}
+    on:change={change}
+    on:remove={removeParam}
+  />
+  {#if possibleAttrs.length > 0}
+    <div class="flex-center mx-8">
+      <Button label={presentation.string.Add} width={'100%'} kind={'link-bordered'} size={'large'} on:click={onAdd} />
+    </div>
+  {/if}
+</div>

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

@@ -16,9 +16,9 @@
 <script lang="ts">
   import { Doc, Ref } from '@hcengineering/core'
   import presentation, { getClient } from '@hcengineering/presentation'
-  import { Process, Transition, type Step } from '@hcengineering/process'
+  import { Method, Process, Transition, type Step } from '@hcengineering/process'
   import { clearSettingsStore } from '@hcengineering/setting-resources'
-  import { ButtonIcon, IconDelete, Modal } from '@hcengineering/ui'
+  import { ButtonIcon, IconDelete, Label, Modal } from '@hcengineering/ui'
   import plugin from '../../plugin'
   import StepEditor from './StepEditor.svelte'
   import ContextFooter from './ContextFooter.svelte'
@@ -30,6 +30,16 @@
 
   const client = getClient()
 
+  $: method = getMethod(step.methodId)
+
+  function getMethod (_id: Ref<Method<Doc>>): Method<Doc> {
+    if (method?._id !== _id) {
+      const res = client.getModel().findAllSync(plugin.class.Method, { _id })[0]
+      return res
+    }
+    return method
+  }
+
   async function save (): Promise<void> {
     const doc = client.getModel().findObject(_id)
     if (doc === undefined) return
@@ -56,7 +66,6 @@
 </script>
 
 <Modal
-  label={plugin.string.Step}
   type={'type-aside'}
   okLabel={presentation.string.Save}
   okAction={save}
@@ -69,10 +78,17 @@
       <ButtonIcon icon={IconDelete} size={'small'} kind={'tertiary'} on:click={remove} />
     {/if}
   </svelte:fragment>
-  {#if step != null}
-    <StepEditor {step} {process} on:change={change} />
-  {/if}
+  <div class="fs-title title text-xl" slot="title">
+    <Label label={method.label} />
+  </div>
+  <StepEditor {step} {process} on:change={change} />
   <div slot="footer" class="flex-row-center flex-gap-2 w-full">
     <ContextFooter {process} {step} />
   </div>
 </Modal>
+
+<style lang="scss">
+  .title {
+    padding-left: 2rem;
+  }
+</style>

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

@@ -93,14 +93,10 @@
 
 <style lang="scss">
   .header {
-    padding: 1rem 1.25rem 2rem 1.25rem;
+    padding-left: 2rem;
   }
 
   .editor {
     margin: 0.25rem 2rem 0;
   }
-
-  .title {
-    padding-bottom: 1rem;
-  }
 </style>

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

@@ -16,31 +16,46 @@
 <script lang="ts">
   import { Doc } from '@hcengineering/core'
   import { Process, Step } from '@hcengineering/process'
-  import { Label } from '@hcengineering/ui'
+  import { Label, Scroller } from '@hcengineering/ui'
   import processPlugin from '../../plugin'
   import ProcessContextPresenter from '../contextEditors/ProcessContextPresenter.svelte'
+  import { ProcessContextView } from '../../types'
 
   export let process: Process
   export let step: Step<Doc>
 
   $: currentContext = step.context ? process.context[step.context._id] : undefined
 
+  let resultContext: ProcessContextView[] = []
   $: resultContext =
-    step.results != null ? step.results.map((r) => process.context[r._id]).filter((ctx) => ctx != null) : []
+    step.results != null
+      ? step.results.map((r) => {
+        const exists = process.context[r._id]
+        if (exists != null) return exists
+        return {
+          name: r.name,
+          _class: r.type._class
+        }
+      })
+      : []
 </script>
 
 {#if currentContext || resultContext.length > 0}
-  <Label label={processPlugin.string.Result} />:
-  {#if currentContext}
-    <div class="container">
-      <ProcessContextPresenter context={currentContext} />
+  <Scroller horizontal>
+    <div class="flex-row-center flex-gap-2">
+      <Label label={processPlugin.string.Result} />:
+      {#if currentContext}
+        <div class="container">
+          <ProcessContextPresenter context={currentContext} />
+        </div>
+      {/if}
+      {#each resultContext as ctx}
+        <div class="container">
+          <ProcessContextPresenter context={ctx} />
+        </div>
+      {/each}
     </div>
-  {/if}
-  {#each resultContext as ctx}
-    <div class="container">
-      <ProcessContextPresenter context={ctx} />
-    </div>
-  {/each}
+  </Scroller>
 {/if}
 
 <style lang="scss">

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

@@ -32,12 +32,7 @@
 </script>
 
 {#if visibleSecondNav}
-  <div class="hulyComponent-content__column">
-    <div class="hulyComponent-content__navHeader">
-      <div class="hulyComponent-content__navHeader-menu">
-        <ButtonIcon kind="tertiary" icon={IconDescription} size="small" inheritColor />
-      </div>
-    </div>
+  <div class="hulyComponent-content__column pt-4">
     {#each states as state (state._id)}
       <div class="state">
         {state.title}

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

@@ -144,7 +144,13 @@
       <Scroller align="center" padding="var(--spacing-3)" bottomPadding="var(--spacing-3)">
         <div class="hulyComponent-content gap">
           <div class="header flex-between">
-            <EditBox bind:value={value.name} on:change={saveName} placeholder={process.string.Untitled} />
+            <EditBox
+              bind:value={value.name}
+              kind="modern-ghost-large"
+              on:change={saveName}
+              required
+              placeholder={process.string.Untitled}
+            />
             <div class="flex-row-center flex-gap-2">
               <ButtonIcon icon={IconSettings} size="small" kind="secondary" on:click={handleSettings} />
               <ButtonIcon

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

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Process, UserResult } from '@hcengineering/process'
-  import { Button } from '@hcengineering/ui'
+  import { Button, Label } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../../plugin'
   import ResultEditor from './ResultEditor.svelte'
@@ -47,18 +47,23 @@
   }
 </script>
 
-{#each items as item, i}
-  <ResultEditor
-    {process}
-    result={item}
-    on:change={(e) => {
-      handleChange(e, i)
-    }}
-    on:remove={() => {
-      remove(i)
-    }}
-  />
-{/each}
-<div class="flex-center mt-4">
-  <Button label={plugin.string.AddResult} width={'100%'} kind={'link-bordered'} size={'large'} on:click={onAdd} />
+<div class="mx-8 fs-title">
+  <Label label={plugin.string.Result} />:
+</div>
+<div class="flex-col flex-gap-2">
+  {#each items as item, i}
+    <ResultEditor
+      {process}
+      result={item}
+      on:change={(e) => {
+        handleChange(e, i)
+      }}
+      on:remove={() => {
+        remove(i)
+      }}
+    />
+  {/each}
+  <div class="flex-center mx-8">
+    <Button label={plugin.string.AddResult} width={'100%'} kind={'link-bordered'} size={'large'} on:click={onAdd} />
+  </div>
 </div>

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

@@ -22,7 +22,6 @@
 
   export let step: Step<Doc>
   export let process: Process
-  export let withoutHeader: boolean = false
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -45,30 +44,8 @@
 
 {#if method !== undefined}
   <div class="content clear-mins">
-    {#if !withoutHeader}
-      <div class="header">
-        <div class="fs-title title text-xl">
-          <Label label={method.label} />
-        </div>
-        {#if method.description}
-          <div class="descr">
-            <Label label={method.description} />
-          </div>
-        {/if}
-      </div>
-    {/if}
     {#if method.editor !== undefined}
       <Component is={method.editor} props={{ step, process }} on:change={change} />
     {/if}
   </div>
 {/if}
-
-<style lang="scss">
-  .header {
-    padding: 1rem 1.25rem 2rem 1.25rem;
-  }
-
-  .title {
-    padding-bottom: 1rem;
-  }
-</style>