UBER-863: Fix employee filter (#3682)

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

packages/presentation/src/components/NavLink.svelte

@@ -33,7 +33,10 @@
       e.stopPropagation()
       onClick(e)
     } else if (href !== undefined) {
-      if (e.metaKey || e.ctrlKey) return
+      if (e.metaKey || e.ctrlKey) {
+        e.stopPropagation()
+        return
+      }
 
       // we need to close popups and tooltips
       closePopup()
@@ -60,7 +63,7 @@
     class:colorInherit
     class:fs-bold={accent}
     style:flex-shrink={shrink}
-    on:click|stopPropagation={clickHandler}
+    on:click={clickHandler}
   >
     <slot />
   </span>
@@ -73,7 +76,7 @@
     class:colorInherit
     class:fs-bold={accent}
     style:flex-shrink={shrink}
-    on:click|stopPropagation={clickHandler}
+    on:click={clickHandler}
   >
     <slot />
   </a>

plugins/chunter-resources/src/components/CommentsPresenter.svelte

@@ -15,8 +15,7 @@
 -->
 <script lang="ts">
   import type { Doc } from '@hcengineering/core'
-  import { Button, ButtonKind, ButtonSize, IconThread, tooltip } from '@hcengineering/ui'
-  import { DocNavLink } from '@hcengineering/view-resources'
+  import { Button, ButtonKind, ButtonSize, IconThread } from '@hcengineering/ui'
   import CommentPopup from './CommentPopup.svelte'
 
   export let value: number | undefined
@@ -29,35 +28,17 @@
 </script>
 
 {#if value && value > 0}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <DocNavLink {object} inline noUnderline={true} shrink={0}>
-    {#if kind === 'list'}
-      <Button
-        {kind}
-        {size}
-        showTooltip={{
-          component: CommentPopup,
-          props: { objectId: object._id, object, withInput }
-        }}
-      >
-        <div slot="icon"><IconThread {size} /></div>
-        <div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
-          {#if showCounter && !compactMode}{value ?? 0}{/if}
-        </div>
-      </Button>
-    {:else}
-      <div
-        use:tooltip={{
-          component: CommentPopup,
-          props: { objectId: object._id, object, withInput }
-        }}
-        class="sm-tool-icon"
-      >
-        <span class="icon"><IconThread {size} /></span>
-        {#if showCounter && value && value !== 0}
-          {value}
-        {/if}
-      </div>
-    {/if}
-  </DocNavLink>
+  <Button
+    {kind}
+    {size}
+    showTooltip={{
+      component: CommentPopup,
+      props: { objectId: object._id, object, withInput }
+    }}
+  >
+    <div slot="icon"><IconThread {size} /></div>
+    <div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
+      {#if showCounter && !compactMode}{value ?? 0}{/if}
+    </div>
+  </Button>
 {/if}

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

@@ -157,7 +157,13 @@
             }}
           >
             <div class="clear-mins flex-grow">
-              <EmployeePresenter {value} shouldShowPlaceholder defaultName={ui.string.NotSelected} disabled />
+              <EmployeePresenter
+                {value}
+                shouldShowPlaceholder
+                defaultName={ui.string.NotSelected}
+                disabled
+                noUnderline
+              />
             </div>
             <div class="check pointer-events-none">
               {#if isSelected(value, filter.value)}

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

@@ -20,6 +20,7 @@
   export let accent: boolean = false
   export let defaultName: IntlString | undefined = ui.string.NotSelected
   export let element: HTMLElement | undefined = undefined
+  export let noUnderline: boolean = false
 
   $: employeeValue = typeof value === 'string' ? $personByIdStore.get(value) : value
 
@@ -41,6 +42,7 @@
   {colorInherit}
   {accent}
   {defaultName}
+  {noUnderline}
   statusLabel={active === false && shouldShowName ? contact.string.Inactive : undefined}
   on:accent-color
 />

plugins/recruit-resources/src/components/KanbanCard.svelte

@@ -17,15 +17,15 @@
   import { CommentsPresenter } from '@hcengineering/chunter-resources'
   import contact, { getName } from '@hcengineering/contact'
   import { Avatar } from '@hcengineering/contact-resources'
-  import { Hierarchy, WithLookup } from '@hcengineering/core'
+  import { WithLookup } from '@hcengineering/core'
   import notification from '@hcengineering/notification'
   import { getClient } from '@hcengineering/presentation'
   import recruit, { Applicant, Candidate } from '@hcengineering/recruit'
   import { AssigneePresenter, StateRefPresenter } from '@hcengineering/task-resources'
   import tracker from '@hcengineering/tracker'
-  import { Component, DueDatePresenter, showPanel } from '@hcengineering/ui'
-  import view, { BuildModelKey } from '@hcengineering/view'
-  import { ObjectPresenter, enabledConfig } from '@hcengineering/view-resources'
+  import { Component, DueDatePresenter } from '@hcengineering/ui'
+  import { BuildModelKey } from '@hcengineering/view'
+  import { DocNavLink, ObjectPresenter, enabledConfig } from '@hcengineering/view-resources'
   import ApplicationPresenter from './ApplicationPresenter.svelte'
 
   export let object: WithLookup<Applicant>
@@ -38,117 +38,121 @@
   const assigneeAttribute = hierarchy.getAttribute(recruit.class.Applicant, 'assignee')
   const isTitleHidden = client.getHierarchy().getAttribute(recruit.mixin.Candidate, 'title').hidden
 
-  function showCandidate () {
-    showPanel(view.component.EditDoc, object._id, Hierarchy.mixinOrClass(object), 'content')
-  }
-
   $: channels = (object.$lookup?.attachedTo as WithLookup<Candidate>)?.$lookup?.channels
 
   $: company = object?.$lookup?.space?.company
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="flex-col pt-3 pb-3 pr-4 pl-4" on:click={showCandidate}>
-  {#if enabledConfig(config, 'space') || enabledConfig(config, 'company')}
-    <div
-      class="flex-between gap-2 mb-3"
-      class:flex-between-half-content={enabledConfig(config, 'space') && company && enabledConfig(config, 'company')}
-    >
-      {#if enabledConfig(config, 'space')}
-        <ObjectPresenter _class={recruit.class.Vacancy} objectId={object.space} value={object.$lookup?.space} />
-      {/if}
-      {#if company && enabledConfig(config, 'company')}
-        <ObjectPresenter _class={contact.class.Organization} objectId={company} />
-      {/if}
-    </div>
-  {/if}
-  <div class="flex-between mb-1">
-    <div class="flex-row-center">
-      <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
-      <div class="flex-grow flex-col min-w-0 ml-2">
-        <div class="fs-title over-underline lines-limit-2">
-          {object.$lookup?.attachedTo ? getName(client.getHierarchy(), object.$lookup.attachedTo) : ''}
+<div class="flex-col pt-3 pb-3 pr-4 pl-4">
+  <DocNavLink {object} noUnderline>
+    {#if enabledConfig(config, 'space') || enabledConfig(config, 'company')}
+      <div
+        class="flex-between gap-2 mb-3"
+        class:flex-between-half-content={enabledConfig(config, 'space') && company && enabledConfig(config, 'company')}
+      >
+        {#if enabledConfig(config, 'space')}
+          <ObjectPresenter _class={recruit.class.Vacancy} objectId={object.space} value={object.$lookup?.space} />
+        {/if}
+        {#if company && enabledConfig(config, 'company')}
+          <ObjectPresenter _class={contact.class.Organization} objectId={company} />
+        {/if}
+      </div>
+    {/if}
+    <div class="flex-between mb-1">
+      <div class="flex-row-center">
+        <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
+        <div class="flex-grow flex-col min-w-0 ml-2">
+          <div class="fs-title over-underline lines-limit-2">
+            {object.$lookup?.attachedTo ? getName(client.getHierarchy(), object.$lookup.attachedTo) : ''}
+          </div>
+          {#if !isTitleHidden && enabledConfig(config, 'title')}
+            <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
+          {/if}
         </div>
-        {#if !isTitleHidden && enabledConfig(config, 'title')}
-          <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
+      </div>
+      <div class="tool flex-row-center">
+        {#if !dragged}
+          <div class="mr-2">
+            <Component
+              showLoading={false}
+              is={notification.component.NotificationPresenter}
+              props={{ value: object }}
+            />
+          </div>
         {/if}
       </div>
     </div>
-    <div class="tool flex-row-center">
-      {#if !dragged}
-        <div class="mr-2">
-          <Component showLoading={false} is={notification.component.NotificationPresenter} props={{ value: object }} />
-        </div>
+    {#if channels && channels.length > 0 && enabledConfig(config, 'channels')}
+      <div class="card-labels labels mb-2">
+        <Component
+          showLoading={false}
+          is={contact.component.ChannelsPresenter}
+          props={{ value: channels, object: object.$lookup?.attachedTo, length: 'full', size: 'inline', kind: 'list' }}
+        />
+      </div>
+    {/if}
+    <div class="card-labels mb-2">
+      {#if groupByKey !== 'status' && enabledConfig(config, 'status')}
+        <StateRefPresenter
+          size={'small'}
+          kind={'link-bordered'}
+          space={object.space}
+          shrink={1}
+          value={object.status}
+          onChange={(status) => {
+            client.update(object, { status })
+          }}
+        />
+      {/if}
+      <Component showLoading={false} is={tracker.component.RelatedIssueSelector} props={{ object, size: 'small' }} />
+      {#if enabledConfig(config, 'dueDate')}
+        <DueDatePresenter
+          size={'small'}
+          kind={'link-bordered'}
+          value={object.dueDate}
+          shouldRender={object.dueDate !== null && object.dueDate !== undefined}
+          shouldIgnoreOverdue={object.doneState !== null}
+          onChange={async (e) => {
+            await client.update(object, { dueDate: e })
+          }}
+        />
       {/if}
     </div>
-  </div>
-  {#if channels && channels.length > 0 && enabledConfig(config, 'channels')}
-    <div class="card-labels labels mb-2">
-      <Component
-        showLoading={false}
-        is={contact.component.ChannelsPresenter}
-        props={{ value: channels, object: object.$lookup?.attachedTo, length: 'full', size: 'inline', kind: 'list' }}
-      />
-    </div>
-  {/if}
-  <div class="card-labels mb-2">
-    {#if groupByKey !== 'status' && enabledConfig(config, 'status')}
-      <StateRefPresenter
-        size={'small'}
-        kind={'link-bordered'}
-        space={object.space}
-        shrink={1}
-        value={object.status}
-        onChange={(status) => {
-          client.update(object, { status })
-        }}
-      />
-    {/if}
-    <Component showLoading={false} is={tracker.component.RelatedIssueSelector} props={{ object, size: 'small' }} />
-    {#if enabledConfig(config, 'dueDate')}
-      <DueDatePresenter
-        size={'small'}
-        kind={'link-bordered'}
-        value={object.dueDate}
-        shouldRender={object.dueDate !== null && object.dueDate !== undefined}
-        shouldIgnoreOverdue={object.doneState !== null}
-        onChange={async (e) => {
-          await client.update(object, { dueDate: e })
-        }}
-      />
-    {/if}
-  </div>
-  <div class="flex-between">
-    <div class="flex-row-center gap-3 reverse mr-4">
-      {#if enabledConfig(config, '')}
-        <ApplicationPresenter value={object} />
-      {/if}
-      {#if (object.attachments ?? 0) > 0 && enabledConfig(config, 'attachments')}
-        <AttachmentsPresenter value={object.attachments} {object} />
-      {/if}
-      {#if enabledConfig(config, 'comments')}
-        {#if (object.comments ?? 0) > 0}
-          <CommentsPresenter value={object.comments} {object} />
+    <div class="flex-between">
+      <div class="flex-row-center gap-3 reverse mr-4">
+        {#if enabledConfig(config, '')}
+          <ApplicationPresenter value={object} />
         {/if}
-        {#if object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0}
-          <CommentsPresenter
-            value={object.$lookup?.attachedTo?.comments}
-            object={object.$lookup?.attachedTo}
-            withInput={false}
-          />
+        {#if (object.attachments ?? 0) > 0 && enabledConfig(config, 'attachments')}
+          <AttachmentsPresenter value={object.attachments} {object} />
         {/if}
+        {#if enabledConfig(config, 'comments')}
+          {#if (object.comments ?? 0) > 0}
+            <CommentsPresenter value={object.comments} {object} kind={'list'} size={'x-small'} />
+          {/if}
+          {#if object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0}
+            <CommentsPresenter
+              value={object.$lookup?.attachedTo?.comments}
+              object={object.$lookup?.attachedTo}
+              withInput={false}
+              kind={'list'}
+              size={'x-small'}
+            />
+          {/if}
+        {/if}
+      </div>
+      {#if enabledConfig(config, 'assignee')}
+        <AssigneePresenter
+          value={object.assignee}
+          issueId={object._id}
+          defaultClass={contact.mixin.Employee}
+          currentSpace={object.space}
+          placeholderLabel={assigneeAttribute.label}
+        />
       {/if}
     </div>
-    {#if enabledConfig(config, 'assignee')}
-      <AssigneePresenter
-        value={object.assignee}
-        issueId={object._id}
-        defaultClass={contact.mixin.Employee}
-        currentSpace={object.space}
-        placeholderLabel={assigneeAttribute.label}
-      />
-    {/if}
-  </div>
+  </DocNavLink>
 </div>
 
 <style lang="scss">