Send emails to many receivers (#2579)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

models/gmail/package.json

@@ -35,6 +35,8 @@
     "@hcengineering/gmail": "^0.6.0",
     "@hcengineering/gmail-resources": "^0.6.0",
     "@hcengineering/model-attachment": "^0.6.0",
+    "@hcengineering/model-view": "^0.6.0",
+    "@hcengineering/view": "^0.6.2",
     "@hcengineering/setting": "^0.6.2",
     "@hcengineering/ui": "^0.6.3"
   }

models/gmail/src/index.ts

@@ -33,6 +33,7 @@ import contact from '@hcengineering/model-contact'
 import core, { TAttachedDoc, TDoc } from '@hcengineering/model-core'
 import setting from '@hcengineering/setting'
 import gmail from './plugin'
+import view, { createAction } from '@hcengineering/model-view'
 
 export const DOMAIN_GMAIL = 'gmail' as Domain
 
@@ -163,6 +164,30 @@ export function createModel (builder: Builder): void {
     },
     gmail.ids.TxSharedCreate
   )
+
+  createAction(
+    builder,
+    {
+      action: view.actionImpl.ShowPopup,
+      actionProps: {
+        component: gmail.component.NewMessages,
+        element: 'float',
+        fillProps: {
+          _objects: 'value'
+        }
+      },
+      label: gmail.string.WrtieEmail,
+      icon: contact.icon.Email,
+      keyBinding: [],
+      input: 'none',
+      category: contact.category.Contact,
+      target: contact.class.Contact,
+      context: {
+        mode: ['context', 'browser']
+      }
+    },
+    gmail.action.WriteEmail
+  )
 }
 
 export { gmailOperation } from './migration'

models/gmail/src/plugin.ts

@@ -20,8 +20,12 @@ import { gmailId } from '@hcengineering/gmail'
 import gmail from '@hcengineering/gmail-resources/src/plugin'
 import type { AnyComponent } from '@hcengineering/ui'
 import type { TxViewlet } from '@hcengineering/activity'
+import { Action } from '@hcengineering/view'
 
 export default mergeIds(gmailId, gmail, {
+  action: {
+    WriteEmail: '' as Ref<Action>
+  },
   string: {
     MessageID: '' as IntlString,
     IntegrationLabel: '' as IntlString,

plugins/gmail-assets/lang/en.json

@@ -29,6 +29,7 @@
     "Incoming": "Incoming",
     "Email": "Email",
     "Status": "Status",
-    "EmailPlaceholder": "john.appleseed@apple.com"
+    "EmailPlaceholder": "john.appleseed@apple.com",
+    "WrtieEmail": "Wrtie Email"
   }
 }

plugins/gmail-assets/lang/ru.json

@@ -29,6 +29,7 @@
     "Incoming": "Входящие",
     "Email": "Email",
     "Status": "Статус",
-    "EmailPlaceholder": "john.appleseed@apple.com"
+    "EmailPlaceholder": "john.appleseed@apple.com",
+    "WrtieEmail": "Написать Email"
   }
 }

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

@@ -0,0 +1,322 @@
+<!--
+// Copyright © 2022 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
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import attachmentP, { Attachment } from '@hcengineering/attachment'
+  import { AttachmentPresenter } from '@hcengineering/attachment-resources'
+  import contact, { Channel, Contact, formatName } from '@hcengineering/contact'
+  import { generateId, Ref, toIdMap } from '@hcengineering/core'
+  import { NotificationClientImpl } from '@hcengineering/notification-resources'
+  import { getResource, setPlatformStatus, unknownError } from '@hcengineering/platform'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { TextEditor } from '@hcengineering/text-editor'
+  import { Icon, IconAttachment, Label, Panel, Scroller } from '@hcengineering/ui'
+  import Button from '@hcengineering/ui/src/components/Button.svelte'
+  import EditBox from '@hcengineering/ui/src/components/EditBox.svelte'
+  import { createEventDispatcher } from 'svelte'
+  import plugin from '../plugin'
+
+  export let value: Contact[] | Contact
+  const contacts = Array.isArray(value) ? value : [value]
+
+  console.log(contacts)
+  const contactMap = toIdMap(contacts)
+
+  const query = createQuery()
+  query.query(
+    contact.class.Channel,
+    {
+      provider: contact.channelProvider.Email,
+      attachedTo: { $in: contacts.map((p) => p._id) }
+    },
+    (res) => {
+      channels = res
+    }
+  )
+  let channels: Channel[] = []
+
+  const client = getClient()
+  const notificationClient = NotificationClientImpl.getClient()
+
+  const attachmentParentId = generateId()
+
+  let editor: TextEditor
+  let subject: string = ''
+  let content: string = ''
+  let copy: string = ''
+  let saved = false
+
+  async function sendMsg () {
+    for (const channel of channels) {
+      const id = await client.createDoc(plugin.class.NewMessage, plugin.space.Gmail, {
+        subject,
+        content,
+        to: channel.value,
+        status: 'new',
+        copy: copy
+          .split(',')
+          .map((m) => m.trim())
+          .filter((m) => m.length)
+      })
+      await notificationClient.updateLastView(channel._id, channel._class, undefined, true)
+      for (const attachment of attachments) {
+        await client.addCollection(
+          attachmentP.class.Attachment,
+          plugin.space.Gmail,
+          id,
+          plugin.class.NewMessage,
+          'attachments',
+          {
+            name: attachment.name,
+            file: attachment.file,
+            type: attachment.type,
+            size: attachment.size,
+            lastModified: attachment.lastModified
+          }
+        )
+      }
+    }
+    saved = true
+    dispatch('close')
+  }
+
+  const dispatch = createEventDispatcher()
+  let inputFile: HTMLInputElement
+
+  function fileSelected () {
+    const list = inputFile.files
+    if (list === null || list.length === 0) return
+    for (let index = 0; index < list.length; index++) {
+      const file = list.item(index)
+      if (file !== null) createAttachment(file)
+    }
+    inputFile.value = ''
+  }
+
+  function fileDrop (e: DragEvent) {
+    const list = e.dataTransfer?.files
+    if (list === undefined || list.length === 0) return
+    for (let index = 0; index < list.length; index++) {
+      const file = list.item(index)
+      if (file !== null) createAttachment(file)
+    }
+  }
+
+  async function createAttachment (file: File) {
+    try {
+      const uploadFile = await getResource(attachmentP.helper.UploadFile)
+      const uuid = await uploadFile(file)
+      await client.addCollection(
+        attachmentP.class.Attachment,
+        plugin.space.Gmail,
+        attachmentParentId,
+        plugin.class.NewMessage,
+        'attachments',
+        {
+          name: file.name,
+          file: uuid,
+          type: file.type,
+          size: file.size,
+          lastModified: file.lastModified
+        }
+      )
+    } catch (err: any) {
+      setPlatformStatus(unknownError(err))
+    }
+  }
+
+  const attachmentsQ = createQuery()
+
+  async function removeAttachment (attachment: Attachment): Promise<void> {
+    const deleteFile = await getResource(attachmentP.helper.DeleteFile)
+    await client.removeCollection(
+      attachment._class,
+      attachment.space,
+      attachment._id,
+      attachment.attachedTo,
+      attachment.attachedToClass,
+      'attachments'
+    )
+    await deleteFile(attachment.file)
+  }
+
+  let attachments: Attachment[] = []
+
+  attachmentsQ.query(
+    attachmentP.class.Attachment,
+    {
+      attachedTo: attachmentParentId
+    },
+    (res) => (attachments = res)
+  )
+
+  function getName (channel: Channel): string {
+    const contact = contactMap.get(channel.attachedTo as Ref<Contact>)
+    if (contact === undefined) return channel.value
+    return `${formatName(contact.name)} (${channel.value})`
+  }
+</script>
+
+<Panel
+  isHeader={true}
+  isAside={false}
+  isFullSize
+  on:fullsize
+  on:close={() => {
+    if (!saved) {
+      attachments.map((p) => removeAttachment(p))
+    }
+    dispatch('close')
+  }}
+>
+  <svelte:fragment slot="title">
+    <div class="antiTitle icon-wrapper">
+      <div class="wrapped-icon"><Icon icon={contact.icon.Email} size={'medium'} /></div>
+      <div class="title-wrapper">
+        <span class="wrapped-title">Email</span>
+      </div>
+    </div>
+  </svelte:fragment>
+
+  <input
+    bind:this={inputFile}
+    multiple
+    type="file"
+    name="file"
+    id="file"
+    style="display: none"
+    on:change={fileSelected}
+  />
+  <div class="popupPanel-body__main-header bottom-divider p-2">
+    <div class="flex-between">
+      <div class="buttons-group">
+        <div class="flex-grow flex-col">
+          <Label label={plugin.string.NewMessage} />
+          <span class="content-accent-color">
+            <b>
+              {#each channels as channel, i}
+                <div>
+                  {getName(channel)}
+                </div>
+              {/each}
+            </b></span
+          >
+        </div>
+      </div>
+      <div class="buttons-group small-gap">
+        <Button
+          icon={IconAttachment}
+          kind={'transparent'}
+          disabled={channels.length === 0}
+          on:click={() => {
+            inputFile.click()
+          }}
+        />
+        <Button
+          label={plugin.string.Send}
+          size={'small'}
+          kind={'primary'}
+          disabled={channels.length === 0}
+          on:click={sendMsg}
+        />
+      </div>
+    </div>
+  </div>
+  <Scroller>
+    <div
+      class="popupPanel-body__main-content py-4 h-full"
+      on:dragover|preventDefault={() => {}}
+      on:dragleave={() => {}}
+      on:drop|preventDefault|stopPropagation={fileDrop}
+    >
+      <div class="mb-2">
+        <EditBox label={plugin.string.Subject} bind:value={subject} placeholder={plugin.string.SubjectPlaceholder} />
+      </div>
+      <div>
+        <EditBox label={plugin.string.Copy} bind:value={copy} placeholder={plugin.string.CopyPlaceholder} />
+      </div>
+      {#if attachments.length}
+        <div class="flex-row-center list mt-2 scroll-divider-color">
+          {#each attachments as attachment}
+            <div class="item flex-row-center flex-no-shrink">
+              <AttachmentPresenter
+                value={attachment}
+                removable
+                on:remove={(result) => {
+                  if (result !== undefined) removeAttachment(attachment)
+                }}
+              />
+            </div>
+          {/each}
+        </div>
+      {/if}
+      <div class="input mt-4 clear-mins">
+        <TextEditor bind:this={editor} bind:content on:blur={editor.submit} />
+      </div>
+    </div>
+  </Scroller>
+</Panel>
+
+<style lang="scss">
+  .list {
+    padding: 0.5rem;
+    color: var(--theme-caption-color);
+    overflow-x: auto;
+    overflow-y: hidden;
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 0.25rem;
+
+    .item + .item {
+      padding-left: 1rem;
+      border-left: 1px solid var(--divider-color);
+    }
+  }
+
+  .input {
+    overflow: auto;
+    padding: 1rem;
+    background-color: var(--outcoming-msg);
+    color: #d6d6d6;
+    caret-color: var(--caret-color);
+    min-height: 0;
+    height: calc(100% - 12rem);
+    border-radius: 0.25rem;
+
+    :global(.ProseMirror) {
+      min-height: 0;
+      max-height: 100%;
+      height: auto;
+    }
+
+    :global(a) {
+      font: inherit;
+      font-weight: 500;
+      text-decoration: initial;
+      color: initial;
+      outline: initial;
+      &:hover {
+        color: initial;
+        text-decoration: initial;
+      }
+      &:active {
+        color: initial;
+        text-decoration: initial;
+      }
+      &:visited {
+        color: initial;
+      }
+    }
+  }
+</style>

plugins/gmail-resources/src/index.ts

@@ -21,12 +21,14 @@ import Connect from './components/Connect.svelte'
 import IconGmail from './components/icons/GmailColor.svelte'
 import TxSharedCreate from './components/activity/TxSharedCreate.svelte'
 import { concatLink } from '@hcengineering/core'
+import NewMessages from './components/NewMessages.svelte'
 
 export default async (): Promise<Resources> => ({
   component: {
     Main,
     Connect,
-    IconGmail
+    IconGmail,
+    NewMessages
   },
   activity: {
     TxSharedCreate

plugins/gmail-resources/src/plugin.ts

@@ -38,6 +38,7 @@ export default mergeIds(gmailId, gmail, {
     NewMessageTo: '' as IntlString,
     Cancel: '' as IntlString,
     SubjectPlaceholder: '' as IntlString,
-    CopyPlaceholder: '' as IntlString
+    CopyPlaceholder: '' as IntlString,
+    WrtieEmail: '' as IntlString
   }
 })

plugins/gmail/src/index.ts

@@ -84,7 +84,8 @@ export default plugin(gmailId, {
   component: {
     Main: '' as AnyComponent,
     Connect: '' as AnyComponent,
-    IconGmail: '' as AnyComponent
+    IconGmail: '' as AnyComponent,
+    NewMessages: '' as AnyComponent
   },
   integrationType: {
     Gmail: '' as Ref<IntegrationType>