TSK-570: fix RelatedIssues (#2596)

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

models/tracker/src/plugin.ts

@@ -34,7 +34,6 @@ export default mergeIds(trackerId, tracker, {
     GotoProjects: '' as IntlString,
     GotoTrackerApplication: '' as IntlString,
     SearchIssue: '' as IntlString,
-    NewRelatedIssue: '' as IntlString,
     Parent: '' as IntlString
   },
   component: {

packages/theme/styles/_layouts.scss

@@ -665,6 +665,7 @@ a.no-line {
 .text-xs { font-size: .625rem; }
 .text-sm { font-size: .75rem; }
 .text-md { font-size: .8125rem; }
+.text-normal { font-size: var(--body-font-size); }
 .text-base {
   font-size: 1rem; /* 16px */
   line-height: 1.5rem; /* 24px */

packages/theme/styles/common.scss

@@ -302,11 +302,42 @@
       color: var(--caption-color);
     }
     &__title {
-      flex-grow: 1;
       min-width: 0;
       font-weight: 500;
       font-size: 1rem;
       color: var(--caption-color);
+      
+      &:not(.short) { flex-grow: 1; }
+    }
+    &__header {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      margin: 0 .5rem 0 .75rem;
+      padding: .25rem .75rem;
+      height: 100%;
+      min-width: 0;
+      font-weight: 500;
+      font-size: 1rem;
+      color: var(--caption-color);
+      background: var(--header-bg-color);
+      border-radius: .5rem .5rem 0 0;
+    }
+    &__counter {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      flex-shrink: 0;
+      padding: 0.25rem 0.5rem;
+      min-width: 1.325rem;
+      text-align: center;
+      font-weight: 500;
+      font-size: 1rem;
+      line-height: 1rem;
+      color: var(--accent-color);
+      background-color: var(--body-color);
+      border: 1px solid var(--divider-color);
+      border-radius: 1rem;
     }  
     &__tag {
       padding: .125rem .25rem;

plugins/tracker-assets/lang/en.json

@@ -260,6 +260,7 @@
     "Capacity": "Capacity",
     "CapacityValue": "of {value}d",
     "NewRelatedIssue": "New related issue",
+    "RelatedIssuesNotFound": "Related issues not found",
 
     "AddedReference": "Added reference",
     "AddedAsBlocked": "Marked as blocked",

plugins/tracker-assets/lang/ru.json

@@ -260,6 +260,7 @@
     "Capacity": "Вместимость",
     "CapacityValue": "из {value}d",
     "NewRelatedIssue": "Завести связанную задачу",
+    "RelatedIssuesNotFound": "Связанные задачи не найдены",
 
     "AddedReference": "Добавлена зависимость",
     "AddedAsBlocked": "Отмечено как заблокировано",

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 subIssues !== undefined && viewlet !== undefined}
+  {#if issueStatuses.size > 0 && teams && subIssues.length > 0}
-    {#if issueStatuses.size > 0 && teams}
+    <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {teams} {issueStatuses} {disableHeader} />
-      <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {teams} {issueStatuses} />
   {:else}
-      <div class="p-1">
+    <div class="antiSection-empty solid flex-col mt-3">
-        <Label label={presentation.string.NoMatchesFound} />
+      <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}
-  {:else}
+{:else}
   <div class="flex-center pt-3">
     <Spinner />
   </div>
-  {/if}
+{/if}
-</div>

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 { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, Icon, IconAdd, Label, showPopup } from '@hcengineering/ui'
+  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'}
+        shape={'circle'}
-        on:click={() => {
+        on:click={createIssue}
-          showPopup(tracker.component.CreateIssue, { relatedTo: object, space: object.space }, 'top')
-        }}
       />
     </div>
   </div>
-  <div class="flex-row">
   {#if viewlet}
-      <RelatedIssues {object} {viewOptions} {viewlet} />
+    <RelatedIssues {object} {viewOptions} {viewlet} on:add-issue={createIssue} disableHeader={headerRemoval} />
   {/if}
-  </div>
 </div>

plugins/tracker-resources/src/plugin.ts

@@ -208,6 +208,7 @@ export default mergeIds(trackerId, tracker, {
     AddBlockedBy: '' as IntlString,
     AddIsBlocking: '' as IntlString,
     AddRelatedIssue: '' as IntlString,
+    RelatedIssuesNotFound: '' as IntlString,
     RelatedIssue: '' as IntlString,
     BlockedIssue: '' as IntlString,
     BlockingIssue: '' as IntlString,

plugins/tracker/src/index.ts

@@ -533,5 +533,8 @@ export default plugin(trackerId, {
   },
   resolver: {
     Location: '' as Resource<(loc: Location) => Promise<Location | undefined>>
+  },
+  string: {
+    NewRelatedIssue: '' as IntlString
   }
 })

plugins/view-resources/src/components/EditDoc.svelte

@@ -371,7 +371,9 @@
       {/if}
     {/each}
     {#if editorFooter}
+      <div class="step-tb-6">
         <Component is={editorFooter.footer} props={{ object, _class, ...editorFooter.props }} />
+      </div>
     {/if}
   </Panel>
 {/if}

plugins/view-resources/src/components/list/ListCategories.svelte

@@ -17,8 +17,8 @@
   import { IntlString } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { AnyComponent } from '@hcengineering/ui'
-  import view, { AttributeModel, BuildModelKey, ViewOptions } from '@hcengineering/view'
+  import { AttributeModel, BuildModelKey, ViewOptions } from '@hcengineering/view'
-  import { buildModel, getCategories, getPresenter, groupBy } from '../../utils'
+  import { buildModel, getCategories, getPresenter, groupBy, getAdditionalHeader } from '../../utils'
   import { noCategory } from '../../viewOptions'
   import ListCategory from './ListCategory.svelte'
 
@@ -51,7 +51,6 @@
   })
 
   const client = getClient()
-  const hierarchy = client.getHierarchy()
 
   let itemModels: AttributeModel[]
 
@@ -78,18 +77,7 @@
     return res
   }
 
-  $: extraHeaders = getAdditionalHeader(_class)
+  $: extraHeaders = getAdditionalHeader(client, _class)
-
-  function getAdditionalHeader (_class: Ref<Class<Doc>>): AnyComponent[] | undefined {
-    const clazz = hierarchy.getClass(_class)
-    let mixinClazz = hierarchy.getClass(_class)
-    let presenterMixin = hierarchy.as(clazz, view.mixin.ListHeaderExtra)
-    while (presenterMixin.presenters === undefined && mixinClazz.extends !== undefined) {
-      presenterMixin = hierarchy.as(mixinClazz, view.mixin.ListHeaderExtra)
-      mixinClazz = hierarchy.getClass(mixinClazz.extends)
-    }
-    return presenterMixin.presenters
-  }
 </script>
 
 {#each categories as category, i}

plugins/view-resources/src/components/list/ListHeader.svelte

@@ -81,7 +81,7 @@
         {/each}
       {/if}
       {#if limited < items.length}
-        <div class="counter">
+        <div class="antiSection-header__counter ml-4">
           {limited}
           <div class="text-xs mx-1">/</div>
           {items.length}
@@ -95,7 +95,7 @@
           }}
         />
       {:else}
-        <span class="counter">{items.length}</span>
+        <span class="antiSection-header__counter ml-4">{items.length}</span>
       {/if}
     </div>
     {#if createItemDialog !== undefined && createItemLabel !== undefined}
@@ -138,22 +138,4 @@
   .row:not(:last-child) {
     border-bottom: 1px solid var(--accent-bg-color);
   }
-
-  .counter {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    flex-shrink: 0;
-    margin-left: 1rem;
-    padding: 0.25rem 0.5rem;
-    min-width: 1.325rem;
-    text-align: center;
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1rem;
-    color: var(--accent-color);
-    background-color: var(--body-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 1rem;
-  }
 </style>

plugins/view-resources/src/components/list/ListItem.svelte

@@ -71,7 +71,6 @@
   bind:this={elem}
   class="listGrid antiList__row row gap-2 flex-grow"
   class:checking={checked}
-  class:mListGridFixed={selected}
   class:mListGridSelected={selected}
   on:contextmenu
   on:focus

plugins/view-resources/src/index.ts

@@ -109,7 +109,8 @@ export {
   getObjectPreview,
   isCollectionAttr,
   LoadingProps,
-  setActiveViewletId
+  setActiveViewletId,
+  getAdditionalHeader
 } from './utils'
 export * from './viewOptions'
 export {

plugins/view-resources/src/utils.ts

@@ -627,3 +627,18 @@ export async function moveToSpace (
     ...extra
   })
 }
+
+/**
+ * @public
+ */
+export function getAdditionalHeader (client: TxOperations, _class: Ref<Class<Doc>>): AnyComponent[] | undefined {
+  const hierarchy = client.getHierarchy()
+  const clazz = hierarchy.getClass(_class)
+  let mixinClazz = hierarchy.getClass(_class)
+  let presenterMixin = hierarchy.as(clazz, view.mixin.ListHeaderExtra)
+  while (presenterMixin.presenters === undefined && mixinClazz.extends !== undefined) {
+    presenterMixin = hierarchy.as(mixinClazz, view.mixin.ListHeaderExtra)
+    mixinClazz = hierarchy.getClass(mixinClazz.extends)
+  }
+  return presenterMixin.presenters
+}