From 2f78ec0736eedaf2f5bb90d35a78e5a694c644af Mon Sep 17 00:00:00 2001
From: Ruslan Bayandinov <45530296+wazsone@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:29:10 +0400
Subject: [PATCH] UBER-298: Add readonly users option to the UserBoxItems
component (#3481)
Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>
---
.../src/components/UserBoxItems.svelte | 21 +++++++++++++++----
.../src/components/UsersPopup.svelte | 3 ---
2 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/plugins/contact-resources/src/components/UserBoxItems.svelte b/plugins/contact-resources/src/components/UserBoxItems.svelte
index 8b84d5134e..03d75a348f 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
@@ -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'
@@ -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, $employeeByIdStore)
+ $: persons = getPersons(items, $employeeByIdStore)
+ let readonlyPersons: Employee[] = getPersons(readonlyItems, $employeeByIdStore)
+ $: readonlyPersons = getPersons(readonlyItems, $employeeByIdStore)
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>[], employeeById: IdMap<Employee>) {
+ return employees.map((p) => employeeById.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 9159790c57..c3ad6a09ca 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>