Add "Create Sub-issue" component

packages/ui/src/components/EditBox.svelte

@@ -68,11 +68,15 @@
     computeSize(input)
   })
 
+  export function focusInput () {
+    input?.focus()
+  }
+
   // Focusable control with index
   export let focusIndex = -1
   const { idx, focusManager } = registerFocus(focusIndex, {
     focus: () => {
-      input?.focus()
+      focusInput()
       return input != null
     },
     isFocus: () => document.activeElement === input

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -13,9 +13,9 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import contact, { Employee } from '@anticrm/contact'
+  import { Employee } from '@anticrm/contact'
   import core, { AttachedData, Ref, SortingOrder, WithLookup } from '@anticrm/core'
-  import presentation, { Card, createQuery, getClient, SpaceSelector, UserBox } from '@anticrm/presentation'
+  import presentation, { Card, createQuery, getClient, SpaceSelector } from '@anticrm/presentation'
   import { StyledTextBox } from '@anticrm/text-editor'
   import { calcRank, Issue, IssuePriority, IssueStatus, Project, Team } from '@anticrm/tracker'
   import {
@@ -36,7 +36,8 @@
   import PrioritySelector from './PrioritySelector.svelte'
   import ProjectSelector from './ProjectSelector.svelte'
   import SetDueDateActionPopup from './SetDueDateActionPopup.svelte'
-  import StatusSelector from './StatusSelector.svelte'
+  import AssigneeEditor from './issues/AssigneeEditor.svelte'
+  import StatusEditor from './issues/StatusEditor.svelte'
 
   export let space: Ref<Team>
   export let status: Ref<IssueStatus> | undefined = undefined
@@ -81,15 +82,10 @@
       return
     }
 
-    const team = await client.findOne(
-      tracker.class.Team,
-      { _id: teamId },
-      { lookup: { defaultIssueStatus: tracker.class.IssueStatus } }
-    )
-    const teamDefaultIssueStatusId = team?.$lookup?.defaultIssueStatus?._id
+    const team = await client.findOne(tracker.class.Team, { _id: teamId })
 
-    if (teamDefaultIssueStatusId) {
-      object.status = teamDefaultIssueStatusId
+    if (team?.defaultIssueStatus) {
+      object.status = team.defaultIssueStatus
     }
   }
 
@@ -200,14 +196,6 @@
     object.priority = newPriority
   }
 
-  const handleStatusChanged = (statusId: Ref<IssueStatus> | undefined) => {
-    if (statusId === undefined) {
-      return
-    }
-
-    object.status = statusId
-  }
-
   const handleProjectIdChanged = (projectId: Ref<Project> | null | undefined) => {
     if (projectId === undefined) {
       return
@@ -258,23 +246,31 @@
   />
   <svelte:fragment slot="pool">
     {#if issueStatuses}
-      <StatusSelector selectedStatusId={object.status} statuses={issueStatuses} onStatusChange={handleStatusChanged} />
+      <StatusEditor
+        value={object}
+        statuses={issueStatuses}
+        kind="no-border"
+        width="min-content"
+        size="small"
+        shouldShowLabel={true}
+        tooltipFill={false}
+        on:change={({ detail }) => (object.status = detail)}
+      />
       <PrioritySelector priority={object.priority} onPriorityChange={handlePriorityChanged} />
-      <UserBox
-        _class={contact.class.Employee}
-        label={tracker.string.Assignee}
-        placeholder={tracker.string.AssignTo}
-        bind:value={currentAssignee}
-        allowDeselect
-        titleDeselect={tracker.string.Unassigned}
+      <AssigneeEditor
+        value={object}
+        size="small"
+        kind="no-border"
+        tooltipFill={false}
+        on:change={({ detail }) => (currentAssignee = detail)}
       />
-      <Button
+      <!-- <Button
         label={tracker.string.Labels}
         icon={tracker.icon.Labels}
         width="min-content"
         size="small"
         kind="no-border"
-      />
+      /> -->
       <ProjectSelector value={object.project} onProjectIdChange={handleProjectIdChanged} />
       {#if object.dueDate !== null}
         <DatePresenter bind:value={object.dueDate} editable />

plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte

@@ -13,46 +13,48 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import { Employee } from '@anticrm/contact'
-  import { Ref } from '@anticrm/core'
+  import { AttachedData, Ref } from '@anticrm/core'
   import { getClient, UserBox } from '@anticrm/presentation'
   import { Issue } from '@anticrm/tracker'
-  import { Tooltip } from '@anticrm/ui'
+  import { ButtonKind, ButtonSize, Tooltip, TooltipAlignment } from '@anticrm/ui'
   import contact from '@anticrm/contact'
   import tracker from '../../plugin'
 
-  export let value: Issue
+  export let value: Issue | AttachedData<Issue>
+  export let size: ButtonSize = 'large'
+  export let kind: ButtonKind = 'link'
+  export let tooltipAlignment: TooltipAlignment | undefined = undefined
+  export let tooltipFill = true
 
   const client = getClient()
+  const dispatch = createEventDispatcher()
 
   const handleAssigneeChanged = async (newAssignee: Ref<Employee> | undefined) => {
     if (newAssignee === undefined || value.assignee === newAssignee) {
       return
     }
 
-    await client.updateCollection(
-      value._class,
-      value.space,
-      value._id,
-      value.attachedTo,
-      value.attachedToClass,
-      value.collection,
-      { assignee: newAssignee }
-    )
+    dispatch('change', newAssignee)
+
+    if ('_id' in value) {
+      await client.update(value, { assignee: newAssignee })
+    }
   }
 </script>
 
 {#if value}
-  <Tooltip label={tracker.string.AssignTo} fill>
+  <Tooltip label={tracker.string.AssignTo} direction={tooltipAlignment} fill={tooltipFill}>
     <UserBox
       _class={contact.class.Employee}
       label={tracker.string.Assignee}
       placeholder={tracker.string.Assignee}
       value={value.assignee}
       allowDeselect
       titleDeselect={tracker.string.Unassigned}
-      size="large"
-      kind="link"
+      {size}
+      {kind}
       width="100%"
       justify="left"
       on:change={({ detail }) => handleAssigneeChanged(detail)}

plugins/tracker-resources/src/components/issues/StatusEditor.svelte

@@ -13,47 +13,46 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Ref, WithLookup } from '@anticrm/core'
+  import { createEventDispatcher } from 'svelte'
+  import { AttachedData, Ref, WithLookup } from '@anticrm/core'
   import { Issue, IssueStatus } from '@anticrm/tracker'
   import { getClient } from '@anticrm/presentation'
   import { Tooltip, TooltipAlignment } from '@anticrm/ui'
   import type { ButtonKind, ButtonSize } from '@anticrm/ui'
   import tracker from '../../plugin'
   import StatusSelector from '../StatusSelector.svelte'
 
-  export let value: Issue
+  export let value: Issue | AttachedData<Issue>
   export let statuses: WithLookup<IssueStatus>[]
   export let isEditable: boolean = true
   export let shouldShowLabel: boolean = false
   export let tooltipAlignment: TooltipAlignment | undefined = undefined
+  export let tooltipFill = true
 
   export let kind: ButtonKind = 'link'
   export let size: ButtonSize = 'large'
   export let justify: 'left' | 'center' = 'left'
   export let width: string | undefined = '100%'
 
   const client = getClient()
+  const dispatch = createEventDispatcher()
 
   const handleStatusChanged = async (newStatus: Ref<IssueStatus> | undefined) => {
     if (!isEditable || newStatus === undefined || value.status === newStatus) {
       return
     }
 
-    await client.updateCollection(
-      value._class,
-      value.space,
-      value._id,
-      value.attachedTo,
-      value.attachedToClass,
-      value.collection,
-      { status: newStatus }
-    )
+    dispatch('change', newStatus)
+
+    if ('_id' in value) {
+      await client.update(value, { status: newStatus })
+    }
   }
 </script>
 
 {#if value}
   {#if isEditable}
-    <Tooltip label={tracker.string.SetStatus} direction={tooltipAlignment} fill>
+    <Tooltip label={tracker.string.SetStatus} direction={tooltipAlignment} fill={tooltipFill}>
       <StatusSelector
         {kind}
         {size}