Chunter: Avatars in dm header and highlight on first message (#1499)

Signed-off-by: Denis Bunakalya <denis.bunakalya@xored.com>

plugins/chunter-resources/package.json

@@ -41,6 +41,7 @@
     "@anticrm/text-editor": "~0.6.0",
     "@anticrm/contact": "~0.6.5",
     "@anticrm/contact-resources": "~0.6.0",
+    "@anticrm/notification": "~0.6.0",
     "@anticrm/notification-resources": "~0.6.0",
     "@anticrm/attachment": "~0.6.1",
     "@anticrm/attachment-resources": "~0.6.0",

plugins/chunter-resources/src/components/ChannelView.svelte

@@ -14,9 +14,10 @@
 -->
 <script lang="ts">
   import { AttachmentRefInput } from '@anticrm/attachment-resources'
-  import { ChunterMessage, Message } from '@anticrm/chunter'
+  import { ChunterMessage, Message, ChunterSpace } from '@anticrm/chunter'
   import { generateId, getCurrentAccount, Ref, Space, TxFactory } from '@anticrm/core'
   import { NotificationClientImpl } from '@anticrm/notification-resources'
+  import notification from '@anticrm/notification'
   import { createQuery, getClient } from '@anticrm/presentation'
   import { getCurrentLocation, navigate } from '@anticrm/ui'
   import { createBacklinks } from '../backlinks'
@@ -25,6 +26,7 @@
   import PinnedMessages from './PinnedMessages.svelte'
 
   export let space: Ref<Space>
+  let chunterSpace: ChunterSpace
 
   const client = getClient()
   const _class = chunter.class.Message
@@ -50,6 +52,26 @@
       _id
     )
     tx.attributes.createOn = tx.modifiedOn
+
+    if (
+      chunterSpace._class === chunter.class.DirectMessage &&
+      !chunterSpace.lastMessage &&
+      chunterSpace.members.length !== 1
+    ) {
+      await Promise.all(
+        chunterSpace.members
+          .filter((accId) => accId !== me)
+          .map((accId) =>
+            client.createDoc(notification.class.LastView, space, {
+              user: accId,
+              lastView: 0,
+              attachedTo: space,
+              attachedToClass: chunterSpace._class,
+              collection: 'lastViews'
+            })
+          )
+      )
+    }
     await notificationClient.updateLastView(space, chunter.class.ChunterSpace, tx.modifiedOn, true)
     await client.tx(tx)
 
@@ -72,6 +94,7 @@
     { _id: space },
     (res) => {
       pinnedIds = res[0]?.pinned ?? []
+      chunterSpace = res[0]
     },
     { limit: 1 }
   )

plugins/chunter-resources/src/components/DmHeader.svelte

@@ -15,22 +15,34 @@
 <script lang="ts">
   import { DirectMessage } from '@anticrm/chunter'
   import type { Ref } from '@anticrm/core'
-  import { createQuery, getClient } from '@anticrm/presentation'
+  import { getCurrentAccount } from '@anticrm/core'
+  import { createQuery, getClient, CombineAvatars } from '@anticrm/presentation'
+  import contact, { EmployeeAccount } from '@anticrm/contact'
   import { showPanel } from '@anticrm/ui'
   import chunter from '../plugin'
-  import { classIcon, getDmName } from '../utils'
-  import Header from './Header.svelte'
+  import { getDmName } from '../utils'
 
   export let spaceId: Ref<DirectMessage> | undefined
 
   const client = getClient()
   const query = createQuery()
+  const myAccId = getCurrentAccount()._id
   let dm: DirectMessage | undefined
 
   $: query.query(chunter.class.DirectMessage, { _id: spaceId }, (result) => {
     dm = result[0]
   })
 
+  async function getEmpolyeeIds () {
+    const empAccIds = dm?.members.length !== 1 ? dm?.members.filter((accId) => accId !== myAccId) : dm?.members
+
+    const employeeAccounts = await client.findAll(contact.class.EmployeeAccount, {
+      _id: { $in: empAccIds as Ref<EmployeeAccount>[] }
+    })
+
+    return employeeAccounts.map((ea) => ea.employee)
+  }
+
   async function onSpaceEdit (): Promise<void> {
     if (dm === undefined) return
     showPanel(chunter.component.EditChannel, dm._id, dm._class, 'right')
@@ -40,7 +52,23 @@
 <div class="ac-header divide full">
   {#if dm}
     {#await getDmName(client, dm) then name}
-      <Header icon={classIcon(client, dm._class)} label={name} description={''} on:click={onSpaceEdit} />
+      {#await getEmpolyeeIds() then empolyeeIds}
+        <div class="ac-header__wrap-title" on:click={onSpaceEdit}>
+          <div class="ac-header__icon">
+            <CombineAvatars _class={contact.class.Employee} items={empolyeeIds} size={'x-small'} />
+          </div>
+          <span class="ac-header__title">{name}</span>
+        </div>
+      {/await}
     {/await}
   {/if}
 </div>
+
+<style lang="scss">
+  .ac-header__wrap-title:hover {
+    cursor: pointer;
+    span {
+      text-decoration: underline;
+    }
+  }
+</style>