[UBER-392] Add filter value presenter for projects (#3419)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@icloud.com>

models/tracker/src/index.ts

@@ -979,6 +979,10 @@ export function createModel (builder: Builder): void {
     component: view.component.ValueFilter
   })
 
+  builder.mixin(tracker.class.Project, core.class.Class, view.mixin.AttributeFilterPresenter, {
+    presenter: tracker.component.ProjectFilterValuePresenter
+  })
+
   builder.mixin(tracker.class.TypeIssuePriority, core.class.Class, view.mixin.AttributePresenter, {
     presenter: tracker.component.PriorityRefPresenter
   })

plugins/tracker-resources/src/components/projects/ProjectFilterValuePresenter.svelte

@@ -0,0 +1,58 @@
+<!--
+// Copyright © 2023 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 { Ref } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import { Project } from '@hcengineering/tracker'
+  import { Icon, IconWithEmojii, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
+  import tracker from '../../plugin'
+
+  export let value: [Ref<Project>, Ref<Project>[]][]
+
+  const MAX_VISIBLE_PROJECTS = 5
+  const projectsQuery = createQuery()
+
+  let projects: Project[] = []
+
+  $: projectsQuery.query(
+    tracker.class.Project,
+    { _id: { $in: value.map(([_, values]) => values[0]) } },
+    (res) => (projects = res)
+  )
+</script>
+
+<div class="flex-presenter flex-gap-1-5">
+  {#each projects as project, i}
+    {#if value && i < MAX_VISIBLE_PROJECTS}
+      {@const icon =
+        project.icon === tracker.component.IconWithEmojii ? IconWithEmojii : project.icon ?? tracker.icon.Home}
+      {@const iconProps =
+        project.icon === tracker.component.IconWithEmojii
+          ? { icon: project.color }
+          : {
+              fill:
+                project.color !== undefined
+                  ? getPlatformColorDef(project.color, $themeStore.dark).icon
+                  : getPlatformColorForTextDef(project.name ?? '', $themeStore.dark).icon
+            }}
+      <Icon {icon} {iconProps} size="small" />
+    {/if}
+  {/each}
+  {#if projects.length > MAX_VISIBLE_PROJECTS}
+    <div>
+      +{projects.length - MAX_VISIBLE_PROJECTS}
+    </div>
+  {/if}
+</div>

plugins/tracker-resources/src/index.ts

@@ -60,6 +60,7 @@ import StatusPresenter from './components/issues/StatusPresenter.svelte'
 import TitlePresenter from './components/issues/TitlePresenter.svelte'
 import PriorityFilterValuePresenter from './components/issues/PriorityFilterValuePresenter.svelte'
 import StatusFilterValuePresenter from './components/issues/StatusFilterValuePresenter.svelte'
+import ProjectFilterValuePresenter from './components/projects/ProjectFilterValuePresenter.svelte'
 import MyIssues from './components/myissues/MyIssues.svelte'
 import NewIssueHeader from './components/NewIssueHeader.svelte'
 import NopeComponent from './components/NopeComponent.svelte'
@@ -485,7 +486,8 @@ export default async (): Promise<Resources> => ({
     NotificationIssuePresenter,
     MilestoneFilter,
     PriorityFilterValuePresenter,
-    StatusFilterValuePresenter
+    StatusFilterValuePresenter,
+    ProjectFilterValuePresenter
   },
   completion: {
     IssueQuery: async (client: Client, query: string, filter?: { in?: RelatedDocument[], nin?: RelatedDocument[] }) =>

plugins/tracker-resources/src/plugin.ts

@@ -332,6 +332,7 @@ export default mergeIds(trackerId, tracker, {
     PriorityPresenter: '' as AnyComponent,
     PriorityFilterValuePresenter: '' as AnyComponent,
     StatusFilterValuePresenter: '' as AnyComponent,
+    ProjectFilterValuePresenter: '' as AnyComponent,
     PriorityEditor: '' as AnyComponent,
     PriorityRefPresenter: '' as AnyComponent,
     ComponentEditor: '' as AnyComponent,