Add EditMember popup (#1448)

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

plugins/board-assets/lang/en.json

@@ -72,6 +72,8 @@
     "DueDate": "Due date",
     "Save": "Save",
     "Remove": "Remove",
-    "NullDate": "M/D/YYYY"
+    "NullDate": "M/D/YYYY",
+    "ViewProfile": "View profile",
+    "RemoveFromCard": "Remove from card"
   }
 }

plugins/board-assets/lang/ru.json

@@ -72,6 +72,8 @@
     "DueDate": "Срок",
     "Save": "Сохранить",
     "Remove": "Удалить",
-    "NullDate": "М/Д/ГГГГ"
+    "NullDate": "М/Д/ГГГГ",
+    "ViewProfile": "Перейти в профиль",
+    "RemoveFromCard": "Удалить из карточки"
   }
 }

plugins/board-resources/src/components/editor/CardDetails.svelte

@@ -37,6 +37,24 @@
   let labelsHandler: () => void
   let dateHandler: () => void
 
+  $: membersIds = members?.map(m => m._id) ?? []
+
+  const getMenuItems = (member: Employee) => {
+    return [
+      [{
+        title: board.string.ViewProfile,
+        handler: () => console.log('TODO: implement')
+      }],
+      [{
+        title: board.string.RemoveFromCard,
+        handler: () => {
+          const newMembers = membersIds.filter((m) => m !== member._id)
+          client.update(value, { members: newMembers })
+        }
+      }]
+    ]
+  }
+
   $: if (value.members && value.members.length > 0) {
     query.query(contact.class.Employee, { _id: { $in: value.members } }, (result) => {
       members = result
@@ -80,7 +98,7 @@
       </div>
       <div class="flex-row-center flex-gap-1">
         {#each members as member}
-          <MemberPresenter value={member} size="large" />
+          <MemberPresenter value={member} size="large" menuItems={getMenuItems(member)} />
         {/each}
         <Button icon={IconAdd} shape="circle" kind="no-border" size="large" on:click={membersHandler} />
       </div>

plugins/board-resources/src/components/popups/EditMember.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { Employee, formatName } from '@anticrm/contact'
+  import { getFirstName, getLastName } from '@anticrm/contact'
+  import type { IntlString } from '@anticrm/platform'
+  import { ActionIcon, IconClose, Label } from '@anticrm/ui'
+
+  export let member: Employee
+  export let menuItems: { title: IntlString; handler: () => void }[][]
+  export let onClose: () => void
+
+  const firstName = getFirstName(member.name)
+  const lastName = getLastName(member.name)
+  const nameLabel = `${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}`.toUpperCase()
+  const formattedName = formatName(member.name)
+</script>
+
+<div class="antiPopup container pb-4 w-85">
+  <div class="close-icon">
+    <ActionIcon icon={IconClose} size={'small'} action={onClose} />
+  </div>
+  <div class="flex top p-4">
+    <div class="avatar flex-center">
+      <span class="name-label fs-bold">{nameLabel}</span>
+    </div>
+    <div class="fs-title mt-4 ml-4">
+      {formattedName}
+    </div>
+  </div>
+  {#if menuItems && menuItems.length > 0}
+    {#each menuItems as menuSubgroup, i}
+      {#each menuSubgroup as menuItem}
+        <div
+          class="menu-item"
+          on:click={() => {
+            menuItem.handler()
+            onClose()
+          }}
+        >
+          <Label label={menuItem.title} />
+        </div>
+      {/each}
+      {#if i + 1 < menuItems.length}
+        <div class="divisor" />
+      {/if}
+    {/each}
+  {/if}
+</div>
+
+<style lang="scss">
+  .avatar {
+    width: 6rem;
+    height: 6rem;
+    background-color: var(--popup-bg-hover);
+    border: 1px solid var(--caption-color);
+    border-radius: 3rem;
+  }
+
+  .name-label {
+    font-size: 2rem;
+    color: var(--caption-color);
+  }
+
+  .top {
+    background-image: linear-gradient(to bottom, var(--popup-bg-hover) 0%, var(--popup-bg-hover) 100%);
+    background-repeat: no-repeat;
+    background-size: 100% 5rem;
+  }
+
+  .menu-item {
+    padding: 0.5rem 1rem;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--popup-bg-hover);
+    }
+  }
+
+  .divisor {
+    margin: 0.5rem 1rem;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  .close-icon {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+  }
+</style>

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

@@ -1,27 +1,28 @@
 <script lang="ts">
   import { Employee, formatName } from '@anticrm/contact'
   import { getFirstName, getLastName } from '@anticrm/contact'
-  import { ContactPresenter } from '@anticrm/contact-resources'
   import { Button, showPopup } from '@anticrm/ui'
+  import type { IntlString } from '@anticrm/platform'
+  import EditMember from '../popups/EditMember.svelte';
 
   export let value: Employee
   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 })
+  }
 </script>
 
 {#if value}
-  <Button
-    {size}
-    kind="no-border"
-    shape="circle"
-    title={formattedName}
-    on:click={() => {
-      showPopup(ContactPresenter, { value }) // TODO: show proper popup
-    }}
-  >
+  <Button {size} kind="no-border" shape="circle" title={formattedName} on:click={openPopup}>
     <div slot="content" class="text-md">{nameLabel}</div>
   </Button>
 {/if}

plugins/board-resources/src/plugin.ts

@@ -93,7 +93,9 @@ export default mergeIds(boardId, board, {
     DueDate: '' as IntlString,
     Save: '' as IntlString,
     Remove: '' as IntlString,
-    NullDate: '' as IntlString
+    NullDate: '' as IntlString,
+    ViewProfile: '' as IntlString,
+    RemoveFromCard: '' as IntlString
   },
   component: {
     CreateCustomer: '' as AnyComponent,