TSK-570: fix RelatedIssues (#2596)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte

@@ -23,6 +23,7 @@
   export let issues: Issue[] | undefined = undefined
   export let viewlet: Viewlet
   export let viewOptions: ViewOptions
+  export let disableHeader = false
 
   // Extra properties
   export let teams: Map<Ref<Team>, Team> | undefined
@@ -45,5 +46,6 @@
     {query}
     flatHeaders={true}
     props={{ teams, issueStatuses }}
+    {disableHeader}
   />
 {/if}

plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte

@@ -13,17 +13,22 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import { Doc, DocumentQuery, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
-  import presentation, { createQuery } from '@hcengineering/presentation'
+  import { createQuery } from '@hcengineering/presentation'
   import { Issue, IssueStatus, Team } from '@hcengineering/tracker'
   import { Label, Spinner } from '@hcengineering/ui'
   import { Viewlet, ViewOptions } from '@hcengineering/view'
   import tracker from '../../../plugin'
   import SubIssueList from '../edit/SubIssueList.svelte'
+  import AddIssueDuo from '../../icons/AddIssueDuo.svelte'
 
   export let object: Doc
   export let viewlet: Viewlet
   export let viewOptions: ViewOptions
+  export let disableHeader = false
+
+  const dispatch = createEventDispatcher()
 
   let query: DocumentQuery<Issue>
   $: query = { 'relations._id': object._id, 'relations._class': object._class }
@@ -65,18 +70,25 @@
   )
 </script>
 
-<div class="mt-1">
-  {#if subIssues !== undefined && viewlet !== undefined}
-    {#if issueStatuses.size > 0 && teams}
-      <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {teams} {issueStatuses} />
-    {:else}
-      <div class="p-1">
-        <Label label={presentation.string.NoMatchesFound} />
-      </div>
-    {/if}
+{#if subIssues !== undefined && viewlet !== undefined}
+  {#if issueStatuses.size > 0 && teams && subIssues.length > 0}
+    <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {teams} {issueStatuses} {disableHeader} />
   {:else}
-    <div class="flex-center pt-3">
-      <Spinner />
+    <div class="antiSection-empty solid flex-col mt-3">
+      <div class="flex-center content-accent-color">
+        <AddIssueDuo size={'large'} />
+      </div>
+      <div class="text-sm dark-color" style:pointer-events="none">
+        <Label label={tracker.string.RelatedIssuesNotFound} />
+      </div>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="over-underline text-sm content-accent-color" on:click={() => dispatch('add-issue')}>
+        <Label label={tracker.string.NewRelatedIssue} />
+      </div>
     </div>
   {/if}
-</div>
+{:else}
+  <div class="flex-center pt-3">
+    <Spinner />
+  </div>
+{/if}

plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
-  import { Doc } from '@hcengineering/core'
+  import { Doc, DocumentQuery } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
-  import { createQuery } from '@hcengineering/presentation'
-  import { Button, Icon, IconAdd, Label, showPopup } from '@hcengineering/ui'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { Button, Icon, IconAdd, Label, showPopup, Component } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
-  import { getViewOptions, ViewletSettingButton } from '@hcengineering/view-resources'
+  import { getViewOptions, ViewletSettingButton, getAdditionalHeader } from '@hcengineering/view-resources'
+  import viewplg from '@hcengineering/view-resources/src/plugin'
   import tracker from '../../../plugin'
   import RelatedIssues from './RelatedIssues.svelte'
+  import type { Issue } from '@hcengineering/tracker'
+  import { fade } from 'svelte/transition'
+
   export let object: Doc
   export let label: IntlString
 
+  const client = getClient()
   let viewlet: Viewlet | undefined
 
   const vquery = createQuery()
@@ -18,6 +23,16 @@
   })
 
   let viewOptions = getViewOptions(viewlet)
+  const createIssue = () => showPopup(tracker.component.CreateIssue, { relatedTo: object, space: object.space }, 'top')
+
+  let query: DocumentQuery<Issue>
+  $: query = { 'relations._id': object._id, 'relations._class': object._class }
+  const subIssuesQuery = createQuery()
+  let subIssues: Issue[] = []
+  $: subIssuesQuery.query(tracker.class.Issue, query, async (result) => (subIssues = result))
+
+  $: headerRemoval = viewOptions.groupBy.length === 0 || viewOptions.groupBy[0] === '#no_category'
+  $: extraHeaders = headerRemoval ? getAdditionalHeader(client, tracker.class.Issue) : undefined
 </script>
 
 <div class="antiSection">
@@ -25,30 +40,40 @@
     <div class="antiSection-header__icon">
       <Icon icon={tracker.icon.Issue} size={'small'} />
     </div>
-    <span class="antiSection-header__title">
+    <span class="antiSection-header__title short">
       <Label {label} />
     </span>
+    {#if headerRemoval}
+      <div in:fade|local={{ duration: 150 }} class="antiSection-header__header flex-between">
+        <span class="dark-color"><Label label={viewplg.string.NoGrouping} /></span>
+        <div class="buttons-group font-normal text-normal">
+          {#if extraHeaders}
+            {#each extraHeaders as extra}
+              <Component is={extra} props={{ docs: subIssues }} />
+            {/each}
+          {/if}
+          <span class="antiSection-header__counter">{subIssues.length}</span>
+        </div>
+      </div>
+    {:else}
+      <span class="flex-grow" />
+    {/if}
     <div class="buttons-group small-gap">
       {#if viewlet && viewOptions}
         <ViewletSettingButton bind:viewOptions {viewlet} kind={'transparent'} />
       {/if}
       <Button
         id="add-sub-issue"
-        width="min-content"
         icon={IconAdd}
         label={undefined}
         labelParams={{ subIssues: 0 }}
         kind={'transparent'}
-        size={'small'}
-        on:click={() => {
-          showPopup(tracker.component.CreateIssue, { relatedTo: object, space: object.space }, 'top')
-        }}
+        shape={'circle'}
+        on:click={createIssue}
       />
     </div>
   </div>
-  <div class="flex-row">
-    {#if viewlet}
-      <RelatedIssues {object} {viewOptions} {viewlet} />
-    {/if}
-  </div>
+  {#if viewlet}
+    <RelatedIssues {object} {viewOptions} {viewlet} on:add-issue={createIssue} disableHeader={headerRemoval} />
+  {/if}
 </div>