Skip to content

Commit f080dfb

Browse files
BykhovDenisBykhovDenis
authored
Processes ui improvements (#9589)
Signed-off-by: Denis Bykhov <[email protected]>
1 parent 8fef0d7 commit f080dfb

File tree

13 files changed

+145
-45
lines changed

13 files changed

+145
-45
lines changed

‎models/process/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ export class TProcessFunction extends TDoc implements ProcessFunction {
220220
category: AttributeCategory | undefined
221221
label!: IntlString
222222
editor?: AnyComponent
223+
presenter?: AnyComponent
223224
allowMany?: boolean
224225
type!: 'transform' | 'reduce' | 'context'
225226
}

‎plugins/process-resources/src/components/ProcessAttribute.svelte

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
>
8383
<Label label={attribute.label} />
8484
</span>
85-
<div class="text-input" class:context={contextValue}>
85+
<div class="text-input">
8686
{#if contextValue}
8787
<ContextValue
8888
{process}
@@ -110,6 +110,7 @@
110110
width={'100%'}
111111
justify={'left'}
112112
type={attribute?.type}
113+
showNavigate={false}
113114
{value}
114115
{onChange}
115116
{focus}
@@ -152,11 +153,5 @@
152153
.button {
153154
flex-shrink: 0;
154155
}
155-
156-
&.context {
157-
background: #3575de33;
158-
padding-left: 0.75rem;
159-
border-color: var(--primary-button-default);
160-
}
161156
}
162157
</style>

‎plugins/process-resources/src/components/attributeEditors/ContextValue.svelte

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
import { MasterTag, Tag } from '@hcengineering/card'
1717
import { AnyAttribute, Class, Doc, Ref } from '@hcengineering/core'
1818
import { Context, Process, SelectedContext } from '@hcengineering/process'
19-
import { eventToHTMLElement, showPopup } from '@hcengineering/ui'
19+
import { Button, eventToHTMLElement, showPopup } from '@hcengineering/ui'
2020
import { AttributeCategory } from '@hcengineering/view'
2121
import { createEventDispatcher } from 'svelte'
2222
import ConfigurePopup from './ConfigurePopup.svelte'
@@ -58,9 +58,22 @@
5858
</script>
5959

6060
{#if configurable}
61-
<button on:click={configure}>
62-
<ContextValuePresenter {contextValue} {context} {process} />
63-
</button>
61+
<Button kind={'ghost'} on:click={configure} width={'100%'} shrink={1} justify={'left'} padding={'0.25rem'}>
62+
<svelte:fragment slot="content">
63+
<ContextValuePresenter {contextValue} {context} {process} />
64+
</svelte:fragment>
65+
</Button>
6466
{:else}
65-
<ContextValuePresenter {contextValue} {context} {process} />
67+
<div class="container">
68+
<ContextValuePresenter {contextValue} {context} {process} />
69+
</div>
6670
{/if}
71+
72+
<style>
73+
.container {
74+
display: flex;
75+
align-items: center;
76+
width: 100%;
77+
padding: 0.25rem;
78+
}
79+
</style>

‎plugins/process-resources/src/components/attributeEditors/ContextValuePresenter.svelte

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,32 @@
2121
import RelContextPresenter from './RelContextPresenter.svelte'
2222
import FunctionContextPresenter from './FunctionContextPresenter.svelte'
2323
import ExecutionContextPresenter from './ExecutionContextPresenter.svelte'
24+
import FunctionPresenter from './FunctionPresenter.svelte'
2425
2526
export let process: Process
2627
export let contextValue: SelectedContext
2728
export let context: Context
2829
</script>
2930

3031
<div class="container flex-row-center">
31-
{#if contextValue.type === 'attribute'}
32-
<AttrContextPresenter {contextValue} {context} />
33-
{:else if contextValue.type === 'relation'}
34-
<RelContextPresenter {contextValue} {context} />
35-
{:else if contextValue.type === 'nested'}
36-
<NestedContextPresenter {contextValue} {context} />
37-
{:else if contextValue.type === 'userRequest'}
38-
<Label label={plugin.string.RequestFromUser} />
39-
{:else if contextValue.type === 'function'}
40-
<FunctionContextPresenter {contextValue} {context} />
41-
{:else if contextValue.type === 'context'}
42-
<ExecutionContextPresenter {contextValue} {process} />
43-
{/if}
32+
<div class="internal">
33+
{#if contextValue.type === 'attribute'}
34+
<AttrContextPresenter {contextValue} {context} />
35+
{:else if contextValue.type === 'relation'}
36+
<RelContextPresenter {contextValue} {context} />
37+
{:else if contextValue.type === 'nested'}
38+
<NestedContextPresenter {contextValue} {context} />
39+
{:else if contextValue.type === 'userRequest'}
40+
<Label label={plugin.string.RequestFromUser} />
41+
{:else if contextValue.type === 'function'}
42+
<FunctionContextPresenter {contextValue} {context} />
43+
{:else if contextValue.type === 'context'}
44+
<ExecutionContextPresenter {contextValue} {process} />
45+
{/if}
46+
</div>
47+
{#each contextValue.functions ?? [] as func}
48+
<FunctionPresenter value={func} {context} {process} />
49+
{/each}
4450
</div>
4551

4652
<style lang="scss">
@@ -49,5 +55,11 @@
4955
white-space: nowrap;
5056
text-overflow: ellipsis;
5157
color: var(--theme-caption-color);
58+
background: #3575de33;
59+
border-radius: 0.25rem;
60+
61+
.internal {
62+
padding: 0.125rem 0.25rem;
63+
}
5264
}
5365
</style>

‎plugins/process-resources/src/components/attributeEditors/FunctionPresenter.svelte

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!--
2+
// Copyright © 2025 Hardcore Engineering Inc.
3+
//
4+
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License. You may
6+
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
7+
//
8+
// Unless required by applicable law or agreed to in writing, software
9+
// distributed under the License is distributed on an "AS IS" BASIS,
10+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
//
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
-->
15+
<script lang="ts">
16+
import { getClient } from '@hcengineering/presentation'
17+
import { Context, Func, Process } from '@hcengineering/process'
18+
import { Component, Label } from '@hcengineering/ui'
19+
20+
export let value: Func
21+
export let process: Process
22+
export let context: Context
23+
24+
const client = getClient()
25+
$: func = client.getModel().findObject(value.func)
26+
</script>
27+
28+
{#if func !== undefined}
29+
<div class="container">
30+
{#if func.presenter !== undefined}
31+
<Component is={func.presenter} props={{ props: value.props, context, process }} />
32+
{:else}
33+
<Label label={func.label} />
34+
{/if}
35+
</div>
36+
{/if}
37+
38+
<style lang="scss">
39+
.container {
40+
font-size: 0.66rem;
41+
line-height: 0.75rem;
42+
font-style: italic;
43+
padding: 0.25rem 0.125rem;
44+
border-radius: 0.25rem;
45+
color: var(--theme-content-color);
46+
background-color: var(--theme-table-border-color);
47+
}
48+
</style>

‎plugins/process-resources/src/components/attributeEditors/NestedContextPresenter.svelte

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,16 @@
2424
</script>
2525

2626
{#if relation !== undefined && attr}
27-
<Label label={relation.attribute.label} /> > <Label label={attr.label} />
27+
<Label label={relation.attribute.label} />
28+
<span class="attr">
29+
<Label label={attr.label} />
30+
</span>
2831
{/if}
32+
33+
<style lang="scss">
34+
.attr {
35+
padding: 0.125rem 0.25rem;
36+
border-radius: 0.25rem;
37+
background-color: var(--theme-toggle-bg-color);
38+
}
39+
</style>

‎plugins/process-resources/src/components/attributeEditors/RelContextPresenter.svelte

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,16 @@
2626
{#if contextValue.key === '_id'}
2727
{relation.name}
2828
{:else if relation !== undefined && attr}
29-
{relation.name} > <Label label={attr.label} />
29+
{relation.name}
30+
<span class="attr">
31+
<Label label={attr.label} />
32+
</span>
3033
{/if}
34+
35+
<style lang="scss">
36+
.attr {
37+
padding: 0.125rem 0.25rem;
38+
border-radius: 0.25rem;
39+
background-color: var(--theme-navpanel-color);
40+
}
41+
</style>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
export let context: ProcessContext
2020
</script>
2121

22-
{context.index} ->
22+
{context.index}:
2323
{#if context.name !== undefined && context.name !== ''}
2424
{context.name}
2525
{:else}

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,6 @@
2626
$: _class = hierarchy.findClass(context._class)
2727
</script>
2828

29-
{#if context.isResult}
30-
<Label label={process.string.Result} />:
31-
{/if}
3229
{#if _class?.label !== undefined}
3330
<Label label={_class.label} />
3431
{/if}

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

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,13 @@
4141
4242
let fromState: ListItem | undefined
4343
44-
$: from = fromState?._id as Ref<State>
44+
$: from = (fromState?._id as Ref<State>) ?? null
4545
4646
const client = getClient()
47-
const triggers = client.getModel().findAllSync(plugin.class.Trigger, { init: false })
47+
const withoutFrom =
48+
client.getModel().findAllSync(plugin.class.Transition, { from: null, process: process._id })[0] === undefined
49+
50+
const triggers = client.getModel().findAllSync(plugin.class.Trigger, { init: withoutFrom })
4851
let trigger: Ref<Trigger> = triggers[0]._id
4952
5053
$: triggerValue = triggers.find((t) => t._id === trigger)
@@ -82,14 +85,18 @@
8285
>
8386
<div class="grid">
8487
<Label label={plugin.string.From} />
85-
<Dropdown
86-
items={statesItems}
87-
bind:selected={fromState}
88-
placeholder={plugin.string.From}
89-
justify={'left'}
90-
width={'100%'}
91-
kind={'no-border'}
92-
/>
88+
{#if !withoutFrom}
89+
<Dropdown
90+
items={statesItems}
91+
bind:selected={fromState}
92+
placeholder={plugin.string.From}
93+
justify={'left'}
94+
width={'100%'}
95+
kind={'no-border'}
96+
/>
97+
{:else}
98+
<div>⦳</div>
99+
{/if}
93100
<Label label={plugin.string.To} />
94101
<Dropdown
95102
items={statesItems}

0 commit comments

Comments
 (0)