Fix Tracker board card (#2090)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/ui/src/components/Button.svelte

@@ -100,7 +100,7 @@
   style={width ? 'width: ' + width : ''}
   {title}
   type={kind === 'primary' ? 'submit' : 'button'}
-  on:click
+  on:click|stopPropagation|preventDefault
   on:focus
   on:blur
   on:mousemove

plugins/contact-resources/src/components/EmployeePresenter.svelte

@@ -17,7 +17,9 @@
 
   let container: HTMLElement
 
-  const onEdit = () => {
+  const onEdit = (evt: MouseEvent) => {
+    evt?.preventDefault()
+    evt?.stopPropagation()
     if (value) {
       showPopup(
         EmployeePreviewPopup,

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

@@ -75,6 +75,8 @@
     if (!isEditable) {
       return
     }
+    event?.preventDefault()
+    event?.stopPropagation()
 
     showPopup(
       UsersPopup,

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

@@ -14,11 +14,12 @@
 -->
 <script lang="ts">
   import contact from '@anticrm/contact'
-  import { Class, Doc, FindOptions, Ref, WithLookup } from '@anticrm/core'
+  import { Class, Doc, FindOptions, Ref, SortingOrder, WithLookup } from '@anticrm/core'
-  import { Kanban } from '@anticrm/kanban'
+  import { Kanban, TypeState } from '@anticrm/kanban'
-  import { getClient } from '@anticrm/presentation'
+  import notification from '@anticrm/notification'
-  import { Issue, IssuesGrouping, Team, ViewOptions } from '@anticrm/tracker'
+  import { createQuery, getClient } from '@anticrm/presentation'
-  import { Button, Icon, IconAdd, showPopup, Tooltip } from '@anticrm/ui'
+  import { Issue, IssuesGrouping, IssueStatus, Team, ViewOptions } from '@anticrm/tracker'
+  import { Button, Component, Icon, IconAdd, showPanel, showPopup, Tooltip } from '@anticrm/ui'
   import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@anticrm/view-resources'
   import ActionContext from '@anticrm/view-resources/src/components/ActionContext.svelte'
   import Menu from '@anticrm/view-resources/src/components/Menu.svelte'
@@ -26,7 +27,9 @@
   import tracker from '../../plugin'
   import { getKanbanStatuses } from '../../utils'
   import CreateIssue from '../CreateIssue.svelte'
+  import ProjectEditor from '../projects/ProjectEditor.svelte'
   import AssigneePresenter from './AssigneePresenter.svelte'
+  import SubIssuesSelector from './edit/SubIssuesSelector.svelte'
   import IssuePresenter from './IssuePresenter.svelte'
   import PriorityEditor from './PriorityEditor.svelte'
 
@@ -42,7 +45,34 @@
     ...query
   }
 
+  const spaceQuery = createQuery()
+  const statusesQuery = createQuery()
+
   const client = getClient()
+  let currentTeam: Team | undefined
+  $: spaceQuery.query(tracker.class.Team, { _id: currentSpace }, (res) => {
+    currentTeam = res.shift()
+  })
+
+  let issueStatuses: WithLookup<IssueStatus>[] | undefined
+  let states: TypeState[] | undefined
+  $: statusesQuery.query(
+    tracker.class.IssueStatus,
+    { attachedTo: currentSpace },
+    (is) => {
+      states = is.map((status) => ({
+        _id: status._id,
+        title: status.name,
+        color: status.color ?? status.$lookup?.category?.color ?? 0,
+        icon: status.$lookup?.category?.icon ?? undefined
+      }))
+      issueStatuses = is
+    },
+    {
+      lookup: { category: tracker.class.IssueStatusCategory },
+      sort: { rank: SortingOrder.Ascending }
+    }
+  )
 
   function toIssue (object: any): WithLookup<Issue> {
     return object as WithLookup<Issue>
@@ -51,7 +81,10 @@
   const options: FindOptions<Issue> = {
     lookup: {
       assignee: contact.class.Employee,
-      space: tracker.class.Team
+      space: tracker.class.Team,
+      _id: {
+        subIssues: tracker.class.Issue
+      }
     }
   }
 
@@ -133,7 +166,12 @@
     </svelte:fragment>
     <svelte:fragment slot="card" let:object>
       {@const issue = toIssue(object)}
-      <div class="tracker-card">
+      <div
+        class="tracker-card"
+        on:click={() => {
+          showPanel(tracker.component.EditIssue, object._id, object._class, 'content')
+        }}
+      >
         <div class="flex-col mr-6">
           <IssuePresenter value={issue} />
           <span class="fs-bold caption-color mt-1 lines-limit-2">
@@ -142,14 +180,20 @@
         </div>
         <div class="abs-rt-content">
           <AssigneePresenter
-            value={issue?.$lookup?.assignee}
+            value={issue.$lookup?.assignee}
+            defaultClass={contact.class.Employee}
             issueId={issue._id}
             {currentSpace}
             isEditable={true}
-            defaultClass={contact.class.Employee}
           />
+          <div class="flex-center mt-2">
+            <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+          </div>
         </div>
         <div class="buttons-group xsmall-gap mt-10px">
+          {#if issue && issueStatuses && issue.subIssues > 0}
+            <SubIssuesSelector {issue} {currentTeam} {issueStatuses} />
+          {/if}
           <PriorityEditor
             value={issue}
             isEditable={true}
@@ -158,6 +202,14 @@
             justify={'center'}
             width={''}
           />
+          <ProjectEditor
+            value={issue}
+            isEditable={true}
+            kind={'link-bordered'}
+            size={'inline'}
+            justify={'center'}
+            width={''}
+          />
         </div>
       </div>
     </svelte:fragment>

plugins/tracker-resources/src/index.ts

@@ -21,7 +21,6 @@ import Inbox from './components/inbox/Inbox.svelte'
 import Active from './components/issues/Active.svelte'
 import AssigneePresenter from './components/issues/AssigneePresenter.svelte'
 import Backlog from './components/issues/Backlog.svelte'
-import Board from './components/issues/Board.svelte'
 import DueDatePresenter from './components/issues/DueDatePresenter.svelte'
 import EditIssue from './components/issues/edit/EditIssue.svelte'
 import IssueItem from './components/issues/IssueItem.svelte'
@@ -111,7 +110,6 @@ export default async (): Promise<Resources> => ({
     NopeComponent,
     Active,
     Backlog,
-    Board,
     Inbox,
     Issues,
     MyIssues,

plugins/tracker-resources/src/plugin.ts

@@ -166,7 +166,6 @@ export default mergeIds(trackerId, tracker, {
     Views: '' as AnyComponent,
     Active: '' as AnyComponent,
     Backlog: '' as AnyComponent,
-    Board: '' as AnyComponent,
     Projects: '' as AnyComponent,
     IssuePresenter: '' as AnyComponent,
     ProjectTitlePresenter: '' as AnyComponent,