prepare for Kanban implementation

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

models/recruit/src/index.ts

@@ -124,6 +124,20 @@ export function createModel (builder: Builder): void {
     } as FindOptions<Doc>, // TODO: fix
     config: ['$lookup.candidate', '$lookup.state', '$lookup.candidate.city', '$lookup.candidate.channels']
   })
+
+  builder.createDoc(view.class.Viewlet, core.space.Model, {
+    attachTo: recruit.class.Applicant,
+    descriptor: view.viewlet.Kanban,
+    open: recruit.component.EditCandidate,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    options: {
+      lookup: {
+        candidate: recruit.class.Candidate,
+        state: core.class.State
+      }
+    } as FindOptions<Doc>, // TODO: fix
+    config: ['$lookup.candidate', '$lookup.state', '$lookup.candidate.city', '$lookup.candidate.channels']
+  })
 }
 
 export { default } from './plugin'

models/view/src/index.ts

@@ -67,6 +67,12 @@ export function createModel (builder: Builder): void {
     icon: view.icon.Table,
     component: view.component.TableView
   }, view.viewlet.Table)
+
+  builder.createDoc(view.class.ViewletDescriptor, core.space.Model, {
+    label: 'Kanban' as IntlString,
+    icon: view.icon.Kanban,
+    component: view.component.KanbanView
+  }, view.viewlet.Kanban)
 }
 
 export default view

models/view/src/plugin.ts

@@ -23,6 +23,7 @@ export default mergeIds(viewId, view, {
     StringPresenter: '' as AnyComponent,
     StatePresenter: '' as AnyComponent,
 
-    TableView: '' as AnyComponent
+    TableView: '' as AnyComponent,
+    KanbanView: '' as AnyComponent
   }
 })

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

@@ -18,7 +18,7 @@
   import type { Ref, Space } from '@anticrm/core'
   import { DatePicker, EditBox, Card, Tabs, Section, Grid, Row, Button } from '@anticrm/ui'
   import { UserBox, UserInfo, Avatar } from '@anticrm/presentation'
-  import type { Person } from '@anticrm/contact'
+  import type { Employee, Person } from '@anticrm/contact'
   import File from './icons/File.svelte'
   import Address from './icons/Address.svelte'
   import Attachment from './icons/Attachment.svelte'
@@ -27,12 +27,14 @@
 
   import core from '@anticrm/core'
   import recruit from '../plugin'
+  import contact from '@anticrm/contact'
 
   export let space: Ref<Space>
 
   const dispatch = createEventDispatcher()
 
   let candidate: Ref<Person>
+  let employee: Ref<Employee>
 
   const client = getClient()
 
@@ -53,6 +55,6 @@
       on:close={() => { dispatch('close') }}>
   <Grid column={1} rowGap={1.75}>
     <UserBox _class={recruit.class.Candidate} title='Candidate' caption='Candidates' bind:value={candidate} />
-    <UserBox _class={recruit.class.Candidate} title='Assigned recruiter' caption='Recruiters' bind:value={candidate} />
+    <UserBox _class={contact.class.Employee} title='Assigned recruiter' caption='Recruiters' bind:value={employee} />
   </Grid>
 </Card>

plugins/view-assets/assets/icons.svg

@@ -12,4 +12,30 @@
       <rect x="13.1" y="13.1" width="2.9" height="2.9" />
     </g>
   </symbol>
+  <symbol id="kanban" viewBox="0 0 16 16">
+    <g>
+      <rect width="2.9" height="2.9" />
+      <rect x="6.6" width="2.9" height="2.9" />
+      <rect x="13.1" width="2.9" height="2.9" />
+      <rect y="6.6" width="2.9" height="2.9" />
+      <rect x="6.6" y="6.6" width="2.9" height="2.9" />
+      <rect x="13.1" y="6.6" width="2.9" height="2.9" />
+      <rect y="13.1" width="2.9" height="2.9" />
+      <rect x="6.6" y="13.1" width="2.9" height="2.9" />
+      <rect x="13.1" y="13.1" width="2.9" height="2.9" />
+    </g>
+  </symbol>
+  <symbol id="card" viewBox="0 0 16 16">
+    <g>
+      <rect width="2.9" height="2.9" />
+      <rect x="6.6" width="2.9" height="2.9" />
+      <rect x="13.1" width="2.9" height="2.9" />
+      <rect y="6.6" width="2.9" height="2.9" />
+      <rect x="6.6" y="6.6" width="2.9" height="2.9" />
+      <rect x="13.1" y="6.6" width="2.9" height="2.9" />
+      <rect y="13.1" width="2.9" height="2.9" />
+      <rect x="6.6" y="13.1" width="2.9" height="2.9" />
+      <rect x="13.1" y="13.1" width="2.9" height="2.9" />
+    </g>
+  </symbol>
 </svg>

plugins/view-assets/src/index.ts

@@ -19,4 +19,5 @@ import view from '@anticrm/view'
 const icons = require('../assets/icons.svg')
 loadMetadata(view.icon, {
   Table: `${icons}#table`,
+  Kanban: `${icons}#kanban`
 })

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

@@ -0,0 +1,128 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import type { Ref, Class, Doc, Space, FindOptions } from '@anticrm/core'
+  import { buildModel } from '../utils'
+  import { getClient } from '@anticrm/presentation'
+  import { Label, showPopup, Loading, ScrollBox } from '@anticrm/ui'
+  import type { AnyComponent } from '@anticrm/ui'
+
+  import { createQuery } from '@anticrm/presentation'
+
+  export let _class: Ref<Class<Doc>>
+  export let space: Ref<Space>
+  export let open: AnyComponent
+  export let options: FindOptions<Doc> | undefined
+  export let config: string[]
+
+  let objects: Doc[]
+
+  const query = createQuery()
+  $: query.query(_class, { space }, result => { objects = result }, options)
+
+  function getValue(doc: Doc, key: string): any {
+    if (key.length === 0)
+      return doc
+    const path = key.split('.')
+    const len = path.length
+    let obj = doc as any
+    for (let i=0; i<len; i++){
+      obj = obj?.[path[i]]
+    }
+    return obj
+  }
+
+  const client = getClient()
+
+  function onClick(object: Doc) {
+    showPopup(open, { object, space }, 'float')
+  }
+</script>
+
+{#await buildModel(client, _class, config, options)}
+ <Loading/>
+{:then model}
+<div class="container">
+  <ScrollBox vertical stretch noShift>
+    <table class="table-body">
+      <thead>
+        <tr class="tr-head">
+          {#each model as attribute}
+            <th><Label label = {attribute.label}/></th>
+          {/each}
+        </tr>
+      </thead>
+      {#if objects}
+        <tbody>
+          {#each objects as object (object._id)}
+            <tr class="tr-body" on:click={() => onClick(object)}>
+            {#each model as attribute}
+              <td><svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/></td>
+            {/each}
+            </tr>
+          {/each}
+        </tbody>
+      {/if}
+    </table>
+  </ScrollBox>
+</div>
+{/await}
+
+<style lang="scss">
+  .container {
+    flex-grow: 1;
+    position: relative;
+    padding-bottom: 2.5rem;
+    height: 100%;
+
+    &::before {
+      position: absolute;
+      content: '';
+      top: 2.5rem;
+      bottom: 0;
+      width: 100%;
+      background-color: var(--theme-table-bg-color);
+      border-radius: 0 0 1.25rem 1.25rem;
+    }
+  }
+
+  th, td {
+    padding: .5rem 1.5rem;
+    text-align: left;
+    &:first-child { padding-left: 2.5rem; }
+  }
+
+  th {
+    position: sticky;
+    top: 0;
+    height: 2.5rem;
+    font-weight: 500;
+    font-size: .75rem;
+    color: var(--theme-content-dark-color);
+    background-color: var(--theme-bg-color);
+    box-shadow: inset 0 -1px 0 0 var(--theme-bg-focused-color);
+  }
+
+  .tr-body {
+    height: 3.75rem;
+    color: var(--theme-caption-color);
+    border-bottom: 1px solid var(--theme-button-border-hovered);
+    &:last-child { border-bottom: none; }
+    &:hover { background-color: var(--theme-table-bg-hover); }
+  }
+</style>

plugins/view/src/index.ts

@@ -67,9 +67,11 @@ export default plugin(viewId, {
     Viewlet: '' as Ref<Class<Viewlet>>
   },
   viewlet: {
-    Table: '' as Ref<ViewletDescriptor>
+    Table: '' as Ref<ViewletDescriptor>,
+    Kanban: '' as Ref<ViewletDescriptor>
   },
   icon: {
-    Table: '' as Asset
+    Table: '' as Asset,
+    Kanban: '' as Asset
   }
 })