Extend CreateEmployee dialog for extra controls (#2766)

* Extend CreateEmployee dialog for extra controls

Signed-off-by: Denis Bunakalya <denis.bunakalya@xored.com>

* Provide onCreate prop instead of dispatching event

Signed-off-by: Denis Bunakalya <denis.bunakalya@xored.com>

---------

Signed-off-by: Denis Bunakalya <denis.bunakalya@xored.com>

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

@@ -22,6 +22,9 @@
   import contact from '../plugin'
   import PersonPresenter from './PersonPresenter.svelte'
 
+  export let canSave: boolean = true
+  export let onCreate: ((id: Ref<Employee>) => Promise<void>) | undefined = undefined
+
   let avatarEditor: EditableAvatar
 
   let firstName = ''
@@ -66,6 +69,9 @@
         provider: channel.provider
       })
     }
+    if (onCreate) {
+      await onCreate(id)
+    }
     dispatch('close')
   }
 
@@ -102,7 +108,11 @@
 <Card
   label={contact.string.CreateEmployee}
   okAction={createPerson}
-  canSave={firstName.trim().length > 0 && lastName.trim().length > 0 && matches.length === 0 && email.trim().length > 0}
+  canSave={firstName.trim().length > 0 &&
+    lastName.trim().length > 0 &&
+    matches.length === 0 &&
+    email.trim().length > 0 &&
+    canSave}
   on:close={() => {
     dispatch('close')
   }}
@@ -142,6 +152,7 @@
           on:blur={changeEmail}
         />
       </div>
+      <slot name="extraControls" />
     </div>
     <div class="ml-4">
       <EditableAvatar avatar={object.avatar} {email} {id} size={'large'} bind:this={avatarEditor} />