Fix online/offline status when person has multiple accounts (#7036)

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

@@ -14,9 +14,9 @@
 -->
 <script lang="ts">
   import { DirectMessage } from '@hcengineering/chunter'
-  import contact, { Person, PersonAccount } from '@hcengineering/contact'
-  import { Avatar, CombineAvatars, personAccountByIdStore, personByIdStore } from '@hcengineering/contact-resources'
-  import { Account, IdMap, Ref } from '@hcengineering/core'
+  import contact, { Person } from '@hcengineering/contact'
+  import { Avatar, CombineAvatars, personByIdStore } from '@hcengineering/contact-resources'
+  import { Ref } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
   import { Icon, IconSize } from '@hcengineering/ui'
   import { classIcon } from '@hcengineering/view-resources'
@@ -54,24 +54,14 @@
   $: if (size === 'small') {
     avatarSize = 'x-small'
   }
-
-  function getAccountByPerson (accountById: IdMap<PersonAccount>, person: Person): Account | undefined {
-    return Array.from(accountById.values()).find((account) => account.person === person._id)
-  }
 </script>
 
 {#if persons.length === 0}
   <Icon icon={classIcon(client, chunter.class.DirectMessage) ?? chunter.icon.Chunter} {size} />
 {/if}
 
 {#if persons.length === 1}
-  <Avatar
-    person={persons[0]}
-    size={avatarSize}
-    name={persons[0].name}
-    {showStatus}
-    account={getAccountByPerson($personAccountByIdStore, persons[0])?._id}
-  />
+  <Avatar person={persons[0]} size={avatarSize} name={persons[0].name} {showStatus} />
 {/if}
 
 {#if persons.length > 1 && size === 'medium'}

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

@@ -31,8 +31,7 @@
 </script>
 
 <script lang="ts">
-  import { getAvatarProviderId, getFirstName, getLastName } from '@hcengineering/contact'
-  import { Account } from '@hcengineering/core'
+  import { Employee, getAvatarProviderId, getFirstName, getLastName, Person } from '@hcengineering/contact'
   import { Asset, getMetadata, getResource } from '@hcengineering/platform'
   import { getBlobURL, reduceCalls } from '@hcengineering/presentation'
   import {
@@ -45,18 +44,18 @@
     themeStore
   } from '@hcengineering/ui'
   import { onMount } from 'svelte'
-  import { loadUsersStatus, statusByUserStore } from '../utils'
+
+  import { loadUsersStatus, employeeByIdStore, personAccountByPersonId, statusByUserStore } from '../utils'
   import AvatarInstance from './AvatarInstance.svelte'
 
-  export let person: Data<WithLookup<AvatarInfo>> | undefined = undefined
+  export let person: (Data<WithLookup<AvatarInfo>> & { _id?: Ref<Person> }) | undefined = undefined
   export let name: string | null | undefined = undefined
   export let direct: Blob | undefined = undefined
   export let size: IconSize
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let variant: 'circle' | 'roundedRect' | 'none' = 'roundedRect'
   export let borderColor: number | undefined = undefined
   export let showStatus: boolean = true
-  export let account: Ref<Account> | undefined = undefined
 
   export function pulse (): void {
     avatarInst.pulse()
@@ -126,10 +125,14 @@
     loadUsersStatus()
   })
 
-  $: userStatus = account !== undefined ? $statusByUserStore.get(account) : undefined
+  let employee: Employee | undefined = undefined
+
+  $: employee = person?._id && showStatus ? $employeeByIdStore.get(person._id as Ref<Employee>) : undefined
+  $: accounts = employee?.active ? $personAccountByPersonId.get(employee._id) ?? [] : []
+  $: isOnline = accounts.some((account) => $statusByUserStore.get(account._id)?.online === true)
 </script>
 
-{#if showStatus && account}
+{#if showStatus && accounts.length > 0}
   <div class="relative">
     <AvatarInstance
       bind:this={avatarInst}
@@ -144,7 +147,7 @@
       bind:element
       withStatus
     />
-    <div class="hulyAvatar-statusMarker {size}" class:online={userStatus?.online} class:offline={!userStatus?.online} />
+    <div class="hulyAvatar-statusMarker {size}" class:online={isOnline} class:offline={!isOnline} />
   </div>
 {:else}
   <AvatarInstance

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

@@ -15,10 +15,11 @@
 
 <script lang="ts">
   import contact, { type Contact, type Employee } from '@hcengineering/contact'
-  import core, { Account, type Ref, type WithLookup } from '@hcengineering/core'
+  import { type Ref, type WithLookup } from '@hcengineering/core'
   import { Asset } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { AnySvelteComponent, IconSize } from '@hcengineering/ui'
+
   import { employeeByIdStore, personByIdStore } from '../utils'
   import Avatar from './Avatar.svelte'
 
@@ -30,7 +31,6 @@
   export let variant: 'circle' | 'roundedRect' | 'none' = 'roundedRect'
   export let borderColor: number | undefined = undefined
   export let showStatus: boolean = true
-  export let account: Ref<Account> | undefined = undefined
 
   $: empValue = $employeeByIdStore.get(_id as Ref<Employee>) ?? $personByIdStore.get(_id)
 
@@ -47,4 +47,4 @@
   }
 </script>
 
-<Avatar person={_contact} {name} {size} {icon} {variant} {borderColor} {showStatus} {account} />
+<Avatar person={_contact} {name} {size} {icon} {variant} {borderColor} {showStatus} />

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

@@ -13,14 +13,12 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import contact, { Employee, Person } from '@hcengineering/contact'
+  import { Employee, Person } from '@hcengineering/contact'
   import { IconSize, LabelAndProps, tooltip } from '@hcengineering/ui'
   import { DocNavLink, ObjectMention } from '@hcengineering/view-resources'
   import { ObjectPresenterType } from '@hcengineering/view'
 
   import Avatar from './Avatar.svelte'
-  import { personAccountByIdStore } from '../utils'
-  import { getClient } from '@hcengineering/presentation'
 
   export let value: Person | Employee | undefined | null
   export let name: string
@@ -39,12 +37,6 @@
   export let type: ObjectPresenterType = 'link'
   export let showStatus = true
   export let overflowLabel = true
-
-  const client = getClient()
-  const hierarchy = client.getHierarchy()
-
-  $: showStatus = showStatus && !!value && hierarchy.hasMixin(value, contact.mixin.Employee)
-  $: account = value && Array.from($personAccountByIdStore.values()).find((account) => account.person === value?._id)
 </script>
 
 {#if value}
@@ -64,7 +56,7 @@
             class:mr-2={shouldShowName && !enlargedText}
             class:mr-3={shouldShowName && enlargedText}
           >
-            <Avatar size={avatarSize} person={value} name={value.name} {showStatus} account={account?._id} />
+            <Avatar size={avatarSize} person={value} name={value.name} {showStatus} />
           </span>
         {/if}
         {#if shouldShowName}

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

@@ -15,37 +15,23 @@
 <script lang="ts">
   import { getClient } from '@hcengineering/presentation'
   import { IconSize } from '@hcengineering/ui'
-  import { Person, getName, PersonAccount } from '@hcengineering/contact'
-  import { Account, IdMap } from '@hcengineering/core'
+  import { Person, getName } from '@hcengineering/contact'
 
   import Avatar from './Avatar.svelte'
-  import { personAccountByIdStore } from '../utils'
 
   export let person: Person
   export let avatarSize: IconSize = 'x-small'
   export let showStatus = true
 
   const client = getClient()
-  const hierarchy = client.getHierarchy()
-
-  function getAccountByPerson (accountById: IdMap<PersonAccount>, person: Person): Account | undefined {
-    return Array.from(accountById.values()).find((account) => account.person === person._id)
-  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="flex-row-center" on:click>
-  <Avatar
-    {person}
-    size={avatarSize}
-    name={person.name}
-    on:accent-color
-    {showStatus}
-    account={getAccountByPerson($personAccountByIdStore, person)?._id}
-  />
+  <Avatar {person} size={avatarSize} name={person.name} on:accent-color {showStatus} />
   <div class="flex-col min-w-0 {avatarSize === 'tiny' || avatarSize === 'inline' ? 'ml-1' : 'ml-3'}">
-    <div class="label overflow-label text-left">{getName(hierarchy, person)}</div>
+    <div class="label overflow-label text-left">{getName(client.getHierarchy(), person)}</div>
   </div>
 </div>
 

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

@@ -15,11 +15,10 @@
 <script lang="ts">
   import Avatar from './Avatar.svelte'
 
-  import contact, { getName, Person } from '@hcengineering/contact'
+  import { getName, Person } from '@hcengineering/contact'
   import { Asset } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { AnySvelteComponent, IconSize } from '@hcengineering/ui'
-  import { personAccountByIdStore } from '../utils'
 
   export let value: Person
   export let subtitle: string | undefined = undefined
@@ -29,16 +28,12 @@
   export let showStatus = true
 
   const client = getClient()
-  const hierarchy = client.getHierarchy()
-
-  $: showStatus = showStatus && !!value && hierarchy.hasMixin(value, contact.mixin.Employee)
-  $: account = value && Array.from($personAccountByIdStore.values()).find((account) => account.person === value?._id)
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="flex-row-center" on:click>
-  <Avatar person={value} {size} {icon} name={value.name} on:accent-color {showStatus} account={account?._id} />
+  <Avatar person={value} {size} {icon} name={value.name} on:accent-color {showStatus} />
   <div class="flex-col min-w-0 {size === 'tiny' || size === 'inline' ? 'ml-1' : 'ml-2'}" class:max-w-20={short}>
     {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
     <div class="label text-left overflow-label">{getName(client.getHierarchy(), value)}</div>