TSK-570: fix RelatedIssues (#2596)

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

plugins/tracker-resources/src/components/icons/AddIssueDuo.svelte

@@ -0,0 +1,29 @@
+<!-- 
+// Copyright © 2022 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill="var(--duotone-color)"
+    d="M3,11c0-3.8,0-5.7,1.2-6.8C5.3,3,7.2,3,11,3h2c3.8,0,5.7,0,6.8,1.2C21,5.3,21,7.2,21,11v2c0,3.8,0,5.7-1.2,6.8C18.7,21,16.8,21,13,21h-2c-3.8,0-5.7,0-6.8-1.2C3,18.7,3,16.8,3,13V11z"
+  />
+  <polygon
+    {fill}
+    points="16,11.5 12.5,11.5 12.5,8 11.5,8 11.5,11.5 8,11.5 8,12.5 11.5,12.5 11.5,16 12.5,16 12.5,12.5 16,12.5 "
+  />
+</svg>

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>