Multiple user request input (#10367)

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

plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { Employee } from '@hcengineering/contact'
-  import { Ref } from '@hcengineering/core'
+  import core, { AccountUuid, AnyAttribute, DocumentQuery, notEmpty, Ref, Space } from '@hcengineering/core'
   import { ButtonKind, IconSize } from '@hcengineering/ui'
-  import { PersonLabelTooltip } from '..'
+  import { employeeRefByAccountUuidStore, PersonLabelTooltip } from '..'
   import contact from '../plugin'
   import { employeeByIdStore } from '../utils'
   import AssigneeBox from './AssigneeBox.svelte'
   import EmployeePresenter from './EmployeePresenter.svelte'
+  import { getClient } from '@hcengineering/presentation'
 
   export let value: Ref<Employee> | null | undefined
   export let kind: ButtonKind = 'link'
@@ -18,6 +19,8 @@
   export let shouldShowName: boolean = true
   export let avatarSize: IconSize = kind === 'list-header' ? 'smaller' : 'x-small'
   export let readonly = false
+  export let attribute: AnyAttribute | undefined = undefined
+  export let space: Ref<Space> | undefined = undefined
 
   $: employee = value ? $employeeByIdStore.get(value) : undefined
 
@@ -30,6 +33,51 @@
     }
     return employee
   }
+
+  let query: DocumentQuery<Employee> = {
+    active: true
+  }
+
+  const client = getClient()
+
+  $: buildQuery(attribute, space)
+
+  async function buildQuery (attribute: AnyAttribute | undefined, space: Ref<Space> | undefined): Promise<void> {
+    const baseQuery = {
+      active: true
+    }
+    if (attribute === undefined || space === undefined) {
+      query = baseQuery
+      return
+    }
+    if (attribute.spaceMembersOnly === true || attribute.byRole !== undefined) {
+      const _space = await client.findOne(core.class.Space, {
+        _id: space
+      })
+      if (_space === undefined) {
+        query = baseQuery
+        return
+      }
+
+      if (attribute.byRole === undefined) {
+        const allMembers = _space.members ?? []
+        const allPersonsSet = new Set(allMembers.map((p) => $employeeRefByAccountUuidStore.get(p)).filter(notEmpty))
+
+        query = {
+          ...baseQuery,
+          _id: { $in: Array.from(allPersonsSet) }
+        }
+      } else {
+        const asMixin = client.getHierarchy().as(_space, core.mixin.SpacesTypeData)
+        const roleMembers = ((asMixin as any)[attribute.byRole] ?? []) as AccountUuid[]
+        const rolePersons = new Set(roleMembers.map((p) => $employeeRefByAccountUuidStore.get(p)).filter(notEmpty))
+        query = {
+          ...baseQuery,
+          _id: { $in: Array.from(rolePersons) }
+        }
+      }
+    }
+  }
 </script>
 
 {#if onChange !== undefined}
@@ -39,6 +87,7 @@
     {value}
     size={'medium'}
     kind={'link'}
+    docQuery={query}
     showNavigate={false}
     justify={'left'}
     {shouldShowName}

plugins/contact-resources/src/components/EmployeeRefPresenter.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Employee } from '@hcengineering/contact'
-  import { Ref } from '@hcengineering/core'
+  import { AnyAttribute, Ref, Space } from '@hcengineering/core'
   import { ButtonKind, IconSize } from '@hcengineering/ui'
   import { PersonLabelTooltip } from '..'
   import EmployeeAttributePresenter from './EmployeeAttributePresenter.svelte'
@@ -15,6 +15,8 @@
   export let shouldShowName: boolean = true
   export let avatarSize: IconSize = kind === 'regular' ? 'small' : 'card'
   export let readonly = false
+  export let attribute: AnyAttribute | undefined = undefined
+  export let space: Ref<Space> | undefined = undefined
 </script>
 
 {#if Array.isArray(value)}
@@ -31,6 +33,8 @@
         {shouldShowName}
         {avatarSize}
         {readonly}
+        {attribute}
+        {space}
         on:accent-color
       />
     {/each}
@@ -47,6 +51,8 @@
     {shouldShowName}
     {avatarSize}
     {readonly}
+    {attribute}
+    {space}
     on:accent-color
   />
 {/if}

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

@@ -13,65 +13,27 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { AnyAttribute, Class, Doc, generateId, Ref, RefTo } from '@hcengineering/core'
-  import presentation, { Card, findAttributeEditor, getClient } from '@hcengineering/presentation'
-  import { Process, Transition } from '@hcengineering/process'
-  import { AnyComponent, Component, Label } from '@hcengineering/ui'
-  import view from '@hcengineering/view'
+  import { Ref, Space } from '@hcengineering/core'
+  import presentation, { Card, getClient } from '@hcengineering/presentation'
+  import { ExecutionContext, Process, SelectedUserRequest, Transition } from '@hcengineering/process'
+  import { Label } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../../plugin'
   import TransitionPresenter from '../settings/TransitionPresenter.svelte'
+  import RequestUserInputAttribute from './RequestUserInputAttribute.svelte'
 
   export let processId: Ref<Process>
+  export let space: Ref<Space>
   export let transition: Ref<Transition>
-  export let key: string
-  export let _class: Ref<Class<Doc>>
-  export let value: any | undefined = undefined
+  export let inputs: SelectedUserRequest[]
+  export let values: ExecutionContext
 
   const dispatch = createEventDispatcher()
   const client = getClient()
-  const hierarchy = client.getHierarchy()
   const model = client.getModel()
-  const attribute = hierarchy.findAttribute(_class, key) ?? (key === '' ? mockAttribute(_class) : undefined)
-
-  function mockAttribute (_class: Ref<Class<Doc>>): AnyAttribute {
-    const type: RefTo<Doc> = {
-      label: core.string.Ref,
-      _class: core.class.RefTo,
-      to: _class
-    }
-    return {
-      attributeOf: _class,
-      name: '',
-      type,
-      _id: generateId(),
-      space: core.space.Model,
-      modifiedOn: 0,
-      modifiedBy: core.account.System,
-      _class: core.class.Attribute,
-      label: core.string.Object
-    }
-  }
 
   function save (): void {
-    dispatch('close', { value })
-  }
-
-  let editor: AnyComponent | undefined
-
-  function getEditor (_class: Ref<Class<Doc>>, key: string): void {
-    if (key === '' || key === '_id') {
-      const mixin = hierarchy.classHierarchyMixin(_class, view.mixin.AttributeEditor)
-      if (mixin?.inlineEditor !== undefined) {
-        editor = mixin.inlineEditor
-        return
-      }
-    }
-    editor = findAttributeEditor(client, _class, key)
-  }
-
-  function onChange (val: any | undefined): void {
-    value = val
+    dispatch('close', { value: values })
   }
 
   export function canClose (): boolean {
@@ -80,13 +42,11 @@
 
   const transitionVal = model.findObject(transition)
   const processVal = model.findObject(processId)
-
-  $: getEditor(_class, key)
 </script>
 
 <Card
   on:close
-  width={'menu'}
+  width={'small'}
   label={plugin.string.EnterValue}
   canSave
   okAction={save}
@@ -101,27 +61,30 @@
   {#if transitionVal}
     <TransitionPresenter transition={transitionVal} />
   {/if}
-  {#if attribute}
-    <Label label={attribute.label} />:
-  {/if}
-  {#if editor}
-    <div class="w-full mt-2">
-      <Component
-        is={editor}
-        props={{
-          label: attribute?.label,
-          placeholder: attribute?.label,
-          kind: 'ghost',
-          size: 'large',
-          width: '100%',
-          justify: 'left',
-          type: attribute?.type,
-          showNavigate: false,
-          value,
-          onChange,
-          focus
+  <div class="grid">
+    {#each inputs as input}
+      <RequestUserInputAttribute
+        key={input.key}
+        _class={input._class}
+        {space}
+        on:change={(e) => {
+          values[input.id] = e.detail
         }}
       />
-    </div>
-  {/if}
+    {/each}
+  </div>
 </Card>
+
+<style lang="scss">
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    grid-auto-rows: minmax(2rem, max-content);
+    justify-content: start;
+    align-items: center;
+    row-gap: 0.5rem;
+    column-gap: 1rem;
+    width: calc(100% - 4rem);
+    height: min-content;
+  }
+</style>

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

@@ -0,0 +1,98 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import core, { AnyAttribute, Class, Doc, generateId, Ref, RefTo, Space } from '@hcengineering/core'
+  import { findAttributeEditor, getClient } from '@hcengineering/presentation'
+  import { AnyComponent, Component, Label } from '@hcengineering/ui'
+  import view from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+
+  export let key: string
+  export let _class: Ref<Class<Doc>>
+  export let value: any | undefined = undefined
+  export let space: Ref<Space>
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+  const attribute = hierarchy.findAttribute(_class, key) ?? (key === '' ? mockAttribute(_class) : undefined)
+
+  function mockAttribute (_class: Ref<Class<Doc>>): AnyAttribute {
+    const type: RefTo<Doc> = {
+      label: core.string.Ref,
+      _class: core.class.RefTo,
+      to: _class
+    }
+    return {
+      attributeOf: _class,
+      name: '',
+      type,
+      _id: generateId(),
+      space: core.space.Model,
+      modifiedOn: 0,
+      modifiedBy: core.account.System,
+      _class: core.class.Attribute,
+      label: core.string.Object
+    }
+  }
+
+  let editor: AnyComponent | undefined
+
+  function getEditor (_class: Ref<Class<Doc>>, key: string): void {
+    if (key === '' || key === '_id') {
+      const mixin = hierarchy.classHierarchyMixin(_class, view.mixin.AttributeEditor)
+      if (mixin?.inlineEditor !== undefined) {
+        editor = mixin.inlineEditor
+        return
+      }
+    }
+    editor = findAttributeEditor(client, _class, key)
+  }
+
+  const dispatch = createEventDispatcher()
+  function onChange (val: any | undefined): void {
+    value = val
+    dispatch('change', val)
+  }
+
+  $: getEditor(_class, key)
+</script>
+
+{#if attribute}
+  <div>
+    <Label label={attribute.label} />:
+  </div>
+{/if}
+{#if editor}
+  <div class="w-full">
+    <Component
+      is={editor}
+      props={{
+        label: attribute?.label,
+        placeholder: attribute?.label,
+        kind: 'ghost',
+        size: 'large',
+        width: '100%',
+        justify: 'left',
+        type: attribute?.type,
+        showNavigate: false,
+        value,
+        attribute,
+        space,
+        onChange,
+        focus
+      }}
+    />
+  </div>
+{/if}

plugins/process-resources/src/utils.ts

@@ -420,7 +420,7 @@ export async function continueExecution (value: Execution): Promise<void> {
   let context = value.context
   const transition = value.error[0].transition
   if (transition == null) {
-    const res = await newExecutionUserInput(value.process, context)
+    const res = await newExecutionUserInput(value.process, value.space, context)
     context = res ?? context
   } else {
     const _transition = client.getModel().findObject(transition)
@@ -433,14 +433,15 @@ export async function continueExecution (value: Execution): Promise<void> {
 
 export async function requestUserInput (
   processId: Ref<Process>,
+  space: Ref<Space>,
   target: Transition,
   userContext: ExecutionContext
 ): Promise<ExecutionContext | undefined> {
-  const tr = await getTransitionUserInput(processId, target, userContext)
+  const tr = await getTransitionUserInput(processId, space, target, userContext)
   if (tr !== undefined) {
     userContext = { ...userContext, ...tr }
   }
-  const sub = await getSubProcessesUserInput(target, userContext)
+  const sub = await getSubProcessesUserInput(space, target, userContext)
   if (sub !== undefined) {
     userContext = { ...userContext, ...sub }
   }
@@ -449,39 +450,46 @@ export async function requestUserInput (
 
 export async function getTransitionUserInput (
   processId: Ref<Process>,
+  space: Ref<Space>,
   transition: Transition,
   userContext: ExecutionContext
 ): Promise<ExecutionContext | undefined> {
   let changed = false
   for (const action of transition.actions) {
     if (action == null) continue
+    const inputs: SelectedUserRequest[] = []
     for (const key in action.params) {
       const value = (action.params as any)[key]
       const context = parseContext(value)
       if (context !== undefined && context.type === 'userRequest') {
-        const promise = new Promise<void>((resolve) => {
-          showPopup(
-            process.component.RequestUserInput,
-            {
-              processId,
-              transition: transition._id,
-              key: context.key,
-              _class: context._class,
-              value: userContext[context.id]
-            },
-            undefined,
-            (res) => {
-              if (res?.value !== undefined) {
-                changed = true
-                userContext[context.id] = res.value
-              }
-              resolve()
-            }
-          )
-        })
-        await promise
+        inputs.push(context)
       }
     }
+    if (inputs.length > 0) {
+      const promise = new Promise<void>((resolve) => {
+        showPopup(
+          process.component.RequestUserInput,
+          {
+            processId,
+            transition: transition._id,
+            space,
+            inputs,
+            values: {}
+          },
+          undefined,
+          (res) => {
+            if (res?.value !== undefined) {
+              changed = true
+              for (const [key, value] of Object.entries(res.value)) {
+                userContext[key as ContextId] = value
+              }
+            }
+            resolve()
+          }
+        )
+      })
+      await promise
+    }
   }
   return changed ? userContext : undefined
 }
@@ -492,6 +500,7 @@ function getEmptyContext (): ExecutionContext {
 }
 
 export async function getSubProcessesUserInput (
+  space: Ref<Space>,
   transition: Transition,
   userContext: ExecutionContext
 ): Promise<ExecutionContext | undefined> {
@@ -501,7 +510,7 @@ export async function getSubProcessesUserInput (
     const processId = action.params._id as Ref<Process>
     if (processId === undefined) continue
     const context = action.params.context ?? getEmptyContext()
-    const res = await newExecutionUserInput(processId, context)
+    const res = await newExecutionUserInput(processId, space, context)
     if (action.context == null || res === undefined) continue
     userContext[action.context._id] = res
     changed = true
@@ -511,6 +520,7 @@ export async function getSubProcessesUserInput (
 
 export async function newExecutionUserInput (
   _id: Ref<Process>,
+  space: Ref<Space>,
   userContext?: ExecutionContext
 ): Promise<ExecutionContext | undefined> {
   const client = getClient()
@@ -519,7 +529,7 @@ export async function newExecutionUserInput (
     from: null
   })[0]
   if (initTransition === undefined) return userContext
-  return await requestUserInput(_id, initTransition, userContext ?? getEmptyContext())
+  return await requestUserInput(_id, space, initTransition, userContext ?? getEmptyContext())
 }
 
 export async function getNextStateUserInput (
@@ -530,13 +540,13 @@ export async function getNextStateUserInput (
   const client = getClient()
   const process = client.getModel().findObject(execution.process)
   if (process === undefined) return userContext
-  return await requestUserInput(execution.process, transition, userContext)
+  return await requestUserInput(execution.process, execution.space, transition, userContext)
 }
 
 export async function createExecution (card: Ref<Card>, _id: Ref<Process>, space: Ref<Space>): Promise<void> {
   const client = getClient()
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  const context = await newExecutionUserInput(_id)
+  const context = await newExecutionUserInput(_id, space)
   const _process = client.getModel().findObject(_id)
   if (_process === undefined) return
   const initTransition = client.getModel().findAllSync(process.class.Transition, {