panel editing experiment

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

packages/panel/src/components/Panel.svelte

@@ -27,7 +27,7 @@
 
   import chunter from '@anticrm/chunter'
 
-  export let label: IntlString
+  export let title: string
   export let icon: Asset | AnySvelteComponent
   export let fullSize: boolean = false
   export let object: Doc
@@ -62,7 +62,7 @@
           <svelte:component this={icon} size={'small'} />
         {/if}
       </div>
-      <div class="title"><Label {label} /></div>
+      <div class="title">{title}</div>
     </div>
     {#if $$slots.subtitle}<div class="subtitle"><slot name="subtitle" /></div>{/if}
     <div class="content"><ScrollBox vertical stretch><slot /></ScrollBox></div>
@@ -95,7 +95,7 @@
           <svelte:component this={icon} size={'small'} />
         {/if}
       </div>
-      <div class="title"><Label {label} /></div>
+      <div class="title">{title}</div>
     </div>
     {#if $$slots.subtitle}<div class="subtitle"><slot name="subtitle" /></div>{/if}
     <ScrollBox vertical stretch noShift>

packages/presentation/src/components/AttributeEditor.svelte

@@ -20,12 +20,11 @@
   import type { AnySvelteComponent } from '@anticrm/ui'
   import { getClient } from '../utils'
   import view from '@anticrm/view'
-  import core from '@anticrm/core'
 
   export let _class: Ref<Class<Doc>>
   export let key: string
-  export let newValue: any
-  export let oldValue: any
+  export let object: any
+  export let maxWidth: string
   export let focus: boolean = false
 
   const client = getClient()
@@ -41,14 +40,18 @@
     const editorMixin = hierarchy.as(typeClass, view.mixin.AttributeEditor)
     editor = getResource(editorMixin.editor)
   }
+
+  function onChange(value: any) {
+    const doc = object as Doc
+    client.updateDoc(_class, doc.space, doc._id, { [key]: value })
+  }
 </script>
 
 {#if editor}
   {#await editor}
     ...
   {:then instance}
-    <svelte:component this={instance} label={attribute?.label} placeholder={attribute?.label} bind:value={newValue[key]} {focus}/>
+    <svelte:component this={instance} label={attribute?.label} placeholder={attribute?.label} {maxWidth} bind:value={object[key]} {onChange} {focus}/>
   {/await}
 {/if}
 
-

packages/ui/src/components/EditBox.svelte

@@ -55,9 +55,9 @@
   {#if label}<div class="label"><Label label={label}/></div>{/if}
   <div class="wrap">
     {#if password}
-      <input bind:this={input} type="password" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} />
+      <input bind:this={input} type="password" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
     {:else}
-      <input bind:this={input} type="text" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} />
+      <input bind:this={input} type="text" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} on:change/>
     {/if}
   </div>
 </div>

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

@@ -16,17 +16,19 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space, Doc } from '@anticrm/core'
-  import { Tabs, EditBox, Link, showPopup, IconFile as FileIcon } from '@anticrm/ui'
+  import { CircleButton, EditBox, Link, showPopup, IconFile as FileIcon } from '@anticrm/ui'
   import type { Attachment } from '@anticrm/chunter'
   import FileUpload from './icons/FileUpload.svelte'
   import PDFViewer from './PDFViewer.svelte'
-  import { getClient, Channels } from '@anticrm/presentation'
+  import { getClient, Channels, AttributeEditor } from '@anticrm/presentation'
   import { Panel } from '@anticrm/panel'
   import type { Candidate } from '@anticrm/recruit'
   import DialogHeader from './DialogHeader.svelte'
   import Contact from './icons/Contact.svelte'
   import Avatar from './icons/Avatar.svelte'
   import Attachments from './Attachments.svelte'
+  import Edit from './icons/Edit.svelte'
+  import SocialEditor from './SocialEditor.svelte'
 
   import chunter from '@anticrm/chunter'
   
@@ -38,12 +40,18 @@
 
   const dispatch = createEventDispatcher()
 
+  function saveChannels(result: any) {
+    object.channels = result
+    client.updateDoc(recruit.class.Candidate, object.space, object._id, { channels: result })
+  }
+
 </script>
 
-<Panel icon={Contact} label={object.firstName + ' ' + object.lastName} {object} on:close={() => { dispatch('close') }}>
+<Panel icon={Contact} title={object.firstName + ' ' + object.lastName} {object} on:close={() => { dispatch('close') }}>
   <svelte:fragment slot="subtitle">
     <div class="flex-row-reverse" style="width: 100%">
-      <Channels value={object.channels} reverse />
+      <Channels value={object.channels}/>
+      <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />      
     </div>
   </svelte:fragment>
 
@@ -53,10 +61,10 @@
       <Avatar />
     </div>
     <div class="flex-col">
-      <div class="name"><EditBox placeholder="Name" maxWidth="15rem" bind:value={object.firstName}/></div>
-      <div class="name"><EditBox placeholder="Surname" maxWidth="15rem" bind:value={object.lastName}/></div>
-      <div class="title"><EditBox placeholder="Title" maxWidth="15rem" bind:value={object.title}/></div>
-      <div class="city"><EditBox placeholder="Location" maxWidth="15rem" bind:value={object.city}/></div>
+      <div class="name"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} bind:object={object} key="firstName"/></div>
+      <div class="name"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} bind:object={object} key="lastName"/></div>
+      <div class="title"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} bind:object={object} key="title"/></div>
+      <div class="city"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} bind:object={object} key="city"/></div>
     </div>
   </div>
 

plugins/view-resources/src/components/StringEditor.svelte

@@ -23,7 +23,13 @@ export let label: IntlString
 export let placeholder: IntlString
 export let value: any
 export let focus: boolean
+export let maxWidth: string
+export let onChange: (value: string) => void
+
+function _onchange(ev: Event) {
+  onChange((ev.target as HTMLInputElement).value)
+}
 
 </script>
 
-<EditBox {label} {placeholder} bind:value={value} {focus} />
+<EditBox {placeholder} {maxWidth} bind:value={value} {focus} on:change={ _onchange }/>