UBER-418: Fix object popup a bit (#3377)

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

packages/presentation/src/components/ObjectSearchPopup.svelte

@@ -32,12 +32,14 @@
   import presentation from '../plugin'
   import { ObjectSearchCategory, ObjectSearchResult } from '../types'
   import { getClient } from '../utils'
+  import { hasResource } from '..'
 
   export let query: string = ''
   export let label: IntlString | undefined = undefined
   export let relatedDocuments: RelatedDocument[] | undefined = undefined
   export let ignore: RelatedDocument[] | undefined = undefined
   export let allowCategory: Ref<ObjectSearchCategory>[] | undefined = undefined
+  export let hideButtons = false
 
   let items: ObjectSearchResult[] = []
 
@@ -52,7 +54,7 @@
       allowCategory !== undefined ? { _id: { $in: allowCategory } } : {}
     )
     .then((r) => {
-      categories = r
+      categories = r.filter((it) => hasResource(it.query))
       category = categories[0]
     })
 
@@ -151,7 +153,11 @@
 
 <FocusHandler {manager} />
 
-<form class="antiCard dialog completion" on:keydown={onKeyDown} use:resizeObserver={() => dispatch('changeSize')}>
+<form
+  class="antiCard dialog completion objectPopup"
+  on:keydown={onKeyDown}
+  use:resizeObserver={() => dispatch('changeSize')}
+>
   <div class="header-dialog">
     {#if label}
       <div class="fs-title flex-grow mb-4">
@@ -188,22 +194,24 @@
     />
     <Label label={ui.string.Suggested} />
   </div>
-  <div class="antiCard-content min-h-60 max-h-60">
+  <div class="antiCard-content min-h-60 max-h-60 p-4">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <ListView bind:this={list} bind:selection count={items.length}>
       <svelte:fragment slot="item" let:item>
         {@const doc = items[item]}
-
         <div class="p-1 cursor-pointer" on:click={() => dispatchItem(doc)}>
           <svelte:component this={doc.component} value={doc.doc} {...doc.componentProps ?? {}} />
         </div>
       </svelte:fragment>
     </ListView>
   </div>
-  <div class="antiCard-footer reverse">
+  {#if !hideButtons}
-    <div class="buttons-group text-sm flex-no-shrink">
+    <div class="antiCard-footer reverse">
-      <Button label={presentation.string.Cancel} on:click={() => dispatch('close')} />
+      <div class="buttons-group text-sm flex-no-shrink">
+        <Button label={presentation.string.Cancel} on:click={() => dispatch('close')} />
+      </div>
     </div>
-  </div>
+  {/if}
 </form>
 
 <style lang="scss">
@@ -218,4 +226,8 @@
   .completion {
     z-index: 2000;
   }
+  .objectPopup {
+    min-height: 10rem;
+    min-width: 10rem;
+  }
 </style>

packages/text-editor/src/components/MentionList.svelte

@@ -95,7 +95,7 @@
     updateStyle()
   }}
 >
-  <ObjectSearchPopup bind:this={searchPopup} {query} on:close={(evt) => dispatchItem(evt.detail)} />
+  <ObjectSearchPopup bind:this={searchPopup} {query} on:close={(evt) => dispatchItem(evt.detail)} hideButtons={true} />
 </div>
 
 <style lang="scss">

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

@@ -15,11 +15,10 @@
 -->
 <script lang="ts">
   import contact, { getName, Person } from '@hcengineering/contact'
+  import PersonPresenter from '@hcengineering/contact-resources/src/components/PersonPresenter.svelte'
   import { Ref } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
   import type { Applicant } from '@hcengineering/recruit'
-  import { Icon } from '@hcengineering/ui'
-  import recruit from '../plugin'
 
   export let value: Applicant
 
@@ -34,7 +33,8 @@
 </script>
 
 <div class="flex item">
-  <Icon icon={recruit.icon.Application} size={'medium'} />
+  <!-- <Icon icon={recruit.icon.Application} size={'medium'} /> -->
+  <PersonPresenter value={person} shouldShowName={false} />
   <div class="ml-2">
     {#if shortLabel}{shortLabel}-{/if}{value.number}
   </div>

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

@@ -16,17 +16,23 @@
 <script lang="ts">
   import { WithLookup } from '@hcengineering/core'
   import type { Issue, Project } from '@hcengineering/tracker'
-  import { Icon } from '@hcengineering/ui'
+  import { FixedColumn, statusStore } from '@hcengineering/view-resources'
-  import tracker from '../../plugin'
   import { getIssueId } from '../../issues'
+  import IssueStatusIcon from './IssueStatusIcon.svelte'
 
   export let value: WithLookup<Issue>
   $: title = getIssueId(value.$lookup?.space as Project, value)
+  $: st = $statusStore.get(value.status)
 </script>
 
-<div class="flex item">
+<div class="flex item h-8">
-  <Icon icon={tracker.icon.TrackerApplication} size={'medium'} />
+  <!-- <Icon icon={tracker.icon.TrackerApplication} size={'medium'} /> -->
-  <div class="ml-2">
+  <FixedColumn key="object-popup-issue-status">
+    {#if st}
+      <IssueStatusIcon value={st} size={'small'} />
+    {/if}
+  </FixedColumn>
+  <div class="ml-2 max-w-120 overflow-label">
     {title} - {value.title}
   </div>
 </div>

plugins/tracker-resources/src/index.ts

@@ -179,8 +179,11 @@ export async function queryIssue<D extends Issue> (
       }
       const numbered = await client.findAll<Issue>(_class, q2, { limit: 200, lookup: { space: tracker.class.Project } })
       for (const d of numbered) {
-        if (!named.has(d._id)) {
+        const shortId = `${projects.find((it) => it._id === d.space)?.identifier ?? ''}-${d.number}`
-          named.set(d._id, d)
+        if (shortId.includes(search) || d.title.includes(search)) {
+          if (!named.has(d._id)) {
+            named.set(d._id, d)
+          }
         }
       }
     }