Update Issues tabs

Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>

plugins/tracker-resources/src/components/issues/Active.svelte

@@ -1,12 +1,10 @@
-<script lang='ts'>
+<script lang="ts">
   import { Ref } from '@anticrm/core'
   import { IssueStatus, Team } from '@anticrm/tracker'
   import Issues from './Issues.svelte'
-  export let currentSpace: Ref<Team>
+  import tracker from '../../plugin'
 
-  let todalIssues = 0
+  export let currentSpace: Ref<Team>
 </script>
-<div class='fs-title'>
-  Active issues {todalIssues}
-</div>
-<Issues currentSpace={currentSpace} categories={[IssueStatus.InProgress, IssueStatus.Todo]} on:content={(evt) => { todalIssues = evt.detail.length } }></Issues>
+
+<Issues {currentSpace} categories={[IssueStatus.InProgress, IssueStatus.Todo]} title={tracker.string.ActiveIssues} />

plugins/tracker-resources/src/components/issues/Backlog.svelte

@@ -1,7 +1,10 @@
-<script lang='ts'>
+<script lang="ts">
   import { Ref } from '@anticrm/core'
   import { IssueStatus, Team } from '@anticrm/tracker'
   import Issues from './Issues.svelte'
+  import tracker from '../../plugin'
+
   export let currentSpace: Ref<Team>
 </script>
-<Issues {currentSpace} categories={[IssueStatus.Backlog]}></Issues>
+
+<Issues title={tracker.string.BacklogIssues} {currentSpace} categories={[IssueStatus.Backlog]} />

plugins/tracker-resources/src/components/issues/Issues.svelte

@@ -16,9 +16,10 @@
   import type { DocumentQuery, Ref } from '@anticrm/core'
   import { createQuery } from '@anticrm/presentation'
   import { Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import { ScrollBox } from '@anticrm/ui'
+  import { Label, ScrollBox } from '@anticrm/ui'
   import CategoryPresenter from './CategoryPresenter.svelte'
   import tracker from '../../plugin'
+  import { IntlString } from '@anticrm/platform'
 
   export let currentSpace: Ref<Team>
   export let categories = [
@@ -28,15 +29,26 @@
     IssueStatus.Done,
     IssueStatus.Canceled
   ]
-
+  export let title: IntlString = tracker.string.AllIssues
   export let query: DocumentQuery<Issue> = {}
   export let search: string = ''
 
+  const spaceQuery = createQuery()
+  const issuesMap: { [status: string]: number } = {}
+
+  $: getTotalIssues = () => {
+    let total = 0
+
+    for (const issuesAmount of Object.values(issuesMap)) {
+      total += issuesAmount
+    }
+
+    return total
+  }
+
   $: resultQuery =
     search === '' ? { space: currentSpace, ...query } : { $search: search, space: currentSpace, ...query }
 
-  const spaceQuery = createQuery()
-
   let currentTeam: Team | undefined
 
   $: spaceQuery.query(tracker.class.Team, { _id: currentSpace }, (res) => {
@@ -46,9 +58,20 @@
 
 {#if currentTeam}
   <ScrollBox vertical stretch>
+    <div class="fs-title">
+      <Label label={title} params={{ value: getTotalIssues() }} />
+    </div>
+
     <div class="ml-4 mt-4">
       {#each categories as category}
-        <CategoryPresenter {category} query={resultQuery} {currentTeam} />
+        <CategoryPresenter
+          {category}
+          query={resultQuery}
+          {currentTeam}
+          on:content={(event) => {
+            issuesMap[category] = event.detail
+          }}
+        />
       {/each}
     </div>
   </ScrollBox>