add AskSubclass option to CreateCard process and implement ClassUserInput component for flexible subclass selection (#10822)

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

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

@@ -0,0 +1,53 @@
+<!--
+// Copyright © 2026 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 { TypeSelector } from '@hcengineering/card-resources'
+  import { Class, Doc, Ref } from '@hcengineering/core'
+  import { getClient } from '@hcengineering/presentation'
+  import { Label } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+
+  export let _class: Ref<Class<Doc>>
+  export let value: any | undefined = undefined
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+  const attribute = hierarchy.findAttribute(_class, '_class')
+
+  const dispatch = createEventDispatcher()
+  function onChange (val: any | undefined): void {
+    value = val
+    dispatch('change', val)
+  }
+</script>
+
+{#if attribute}
+  <div>
+    <Label label={attribute.label} />:
+  </div>
+{/if}
+<div class="w-full">
+  <TypeSelector
+    value={value ?? _class}
+    parent={_class}
+    kind={'ghost'}
+    width={'100%'}
+    on:change={(e) => {
+      if (e.detail !== undefined) {
+        onChange(e.detail)
+      }
+    }}
+  />
+</div>

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

@@ -21,6 +21,7 @@
   import plugin from '../../plugin'
   import TransitionPresenter from '../settings/TransitionPresenter.svelte'
   import RequestUserInputAttribute from './RequestUserInputAttribute.svelte'
+  import ClassUserInput from './ClassUserInput.svelte'
 
   export let processId: Ref<Process>
   export let space: Ref<Space>
@@ -66,16 +67,27 @@
   {/if}
   <div class="grid">
     {#each inputs as input}
-      <RequestUserInputAttribute
-        key={input.key}
-        _class={input._class}
-        {space}
-        value={values[input.id]}
-        on:change={(e) => {
-          values[input.id] = e.detail
-          values = values
-        }}
-      />
+      {#if input.key === '_class'}
+        <ClassUserInput
+          _class={input._class}
+          value={values[input.id]}
+          on:change={(e) => {
+            values[input.id] = e.detail
+            values = values
+          }}
+        />
+      {:else}
+        <RequestUserInputAttribute
+          key={input.key}
+          _class={input._class}
+          {space}
+          value={values[input.id]}
+          on:change={(e) => {
+            values[input.id] = e.detail
+            values = values
+          }}
+        />
+      {/if}
     {/each}
   </div>
 </Card>

plugins/process-resources/src/components/presenters/CreateCardPresenter.svelte

@@ -33,9 +33,8 @@
   $: contextValue = params.title !== undefined ? parseContext(params.title) : undefined
   $: context = getContext(client, process, core.class.TypeString, 'attribute')
 
-  $: _class = params?._class
-    ? (client.getHierarchy().getClass(params._class as Ref<MasterTag>) as MasterTag)
-    : undefined
+  $: target = params?.targetClass ?? params?._class
+  $: _class = target !== undefined ? (client.getHierarchy().getClass(target as Ref<MasterTag>) as MasterTag) : undefined
   $: icon = _class?.icon
 </script>
 

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

@@ -18,10 +18,12 @@
   import core, { AnyAttribute, Class, Ref } from '@hcengineering/core'
   import { translateCB } from '@hcengineering/platform'
   import presentation, { getClient } from '@hcengineering/presentation'
-  import { Process, Step } from '@hcengineering/process'
-  import { Button, eventToHTMLElement, Label, SelectPopup, showPopup, tooltip } from '@hcengineering/ui'
+  import { createContext, Process, Step } from '@hcengineering/process'
+  import { Button, eventToHTMLElement, Label, SelectPopup, showPopup, Toggle, tooltip } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import ParamsEditor from './ParamsEditor.svelte'
+  import plugin from '../../plugin'
+  import { generateContextId } from '../../utils'
 
   export let process: Process
   export let step: Step<Card>
@@ -29,14 +31,16 @@
   const dispatch = createEventDispatcher()
 
   step.params.title = step.params.title ?? ''
+  step.params.targetClass = step.params.targetClass ?? step.params._class ?? process.masterTag
   step.params._class = step.params._class ?? process.masterTag
 
   let params = step.params
 
-  let _class: Ref<Class<MasterTag>> = (params._class as Ref<Class<MasterTag>>) ?? process.masterTag
+  let targetClass: Ref<Class<MasterTag>> =
+    (params.targetClass as Ref<Class<MasterTag>>) ?? (params._class as Ref<Class<MasterTag>>) ?? process.masterTag
 
   const client = getClient()
-  const hierarchy = client.getHierarchy()
+  const h = client.getHierarchy()
 
   translateCB(cardPlugin.string.Card, {}, undefined, (res) => {
     setName(res)
@@ -59,8 +63,8 @@
   }
 
   function getKeys (_class: Ref<Class<MasterTag>>): AnyAttribute[] {
-    const ignoreKeys = ['_class', 'parent', 'attachments', 'todos']
-    const attributes = hierarchy.getAllAttributes(_class, core.class.Doc)
+    const ignoreKeys = ['_class', 'targetClass', 'parent', 'attachments', 'todos']
+    const attributes = h.getAllAttributes(_class, core.class.Doc)
     const res: AnyAttribute[] = []
     for (const [key, attr] of attributes) {
       if (attr.hidden === true) continue
@@ -71,10 +75,10 @@
   }
 
   let keys = Object.keys(params).filter((key) => {
-    return key !== '_class'
+    return key !== '_class' && key !== 'targetClass'
   })
 
-  $: allAttrs = getKeys(_class)
+  $: allAttrs = getKeys(targetClass)
   $: possibleAttrs = allAttrs.filter((attr) => !keys.includes(attr.name))
 
   function addKey (key: string): void {
@@ -112,25 +116,48 @@
 
   function typeChange (_id: Ref<Class<MasterTag>>): void {
     if (_id === undefined) return
-    allAttrs = getKeys(_id)
+    const attrKeys = ['_class', 'targetClass', ...getKeys(_id).map((p) => p.name)]
     const oldParams = { ...params }
     params = {}
-    for (const attr of allAttrs) {
-      const key = attr.name
+    for (const key of attrKeys) {
       if (oldParams[key] !== undefined) {
         ;(params as any)[key] = oldParams[key]
       }
     }
-    keys = Object.keys(params)
-    params._class = _class
+    keys = Object.keys(params).filter((key) => {
+      return key !== '_class' && key !== 'targetClass'
+    })
+    if (params.targetClass !== _id) {
+      params._class = _id
+      params.targetClass = _id
+    }
     step.params = params
     if (step.context != null) {
-      step.context._class = _class
+      step.context._class = _id
     }
+    step = step
     dispatch('change', step)
   }
 
-  $: typeChange(_class)
+  $: typeChange(targetClass)
+
+  $: subclasses = h.getDescendants(targetClass).filter((c) => !h.isMixin(c) && c !== targetClass)
+
+  let askSubclass = params._class !== params.targetClass
+  $: askSubclass = params._class !== params.targetClass
+
+  function changeAskSubclass (e: CustomEvent<boolean>): void {
+    const context = createContext({
+      type: 'userRequest',
+      id: generateContextId(),
+      _class: targetClass,
+      key: '_class'
+    })
+    if (e.detail !== undefined) {
+      step.params._class = e.detail ? context : targetClass
+      dispatch('change', step)
+    }
+  }
 </script>
 
 <div class="grid">
@@ -143,18 +170,31 @@
     <Label label={cardPlugin.string.MasterTag} />
   </span>
   <TypeSelector
-    value={_class}
+    value={targetClass}
     width={'100%'}
     on:change={(e) => {
       if (e.detail !== undefined) {
-        _class = e.detail
+        targetClass = e.detail
       }
     }}
   />
+  {#if subclasses.length > 0}
+    <span
+      class="labelOnPanel"
+      use:tooltip={{
+        props: { label: plugin.string.AskSubclass }
+      }}
+    >
+      <Label label={plugin.string.AskSubclass} />
+    </span>
+    <div>
+      <Toggle on={askSubclass} on:change={changeAskSubclass} />
+    </div>
+  {/if}
 </div>
 <div class="divider" />
-{#key _class}
-  <ParamsEditor {_class} {process} {keys} {params} allowRemove on:remove={remove} on:change={change} />
+{#key targetClass}
+  <ParamsEditor _class={targetClass} {process} {keys} {params} allowRemove on:remove={remove} on:change={change} />
 {/key}
 {#if possibleAttrs.length > 0}
   <div class="flex-center mt-4">

plugins/process-resources/src/plugin.ts

@@ -281,7 +281,8 @@ export default mergeIds(processId, process, {
     DayFromDate: '' as IntlString,
     DateDifference: '' as IntlString,
     TextFromSelect: '' as IntlString,
-    SelectFromText: '' as IntlString
+    SelectFromText: '' as IntlString,
+    AskSubclass: '' as IntlString
   },
   permission: {
     RunProcess: '' as Ref<Permission>,