Social editor updates (#118)

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

plugins/contact-resources/package.json

@@ -23,6 +23,7 @@
     "svelte": "^3.37.0",
     "@anticrm/contact": "~0.6.0",
     "@anticrm/ui": "~0.6.0",
-    "@anticrm/presentation": "~0.6.1"
+    "@anticrm/presentation": "~0.6.1",
+    "@anticrm/core": "~0.6.11"
   }
 }

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

@@ -15,12 +15,57 @@
 -->
 
 <script lang="ts">
+import type { Ref } from '@anticrm/core'
+import type { IntlString, Asset } from '@anticrm/platform'
+import type { Channel, ChannelProvider } from '@anticrm/contact'
+import { getClient } from '@anticrm/presentation'
 
-import type { Channel } from '@anticrm/contact'
+import { Icon } from '@anticrm/ui'
+
+import contact from '@anticrm/contact'
 
 export let value: Channel[]
 
+interface Item {
+  label: IntlString,
+  icon: Asset,
+  value: string
+}
+
+const client = getClient()
+
+async function getProviders(): Promise<Map<Ref<ChannelProvider>, ChannelProvider>> {
+  const providers = await client.findAll(contact.class.ChannelProvider, {})
+  const map = new Map<Ref<ChannelProvider>, ChannelProvider>()
+  for (const provider of providers) { map.set(provider._id, provider) }
+  return map
+}
+
+async function update(value: Channel[]) {
+  const result = []
+  const map = await getProviders()
+  for (const item of value) {
+    const provider = map.get(item.provider)
+    if (provider) {
+      result.push({
+        label: provider.label as IntlString,
+        icon: provider.icon as Asset,
+        value: item.value,
+      })
+    } else {
+      console.log('provider not found: ', item.provider)
+    }
+  }
+  displayItems = result
+}
+
+$: update(value)
+
+let displayItems: Item[] = []
+
 </script>
 
-Channels: {value.length}
+{#each displayItems as item}
+  {item.value}<Icon icon={item.icon} size={'small'}/>
+{/each}
 

plugins/recruit-resources/src/components/CreateCandidate.svelte

@@ -52,7 +52,7 @@
       firstName: newValue.firstName,
       lastName: newValue.lastName,
       city: newValue.city,
-      channels: [],
+      channels: newValue.channels,
     })
 
     console.log('resume name', resume.name)

plugins/recruit-resources/src/components/DialogHeader.svelte

@@ -142,7 +142,7 @@
   <div class="abs-rt-content">
     <Grid column={2} columnGap={.5}>
       <CircleButton icon={Twitter} label={'Twitter'} />
-      <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, {}, ev.target)} />
+      <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: newValue.channels ?? [] }, ev.target, (result) => { newValue.channels = result; isChanged() })} />
     </Grid>
   </div>
 </div>

plugins/recruit-resources/src/components/SocialEditor.svelte

@@ -15,19 +15,40 @@
 -->
 
 <script lang="ts">
+  import type { Ref } from '@anticrm/core'
   import { createEventDispatcher } from 'svelte'
   import { EditBox, Button } from '@anticrm/ui'
   import { getClient } from '@anticrm/presentation'
 
-  import contact, { ChannelProvider } from '@anticrm/contact'
+  import contact, { ChannelProvider, Channel } from '@anticrm/contact'
+
+  export let values: Channel[]
+  let newValues: Channel[] = []
 
   const dispatch = createEventDispatcher()
 
   let providers: ChannelProvider[] = []
-  let values: string[]
+
+  function findValue(provider: Ref<ChannelProvider>): number {
+    for (let i = 0; i<values.length; i++) {
+      if (values[i].provider === provider) return i
+    }
+    return -1
+  }
 
   const client = getClient()
-  client.findAll(contact.class.ChannelProvider, {}).then(result => { providers = result; values = new Array(result.length) })
+  client.findAll(contact.class.ChannelProvider, {}).then(result => { 
+    providers = result
+    for (const provider of providers) {
+      const i = findValue(provider._id)
+      if (i !== -1) {
+        newValues.push({ provider: provider._id, value: values[i].value })
+      } else {
+        newValues.push({ provider: provider._id, value: '' })
+      }
+    }
+  })
+
 
 </script>
 
@@ -35,7 +56,7 @@
   <div class="popup-block">
     <span>Contact</span>
     {#each providers as provider, i}
-      <EditBox label={provider.label} placeholder={'+7 (000) 000-00-00'} bind:value={values[i]}/>
+      <EditBox label={provider.label} placeholder={'+7 (000) 000-00-00'} bind:value={newValues[i].value}/>
     {/each}
   </div>
   <!-- <div class="popup-block">
@@ -43,7 +64,7 @@
     <EditBox label={'Twitter'} placeholder={'@rosychen'} />
     <EditBox label={'Facebook'} placeholder={'facebook/rosamundch'} />
   </div> -->
-  <Button label="Apply" on:click={() => { dispatch('close', 42) }}/>
+  <Button label="Apply" on:click={() => { dispatch('close', newValues) }}/>
 </div>
 
 <style lang="scss">