[UBER-334] Add categories to the assignee popup (#3324)

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

@@ -35,9 +35,11 @@
   import view from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import presentation, { getClient } from '@hcengineering/presentation'
+  import { PersonLabelTooltip, employeeByIdStore } from '..'
   import AssigneePopup from './AssigneePopup.svelte'
   import IconPerson from './icons/Person.svelte'
   import UserInfo from './UserInfo.svelte'
+  import EmployeePresenter from './EmployeePresenter.svelte'
 
   export let _class: Ref<Class<Employee>> = contact.class.Employee
   export let excluded: Ref<Contact>[] | undefined = undefined
@@ -49,8 +51,7 @@
   export let placeholder: IntlString = presentation.string.Search
   export let value: Ref<Employee> | null | undefined
   export let prevAssigned: Ref<Employee>[] | undefined = []
-  export let projectLead: Ref<Employee> | undefined = undefined
-  export let projectMembers: Ref<Employee>[] | undefined = []
+  export let componentLead: Ref<Employee> | undefined = undefined
   export let members: Ref<Employee>[] | undefined = []
   export let allowDeselect = true
   export let titleDeselect: IntlString | undefined = undefined
@@ -61,8 +62,9 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
   export let focusIndex = -1
-  export let showTooltip: LabelAndProps | undefined = undefined
+  export let showTooltip: LabelAndProps | PersonLabelTooltip | undefined = undefined
   export let showNavigate = true
+  export let shouldShowName = true
   export let id: string | undefined = undefined
   export let short: boolean = false
 
@@ -76,7 +78,7 @@
   const client = getClient()
 
   async function updateSelected (value: Ref<Employee> | null | undefined) {
-    selected = value ? await client.findOne(_class, { _id: value }) : undefined
+    selected = value ? $employeeByIdStore.get(value) ?? (await client.findOne(_class, { _id: value })) : undefined
   }
 
   $: updateSelected(value)
@@ -85,6 +87,9 @@
 
   const _click = (ev: MouseEvent): void => {
     if (!readonly) {
+      ev.preventDefault()
+      ev.stopPropagation()
+
       showPopup(
         AssigneePopup,
         {
@@ -92,8 +97,7 @@
           options,
           docQuery,
           prevAssigned,
-          projectLead,
-          projectMembers,
+          componentLead,
           members,
           ignoreUsers: excluded ?? [],
           icon,
@@ -131,6 +135,15 @@
     >
       <slot name="content" />
     </div>
+  {:else if !shouldShowName}
+    <EmployeePresenter
+      value={selected}
+      {avatarSize}
+      tooltipLabels={showTooltip}
+      shouldShowName={false}
+      shouldShowPlaceholder
+      onEmployeeEdit={_click}
+    />
   {:else}
     <Button {focusIndex} width={width ?? 'min-content'} {size} {kind} {justify} {showTooltip} on:click={_click}>
       <span

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

@@ -39,8 +39,7 @@
   export let selected: Ref<Person> | undefined
   export let docQuery: DocumentQuery<Contact> | undefined = undefined
   export let prevAssigned: Ref<Employee>[] | undefined = []
-  export let projectLead: Ref<Employee> | undefined = undefined
-  export let projectMembers: Ref<Employee>[] | undefined = []
+  export let componentLead: Ref<Employee> | undefined = undefined
   export let members: Ref<Employee>[] | undefined = []
   export let allowDeselect = true
   export let titleDeselect: IntlString | undefined
@@ -49,7 +48,6 @@
   export let ignoreUsers: Ref<Person>[] = []
   export let shadows: boolean = true
   export let width: 'medium' | 'large' | 'full' = 'medium'
-  export let size: 'small' | 'medium' | 'large' = 'small'
   export let searchField: string = 'name'
   export let showCategories: boolean = true
   export let icon: Asset | AnySvelteComponent | undefined = undefined
@@ -83,22 +81,20 @@
     { ...(options ?? {}), limit: 200, sort: { name: 1 } }
   )
 
-  $: updateCategories(objects, currentEmployee, prevAssigned, projectLead, members, projectMembers)
+  $: updateCategories(objects, currentEmployee, prevAssigned, componentLead, members)
 
   function updateCategories (
     objects: Contact[],
     currentEmployee: Ref<Person>,
     prevAssigned: Ref<Person>[] | undefined,
-    projectLead: Ref<Person> | undefined,
-    members: Ref<Person>[] | undefined,
-    projectMembers: Ref<Person>[] | undefined
+    componentLead: Ref<Person> | undefined,
+    members: Ref<Person>[] | undefined
   ) {
     const persons = new Map<Ref<Person>, AssigneeCategory>(objects.map((t) => [t._id, 'Other']))
-    if (projectLead) {
-      persons.set(projectLead, 'ProjectLead')
+    if (componentLead) {
+      persons.set(componentLead, 'ComponentLead')
     }
     members?.forEach((p) => persons.set(p, 'Members'))
-    projectMembers?.forEach((p) => persons.set(p, 'ProjectMembers'))
     prevAssigned?.forEach((p) => persons.set(p, 'PreviouslyAssigned'))
     if (selected) {
       persons.set(selected, 'Assigned')

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

@@ -47,6 +47,7 @@
             label: getEmbeddedLabel(getName(value))
           }
     }
+    const direction = tooltipLabels?.direction
     const component = value ? tooltipLabels.component : undefined
     const label = value
       ? tooltipLabels.personLabel
@@ -59,7 +60,8 @@
     return {
       component,
       label,
-      props
+      props,
+      direction
     }
   }
 </script>