UBERF-4727 (#4270)

plugins/task-resources/src/components/TypeSelector.svelte

@@ -59,5 +59,5 @@
   />
 {/if}
 {#if !allTypes}
-  <TaskKindSelector {baseClass} projectType={$selectedTypeStore} bind:taskType={$selectedTaskTypeStore} />
+  <TaskKindSelector {baseClass} projectType={$selectedTypeStore} bind:value={$selectedTaskTypeStore} />
 {/if}

plugins/task-resources/src/components/state/TypeStatesPopup.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import core, { IdMap, Ref, Status, StatusCategory, toIdMap } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { ProjectType } from '@hcengineering/task'
+  import { ProjectType, TaskType } from '@hcengineering/task'
   import {
     ColorDefinition,
     getColorNumberByText,
@@ -28,13 +28,24 @@
   import { typeStore } from '../..'
 
   export let space: Ref<ProjectType>
+  export let taskType: TaskType | undefined = undefined
+
+  $: states = getStates($statusStore.byId, type, taskType)
+
+  function getStates (
+    statusStore: IdMap<Status>,
+    type: ProjectType | undefined,
+    taskType: TaskType | undefined
+  ): Status[] {
+    if (type === undefined) return []
+
+    let res = type.statuses.map((p) => statusStore.get(p._id)).filter((p) => p !== undefined) as Status[]
+    if (taskType !== undefined) {
+      res = res.filter((p) => taskType.statuses.includes(p._id))
+    }
+    return res
+  }
 
-  $: states = type
-    ? ($typeStore
-        .get(type._id)
-        ?.statuses?.map((p) => $statusStore.byId.get(p._id))
-        .filter((p) => p !== undefined) as Status[]) ?? []
-    : []
   const dispatch = createEventDispatcher()
 
   function getColor (state: Status, type: ProjectType | undefined, categories: IdMap<StatusCategory>): ColorDefinition {
@@ -51,7 +62,7 @@
   })
 
   let type: ProjectType | undefined = undefined
-  type = $typeStore.get(space)
+  $: type = $typeStore.get(space)
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>

plugins/task-resources/src/components/taskTypes/TaskKindSelector.svelte

@@ -3,11 +3,11 @@
   import { getClient } from '@hcengineering/presentation'
   import task, { ProjectType, TaskType } from '@hcengineering/task'
   import { DropdownLabels } from '@hcengineering/ui'
-  import { onDestroy } from 'svelte'
+  import { createEventDispatcher, onDestroy } from 'svelte'
   import { selectedTaskTypeStore, taskTypeStore } from '../..'
 
+  export let value: Ref<TaskType> | undefined
   export let projectType: Ref<ProjectType> | undefined
-  export let taskType: Ref<TaskType> | undefined
   export let focusIndex: number = -1
   export let baseClass: Ref<Class<Doc>> | undefined = undefined
   export let allTypes = false
@@ -25,19 +25,30 @@
     .map((it) => ({ id: it._id, label: it.name }))
 
   $: if (
-    (taskType === undefined && items.length > 0) ||
-    (items.length > 0 && items.find((it) => it.id === taskType) === undefined)
+    (value === undefined && items.length > 0) ||
+    (items.length > 0 && items.find((it) => it.id === value) === undefined)
   ) {
-    taskType = items[0].id
+    value = items[0].id
   }
 
   onDestroy(() => {
     $selectedTaskTypeStore = undefined
   })
+
+  const dispatch = createEventDispatcher()
+
+  function change () {
+    dispatch('change', value)
+  }
 </script>
 
 {#if projectType !== undefined && items.length > 1}
-  <div class="p-1">
-    <DropdownLabels {focusIndex} kind={'regular'} {items} bind:selected={taskType} enableSearch={false} />
-  </div>
+  <DropdownLabels
+    {focusIndex}
+    kind={'regular'}
+    {items}
+    bind:selected={value}
+    enableSearch={false}
+    on:selected={change}
+  />
 {/if}