Reuse UsersPopup (#1428)

Signed-off-by: Sergey Semenov <lvfx@ya.ru>

packages/theme/styles/_layouts.scss

@@ -299,6 +299,7 @@ p:last-child { margin-block-end: 0; }
 .ml-10 { margin-left: 2.5rem; }
 .ml-12 { margin-left: 3rem; }
 .ml-22 { margin-left: 5.5rem; }
+.ml-auto { margin-left: auto; }
 .mr-1 { margin-right: .25rem; }
 .mr-1-5 { margin-right: .375rem; }
 .mr-2 { margin-right: .5rem; }
@@ -343,6 +344,7 @@ p:last-child { margin-block-end: 0; }
 .pb-2 { padding-bottom: .5rem; }
 .pb-4 { padding-bottom: 1rem; }
 
+.p-1 { padding: .25rem; }
 .p-2 { padding: .5rem; }
 .p-3 { padding: .75rem; }
 .p-4 { padding: 1rem; }
@@ -407,6 +409,7 @@ p:last-child { margin-block-end: 0; }
 .min-w-9 { min-width: 2.25rem; }
 .min-h-0 { min-height: 0; }
 .min-w-min { min-width: min-content; }
+.max-h-125 { max-height: 31.25rem; }
 .clear-mins {
   min-width: 0;
   min-height: 0;

plugins/board-assets/lang/en.json

@@ -82,6 +82,7 @@
     "LinkName": "Link name",
     "Edit": "Edit",
     "Update": "Update",
-    "DeleteAttachment": "Deleting an attachment is permanent. There is no undo."
+    "DeleteAttachment": "Deleting an attachment is permanent. There is no undo.",
+    "SearchMembers": "Search members"
   }
 }

plugins/board-assets/lang/ru.json

@@ -82,6 +82,7 @@
     "LinkName": "Имя ссылки",
     "Edit": "Изменить",
     "Update": "Обновить",
-    "DeleteAttachment": "Удаление вложения необратимо. Отмена невозможна."
+    "DeleteAttachment": "Удаление вложения необратимо. Отмена невозможна.",
+    "SearchMembers": "Поиск участников"
   }
 }

plugins/board-resources/src/components/presenters/MemberPresenter.svelte

@@ -9,16 +9,16 @@
   export let size: 'large' | 'medium'
   export let menuItems: { title: IntlString; handler: () => void }[][]
 
-  const firstName = getFirstName(value.name)
-  const lastName = getLastName(value.name)
-  const nameLabel = `${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}`.toUpperCase()
-  const formattedName = formatName(value.name)
-
   const openPopup = () => {
     const onClose = () => closePopup()
 
     const closePopup = showPopup(EditMember, { member: value, menuItems, onClose })
   }
+
+  $: firstName = getFirstName(value.name)
+  $: lastName = getLastName(value.name)
+  $: nameLabel = `${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}`.toUpperCase()
+  $: formattedName = formatName(value.name)
 </script>
 
 {#if value}

plugins/board-resources/src/index.ts

@@ -14,9 +14,14 @@
 // limitations under the License.
 //
 
+import board from './plugin'
+import { UsersPopup } from '@anticrm/presentation'
+import { Ref } from '@anticrm/core'
+import contact, { Employee } from '@anticrm/contact'
 import { showPopup } from '@anticrm/ui'
 import { Card } from '@anticrm/board'
 import { Resources } from '@anticrm/platform'
+import { TxOperations } from '@anticrm/core'
 import CardPresenter from './components/CardPresenter.svelte'
 import BoardPresenter from './components/BoardPresenter.svelte'
 import CreateBoard from './components/CreateBoard.svelte'
@@ -28,6 +33,7 @@ import KanbanView from './components/KanbanView.svelte'
 import CardLabelsPopup from './components/popups/CardLabelsPopup.svelte'
 import MoveView from './components/popups/MoveCard.svelte'
 import DateRangePicker from './components/popups/DateRangePicker.svelte'
+import EditMembersView from './components/popups/EditMembers.svelte'
 import CardLabelPresenter from './components/presenters/LabelPresenter.svelte'
 import CardDatePresenter from './components/presenters/DatePresenter.svelte'
 import {
@@ -52,6 +58,24 @@ async function showCardLabelsPopup (object: Card): Promise<void> {
   showPopup(CardLabelsPopup, { object })
 }
 
+async function showEditMembersPopup(object: Card, client: TxOperations): Promise<void> {
+  showPopup(
+    UsersPopup,
+    {
+      _class: contact.class.Employee,
+      multiSelect: true,
+      allowDeselect: true,
+      selectedUsers: object?.members ?? [],
+      placeholder: board.string.SearchMembers
+    },
+    undefined,
+    () => {},
+    (result: Ref<Employee>[]) => {
+      client.update(object, { members: result })
+    }
+  )
+}
+
 export default async (): Promise<Resources> => ({
   component: {
     CreateBoard,
@@ -72,7 +96,8 @@ export default async (): Promise<Resources> => ({
     Labels: showCardLabelsPopup,
     Archive: archiveCard,
     SendToBoard: unarchiveCard,
-    Delete: deleteCard
+    Delete: deleteCard,
+    Members: showEditMembersPopup
   },
   cardActionSupportedHandler: {
     Join: canAddCurrentUser,

plugins/board-resources/src/plugin.ts

@@ -103,7 +103,8 @@ export default mergeIds(boardId, board, {
     LinkName: '' as IntlString,
     Edit: '' as IntlString,
     Update: '' as IntlString,
-    DeleteAttachment: '' as IntlString
+    DeleteAttachment: '' as IntlString,
+    SearchMembers: '' as IntlString
   },
   component: {
     Boards: '' as AnyComponent,