Tabs implemented

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

packages/ui/src/components/Tabs.svelte

@@ -14,26 +14,28 @@
 -->
 
 <script lang="ts">
-  import { IntlString } from '@anticrm/platform'
+  import type { TabModel } from '../types'
   import Label from './Label.svelte'
+  import Component from './Component.svelte'
 
-  interface Tab {
+  export let model: TabModel
-    title: IntlString
+  export let selected = 0
-  }
-
-  export let tabs: Array<Tab> = [{ title: 'General' }, { title: 'Attachments' }]
-  export let selected: IntlString = 'General'
 </script>
 
 <div class="flex-stretch container">
-  {#each tabs as tab}
+  {#each model as tab, i}
-    <div class="flex-row-center tab" class:selected={tab.title === selected}
+    <div class="flex-row-center tab" class:selected={i === selected}
-         on:click={() => { selected = tab.title }}>
+         on:click={() => { selected = i }}>
-      <Label label={tab.title}/>
+      <Label label={model[i].label}/>
     </div>
   {/each}
   <div class="grow"/>
 </div>
+{#each model as tab, i}
+  {#if selected === i}
+    <Component is = {model[i].component} props={model[i].props}/>
+  {/if}
+{/each}
 
 <style lang="scss">
   .container {

packages/ui/src/types.ts

@@ -27,7 +27,6 @@ export interface Location {
 }
 
 export type AnySvelteComponent = typeof SvelteComponent
-
 export type Component<C extends AnySvelteComponent> = Resource<C>
 export type AnyComponent = Resource<AnySvelteComponent>
 
@@ -45,3 +44,12 @@ export interface IPopupItem {
   selected?: boolean
   action?: Function
 }
+
+export interface Tab {
+  label: IntlString
+  icon?: Asset
+  component: AnyComponent
+  props: any
+}
+
+export type TabModel = Tab[]

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

@@ -0,0 +1,49 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 { TextArea, EditBox, Dialog, Tabs, Section, Grid, IconComments } from '@anticrm/ui'
+import { AttributeEditor, getClient, CommentViewer } from '@anticrm/presentation'
+import type { Candidate } from '@anticrm/recruit'
+
+import File from './icons/File.svelte'
+import Address from './icons/Address.svelte'
+
+
+import contact from '@anticrm/contact'
+
+export let object: Candidate
+export let newValue: Candidate
+
+</script>
+
+<Section icon={File} label={'Personal Information'}>
+  <Grid>
+    <AttributeEditor _class={contact.class.Person} key={'firstName'} {newValue} oldValue={object} focus/>
+    <AttributeEditor _class={contact.class.Person} key={'lastName'} {newValue} oldValue={object}/>
+    <AttributeEditor _class={contact.class.Person} key={'email'} {newValue} oldValue={object}/>
+    <AttributeEditor _class={contact.class.Person} key={'phone'} {newValue} oldValue={object}/>
+  </Grid>
+</Section>
+<Section icon={Address} label={'Address'}>
+  <Grid>
+    <EditBox label={'Street'} placeholder={'Broderick st'} />
+    <EditBox label={'City *'} placeholder={'Los Angeles'} bind:value={newValue.city}/>
+    <EditBox label={'ZIP / Postal code'} placeholder={'26892'} />
+    <EditBox label={'Country'} placeholder={'United States'} />
+  </Grid>
+</Section>

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

@@ -23,7 +23,6 @@
   import type { Backlink } from '@anticrm/chunter'
   import { Backlink as BacklinkComponent } from '@anticrm/presentation'
   import DialogHeader from './DialogHeader.svelte'
-  import File from './icons/File.svelte'
   import Address from './icons/Address.svelte'
   import Attachment from './icons/Attachment.svelte'
 
@@ -31,12 +30,9 @@
 
   import recruit from '../plugin'
   import chunter from '@anticrm/chunter'
-  import contact from '@anticrm/contact'
 
   export let object: Candidate
 
-  let newValue = Object.assign({}, object)
-
   const dispatch = createEventDispatcher()
 
   let backlinks: Backlink[]
@@ -45,6 +41,8 @@
   const query = createQuery()
   $: query.query(chunter.class.Backlink, { objectId: object._id }, result => { backlinks = result })
 
+  const newValue = Object.assign({}, object)
+
   async function save() {
     const attributes: Record<string, any> = {}
     for (const key in object) {
@@ -54,6 +52,26 @@
     }
     await client.updateDoc(recruit.class.Candidate, object.space, object._id, attributes)
   }
+
+  const tabModel = [
+    {
+      label: 'General',
+      component: 'recruit:component:CandidateGeneral',
+      props: {
+        object,
+        newValue,
+      }
+    },
+    {
+      label: 'Activity',
+      component: 'recruit:component:CandidateGeneral',
+      props: {
+        object,
+        newValue,
+      }
+    }
+  ]
+
 </script>
 
 <Dialog label={recruit.string.CreateCandidate} 
@@ -61,23 +79,7 @@
         okAction={save}
         on:close={() => { dispatch('close') }}>
   <DialogHeader />
-  <Tabs/>
+  <Tabs model={tabModel}/>
-  <Section icon={File} label={'Personal Information'}>
-    <Grid>
-      <AttributeEditor _class={contact.class.Person} key={'firstName'} {newValue} oldValue={object} focus/>
-      <AttributeEditor _class={contact.class.Person} key={'lastName'} {newValue} oldValue={object}/>
-      <AttributeEditor _class={contact.class.Person} key={'email'} {newValue} oldValue={object}/>
-      <AttributeEditor _class={contact.class.Person} key={'phone'} {newValue} oldValue={object}/>
-    </Grid>
-  </Section>
-  <Section icon={Address} label={'Address'}>
-    <Grid>
-      <EditBox label={'Street'} placeholder={'Broderick st'} />
-      <EditBox label={'City *'} placeholder={'Los Angeles'} bind:value={newValue.city}/>
-      <EditBox label={'ZIP / Postal code'} placeholder={'26892'} />
-      <EditBox label={'Country'} placeholder={'United States'} />
-    </Grid>
-  </Section>
   <Section icon={IconComments} label={'Comments'}>
     <CommentViewer />
     <div class="reference"><ReferenceInput /></div>

plugins/recruit-resources/src/index.ts

@@ -18,6 +18,7 @@ import CreateCandidates from './components/CreateCandidates.svelte'
 import CreateCandidate from './components/CreateCandidate.svelte'
 import CreateApplication from './components/CreateApplication.svelte'
 import EditCandidate from './components/EditCandidate.svelte'
+import CandidateGeneral from './components/CandidateGeneral.svelte'
 
 export default async () => ({
   component: {
@@ -25,6 +26,7 @@ export default async () => ({
     CreateCandidates,
     CreateCandidate,
     CreateApplication,
-    EditCandidate
+    EditCandidate,
+    CandidateGeneral
   },
 })

plugins/recruit-resources/src/plugin.ts

@@ -16,6 +16,7 @@
 import { mergeIds } from '@anticrm/platform'
 import type { IntlString } from '@anticrm/platform' 
 import type { Ref, Class } from '@anticrm/core'
+import type { AnyComponent } from '@anticrm/ui'
 import type { Applicant, Candidate, Candidates, Vacancy } from '@anticrm/recruit'
 import recruit, { recruitId } from '@anticrm/recruit'