Add issue-id to sub-issue list (#2035)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
2025-01-24 20:40:59 +00:00 · 2022-06-09 21:49:57 +07:00 · 2022-06-09 21:49:57 +07:00 · 1b3840537a
commit 1b3840537a
parent a43d07962b
9 changed files with 48 additions and 30 deletions
--- a/plugins/tracker-resources/src/components/SetParentIssueActionPopup.svelte
+++ b/plugins/tracker-resources/src/components/SetParentIssueActionPopup.svelte
@ -20,6 +20,7 @@
  import ObjectPopup from '@anticrm/presentation/src/components/ObjectPopup.svelte'
  import { createEventDispatcher } from 'svelte'
  import tracker from '../plugin'
+  import { getIssueId } from '../utils'

  export let value: Issue
  export let shouldSaveOnChange = true
@ -81,7 +82,7 @@
 >
  <svelte:fragment slot="item" let:item={issue}>
    {@const { icon } = statusCategoryById?.get(issue.$lookup?.status.category) ?? {}}
-    {@const issueId = team && `${team.identifier}-${issue.number}`}
+    {@const issueId = team && getIssueId(team, issue)}
    {#if issueId && icon}
      <div class="flex-center clear-mins w-full h-9">
        <div class="icon mr-4 h-8">
--- a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
@ -17,6 +17,7 @@
  import type { Issue, Team } from '@anticrm/tracker'
  import { Icon, showPanel } from '@anticrm/ui'
  import tracker from '../../plugin'
+  import { getIssueId } from '../../utils'

  export let value: Issue
  export let currentTeam: Team | undefined
@ -33,7 +34,7 @@
  $: if (!currentTeam) {
    spaceQuery.query(tracker.class.Team, { _id: value.space }, (res) => ([currentTeam] = res))
  }
-  $: issueName = currentTeam && `${currentTeam.identifier}-${value.number}`
+  $: issueName = currentTeam && getIssueId(currentTeam, value)
 </script>

 {#if value && shortLabel}
--- a/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/ParentIssue.svelte
@ -18,6 +18,7 @@
  import { Spinner, IconClose, Tooltip } from '@anticrm/ui'
  import { createEventDispatcher } from 'svelte'
  import tracker from '../../plugin'
+  import { getIssueId } from '../../utils'

  export let issue: Issue

@ -27,7 +28,7 @@
  let team: Team | undefined

  $: spaceQuery.query(tracker.class.Team, { _id: issue.space }, (res) => ([team] = res))
-  $: issueId = team && `${team.identifier}-${issue.number}`
+  $: issueId = team && getIssueId(team, issue)
 </script>

 <div class="flex-center root">
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@ -35,6 +35,7 @@
  import { StyledTextArea } from '@anticrm/text-editor'
  import { createEventDispatcher, onMount } from 'svelte'
  import tracker from '../../../plugin'
+  import { getIssueId } from '../../../utils'
  import ControlPanel from './ControlPanel.svelte'
  import CopyToClipboard from './CopyToClipboard.svelte'
  import SubIssueSelector from './SubIssueSelector.svelte'
@ -84,7 +85,7 @@
      }
    )

-  $: issueId = currentTeam && issue && `${currentTeam.identifier}-${issue.number}`
+  $: issueId = currentTeam && issue && getIssueId(currentTeam, issue)
  $: canSave = title.trim().length > 0
  $: isDescriptionEmpty = !new DOMParser().parseFromString(description, 'text/html').documentElement.innerText?.trim()

--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
@ -16,18 +16,20 @@
  import { createEventDispatcher } from 'svelte'
  import { flip } from 'svelte/animate'
  import { WithLookup } from '@anticrm/core'
-  import { Issue, IssueStatus } from '@anticrm/tracker'
+  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
+  import { ContextMenu } from '@anticrm/view-resources'
  import { showPanel, showPopup } from '@anticrm/ui'
  import tracker from '../../../plugin'
+  import { getIssueId } from '../../../utils'
+  import Circles from '../../icons/Circles.svelte'
  import ProjectEditor from '../../projects/ProjectEditor.svelte'
  import AssigneeEditor from '../AssigneeEditor.svelte'
  import DueDateEditor from '../DueDateEditor.svelte'
  import StatusEditor from '../StatusEditor.svelte'
-  import Circles from '../../icons/Circles.svelte'
-  import { ContextMenu } from '@anticrm/view-resources'

  export let issues: Issue[]
  export let issueStatuses: WithLookup<IssueStatus>[]
+  export let currentTeam: Team

  const dispatch = createEventDispatcher()

@ -89,20 +91,29 @@
    <div class="draggable-container">
      <div class="draggable-mark"><Circles /></div>
    </div>
-    <div class="flex-center ml-6">
-      <StatusEditor value={issue} statuses={issueStatuses} kind="transparent" tooltipAlignment="bottom" />
-      <span class="flex-no-shrink name" on:click={() => openIssue(issue)}>
+    <div class="flex-center ml-6 clear-mins">
+      <span class="flex-no-shrink text" on:click={() => openIssue(issue)}>
+        {getIssueId(currentTeam, issue)}
+      </span>
+      <StatusEditor
+        value={issue}
+        statuses={issueStatuses}
+        kind="transparent"
+        tooltipFill={false}
+        tooltipAlignment="bottom"
+      />
+      <span class="text name" title={issue.title} on:click={() => openIssue(issue)}>
        {issue.title}
      </span>
    </div>
-    <div class="flex-center">
+    <div class="flex-center flex-no-shrink">
      {#if issue.project !== null}
        <ProjectEditor value={issue} />
      {/if}
      {#if issue.dueDate !== null}
        <DueDateEditor value={issue} />
      {/if}
-      <AssigneeEditor value={issue} />
+      <AssigneeEditor value={issue} tooltipFill={false} />
    </div>
  </div>
 {/each}
@ -112,11 +123,17 @@
    position: relative;
    border-bottom: 1px solid var(--divider-color);

-    .name {
+    .text {
      font-weight: 500;
      color: var(--theme-caption-color);
    }

+    .name {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
    .draggable-container {
      position: absolute;
      display: flex;
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueSelector.svelte
@ -28,6 +28,7 @@
    Spinner
  } from '@anticrm/ui'
  import tracker from '../../../plugin'
+  import { getIssueId } from '../../../utils'

  export let issue: WithLookup<Issue>
  export let team: Team
@ -42,10 +43,6 @@
    return issueStatuses.find((s) => issue.status === s._id)?.$lookup?.category?.icon ?? null
  }

-  function getIssueId (issue: Issue) {
-    return `${team.identifier}-${issue.number}`
-  }
-
  function openIssue (target: Ref<Issue>) {
    if (target !== issue._id) {
      showPanel(tracker.component.EditIssue, target, issue._class, 'content')
@ -68,7 +65,7 @@
          value: subIssues.map((iss) => ({
            id: iss._id,
            icon: getIssueStatusIcon(iss),
-            text: `${getIssueId(iss)} ${iss.title}`,
+            text: `${getIssueId(team, iss)} ${iss.title}`,
            isSelected: iss._id === issue._id
          })),
          width: 'large'
@ -109,7 +106,7 @@
              <Icon {icon} size="small" />
            </div>
          {/if}
-          <span class="overflow-label flex-no-shrink mr-2">{getIssueId(parentIssue)}</span>
+          <span class="overflow-label flex-no-shrink mr-2">{getIssueId(team, parentIssue)}</span>
          <span class="overflow-label issue-title">{parentIssue.title}</span>
        </div>
      </Tooltip>
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
@ -90,7 +90,7 @@
    <ExpandCollapse isExpanded={!isCollapsed} duration={400}>
      {#if hasSubIssues}
        <div class="list" class:collapsed={isCollapsed}>
-          <SubIssueList issues={subIssues} {issueStatuses} on:move={handleIssueSwap} />
+          <SubIssueList issues={subIssues} {issueStatuses} {currentTeam} on:move={handleIssueSwap} />
        </div>
      {/if}
    </ExpandCollapse>
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssuesSelector.svelte
@ -19,6 +19,7 @@
  import { Button, ProgressCircle, showPopup, SelectPopup, closeTooltip, showPanel } from '@anticrm/ui'
  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
  import tracker from '../../../plugin'
+  import { getIssueId } from '../../../utils'

  export let issue: Issue
  export let currentTeam: Team | undefined
@ -49,10 +50,6 @@
    return issueStatuses?.find((s) => issue.status === s._id)?.$lookup?.category?.icon ?? null
  }

-  function getIssueId (issue: Issue) {
-    return `${currentTeam?.identifier}-${issue.number}`
-  }
-
  function openIssue (target: Ref<Issue>) {
    if (target !== issue._id) {
      showPanel(tracker.component.EditIssue, target, issue._class, 'content')
@ -65,12 +62,11 @@
      showPopup(
        SelectPopup,
        {
-          value: subIssues.map((iss) => ({
-            id: iss._id,
-            icon: getIssueStatusIcon(iss),
-            text: `${getIssueId(iss)} ${iss.title}`,
-            isSelected: iss._id === issue._id
-          })),
+          value: subIssues.map((iss) => {
+            const text = currentTeam ? `${getIssueId(currentTeam, iss)} ${iss.title}` : iss.title
+
+            return { id: iss._id, icon: getIssueStatusIcon(iss), text, isSelected: iss._id === issue._id }
+          }),
          width: 'large'
        },
        {
--- a/plugins/tracker-resources/src/utils.ts
+++ b/plugins/tracker-resources/src/utils.ts
@ -378,3 +378,7 @@ export function getCategories (

  return existingCategories
 }
+
+export function getIssueId (team: Team, issue: Issue): string {
+  return `${team.identifier}-${issue.number}`
+}