From e4e39469c6e158e0f4b0c2d426eddbb340a7d319 Mon Sep 17 00:00:00 2001
From: Artyom Grigorovich <grigorovichartyom@gmail.com>
Date: Wed, 20 Apr 2022 13:06:05 +0700
Subject: [PATCH] Tracker: View options - Grouping (#1442)

Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>
---
 .../ui/src/components/icons/Options.svelte    |   9 ++
 packages/ui/src/index.ts                      |   1 +
 plugins/tracker-assets/lang/en.json           |  12 +-
 .../src/components/CreateIssue.svelte         |  28 ++--
 .../src/components/DropdownNative.svelte      |  39 ++++++
 .../src/components/PrioritySelector.svelte    |  22 +++-
 .../src/components/StatusSelector.svelte      |  14 +-
 .../src/components/issues/Active.svelte       |   6 +-
 .../issues/AssigneePresenter.svelte           |  87 +++++++++++--
 .../src/components/issues/Backlog.svelte      |   2 +-
 .../issues/CategoryPresenter.svelte           |  52 +++++---
 .../src/components/issues/Issues.svelte       | 121 ++++++++++++++----
 .../src/components/issues/IssuesList.svelte   |   7 +-
 .../issues/PriorityPresenter.svelte           |  22 +++-
 .../components/issues/StatusPresenter.svelte  |  26 +++-
 .../components/issues/ViewOptionsPopup.svelte |  86 +++++++++++++
 plugins/tracker-resources/src/index.ts        |   4 +-
 plugins/tracker-resources/src/plugin.ts       |   8 +-
 plugins/tracker-resources/src/utils.ts        |  48 ++++++-
 plugins/tracker/src/index.ts                  |  20 +++
 20 files changed, 523 insertions(+), 91 deletions(-)
 create mode 100644 packages/ui/src/components/icons/Options.svelte
 create mode 100644 plugins/tracker-resources/src/components/DropdownNative.svelte
 create mode 100644 plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte

diff --git a/packages/ui/src/components/icons/Options.svelte b/packages/ui/src/components/icons/Options.svelte
new file mode 100644
index 0000000000..b0d1346135
--- /dev/null
+++ b/packages/ui/src/components/icons/Options.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let size: 'small' | 'medium' | 'large'
+    const fill: string = 'currentColor'
+</script>
+  
+  <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.34943 2.12195L4.41226 2.18673L6.84829 5.19443C6.9204 5.28346 6.95975 5.39455 6.95975 5.50912C6.95975 5.75458 6.78287 5.95873 6.54962 6.00107L6.45975 6.00912L5.2009 6.00836C5.08013 8.94612 4.75119 13.9988 4.01089 13.9988C3.42906 13.9988 3.03779 11.4583 2.83711 6.37732L2.8231 6.01007L1.50001 6.00912C1.38246 6.00912 1.26867 5.96771 1.17862 5.89215C0.990587 5.73437 0.947891 5.46765 1.06539 5.26176L1.11699 5.18773L3.64068 2.18003C3.66126 2.15551 3.68414 2.13302 3.70902 2.11288C3.89976 1.95839 4.16972 1.96734 4.34943 2.12195ZM11.2536 12.0016C11.6675 12.0016 12.003 12.3371 12.003 12.751C12.003 13.1649 11.6675 13.5004 11.2536 13.5004H8.75634C8.34245 13.5004 8.00693 13.1649 8.00693 12.751C8.00693 12.3371 8.34245 12.0016 8.75634 12.0016H11.2536ZM12.2526 9.00393C12.6665 9.00393 13.002 9.33946 13.002 9.75335C13.002 10.1672 12.6665 10.5028 12.2526 10.5028H8.75634C8.34245 10.5028 8.00693 10.1672 8.00693 9.75335C8.00693 9.33946 8.34245 9.00393 8.75634 9.00393H12.2526ZM13.2516 6.00629C13.6655 6.00629 14.001 6.34182 14.001 6.7557C14.001 7.16959 13.6655 7.50511 13.2516 7.50511H8.75634C8.34245 7.50511 8.00693 7.16959 8.00693 6.7557C8.00693 6.34182 8.34245 6.00629 8.75634 6.00629H13.2516ZM14.2506 3.00865C14.6645 3.00865 15 3.34418 15 3.75806C15 4.17195 14.6645 4.50747 14.2506 4.50747H8.75634C8.34245 4.50747 8.00693 4.17195 8.00693 3.75806C8.00693 3.34418 8.34245 3.00865 8.75634 3.00865H14.2506Z"/>
+  </svg>
+  
\ No newline at end of file
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 692e3cebb8..0054ebee97 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -104,6 +104,7 @@ export { default as IconNavPrev } from './components/icons/NavPrev.svelte'
 export { default as IconNavNext } from './components/icons/NavNext.svelte'
 export { default as IconDPCalendar } from './components/calendar/icons/DPCalendar.svelte'
 export { default as IconDPCalendarOver } from './components/calendar/icons/DPCalendarOver.svelte'
+export { default as IconOptions } from './components/icons/Options.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'
diff --git a/plugins/tracker-assets/lang/en.json b/plugins/tracker-assets/lang/en.json
index 2d9d96431d..f9d9752bff 100644
--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@@ -38,7 +38,7 @@
 
     "Title": "Title",
     "Description": "",
-    "Status": "",
+    "Status": "Status",
     "Number": "Number",
     "Assignee": "Assignee",
     "AssignTo": "Assign to...",
@@ -51,7 +51,7 @@
     "Labels": "Labels",
     "Project": "Project",
     "Space": "",
-    "DueDate": "Set due date\u2026",
+    "SetDueDate": "Set due date\u2026",
     "ModificationDate": "Updated {value}",
     "Team": "",
     "Issue": "",
@@ -65,7 +65,13 @@
     "DueDatePopupTitle": "Due on {value}",
     "DueDatePopupOverdueTitle": "Was due on {value}",
     "DueDatePopupDescription": "{value, plural, =0 {Today} =1 {Tomorrow} other {# days remaining}}",
-    "DueDatePopupOverdueDescription": "{value, plural, =1 {1 day overdue} other {# days overdue}}"
+    "DueDatePopupOverdueDescription": "{value, plural, =1 {1 day overdue} other {# days overdue}}",
+    "Grouping": "Grouping",
+    "Ordering": "Ordering",
+    "NoGrouping": "No grouping",
+    "NoAssignee": "No assignee",
+    "LastUpdated": "Last updated",
+    "DueDate": "Due date"
   },
   "status": {}
 }
\ No newline at end of file
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index 00eea83f7a..3c8586e81f 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -28,11 +28,14 @@
 
   export let space: Ref<Team>
   export let parent: Ref<Issue> | undefined
-  export let issueStatus = IssueStatus.Backlog
+  export let status: IssueStatus = IssueStatus.Backlog
+  export let priority: IssuePriority = IssuePriority.NoPriority
+  export let assignee: Ref<Employee> | null = null
+
   $: _space = space
   $: _parent = parent
 
-  let assignee: Ref<Employee> | null = null
+  let currentAssignee: Ref<Employee> | null = assignee
 
   const object: Data<Issue> = {
     title: '',
@@ -40,8 +43,8 @@
     assignee: null,
     number: 0,
     rank: '',
-    status: issueStatus,
-    priority: IssuePriority.NoPriority,
+    status: status,
+    priority: priority,
     dueDate: null,
     comments: 0
   }
@@ -87,7 +90,7 @@
     const value: Data<Issue> = {
       title: object.title,
       description: object.description,
-      assignee,
+      assignee: currentAssignee,
       number: (incResult as any).object.sequence,
       status: object.status,
       priority: object.priority,
@@ -101,7 +104,7 @@
   }
 
   const moreActions: Array<{ icon: Asset; label: IntlString }> = [
-    { icon: tracker.icon.DueDate, label: tracker.string.DueDate },
+    { icon: tracker.icon.DueDate, label: tracker.string.SetDueDate },
     { icon: tracker.icon.Parent, label: tracker.string.Parent }
   ]
 
@@ -138,7 +141,14 @@
   }}
 >
   <svelte:fragment slot="space">
-    <Button icon={tracker.icon.Home} label={presentation.string.Save} size={'small'} kind={'no-border'} disabled on:click={() => { }} />
+    <Button
+      icon={tracker.icon.Home}
+      label={presentation.string.Save}
+      size={'small'}
+      kind={'no-border'}
+      disabled
+      on:click={() => {}}
+    />
   </svelte:fragment>
   <EditBox
     bind:value={object.title}
@@ -160,7 +170,7 @@
       _class={contact.class.Employee}
       label={tracker.string.Assignee}
       placeholder={tracker.string.AssignTo}
-      bind:value={assignee}
+      bind:value={currentAssignee}
       allowDeselect
       titleDeselect={tracker.string.Unassigned}
     />
@@ -190,6 +200,6 @@
     />
   </svelte:fragment>
   <svelte:fragment slot="footer">
-    <Button icon={IconAttachment} kind={'transparent'} on:click={() => { }} />
+    <Button icon={IconAttachment} kind={'transparent'} on:click={() => {}} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/tracker-resources/src/components/DropdownNative.svelte b/plugins/tracker-resources/src/components/DropdownNative.svelte
new file mode 100644
index 0000000000..4bd08d0c86
--- /dev/null
+++ b/plugins/tracker-resources/src/components/DropdownNative.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { IntlString } from '@anticrm/platform'
+  import { Label } from '@anticrm/ui'
+
+  export let items: Record<any, IntlString>
+  export let selected: any | undefined = undefined
+
+  $: dropdownItems = Object.entries(items)
+</script>
+
+<select class="dropdownNativeRoot" bind:value={selected}>
+  {#each dropdownItems as [key, value]}
+    <option value={key}>
+      <Label label={value} />
+    </option>
+  {/each}
+</select>
+
+<style lang="scss">
+    .dropdownNativeRoot {
+        justify-content: flex-start;
+        border: none;
+        min-width: 7rem;
+        height: 1.5rem;
+        padding: 0 1.1rem 0 0.5rem;
+        background-color: var(--popup-divider);
+        color: var(--caption-color);
+        border-radius: 0.25rem;
+        margin: 0;
+
+        &:hover {
+            border-color: var(--button-border-hover);
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+</style>
diff --git a/plugins/tracker-resources/src/components/PrioritySelector.svelte b/plugins/tracker-resources/src/components/PrioritySelector.svelte
index 2bc8b02d03..01cd140ff0 100644
--- a/plugins/tracker-resources/src/components/PrioritySelector.svelte
+++ b/plugins/tracker-resources/src/components/PrioritySelector.svelte
@@ -22,6 +22,7 @@
   export let kind: 'button' | 'icon' = 'button'
   export let shouldShowLabel: boolean = true
   export let onPriorityChange: ((newPriority: IssuePriority | undefined) => void) | undefined = undefined
+  export let isEditable: boolean = true
 
   const prioritiesInfo = [
     IssuePriority.NoPriority,
@@ -32,6 +33,9 @@
   ].map((p) => ({ id: p, ...issuePriorities[p] }))
 
   const handlePriorityEditorOpened = (event: MouseEvent) => {
+    if (!isEditable) {
+      return
+    }
     showPopup(
       SelectPopup,
       { value: prioritiesInfo, placeholder: tracker.string.SetPriority, searchable: true },
@@ -51,12 +55,12 @@
     on:click={handlePriorityEditorOpened}
   />
 {:else if kind === 'icon'}
-  <div class="flex-presenter" on:click={handlePriorityEditorOpened}>
-    <div class="priorityIcon">
+  <div class={isEditable ? 'flex-presenter' : 'presenter'} on:click={handlePriorityEditorOpened}>
+    <div class="priorityIcon" class:mPriorityIconEditable={isEditable}>
       <Icon icon={issuePriorities[priority].icon} size={'small'} />
     </div>
     {#if shouldShowLabel}
-      <div class="label nowrap">
+      <div class="label nowrap ml-2">
         <Label label={issuePriorities[priority].label} />
       </div>
     {/if}
@@ -64,13 +68,21 @@
 {/if}
 
 <style lang="scss">
+  .presenter {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+
   .priorityIcon {
     width: 1rem;
     height: 1rem;
     color: var(--theme-content-dark-color);
 
-    &:hover {
-      color: var(--theme-caption-color);
+    &.mPriorityIconEditable {
+      &:hover {
+        color: var(--theme-caption-color);
+      }
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/StatusSelector.svelte b/plugins/tracker-resources/src/components/StatusSelector.svelte
index eebf7b42b7..2443fefc0f 100644
--- a/plugins/tracker-resources/src/components/StatusSelector.svelte
+++ b/plugins/tracker-resources/src/components/StatusSelector.svelte
@@ -22,6 +22,7 @@
   export let kind: 'button' | 'icon' = 'button'
   export let shouldShowLabel: boolean = true
   export let onStatusChange: ((newStatus: IssueStatus | undefined) => void) | undefined = undefined
+  export let isEditable: boolean = true
 
   const statusesInfo = [
     IssueStatus.Backlog,
@@ -32,6 +33,9 @@
   ].map((s) => ({ id: s, ...issueStatuses[s] }))
 
   const handleStatusEditorOpened = (event: MouseEvent) => {
+    if (!isEditable) {
+      return
+    }
     showPopup(
       SelectPopup,
       { value: statusesInfo, placeholder: tracker.string.SetStatus, searchable: true },
@@ -51,12 +55,12 @@
     on:click={handleStatusEditorOpened}
   />
 {:else if kind === 'icon'}
-  <div class="flex-presenter" on:click={handleStatusEditorOpened}>
+  <div class={isEditable ? 'flex-presenter' : 'presenter'} on:click={handleStatusEditorOpened}>
     <div class="statusIcon">
       <Icon icon={issueStatuses[status].icon} size={'small'} />
     </div>
     {#if shouldShowLabel}
-      <div class="label nowrap">
+      <div class="label nowrap ml-2">
         <Label label={issueStatuses[status].label} />
       </div>
     {/if}
@@ -64,6 +68,12 @@
 {/if}
 
 <style lang="scss">
+  .presenter {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+
   .statusIcon {
     width: 1rem;
     height: 1rem;
diff --git a/plugins/tracker-resources/src/components/issues/Active.svelte b/plugins/tracker-resources/src/components/issues/Active.svelte
index 8dfe9afb79..341c6d7ff6 100644
--- a/plugins/tracker-resources/src/components/issues/Active.svelte
+++ b/plugins/tracker-resources/src/components/issues/Active.svelte
@@ -7,4 +7,8 @@
   export let currentSpace: Ref<Team>
 </script>
 
-<Issues {currentSpace} categories={[IssueStatus.InProgress, IssueStatus.Todo]} title={tracker.string.ActiveIssues} />
+<Issues
+  {currentSpace}
+  includedGroups={{ status: [IssueStatus.InProgress, IssueStatus.Todo] }}
+  title={tracker.string.ActiveIssues}
+/>
diff --git a/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte b/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
index b819f0c0a3..453421894f 100644
--- a/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
@@ -20,18 +20,60 @@
   import { eventToHTMLElement, showPopup, Tooltip } from '@anticrm/ui'
 
   import tracker from '../../plugin'
+  import { IntlString, translate } from '@anticrm/platform'
+  import { onMount } from 'svelte'
 
   export let value: WithLookup<Issue>
   export let currentSpace: Ref<Team> | undefined = undefined
-
-  $: employee = value?.$lookup?.assignee as Employee | undefined
-  $: avatar = employee?.avatar
-  $: formattedName = employee?.name ? formatName(employee.name) : ''
+  export let isEditable: boolean = true
+  export let shouldShowLabel: boolean = false
+  export let defaultName: IntlString | undefined = undefined
 
   const client = getClient()
 
+  let defaultNameString: string = ''
+  let assignee: Employee | undefined = undefined
+
+  $: employee = (value?.$lookup?.assignee ?? assignee) as Employee | undefined
+  $: avatar = employee?.avatar
+  $: formattedName = employee?.name ? formatName(employee.name) : defaultNameString
+  $: label = employee ? tracker.string.AssignedTo : tracker.string.AssignTo
+
+  $: findEmployeeById(value.assignee)
+  $: getDefaultNameString = async () => {
+    if (!defaultName) {
+      return
+    }
+
+    const result = await translate(defaultName, {})
+
+    if (!result) {
+      return
+    }
+
+    defaultNameString = result
+  }
+
+  onMount(() => {
+    getDefaultNameString()
+  })
+
+  const findEmployeeById = async (id: Ref<Employee> | null) => {
+    if (!id) {
+      return undefined
+    }
+
+    const current = await client.findOne(contact.class.Employee, { _id: id })
+
+    if (current === undefined) {
+      return
+    }
+
+    assignee = current
+  }
+
   const handleAssigneeChanged = async (result: Employee | null | undefined) => {
-    if (result === undefined) {
+    if (!isEditable || result === undefined) {
       return
     }
 
@@ -47,6 +89,9 @@
   }
 
   const handleAssigneeEditorOpened = async (event: MouseEvent) => {
+    if (!isEditable) {
+      return
+    }
     showPopup(
       UsersPopup,
       {
@@ -61,10 +106,36 @@
   }
 </script>
 
-<Tooltip label={employee ? tracker.string.AssignedTo : tracker.string.AssignTo} props={{ value: formattedName }}>
-  <div class="flex-presenter" on:click={handleAssigneeEditorOpened}>
+{#if isEditable}
+  <Tooltip {label} props={{ value: formattedName }}>
+    <div class="flex-presenter" on:click={handleAssigneeEditorOpened}>
+      <div class="icon">
+        <Avatar size={'x-small'} {avatar} />
+      </div>
+      {#if shouldShowLabel}
+        <div class="label nowrap ml-2">
+          {formattedName}
+        </div>
+      {/if}
+    </div>
+  </Tooltip>
+{:else}
+  <div class="presenter">
     <div class="icon">
       <Avatar size={'x-small'} {avatar} />
     </div>
+    {#if shouldShowLabel}
+      <div class="label nowrap ml-2">
+        {formattedName}
+      </div>
+    {/if}
   </div>
-</Tooltip>
+{/if}
+
+<style lang="scss">
+  .presenter {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+</style>
diff --git a/plugins/tracker-resources/src/components/issues/Backlog.svelte b/plugins/tracker-resources/src/components/issues/Backlog.svelte
index 901e9866e3..ff2afa70f4 100644
--- a/plugins/tracker-resources/src/components/issues/Backlog.svelte
+++ b/plugins/tracker-resources/src/components/issues/Backlog.svelte
@@ -7,4 +7,4 @@
   export let currentSpace: Ref<Team>
 </script>
 
-<Issues title={tracker.string.BacklogIssues} {currentSpace} categories={[IssueStatus.Backlog]} />
+<Issues title={tracker.string.BacklogIssues} {currentSpace} includedGroups={{ status: [IssueStatus.Backlog] }} />
diff --git a/plugins/tracker-resources/src/components/issues/CategoryPresenter.svelte b/plugins/tracker-resources/src/components/issues/CategoryPresenter.svelte
index 9ee63d0dd6..3e190d57d2 100644
--- a/plugins/tracker-resources/src/components/issues/CategoryPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/CategoryPresenter.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
   import contact from '@anticrm/contact'
   import { DocumentQuery, FindOptions, Ref } from '@anticrm/core'
-  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import { Button, eventToHTMLElement, Icon, IconAdd, Label, Scroller, showPopup, Tooltip } from '@anticrm/ui'
+  import { Issue, Team } from '@anticrm/tracker'
+  import { Component, Button, eventToHTMLElement, IconAdd, Scroller, showPopup, Tooltip } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
-  import { issueStatuses } from '../../utils'
+  import { IssuesGroupByKeys, IssuesOrderByKeys, issuesGroupPresenterMap, issuesSortOrderMap } from '../../utils'
   import CreateIssue from '../CreateIssue.svelte'
   import IssuesList from './IssuesList.svelte'
 
   export let query: DocumentQuery<Issue>
-  export let category: IssueStatus
+  export let groupBy: { key: IssuesGroupByKeys | undefined; group: Issue[IssuesGroupByKeys] | undefined }
+  export let orderBy: IssuesOrderByKeys
   export let currentSpace: Ref<Team> | undefined = undefined
   export let currentTeam: Team
 
   const dispatch = createEventDispatcher()
-
   const options: FindOptions<Issue> = {
     lookup: {
       assignee: contact.class.Employee
@@ -24,28 +24,40 @@
 
   let issuesAmount = 0
 
+  $: grouping = groupBy.key !== undefined && groupBy.group !== undefined ? { [groupBy.key]: groupBy.group } : {}
+  $: headerComponent = groupBy.key !== undefined ? issuesGroupPresenterMap[groupBy.key] : null
+
   const handleNewIssueAdded = (event: MouseEvent) => {
     if (!currentSpace) {
       return
     }
 
-    showPopup(CreateIssue, { space: currentSpace, issueStatus: category }, eventToHTMLElement(event))
+    showPopup(CreateIssue, { space: currentSpace, ...grouping }, eventToHTMLElement(event))
   }
 </script>
 
 <div class="category" class:visible={issuesAmount > 0}>
-  <div class="header categoryHeader flex-between label">
-    <div class="flex-row-center gap-2">
-      <Icon icon={issueStatuses[category].icon} size={'small'} />
-      <span class="lines-limit-2"><Label label={issueStatuses[category].label} /></span>
-      <span class="eLabelCounter ml-2">{issuesAmount}</span>
+  {#if headerComponent}
+    <div class="header categoryHeader flex-between label">
+      <div class="flex-row-center gap-2">
+        <Component
+          is={headerComponent}
+          props={{
+            isEditable: false,
+            shouldShowLabel: true,
+            value: grouping,
+            defaultName: groupBy.key === 'assignee' ? tracker.string.NoAssignee : undefined
+          }}
+        />
+        <span class="eLabelCounter ml-2">{issuesAmount}</span>
+      </div>
+      <div class="flex mr-1">
+        <Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}>
+          <Button icon={IconAdd} kind={'transparent'} on:click={handleNewIssueAdded} />
+        </Tooltip>
+      </div>
     </div>
-    <div class="flex mr-1">
-      <Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}>
-        <Button icon={IconAdd} kind={'transparent'} on:click={handleNewIssueAdded} />
-      </Tooltip>
-    </div>
-  </div>
+  {/if}
   <Scroller>
     <IssuesList
       _class={tracker.class.Issue}
@@ -60,8 +72,8 @@
         { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter },
         { key: '', presenter: tracker.component.AssigneePresenter, props: { currentSpace } }
       ]}
-      {options}
-      query={{ ...query, status: category }}
+      options={{ ...options, sort: { [orderBy]: issuesSortOrderMap[orderBy] } }}
+      query={{ ...query, ...grouping }}
       on:content={(evt) => {
         issuesAmount = evt.detail.length
         dispatch('content', issuesAmount)
@@ -81,7 +93,7 @@
   .categoryHeader {
     height: 2.5rem;
     background-color: var(--theme-table-bg-hover);
-    padding-left: 2rem;
+    padding-left: 2.3rem;
   }
 
   .label {
diff --git a/plugins/tracker-resources/src/components/issues/Issues.svelte b/plugins/tracker-resources/src/components/issues/Issues.svelte
index 85c457e809..74cd73611f 100644
--- a/plugins/tracker-resources/src/components/issues/Issues.svelte
+++ b/plugins/tracker-resources/src/components/issues/Issues.svelte
@@ -13,59 +13,134 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import contact from '@anticrm/contact'
   import type { DocumentQuery, Ref } from '@anticrm/core'
   import { createQuery } from '@anticrm/presentation'
-  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import { Label, ScrollBox } from '@anticrm/ui'
+  import { Issue, Team, IssuesGrouping, IssuesOrdering } from '@anticrm/tracker'
+  import { Button, Label, ScrollBox, IconOptions, showPopup, eventToHTMLElement } from '@anticrm/ui'
   import CategoryPresenter from './CategoryPresenter.svelte'
   import tracker from '../../plugin'
   import { IntlString } from '@anticrm/platform'
+  import ViewOptionsPopup from './ViewOptionsPopup.svelte'
+  import { IssuesGroupByKeys, issuesGroupKeyMap, issuesOrderKeyMap } from '../../utils'
 
   export let currentSpace: Ref<Team>
-  export let categories = [
-    IssueStatus.InProgress,
-    IssueStatus.Todo,
-    IssueStatus.Backlog,
-    IssueStatus.Done,
-    IssueStatus.Canceled
-  ]
   export let title: IntlString = tracker.string.AllIssues
   export let query: DocumentQuery<Issue> = {}
   export let search: string = ''
+  export let groupingKey: IssuesGrouping = IssuesGrouping.Status
+  export let orderingKey: IssuesOrdering = IssuesOrdering.LastUpdated
+  export let includedGroups: Partial<Record<IssuesGroupByKeys, Array<any>>> = {}
 
+  const ENTRIES_LIMIT = 200
   const spaceQuery = createQuery()
+  const issuesQuery = createQuery()
   const issuesMap: { [status: string]: number } = {}
+  let currentTeam: Team | undefined
+  let issues: Issue[] = []
 
-  $: getTotalIssues = () => {
+  $: totalIssues = getTotalIssues(issuesMap)
+
+  $: resultQuery =
+    search === ''
+      ? { space: currentSpace, ...includedIssuesQuery, ...query }
+      : { $search: search, space: currentSpace, ...includedIssuesQuery, ...query }
+
+  $: spaceQuery.query(tracker.class.Team, { _id: currentSpace }, (res) => {
+    currentTeam = res.shift()
+  })
+
+  $: groupByKey = issuesGroupKeyMap[groupingKey]
+  $: categories = getCategories(groupByKey, issues)
+  $: displayedCategories = (categories as any[]).filter((x: ReturnType<typeof getCategories>) => {
+    return (
+      groupByKey === undefined || includedGroups[groupByKey] === undefined || includedGroups[groupByKey]?.includes(x)
+    )
+  })
+  $: includedIssuesQuery = getIncludedIssues(includedGroups)
+
+  const getIncludedIssues = (groups: Partial<Record<IssuesGroupByKeys, Array<any>>>) => {
+    const resultMap: { [p: string]: { $in: any[] } } = {}
+
+    for (const [key, value] of Object.entries(groups)) {
+      resultMap[key] = { $in: value }
+    }
+
+    return resultMap
+  }
+
+  $: issuesQuery.query<Issue>(
+    tracker.class.Issue,
+    { ...includedIssuesQuery },
+    (result) => {
+      issues = result
+    },
+    { limit: ENTRIES_LIMIT, lookup: { assignee: contact.class.Employee } }
+  )
+
+  const getCategories = (key: IssuesGroupByKeys | undefined, elements: Issue[]) => {
+    if (!key) {
+      return [undefined]
+    }
+
+    return Array.from(
+      new Set(
+        elements.map((x) => {
+          return x[key]
+        })
+      )
+    )
+  }
+
+  const getTotalIssues = (map: { [status: string]: number }) => {
     let total = 0
 
-    for (const issuesAmount of Object.values(issuesMap)) {
-      total += issuesAmount
+    for (const amount of Object.values(map)) {
+      total += amount
     }
 
     return total
   }
 
-  $: resultQuery =
-    search === '' ? { space: currentSpace, ...query } : { $search: search, space: currentSpace, ...query }
+  const handleOptionsUpdated = (result: { orderBy: IssuesOrdering; groupBy: IssuesGrouping } | undefined) => {
+    if (result === undefined) {
+      return
+    }
 
-  let currentTeam: Team | undefined
+    for (const prop of Object.getOwnPropertyNames(issuesMap)) {
+      delete issuesMap[prop]
+    }
 
-  $: spaceQuery.query(tracker.class.Team, { _id: currentSpace }, (res) => {
-    currentTeam = res.shift()
-  })
+    groupingKey = result.groupBy
+    orderingKey = result.orderBy
+  }
+
+  const handleOptionsEditorOpened = (event: MouseEvent) => {
+    if (!currentSpace) {
+      return
+    }
+
+    showPopup(
+      ViewOptionsPopup,
+      { groupBy: groupingKey, orderBy: orderingKey },
+      eventToHTMLElement(event),
+      undefined,
+      handleOptionsUpdated
+    )
+  }
 </script>
 
 {#if currentTeam}
   <ScrollBox vertical stretch>
-    <div class="fs-title">
-      <Label label={title} params={{ value: getTotalIssues() }} />
+    <div class="fs-title flex-between mt-1 mr-1 ml-1">
+      <Label label={title} params={{ value: totalIssues }} />
+      <Button icon={IconOptions} kind={'link'} on:click={handleOptionsEditorOpened} />
     </div>
-
     <div class="mt-4">
-      {#each categories as category}
+      {#each displayedCategories as category}
         <CategoryPresenter
-          {category}
+          groupBy={{ key: groupByKey, group: category }}
+          orderBy={issuesOrderKeyMap[orderingKey]}
           query={resultQuery}
           {currentSpace}
           {currentTeam}
diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
index cd337bf09f..7279d88ce9 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
@@ -14,7 +14,6 @@
 -->
 <script lang="ts">
   import { Class, Doc, DocumentQuery, FindOptions, Ref, getObjectValue } from '@anticrm/core'
-  import { SortingOrder } from '@anticrm/core'
   import { createQuery, getClient } from '@anticrm/presentation'
   import { CheckBox, Loading, showPopup, Spinner, IconMoreV, Tooltip } from '@anticrm/ui'
   import { BuildModelKey } from '@anticrm/view'
@@ -36,7 +35,6 @@
 
   const DOCS_MAX_AMOUNT = 200
   const liveQuery = createQuery()
-  const sort = { modifiedOn: SortingOrder.Descending }
 
   let selectedIssueIds = new Set<Ref<Doc>>()
   let selectedRowIndex: number | undefined
@@ -61,7 +59,7 @@
         dispatch('content', docObjects)
         isLoading = false
       },
-      { sort, ...options, limit: DOCS_MAX_AMOUNT }
+      { ...options, limit: DOCS_MAX_AMOUNT }
     )
   }
 
@@ -239,9 +237,6 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0.03rem;
-      border-radius: 0.25rem;
-      background-color: rgba(247, 248, 248, 0.5);
       opacity: 0;
 
       &:hover {
diff --git a/plugins/tracker-resources/src/components/issues/PriorityPresenter.svelte b/plugins/tracker-resources/src/components/issues/PriorityPresenter.svelte
index 47a5011d0d..ab3e993c19 100644
--- a/plugins/tracker-resources/src/components/issues/PriorityPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/PriorityPresenter.svelte
@@ -22,11 +22,13 @@
 
   export let value: Issue
   export let currentSpace: Ref<Team> | undefined = undefined
+  export let isEditable: boolean = true
+  export let shouldShowLabel: boolean = false
 
   const client = getClient()
 
   const handlePriorityChanged = async (newPriority: IssuePriority | undefined) => {
-    if (newPriority === undefined) {
+    if (!isEditable || newPriority === undefined) {
       return
     }
 
@@ -41,12 +43,22 @@
 </script>
 
 {#if value}
-  <Tooltip direction={'bottom'} label={tracker.string.SetPriority}>
+  {#if isEditable}
+    <Tooltip direction={'bottom'} label={tracker.string.SetPriority}>
+      <PrioritySelector
+        kind={'icon'}
+        {isEditable}
+        {shouldShowLabel}
+        priority={value.priority}
+        onPriorityChange={handlePriorityChanged}
+      />
+    </Tooltip>
+  {:else}
     <PrioritySelector
       kind={'icon'}
-      shouldShowLabel={false}
+      {isEditable}
+      {shouldShowLabel}
       priority={value.priority}
-      onPriorityChange={handlePriorityChanged}
     />
-  </Tooltip>
+  {/if}
 {/if}
diff --git a/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte b/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
index ea309319d8..476f82a719 100644
--- a/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
@@ -22,11 +22,13 @@
 
   export let value: Issue
   export let currentSpace: Ref<Team> | undefined = undefined
+  export let isEditable: boolean = true
+  export let shouldShowLabel: boolean = false
 
   const client = getClient()
 
   const handleStatusChanged = async (newStatus: IssueStatus | undefined) => {
-    if (newStatus === undefined) {
+    if (!isEditable || newStatus === undefined) {
       return
     }
 
@@ -41,7 +43,23 @@
 </script>
 
 {#if value}
-  <Tooltip direction={'bottom'} label={tracker.string.SetStatus}>
-    <StatusSelector kind={'icon'} shouldShowLabel={false} status={value.status} onStatusChange={handleStatusChanged} />
-  </Tooltip>
+  {#if isEditable}
+    <Tooltip direction={'bottom'} label={tracker.string.SetStatus}>
+      <StatusSelector
+        kind={'icon'}
+        {isEditable}
+        {shouldShowLabel}
+        status={value.status}
+        onStatusChange={handleStatusChanged}
+      />
+    </Tooltip>
+  {:else}
+    <StatusSelector
+      kind={'icon'}
+      {isEditable}
+      {shouldShowLabel}
+      status={value.status}
+      onStatusChange={handleStatusChanged}
+    />
+  {/if}
 {/if}
diff --git a/plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte b/plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte
new file mode 100644
index 0000000000..7a5a436dd8
--- /dev/null
+++ b/plugins/tracker-resources/src/components/issues/ViewOptionsPopup.svelte
@@ -0,0 +1,86 @@
+<!--
+// 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">
+  import { IssuesGrouping, IssuesOrdering } from '@anticrm/tracker'
+  import { Label } from '@anticrm/ui'
+  import tracker from '../../plugin'
+  import { issuesGroupByOptions, issuesOrderByOptions } from '../../utils'
+  import DropdownNative from '../DropdownNative.svelte'
+  import { createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
+
+  export let groupBy: IssuesGrouping | undefined = undefined
+  export let orderBy: IssuesOrdering | undefined = undefined
+
+  const groupByItems = issuesGroupByOptions
+  const orderByItems = issuesOrderByOptions
+
+  $: dispatch('update', { groupBy, orderBy })
+</script>
+
+<div class="root">
+  <div class="sortingContainer">
+    <div class="viewOption">
+      <div class="label">
+        <Label label={tracker.string.Grouping} />
+      </div>
+      <div class="dropdownContainer">
+        <DropdownNative items={groupByItems} bind:selected={groupBy} />
+      </div>
+    </div>
+    <div class="viewOption">
+      <div class="label">
+        <Label label={tracker.string.Ordering} />
+      </div>
+      <div class="dropdownContainer">
+        <DropdownNative items={orderByItems} bind:selected={orderBy} />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .root {
+    display: flex;
+    flex-direction: column;
+    width: 17rem;
+    background-color: var(--board-card-bg-color);
+  }
+
+  .sortingContainer {
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--popup-divider);
+  }
+
+  .viewOption {
+    display: flex;
+    min-height: 2rem;
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
+    min-width: 5rem;
+    color: var(--theme-content-dark-color);
+  }
+
+  .dropdownContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-grow: 1;
+  }
+</style>
diff --git a/plugins/tracker-resources/src/index.ts b/plugins/tracker-resources/src/index.ts
index 7541089a4c..6c3184783f 100644
--- a/plugins/tracker-resources/src/index.ts
+++ b/plugins/tracker-resources/src/index.ts
@@ -31,6 +31,7 @@ import PriorityPresenter from './components/issues/PriorityPresenter.svelte'
 import StatusPresenter from './components/issues/StatusPresenter.svelte'
 import DueDatePresenter from './components/issues/DueDatePresenter.svelte'
 import AssigneePresenter from './components/issues/AssigneePresenter.svelte'
+import ViewOptionsPopup from './components/issues/ViewOptionsPopup.svelte'
 
 import ModificationDatePresenter from './components/issues/ModificationDatePresenter.svelte'
 import EditIssue from './components/issues/EditIssue.svelte'
@@ -55,6 +56,7 @@ export default async (): Promise<Resources> => ({
     AssigneePresenter,
     DueDatePresenter,
     EditIssue,
-    NewIssueHeader
+    NewIssueHeader,
+    ViewOptionsPopup
   }
 })
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index d40bc60e81..7f8150d689 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -70,7 +70,7 @@ export default mergeIds(trackerId, tracker, {
     Attachments: '' as IntlString,
     Labels: '' as IntlString,
     Space: '' as IntlString,
-    DueDate: '' as IntlString,
+    SetDueDate: '' as IntlString,
     ModificationDate: '' as IntlString,
     Issue: '' as IntlString,
     Document: '' as IntlString,
@@ -81,6 +81,12 @@ export default mergeIds(trackerId, tracker, {
     DueDatePopupOverdueTitle: '' as IntlString,
     DueDatePopupDescription: '' as IntlString,
     DueDatePopupOverdueDescription: '' as IntlString,
+    Grouping: '' as IntlString,
+    Ordering: '' as IntlString,
+    NoGrouping: '' as IntlString,
+    NoAssignee: '' as IntlString,
+    LastUpdated: '' as IntlString,
+    DueDate: '' as IntlString,
 
     IssueTitlePlaceholder: '' as IntlString,
     IssueDescriptionPlaceholder: '' as IntlString,
diff --git a/plugins/tracker-resources/src/utils.ts b/plugins/tracker-resources/src/utils.ts
index a3de29dd64..d5c813627f 100644
--- a/plugins/tracker-resources/src/utils.ts
+++ b/plugins/tracker-resources/src/utils.ts
@@ -14,9 +14,9 @@
 // limitations under the License.
 //
 
-import { Ref } from '@anticrm/core'
+import { Ref, SortingOrder } from '@anticrm/core'
 import type { Asset, IntlString } from '@anticrm/platform'
-import { IssuePriority, IssueStatus, Team } from '@anticrm/tracker'
+import { IssuePriority, IssueStatus, Team, IssuesGrouping, IssuesOrdering, Issue } from '@anticrm/tracker'
 import { AnyComponent } from '@anticrm/ui'
 import { LexoDecimal, LexoNumeralSystem36, LexoRank } from 'lexorank'
 import LexoRankBucket from 'lexorank/lib/lexoRank/lexoRankBucket'
@@ -78,3 +78,47 @@ export const issuePriorities: Record<IssuePriority, { icon: Asset, label: IntlSt
   [IssuePriority.Medium]: { icon: tracker.icon.PriorityMedium, label: tracker.string.Medium },
   [IssuePriority.Low]: { icon: tracker.icon.PriorityLow, label: tracker.string.Low }
 }
+
+export const issuesGroupByOptions: Record<IssuesGrouping, IntlString> = {
+  [IssuesGrouping.Status]: tracker.string.Status,
+  [IssuesGrouping.Assignee]: tracker.string.Assignee,
+  [IssuesGrouping.Priority]: tracker.string.Priority,
+  [IssuesGrouping.NoGrouping]: tracker.string.NoGrouping
+}
+
+export const issuesOrderByOptions: Record<IssuesOrdering, IntlString> = {
+  [IssuesOrdering.Status]: tracker.string.Status,
+  [IssuesOrdering.Priority]: tracker.string.Priority,
+  [IssuesOrdering.LastUpdated]: tracker.string.LastUpdated,
+  [IssuesOrdering.DueDate]: tracker.string.DueDate
+}
+
+export type IssuesGroupByKeys = keyof Pick<Issue, 'status' | 'priority' | 'assignee' >
+export type IssuesOrderByKeys = keyof Pick<Issue, 'status' | 'priority' | 'modifiedOn' | 'dueDate'>
+
+export const issuesGroupKeyMap: Record<IssuesGrouping, IssuesGroupByKeys | undefined> = {
+  [IssuesGrouping.Status]: 'status',
+  [IssuesGrouping.Priority]: 'priority',
+  [IssuesGrouping.Assignee]: 'assignee',
+  [IssuesGrouping.NoGrouping]: undefined
+}
+
+export const issuesOrderKeyMap: Record<IssuesOrdering, IssuesOrderByKeys> = {
+  [IssuesOrdering.Status]: 'status',
+  [IssuesOrdering.Priority]: 'priority',
+  [IssuesOrdering.LastUpdated]: 'modifiedOn',
+  [IssuesOrdering.DueDate]: 'dueDate'
+}
+
+export const issuesSortOrderMap: Record<IssuesOrderByKeys, SortingOrder> = {
+  status: SortingOrder.Ascending,
+  priority: SortingOrder.Ascending,
+  modifiedOn: SortingOrder.Descending,
+  dueDate: SortingOrder.Descending
+}
+
+export const issuesGroupPresenterMap: Record<IssuesGroupByKeys, AnyComponent | undefined> = {
+  status: tracker.component.StatusPresenter,
+  priority: tracker.component.PriorityPresenter,
+  assignee: tracker.component.AssigneePresenter
+}
diff --git a/plugins/tracker/src/index.ts b/plugins/tracker/src/index.ts
index 2aaced7d82..27f07e20c5 100644
--- a/plugins/tracker/src/index.ts
+++ b/plugins/tracker/src/index.ts
@@ -49,6 +49,26 @@ export enum IssuePriority {
   Low
 }
 
+/**
+ * @public
+ */
+export enum IssuesGrouping {
+  Status = 'status',
+  Assignee = 'assignee',
+  Priority = 'priority',
+  NoGrouping = 'noGrouping'
+}
+
+/**
+ * @public
+ */
+export enum IssuesOrdering {
+  Status = 'status',
+  Priority = 'priority',
+  LastUpdated = 'lastUpdated',
+  DueDate = 'dueDate'
+}
+
 /**
  * @public
  */