From e7b5d0e9b3b508a1eab92eb9963dbf7299c2768a Mon Sep 17 00:00:00 2001
From: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
Date: Wed, 8 Jun 2022 13:19:43 +0700
Subject: [PATCH] Tracker: add "Show Sub-issues" toggle into issue list (#2033)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
---
 .../src/components/issues/Issues.svelte              | 12 ++++++++----
 .../src/components/issues/ViewOptionsPopup.svelte    | 11 ++++++++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/plugins/tracker-resources/src/components/issues/Issues.svelte b/plugins/tracker-resources/src/components/issues/Issues.svelte
index 418dc55289..06b862261a 100644
--- a/plugins/tracker-resources/src/components/issues/Issues.svelte
+++ b/plugins/tracker-resources/src/components/issues/Issues.svelte
@@ -63,6 +63,7 @@
   export let groupingKey: IssuesGrouping = IssuesGrouping.Status
   export let orderingKey: IssuesOrdering = IssuesOrdering.LastUpdated
   export let completedIssuesPeriod: IssuesDateModificationPeriod | null = IssuesDateModificationPeriod.All
+  export let shouldShowSubIssues: boolean | undefined = true
   export let shouldShowEmptyGroups: boolean | undefined = false
   export let includedGroups: Partial<Record<IssuesGroupByKeys, Array<any>>> = {}
   export let label: string | undefined = undefined
@@ -122,13 +123,14 @@
 
     return includedGroups[groupByKey]?.includes(x)
   })
-  $: includedIssuesQuery = getIncludedIssuesQuery(includedGroups, statuses)
+  $: includedIssuesQuery = getIncludedIssuesQuery(includedGroups, statuses, shouldShowSubIssues)
   $: modifiedOnIssuesQuery = getModifiedOnIssuesFilterQuery(issues, completedIssuesPeriod)
   $: statuses = [...statusesById.values()]
 
   const getIncludedIssuesQuery = (
     groups: Partial<Record<IssuesGroupByKeys, Array<any>>>,
-    issueStatuses: IssueStatus[]
+    issueStatuses: IssueStatus[],
+    withSubIssues?: boolean
   ) => {
     const resultMap: { [p: string]: { $in: any[] } } = {}
 
@@ -137,7 +139,7 @@
       resultMap[key] = { $in: includedCategories }
     }
 
-    return resultMap
+    return { ...resultMap, ...(withSubIssues ? {} : { attachedTo: tracker.ids.NoParent }) }
   }
 
   const getModifiedOnIssuesFilterQuery = (
@@ -289,6 +291,7 @@
           orderBy: IssuesOrdering
           groupBy: IssuesGrouping
           completedIssuesPeriod: IssuesDateModificationPeriod
+          shouldShowSubIssues: boolean
           shouldShowEmptyGroups: boolean
         }
       | undefined
@@ -304,6 +307,7 @@
     groupingKey = result.groupBy
     orderingKey = result.orderBy
     completedIssuesPeriod = result.completedIssuesPeriod
+    shouldShowSubIssues = result.shouldShowSubIssues
     shouldShowEmptyGroups = result.shouldShowEmptyGroups
 
     if (result.groupBy === IssuesGrouping.Assignee || result.groupBy === IssuesGrouping.NoGrouping) {
@@ -318,7 +322,7 @@
 
     showPopup(
       ViewOptionsPopup,
-      { groupBy: groupingKey, orderBy: orderingKey, completedIssuesPeriod, shouldShowEmptyGroups },
+      { groupBy: groupingKey, orderBy: orderingKey, completedIssuesPeriod, shouldShowSubIssues, shouldShowEmptyGroups },
       eventToHTMLElement(event),
       undefined,
       handleOptionsUpdated
diff --git a/plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte b/plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte
index dbf780b12b..379518c9e8 100644
--- a/plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte
@@ -25,13 +25,14 @@
   export let groupBy: IssuesGrouping | undefined = undefined
   export let orderBy: IssuesOrdering | undefined = undefined
   export let completedIssuesPeriod: IssuesDateModificationPeriod | null = null
+  export let shouldShowSubIssues: boolean | undefined = false
   export let shouldShowEmptyGroups: boolean | undefined = false
 
   const groupByItems = issuesGroupByOptions
   const orderByItems = issuesOrderByOptions
   const dateModificationPeriodItems = issuesDateModificationPeriodOptions
 
-  $: dispatch('update', { groupBy, orderBy, completedIssuesPeriod, shouldShowEmptyGroups })
+  $: dispatch('update', { groupBy, orderBy, completedIssuesPeriod, shouldShowSubIssues, shouldShowEmptyGroups })
 </script>
 
 <div class="root">
@@ -64,6 +65,14 @@
         </div>
       </div>
     {/if}
+    <div class="viewOption">
+      <div class="label">
+        <Label label={tracker.string.SubIssues} />
+      </div>
+      <div class="optionContainer">
+        <MiniToggle bind:on={shouldShowSubIssues} />
+      </div>
+    </div>
     {#if groupBy === IssuesGrouping.Status || groupBy === IssuesGrouping.Priority}
       <div class="viewOption">
         <div class="label">