vacancy application table (#2801)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

models/recruit/src/index.ts

@@ -393,6 +393,17 @@ export function createModel (builder: Builder): void {
     recruit.viewlet.TableCandidate
   )
 
+  builder.createDoc(
+    view.class.Viewlet,
+    core.space.Model,
+    {
+      attachTo: recruit.class.Applicant,
+      descriptor: view.viewlet.Table,
+      config: ['', 'attachedTo', 'state', 'doneState', 'modifiedOn']
+    },
+    recruit.viewlet.VacancyApplicationsShort
+  )
+
   builder.createDoc(
     view.class.Viewlet,
     core.space.Model,

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

@@ -16,9 +16,19 @@
   import type { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { recruitId, Vacancy } from '@hcengineering/recruit'
-  import { Button, Icon, IconAdd, Label, NavLink, resizeObserver, Scroller, showPopup } from '@hcengineering/ui'
+  import {
-  import { BuildModelKey } from '@hcengineering/view'
+    Button,
-  import { Table } from '@hcengineering/view-resources'
+    Icon,
+    IconAdd,
+    Label,
+    Loading,
+    NavLink,
+    resizeObserver,
+    Scroller,
+    showPopup
+  } from '@hcengineering/ui'
+  import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
+  import { getViewOptions, Table, ViewletSettingButton, viewOptionStore } from '@hcengineering/view-resources'
   import recruit from '../plugin'
   import CreateApplication from './CreateApplication.svelte'
   import IconApplication from './icons/Application.svelte'
@@ -35,17 +45,36 @@
   const createApp = (ev: MouseEvent): void => {
     showPopup(CreateApplication, { space: objectId, preserveVacancy: true }, ev.target as HTMLElement)
   }
-  const config: (BuildModelKey | string)[] = [
-    '',
-    '$lookup.space.name',
-    '$lookup.space.$lookup.company',
-    'state',
-    'doneState'
-  ]
   let wSection: number
+
+  let viewlet: Viewlet | undefined
+  let preference: ViewletPreference | undefined
+  let loading = true
+
+  const viewletQuery = createQuery()
+  $: viewletQuery.query(view.class.Viewlet, { _id: recruit.viewlet.VacancyApplicationsShort }, (res) => {
+    ;[viewlet] = res
+  })
+
+  $: viewOptions = viewlet !== undefined ? getViewOptions(viewlet, $viewOptionStore) : undefined
+
+  const preferenceQuery = createQuery()
+
+  $: viewlet &&
+    preferenceQuery.query(
+      view.class.ViewletPreference,
+      {
+        attachedTo: viewlet._id
+      },
+      (res) => {
+        preference = res[0]
+        loading = false
+      },
+      { limit: 1 }
+    )
 </script>
 
-<div class="antiSection max-h-125" use:resizeObserver={(element) => (wSection = element.clientWidth)}>
+<div class="antiSection max-h-125 clear-mins" use:resizeObserver={(element) => (wSection = element.clientWidth)}>
   <div class="antiSection-header">
     <div class="antiSection-header__icon">
       <Icon icon={IconApplication} size={'small'} />
@@ -55,17 +84,24 @@
         <Label label={recruit.string.Applications} />
       </NavLink>
     </span>
+    {#if viewlet && viewOptions}
+      <ViewletSettingButton bind:viewOptions {viewlet} kind={'transparent'} />
+    {/if}
     <Button id="appls.add" icon={IconAdd} kind={'transparent'} shape={'circle'} on:click={createApp} />
   </div>
   {#if applications > 0}
-    <Scroller horizontal={wSection < 640}>
+    {#if viewlet && !loading}
+      <Scroller horizontal>
         <Table
           _class={recruit.class.Applicant}
-        {config}
+          config={preference?.config ?? viewlet.config}
           query={{ space: objectId }}
           loadingProps={{ length: applications }}
         />
       </Scroller>
+    {:else}
+      <Loading />
+    {/if}
   {:else}
     <div class="antiSection-empty solid flex-col-center mt-3">
       <div class="caption-color">

plugins/recruit-resources/src/plugin.ts

@@ -20,9 +20,12 @@ import { ObjectSearchCategory, ObjectSearchFactory } from '@hcengineering/presen
 import recruit, { recruitId } from '@hcengineering/recruit'
 import { TagCategory } from '@hcengineering/tags'
 import { AnyComponent } from '@hcengineering/ui'
-import { FilterFunction, FilterMode } from '@hcengineering/view'
+import { FilterFunction, FilterMode, Viewlet } from '@hcengineering/view'
 
 export default mergeIds(recruitId, recruit, {
+  viewlet: {
+    VacancyApplicationsShort: '' as Ref<Viewlet>
+  },
   status: {
     ApplicationExists: '' as StatusCode,
     TalentRequired: '' as StatusCode,