UBER-343 Multiple emails per contact (#3327)

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

plugins/contact-resources/src/components/ChannelsDropdown.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
   import type { Channel, ChannelProvider } from '@hcengineering/contact'
   import contact from '@hcengineering/contact'
-  import type { AttachedData, Doc, Ref } from '@hcengineering/core'
+  import { AttachedData, Doc, Ref, toIdMap } from '@hcengineering/core'
   import notification, { DocUpdates } from '@hcengineering/notification'
   import { Asset, IntlString, getResource } from '@hcengineering/platform'
   import presentation from '@hcengineering/presentation'
@@ -36,7 +36,7 @@
   import { invokeAction } from '@hcengineering/view-resources'
   import { createEventDispatcher, tick } from 'svelte'
   import { Writable, writable } from 'svelte/store'
-  import { channelProviders, getChannelProviders } from '../utils'
+  import { channelProviders } from '../utils'
   import ChannelEditor from './ChannelEditor.svelte'
 
   export let value: AttachedData<Channel>[] | Channel | null
@@ -106,8 +106,9 @@
       displayItems = []
       return
     }
+
     const result: Item[] = []
-    const map = getChannelProviders(channelProviders)
+    const map = toIdMap(channelProviders)
     if (Array.isArray(value)) {
       for (const item of value) {
         const provider = getProvider(item, map, docUpdates)
@@ -139,27 +140,22 @@
   const focusManager = getFocusManager()
 
   const updateMenu = (_displayItems: Item[], providers: ChannelProvider[]): void => {
-    actions = []
-    providers.forEach((pr) => {
-      if (_displayItems.filter((it) => it.provider === pr._id).length === 0) {
-        actions.push({
-          icon: pr.icon ?? contact.icon.SocialEdit,
-          label: pr.label,
-          action: async () => {
-            const provider = getProvider({ provider: pr._id, value: '' }, getChannelProviders(providers), $docUpdates)
-            if (provider !== undefined) {
-              if (_displayItems.filter((it) => it.provider === pr._id).length === 0) {
-                displayItems = [..._displayItems, provider]
-                if (focusIndex !== -1) {
-                  await tick()
-                  focusManager?.setFocusPos(focusIndex + displayItems.length)
-                  await tick()
-                  editChannel(btns[displayItems.length - 1], displayItems.length - 1, provider)
-                }
-              }
+    actions = providers.map((pr) => {
+      return {
+        icon: pr.icon ?? contact.icon.SocialEdit,
+        label: pr.label,
+        action: async () => {
+          const provider = getProvider({ provider: pr._id, value: '' }, toIdMap(providers), $docUpdates)
+          if (provider !== undefined) {
+            displayItems = [..._displayItems, provider]
+            if (focusIndex !== -1) {
+              await tick()
+              focusManager?.setFocusPos(focusIndex + displayItems.length)
+              await tick()
+              editChannel(btns[displayItems.length - 1], displayItems.length - 1, provider)
             }
           }
-        })
+        }
       }
     })
   }
@@ -170,7 +166,6 @@
   }
   const saveItems = (): void => {
     value = filterUndefined(displayItems)
-    dispatch('change', value)
     updateMenu(displayItems, $channelProviders)
   }
 
@@ -182,6 +177,12 @@
     })
   }
 
+  function remove (n: number) {
+    const removed = displayItems[n]
+    displayItems = dropItem(n)
+    dispatch('remove', removed.channel)
+  }
+
   const editChannel = (el: HTMLElement, n: number, item: Item): void => {
     if (opened !== n) {
       opened = n
@@ -195,7 +196,9 @@
         },
         el,
         (result) => {
-          if (result === undefined && item.value === '') displayItems = dropItem(n)
+          if (result === undefined && item.value === '') {
+            remove(n)
+          }
           if (result === 'open') {
             if (item.action) {
               const doc = item.channel as Channel
@@ -205,12 +208,14 @@
             }
           } else if (result != null) {
             if (result === '') {
-              displayItems = dropItem(n)
+              remove(n)
             } else {
               item.value = result
-              if (displayItems.find((it) => item.value === it.value) === undefined) {
+              if (displayItems[n] === undefined) {
                 displayItems = [...displayItems, item]
               }
+              item.channel.value = item.value
+              dispatch('save', item.channel)
             }
             saveItems()
             focusManager?.setFocusPos(focusIndex + 1 + n)
@@ -220,11 +225,12 @@
         (result) => {
           if (result != null) {
             if (result === '') {
-              displayItems = dropItem(n)
+              remove(n)
             } else {
               item.value = result
+              saveItems()
+              dispatch('save', item.channel)
             }
-            saveItems()
           }
         }
       )

plugins/contact-resources/src/components/ChannelsEditor.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Class, Doc, Ref, TxResult } from '@hcengineering/core'
+  import type { AttachedData, Class, Doc, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { ButtonKind, ButtonSize, closeTooltip } from '@hcengineering/ui'
 
@@ -38,13 +38,6 @@
 
   let channels: Channel[] = []
 
-  function findValue (provider: Ref<ChannelProvider>): Channel | undefined {
-    for (let i = 0; i < channels.length; i++) {
-      if (channels[i].provider === provider) return channels[i]
-    }
-    return undefined
-  }
-
   const query = createQuery()
   $: attachedTo &&
     query.query(
@@ -59,52 +52,25 @@
 
   const client = getClient()
 
-  async function save (newValues: Channel[]): Promise<void> {
-    const currentProviders = new Set(channels.map((p) => p.provider))
-    const promises: Array<Promise<TxResult>> = []
-    for (const value of newValues) {
-      const oldChannel = findValue(value.provider)
-      if (oldChannel === undefined) {
-        if (value.value.length === 0) continue
-        promises.push(
-          client.addCollection(contact.class.Channel, contact.space.Contacts, attachedTo, attachedClass, 'channels', {
-            value: value.value,
-            provider: value.provider
-          })
-        )
-      } else {
-        currentProviders.delete(value.provider)
-        if (value.value === oldChannel.value) continue
-        promises.push(
-          client.updateCollection(
-            oldChannel._class,
-            oldChannel.space,
-            oldChannel._id,
-            oldChannel.attachedTo,
-            oldChannel.attachedToClass,
-            oldChannel.collection,
-            {
-              value: value.value
-            }
-          )
-        )
-      }
+  async function remove (value: Channel | AttachedData<Channel>): Promise<void> {
+    if (!editable) return
+    if ('_id' in value) {
+      await client.remove(value)
     }
-    for (const value of currentProviders) {
-      const oldChannel = findValue(value)
-      if (oldChannel === undefined) continue
-      promises.push(
-        client.removeCollection(
-          oldChannel._class,
-          oldChannel.space,
-          oldChannel._id,
-          oldChannel.attachedTo,
-          oldChannel.attachedToClass,
-          oldChannel.collection
-        )
-      )
+  }
+
+  async function saveHandler (value: Channel | AttachedData<Channel>): Promise<void> {
+    if (!editable) return
+    if ('_id' in value) {
+      await client.update(value, {
+        value: value.value
+      })
+    } else {
+      await client.addCollection(contact.class.Channel, contact.space.Contacts, attachedTo, attachedClass, 'channels', {
+        value: value.value,
+        provider: value.provider
+      })
     }
-    Promise.all(promises)
   }
 
   function _open (ev: any) {
@@ -127,8 +93,11 @@
   {restricted}
   {shape}
   {focusIndex}
-  on:change={(e) => {
-    if (editable) save(e.detail)
+  on:remove={(e) => {
+    remove(e.detail)
+  }}
+  on:save={(e) => {
+    saveHandler(e.detail)
   }}
   on:open={_open}
 />

plugins/contact-resources/src/components/ChannelsView.svelte

@@ -15,14 +15,14 @@
 -->
 <script lang="ts">
   import type { Channel, ChannelProvider } from '@hcengineering/contact'
-  import type { AttachedData, Doc, Ref } from '@hcengineering/core'
+  import { AttachedData, Doc, Ref, toIdMap } from '@hcengineering/core'
   import notification, { DocUpdates } from '@hcengineering/notification'
   import { Asset, IntlString, getResource } from '@hcengineering/platform'
   import type { AnyComponent } from '@hcengineering/ui'
   import { Button } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import { Writable, writable } from 'svelte/store'
-  import { channelProviders, getChannelProviders } from '../utils'
+  import { channelProviders } from '../utils'
   import ChannelsPopup from './ChannelsPopup.svelte'
 
   export let value: AttachedData<Channel>[] | Channel | null
@@ -81,7 +81,7 @@
       return
     }
     const result: any[] = []
-    const map = getChannelProviders(channels)
+    const map = toIdMap(channels)
     if (Array.isArray(value)) {
       for (const item of value) {
         const provider = getProvider(item, map, docUpdates)

plugins/contact-resources/src/utils.ts

@@ -36,14 +36,6 @@ import { FilterQuery } from '@hcengineering/view-resources'
 import { get, writable } from 'svelte/store'
 import contact from './plugin'
 
-export function getChannelProviders (providers: ChannelProvider[]): Map<Ref<ChannelProvider>, ChannelProvider> {
-  const map = new Map<Ref<ChannelProvider>, ChannelProvider>()
-  for (const provider of providers) {
-    map.set(provider._id, provider)
-  }
-  return map
-}
-
 export function formatDate (dueDateMs: Timestamp): string {
   return new Date(dueDateMs).toLocaleString('default', {
     month: 'short',