From aeffb774ae3674f7eabd2cb818985a9d4e6e5b52 Mon Sep 17 00:00:00 2001
From: Ruslan Bayandinov <wazsone@ya.ru>
Date: Tue, 4 Jul 2023 20:11:07 +0400
Subject: [PATCH 1/2] add readonly users to the UserBoxItems component

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>
---
 .../src/components/UserBoxItems.svelte        | 19 ++++++++++++++++---
 .../src/components/UsersPopup.svelte          |  3 ---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/plugins/contact-resources/src/components/UserBoxItems.svelte b/plugins/contact-resources/src/components/UserBoxItems.svelte
index 8b84d5134e7..bb0a8186d13 100644
--- a/plugins/contact-resources/src/components/UserBoxItems.svelte
+++ b/plugins/contact-resources/src/components/UserBoxItems.svelte
@@ -1,5 +1,5 @@
 <!--
-// Copyright © 2022 Hardcore Engineering Inc.
+// Copyright © 2022-2023 Hardcore Engineering Inc.
 // 
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -25,6 +25,7 @@
   import UsersPopup from './UsersPopup.svelte'
 
   export let items: Ref<Employee>[] = []
+  export let readonlyItems: Ref<Employee>[] = []
   export let _class: Ref<Class<Employee>> = contact.class.Employee
   export let docQuery: DocumentQuery<Employee> | undefined = {
     active: true
@@ -36,8 +37,10 @@
   export let width: string | undefined = undefined
   export let readonly: boolean = false
 
-  let persons: Employee[] = items.map((p) => $employeeByIdStore.get(p)).filter((p) => p !== undefined) as Employee[]
-  $: persons = items.map((p) => $employeeByIdStore.get(p)).filter((p) => p !== undefined) as Employee[]
+  let persons: Employee[] = getPersons(items)
+  $: persons = getPersons(items)
+  let readonlyPersons: Employee[] = getPersons(readonlyItems)
+  $: readonlyPersons = getPersons(readonlyItems)
 
   const dispatch = createEventDispatcher()
 
@@ -51,6 +54,7 @@
         multiSelect: true,
         allowDeselect: false,
         selectedUsers: items,
+        ignoreUsers: readonlyItems,
         readonly
       },
       evt.target as HTMLElement,
@@ -64,6 +68,10 @@
     )
   }
 
+  function getPersons (employees: Ref<Employee>[]) {
+    return employees.map((p) => $employeeByIdStore.get(p)).filter((p) => p !== undefined) as Employee[]
+  }
+
   const removePerson = (removed: Employee) => {
     const newItems = items.filter((it) => it !== removed._id)
     dispatch('update', newItems)
@@ -72,6 +80,11 @@
 
 <div class="flex-col" style:width={width ?? 'auto'}>
   <div class="flex-row-center flex-wrap">
+    {#each readonlyPersons as person}
+      <div class="usertag-container gap-1-5">
+        <UserInfo value={person} {size} />
+      </div>
+    {/each}
     {#each persons as person}
       <div class="usertag-container gap-1-5">
         <UserInfo value={person} {size} />
diff --git a/plugins/contact-resources/src/components/UsersPopup.svelte b/plugins/contact-resources/src/components/UsersPopup.svelte
index 9159790c57f..c3ad6a09ca7 100644
--- a/plugins/contact-resources/src/components/UsersPopup.svelte
+++ b/plugins/contact-resources/src/components/UsersPopup.svelte
@@ -82,9 +82,6 @@
     {@const cl = hierarchy.getClass(person._class)}
     <div class="menu-group__header">
       <span class="overflow-label">
-        <!-- {#if cl.icon}
-          <Icon icon={cl.icon} size={'small'} />
-        {/if} -->
         <Label label={cl.label} />
       </span>
     </div>

From 501540468070573eb5f35aca7ae1e5171b5eeb1b Mon Sep 17 00:00:00 2001
From: Ruslan Bayandinov <wazsone@ya.ru>
Date: Tue, 4 Jul 2023 22:54:41 +0400
Subject: [PATCH 2/2] pass employeeByIdStore as a parameter

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>
---
 .../src/components/UserBoxItems.svelte             | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/plugins/contact-resources/src/components/UserBoxItems.svelte b/plugins/contact-resources/src/components/UserBoxItems.svelte
index bb0a8186d13..03d75a348f7 100644
--- a/plugins/contact-resources/src/components/UserBoxItems.svelte
+++ b/plugins/contact-resources/src/components/UserBoxItems.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import contact, { Employee } from '@hcengineering/contact'
-  import type { Class, DocumentQuery, Ref } from '@hcengineering/core'
+  import type { Class, DocumentQuery, IdMap, Ref } from '@hcengineering/core'
   import type { IntlString } from '@hcengineering/platform'
   import { Label, showPopup, ActionIcon, IconClose, IconAdd, Icon } from '@hcengineering/ui'
   import type { IconSize } from '@hcengineering/ui'
@@ -37,10 +37,10 @@
   export let width: string | undefined = undefined
   export let readonly: boolean = false
 
-  let persons: Employee[] = getPersons(items)
-  $: persons = getPersons(items)
-  let readonlyPersons: Employee[] = getPersons(readonlyItems)
-  $: readonlyPersons = getPersons(readonlyItems)
+  let persons: Employee[] = getPersons(items, $employeeByIdStore)
+  $: persons = getPersons(items, $employeeByIdStore)
+  let readonlyPersons: Employee[] = getPersons(readonlyItems, $employeeByIdStore)
+  $: readonlyPersons = getPersons(readonlyItems, $employeeByIdStore)
 
   const dispatch = createEventDispatcher()
 
@@ -68,8 +68,8 @@
     )
   }
 
-  function getPersons (employees: Ref<Employee>[]) {
-    return employees.map((p) => $employeeByIdStore.get(p)).filter((p) => p !== undefined) as Employee[]
+  function getPersons (employees: Ref<Employee>[], employeeById: IdMap<Employee>) {
+    return employees.map((p) => employeeById.get(p)).filter((p) => p !== undefined) as Employee[]
   }
 
   const removePerson = (removed: Employee) => {