Fix array values in the "EmployeeRefPresenter" (#2859)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { Employee } from '@hcengineering/contact'
+  import { Ref } from '@hcengineering/core'
+  import { ButtonKind } from '@hcengineering/ui'
+  import { PersonLabelTooltip } from '..'
+  import contact from '../plugin'
+  import { employeeByIdStore } from '../utils'
+  import AssigneeBox from './AssigneeBox.svelte'
+  import EmployeePresenter from './EmployeePresenter.svelte'
+
+  export let value: Ref<Employee> | null | undefined
+  export let kind: ButtonKind = 'link'
+  export let tooltipLabels: PersonLabelTooltip | undefined = undefined
+  export let onChange: ((value: Ref<Employee>) => void) | undefined = undefined
+  export let inline = false
+
+  $: employee = value ? $employeeByIdStore.get(value) : undefined
+
+  function getValue (
+    employee: Employee | undefined,
+    value: Ref<Employee> | null | undefined
+  ): Employee | null | undefined {
+    if (value === undefined || value === null) {
+      return value
+    }
+    return employee
+  }
+</script>
+
+{#if onChange !== undefined}
+  <AssigneeBox
+    label={contact.string.Employee}
+    {value}
+    size={'medium'}
+    kind={'link'}
+    showNavigate={false}
+    justify={'left'}
+    on:change={({ detail }) => onChange?.(detail)}
+  />
+{:else}
+  <EmployeePresenter
+    value={getValue(employee, value)}
+    {inline}
+    {tooltipLabels}
+    isInteractive={false}
+    shouldShowAvatar
+    shouldShowPlaceholder
+    defaultName={contact.string.NotSpecified}
+    shouldShowName={kind !== 'list'}
+    avatarSize={kind === 'list-header' ? 'small' : 'x-small'}
+    disableClick
+  />
+{/if}

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

@@ -3,49 +3,31 @@
   import { Ref } from '@hcengineering/core'
   import { ButtonKind } from '@hcengineering/ui'
   import { PersonLabelTooltip } from '..'
-  import contact from '../plugin'
+  import EmployeeAttributePresenter from './EmployeeAttributePresenter.svelte'
-  import { employeeByIdStore } from '../utils'
-  import AssigneeBox from './AssigneeBox.svelte'
-  import EmployeePresenter from './EmployeePresenter.svelte'
 
-  export let value: Ref<Employee> | null | undefined
+  export let value: Ref<Employee> | Ref<Employee>[] | null | undefined
   export let kind: ButtonKind = 'link'
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
   export let onChange: ((value: Ref<Employee>) => void) | undefined = undefined
-
+  export let inline = false
-  $: employee = value ? $employeeByIdStore.get(value) : undefined
-
-  function getValue (
-    employee: Employee | undefined,
-    value: Ref<Employee> | null | undefined
-  ): Employee | null | undefined {
-    if (value === undefined || value === null) {
-      return value
-    }
-    return employee
-  }
 </script>
 
-{#if onChange !== undefined}
+{#if Array.isArray(value)}
-  <AssigneeBox
+  <div class="inline-content">
-    label={contact.string.Employee}
+    {#each value as employee}
-    {value}
+      <EmployeeAttributePresenter value={employee} {kind} {tooltipLabels} {onChange} {inline} />
-    size={'medium'}
+    {/each}
-    kind={'link'}
+  </div>
-    showNavigate={false}
-    justify={'left'}
-    on:change={({ detail }) => onChange?.(detail)}
-  />
 {:else}
-  <EmployeePresenter
+  <EmployeeAttributePresenter {value} {kind} {tooltipLabels} {onChange} {inline} />
-    value={getValue(employee, value)}
-    {tooltipLabels}
-    isInteractive={false}
-    shouldShowAvatar
-    shouldShowPlaceholder
-    defaultName={contact.string.NotSpecified}
-    shouldShowName={kind !== 'list'}
-    avatarSize={kind === 'list-header' ? 'small' : 'x-small'}
-    disableClick
-  />
 {/if}
+
+<style lang="scss">
+  .inline-content {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    min-width: 0;
+    gap: 0.5rem;
+  }
+</style>