Notification (#934)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>

plugins/gmail-resources/src/components/Chats.svelte

@@ -13,7 +13,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
   import { createQuery, getClient } from '@anticrm/presentation'
   import { Message, SharedMessage } from '@anticrm/gmail'
@@ -25,12 +24,14 @@
   import setting from '@anticrm/setting'
   import Connect from './Connect.svelte'
   import Messages from './Messages.svelte'
+  import { NotificationClient } from '@anticrm/notification-resources'
 
   export let object: Contact
   export let channel: Channel
   export let newMessage: boolean
 
-  const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/
+  const EMAIL_REGEX =
+    /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/
 
   let messages: Message[] = []
   let accounts: EmployeeAccount[] = []
@@ -42,22 +43,31 @@
   const accauntsQuery = createQuery()
   const settingsQuery = createQuery()
   const accountId = getCurrentAccount()._id
+  const notificationClient = NotificationClient.getClient()
 
-  $: messagesQuery.query(
-    gmail.class.Message,
-    { attachedTo: channel._id },
-    (res) => {
-      messages = res
-    },
-    { sort: { modifiedOn: SortingOrder.Descending } }
-  )
+  function updateMessagesQuery (channelId: Ref<Channel>): void {
+    messagesQuery.query(
+      gmail.class.Message,
+      { attachedTo: channelId },
+      (res) => {
+        messages = res
+        notificationClient.updateLastView(channelId, channel._class)
+        const accountsIds = new Set(messages.map((p) => p.modifiedBy as Ref<EmployeeAccount>))
+        updateAccountsQuery(accountsIds)
+      },
+      { sort: { modifiedOn: SortingOrder.Descending } }
+    )
+  }
 
-  $: accountsIds = messages.map((p) => p.modifiedBy as Ref<EmployeeAccount>)
-  $: accauntsQuery.query(contact.class.EmployeeAccount, { _id: { $in: accountsIds }}, (result) => {
-    accounts = result
-  })
+  $: updateMessagesQuery(channel._id)
 
-  $: settingsQuery.query(
+  function updateAccountsQuery (accountsIds: Set<Ref<EmployeeAccount>>): void {
+    accauntsQuery.query(contact.class.EmployeeAccount, { _id: { $in: Array.from(accountsIds) } }, (result) => {
+      accounts = result
+    })
+  }
+
+  settingsQuery.query(
     setting.class.Integration,
     { type: gmail.integrationType.Gmail, space: accountId as string as Ref<Space> },
     (res) => {
@@ -68,9 +78,17 @@
 
   async function share (): Promise<void> {
     const selectedMessages = messages.filter((m) => selected.has(m._id as string as Ref<SharedMessage>))
-    await client.addCollection(gmail.class.SharedMessages, object.space, object._id, object._class, 'gmailSharedMessages', {
-      messages: convertMessages(selectedMessages, accounts)
-    })
+    await client.addCollection(
+      gmail.class.SharedMessages,
+      object.space,
+      object._id,
+      object._class,
+      'gmailSharedMessages',
+      {
+        messages: convertMessages(selectedMessages, accounts)
+      }
+    )
+    await notificationClient.updateLastView(channel._id, channel._class, undefined, true)
     clear()
   }
 
@@ -91,7 +109,6 @@
     })
   }
 
-
   function getName (message: Message, accounts: EmployeeAccount[], sender: boolean): string {
     if (message.incoming === sender) {
       return `${formatName(object.name)} (${channel.value})`

plugins/gmail-resources/src/components/FullMessage.svelte

@@ -66,7 +66,7 @@
   {#if currentMessage.copy?.length}
     <Label label={gmail.string.Copy} />: {currentMessage.copy.join(', ')}
   {/if}
-  <div class="flex-col clear-mins mt-9">
+  <div class="flex-col h-full clear-mins mt-9">
     <FullMessageContent content={currentMessage.content} />
   </div>
 </div>

plugins/gmail-resources/src/components/FullMessageContent.svelte

@@ -15,20 +15,18 @@
 -->
 <script lang="ts">
   export let content: string
-
-  let editor: HTMLDivElement
-  $: if (editor) editor.innerHTML = content
 </script>
 
-<div bind:this={editor} class="input clear-mins" />
+<iframe srcdoc={content} title="e-mail" />
 
 <style lang="scss">
-  .input {
+  iframe {
     overflow: auto;
-    padding: 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    height: 100%;
     background-color: #fff;
     color: #1f212b;
-    border-radius: .5rem;
 
     :global(a) {
       font: inherit;

plugins/gmail-resources/src/components/FullMessagePopup.svelte

@@ -40,7 +40,7 @@
   {#if message.copy?.length}
     <Label label={gmail.string.Copy} />: {message.copy.join(', ')}
   {/if}
-  <div class="flex-col clear-mins mt-5">
+  <div class="flex-col h-full clear-mins mt-5">
     <FullMessageContent content={message.content} />
   </div>
 </div>
@@ -51,7 +51,7 @@
     max-height: 500px;
     background-color: var(--theme-button-bg-focused);
     border: 1px solid var(--theme-button-border-enabled);
-    border-radius: .75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, .2);
+    border-radius: 0.75rem;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
   }
 </style>

plugins/gmail-resources/src/components/Main.svelte

@@ -20,18 +20,24 @@
   import FullMessage from './FullMessage.svelte'
   import Chats from './Chats.svelte'
   import { getClient } from '@anticrm/presentation'
+  import { NotificationClient } from '@anticrm/notification-resources'
 
   export let object: Contact
   let newMessage: boolean = false
   let currentMessage: SharedMessage | undefined = undefined
   let channel: Channel | undefined = undefined
+  const notificationClient = NotificationClient.getClient()
 
   const client = getClient()
 
-  client.findOne(contact.class.Channel, {
-    attachedTo: object._id,
-    provider: contact.channelProvider.Email
-  }).then((res) => channel = res)
+  client
+    .findOne(contact.class.Channel, {
+      attachedTo: object._id,
+      provider: contact.channelProvider.Email
+    })
+    .then((res) => {
+      channel = res
+    })
 
   function back () {
     if (newMessage) {
@@ -40,8 +46,11 @@
     return (currentMessage = undefined)
   }
 
-  function selectHandler (e: CustomEvent) {
+  async function selectHandler (e: CustomEvent): Promise<void> {
     currentMessage = e.detail
+    if (channel !== undefined) {
+      await notificationClient.updateLastView(channel._id, channel._class, undefined, true)
+    }
   }
 </script>
 

plugins/gmail-resources/src/components/Message.svelte

@@ -15,9 +15,10 @@
 -->
 <script lang="ts">
   import type { SharedMessage } from '@anticrm/gmail'
-  import { CheckBox } from '@anticrm/ui'
+  import { CheckBox, Label } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import { getTime } from '../utils'
+  import gmail from '../plugin'
 
   export let message: SharedMessage
   export let selected: boolean = false
@@ -37,10 +38,14 @@
   {/if}
   <div class="flex-col message" class:selected>
     <div class="flex-between text-sm mb-1">
-      <div class="content-trans-color overflow-label mr-4">From: <span class="content-accent-color">{message.sender}</span></div>
+      <div class="content-trans-color overflow-label mr-4">
+        <Label label={gmail.string.From} /><span class="content-accent-color">{message.sender}</span>
+      </div>
       <div class="content-trans-color">{getTime(message.modifiedOn)}</div>
     </div>
-    <div class="content-trans-color text-sm overflow-label mr-4 mb-4">To: <span class="content-accent-color">{message.receiver}</span></div>
+    <div class="content-trans-color text-sm overflow-label mr-4 mb-4">
+      <Label label={gmail.string.To} /><span class="content-accent-color">{message.receiver}</span>
+    </div>
     <div class="fs-title overflow-label mb-1">
       {message.subject}
     </div>
@@ -60,10 +65,12 @@
     padding: 1rem;
     min-width: 0;
     background-color: var(--theme-incoming-msg);
-    border-radius: .75rem;
+    border-radius: 0.75rem;
     white-space: nowrap;
     flex-grow: 1;
 
-    &.selected { background-color: var(--primary-button-enabled); }
+    &.selected {
+      background-color: var(--primary-button-enabled);
+    }
   }
 </style>

plugins/gmail-resources/src/components/NewMessage.svelte

@@ -24,10 +24,12 @@
   import { Channel, Contact, formatName } from '@anticrm/contact'
   import { TextEditor } from '@anticrm/text-editor'
   import plugin from '../plugin'
+  import { NotificationClient } from '@anticrm/notification-resources'
 
   export let object: Contact
   export let channel: Channel
   export let currentMessage: SharedMessage | undefined
+  const notificationClient = NotificationClient.getClient()
 
   let editor: TextEditor
   let copy: string = ''
@@ -42,7 +44,7 @@
   const url = getMetadata(login.metadata.GmailUrl) ?? ''
 
   async function sendMsg () {
-    fetch(url + '/send', {
+    await fetch(url + '/send', {
       method: 'POST',
       headers: {
         Authorization: 'Bearer ' + getMetadata(login.metadata.LoginToken),
@@ -53,6 +55,7 @@
         copy: copy.split(',').map((m) => m.trim())
       })
     })
+    await notificationClient.updateLastView(channel._id, channel._class, undefined, true)
     dispatch('close')
   }
 
@@ -130,7 +133,7 @@
       background-color: #fff;
       color: #1f212b;
       height: 100%;
-      border-radius: .5rem;
+      border-radius: 0.5rem;
 
       :global(.ProseMirror) {
         min-height: 0;