TSK-570: fix RelatedIssues (#2596)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-12-23 03:22:19 +03:00 · 2023-02-08 07:34:31 +03:00 · 2023-02-08 07:34:31 +03:00 · 994a356ea5
commit 994a356ea5
parent 857e879066
17 changed files with 161 additions and 69 deletions
--- a/models/tracker/src/plugin.ts
+++ b/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: {
--- a/packages/theme/styles/_layouts.scss
+++ b/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 */
--- a/packages/theme/styles/common.scss
+++ b/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;
--- a/plugins/tracker-assets/lang/en.json
+++ b/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",
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@ -260,6 +260,7 @@
    "Capacity": "Вместимость",
    "CapacityValue": "из {value}d",
    "NewRelatedIssue": "Завести связанную задачу",
+    "RelatedIssuesNotFound": "Связанные задачи не найдены",

    "AddedReference": "Добавлена зависимость",
    "AddedAsBlocked": "Отмечено как заблокировано",
--- a/plugins/tracker-resources/src/components/icons/AddIssueDuo.svelte
+++ b/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>
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
+++ b/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}
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte
+++ b/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,13 +70,21 @@
  )
 </script>

-<div class="mt-1">
 {#if subIssues !== undefined && viewlet !== undefined}
-    {#if issueStatuses.size > 0 && teams}
-      <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {teams} {issueStatuses} />
+  {#if issueStatuses.size > 0 && teams && subIssues.length > 0}
+    <SubIssueList bind:viewOptions {viewlet} issues={subIssues} {teams} {issueStatuses} {disableHeader} />
  {:else}
-      <div class="p-1">
-        <Label label={presentation.string.NoMatchesFound} />
+    <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}
 {:else}
@ -79,4 +92,3 @@
    <Spinner />
  </div>
 {/if}
-</div>
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
+++ b/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} />
+    <RelatedIssues {object} {viewOptions} {viewlet} on:add-issue={createIssue} disableHeader={headerRemoval} />
  {/if}
 </div>
-</div>
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/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,
--- a/plugins/tracker/src/index.ts
+++ b/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
  }
 })
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/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}
--- a/plugins/view-resources/src/components/list/ListCategories.svelte
+++ b/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 { buildModel, getCategories, getPresenter, groupBy } from '../../utils'
+  import { AttributeModel, BuildModelKey, ViewOptions } from '@hcengineering/view'
+  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)
-
-  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
-  }
+  $: extraHeaders = getAdditionalHeader(client, _class)
 </script>

 {#each categories as category, i}
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/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>
--- a/plugins/view-resources/src/components/list/ListItem.svelte
+++ b/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
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@ -109,7 +109,8 @@ export {
  getObjectPreview,
  isCollectionAttr,
  LoadingProps,
-  setActiveViewletId
+  setActiveViewletId,
+  getAdditionalHeader
 } from './utils'
 export * from './viewOptions'
 export {
--- a/plugins/view-resources/src/utils.ts
+++ b/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
+}