Hr ui fix (#2112)

Signed-off-by: Denis Bykhov <[email protected]>

models/hr/package.json

@@ -34,6 +34,8 @@
     "@anticrm/model-view": "~0.6.0",
     "@anticrm/model-workbench": "~0.6.1",
     "@anticrm/model-contact": "~0.6.1",
+    "@anticrm/model-chunter": "~0.6.0",
+    "@anticrm/model-attachment": "~0.6.0",
     "@anticrm/hr": "~0.6.0",
     "@anticrm/hr-resources": "~0.6.0",
     "@anticrm/view": "~0.6.0"

models/hr/src/index.ts

@@ -14,14 +14,16 @@
 //
 
 import { Employee } from '@anticrm/contact'
-import contact, { TEmployee } from '@anticrm/model-contact'
-import { IndexKind, Ref } from '@anticrm/core'
-import type { Department, Staff } from '@anticrm/hr'
-import { Builder, Index, Mixin, Model, Prop, TypeRef, TypeString, UX } from '@anticrm/model'
+import contact, { TEmployee, TEmployeeAccount } from '@anticrm/model-contact'
+import { Arr, IndexKind, Ref } from '@anticrm/core'
+import type { Department, DepartmentMember, Staff } from '@anticrm/hr'
+import { Builder, Index, Mixin, Model, Prop, TypeRef, Collection, TypeString, UX, ArrOf } from '@anticrm/model'
 import core, { TSpace } from '@anticrm/model-core'
 import workbench from '@anticrm/model-workbench'
 import hr from './plugin'
 import view, { createAction } from '@anticrm/model-view'
+import attachment from '@anticrm/model-attachment'
+import chunter from '@anticrm/model-chunter'
 
 @Model(hr.class.Department, core.class.Space)
 @UX(hr.string.Department, hr.icon.Department)
@@ -33,12 +35,28 @@ export class TDepartment extends TSpace implements Department {
   @Index(IndexKind.FullText)
   name!: string
 
+  @Prop(Collection(contact.class.Channel), contact.string.ContactInfo)
+  channels?: number
+
+  @Prop(Collection(attachment.class.Attachment), attachment.string.Attachments, undefined, attachment.string.Files)
+  attachments?: number
+
+  @Prop(Collection(chunter.class.Comment), chunter.string.Comments)
+  comments?: number
+
   avatar?: string | null
 
   @Prop(TypeRef(contact.class.Employee), hr.string.TeamLead)
   teamLead!: Ref<Employee> | null
+
+  @Prop(ArrOf(TypeRef(hr.class.DepartmentMember)), contact.string.Members)
+  declare members: Arr<Ref<DepartmentMember>>
 }
 
+@Model(hr.class.DepartmentMember, contact.class.EmployeeAccount)
+@UX(contact.string.Employee, hr.icon.HR)
+export class TDepartmentMember extends TEmployeeAccount implements DepartmentMember {}
+
 @Mixin(hr.mixin.Staff, contact.class.Employee)
 @UX(contact.string.Employee, hr.icon.HR)
 export class TStaff extends TEmployee implements Staff {
@@ -47,7 +65,7 @@ export class TStaff extends TEmployee implements Staff {
 }
 
 export function createModel (builder: Builder): void {
-  builder.createModel(TDepartment, TStaff)
+  builder.createModel(TDepartment, TDepartmentMember, TStaff)
 
   builder.createDoc(
     workbench.class.Application,
@@ -76,6 +94,14 @@ export function createModel (builder: Builder): void {
     inlineEditor: hr.component.DepartmentEditor
   })
 
+  builder.mixin(hr.class.Department, core.class.Class, view.mixin.ObjectEditor, {
+    editor: hr.component.EditDepartment
+  })
+
+  builder.mixin(hr.class.DepartmentMember, core.class.Class, view.mixin.ArrayEditor, {
+    editor: hr.component.DepartmentStaff
+  })
+
   createAction(
     builder,
     {

models/view/src/index.ts

@@ -118,7 +118,8 @@ export class TCollectionEditor extends TClass implements CollectionEditor {
 
 @Mixin(view.mixin.ArrayEditor, core.class.Class)
 export class TArrayEditor extends TClass implements ArrayEditor {
-  inlineEditor!: AnyComponent
+  inlineEditor?: AnyComponent
+  editor?: AnyComponent
 }
 
 @Mixin(view.mixin.AttributePresenter, core.class.Class)

packages/presentation/src/components/AttributeBarEditor.svelte

@@ -55,6 +55,9 @@
 
     const typeClass = hierarchy.getClass(presenterClass.attrClass)
     const editorMixin = hierarchy.as(typeClass, mixinRef)
+    if (category === 'array' && editorMixin.inlineEditor === undefined) {
+      return
+    }
     editor = getResource(editorMixin.inlineEditor).catch((cause) => {
       console.error(`failed to find editor for ${_class} ${attribute} ${presenterClass.attrClass} cause: ${cause}`)
     })

plugins/hr-resources/package.json

@@ -38,6 +38,7 @@
     "@anticrm/core": "~0.6.16",
     "@anticrm/panel": "~0.6.0",
     "@anticrm/contact": "~0.6.5",
+    "@anticrm/view": "~0.6.0",
     "@anticrm/view-resources": "~0.6.0",
     "@anticrm/contact-resources": "~0.6.0",
     "@anticrm/setting": "~0.6.1",

plugins/hr-resources/src/components/DepartmentCard.svelte

@@ -19,25 +19,19 @@
   import CreateDepartment from './CreateDepartment.svelte'
   import DepartmentCard from './DepartmentCard.svelte'
   import hr from '../plugin'
-  import { IconAdd, IconMoreV, Button, eventToHTMLElement, Label, showPopup, ActionIcon } from '@anticrm/ui'
+  import { IconAdd, IconMoreV, Button, eventToHTMLElement, Label, showPopup, ActionIcon, showPanel } from '@anticrm/ui'
   import contact, { Employee } from '@anticrm/contact'
   import { EmployeePresenter } from '@anticrm/contact-resources'
-  import DepartmentStaff from './DepartmentStaff.svelte'
   import { Menu } from '@anticrm/view-resources'
+  import view from '@anticrm/view'
 
   export let value: WithLookup<Department>
   export let descendants: Map<Ref<Department>, WithLookup<Department>[]>
 
   $: currentDescendants = descendants.get(value._id) ?? []
-  let expand = false
 
   const client = getClient()
 
-  function toggle () {
-    if (currentDescendants.length === 0) return
-    expand = !expand
-  }
-
   async function changeLead (result: Employee | null | undefined): Promise<void> {
     if (result === undefined) {
       return
@@ -50,6 +44,8 @@
   }
 
   function openLeadEditor (event: MouseEvent) {
+    event?.preventDefault()
+    event?.stopPropagation()
     showPopup(
       UsersPopup,
       {
@@ -64,13 +60,7 @@
   }
 
   function createChild (e: MouseEvent) {
-    showPopup(CreateDepartment, { space: value._id }, eventToHTMLElement(e), (res) => {
-      if (res && !expand) expand = true
-    })
-  }
-
-  function editMembers (e: MouseEvent) {
-    showPopup(DepartmentStaff, { _id: value._id }, 'float')
+    showPopup(CreateDepartment, { space: value._id }, eventToHTMLElement(e))
   }
 
   function showMenu (e: MouseEvent) {
@@ -82,29 +72,30 @@
       }
     )
   }
+
+  function edit (e: MouseEvent): void {
+    showPanel(view.component.EditDoc, value._id, value._class, 'content')
+  }
 </script>
 
 <div class="flex-center w-full px-4">
   <div
     class="w-full mt-2 mb-2 container flex"
     class:cursor-pointer={currentDescendants.length}
-    on:click|stopPropagation={toggle}
+    on:click|stopPropagation={edit}
     on:contextmenu|preventDefault={showMenu}
   >
-    {#if currentDescendants.length}
-      <div class="verticalDivider" />
-      <div class="verticalDivider" />
-    {/if}
     <div class="flex-between pt-4 pb-4 pr-4 pl-2 w-full">
       <div class="flex-center">
+        <div class="mr-2">
+          <Button icon={IconAdd} on:click={createChild} />
+        </div>
         <Avatar size={'medium'} avatar={value.avatar} icon={hr.icon.Department} />
         <div class="flex-row ml-2">
           <div class="fs-title">
             {value.name}
           </div>
-          <div class="cursor-pointer" on:click|stopPropagation={editMembers}>
-            <Label label={hr.string.MemberCount} params={{ count: value.members.length }} />
-          </div>
+          <Label label={hr.string.MemberCount} params={{ count: value.members.length }} />
         </div>
       </div>
       <div class="flex-center mr-2">
@@ -122,19 +113,16 @@
             onEmployeeEdit={openLeadEditor}
           />
         </div>
-        <Button icon={IconAdd} on:click={createChild} />
         <ActionIcon icon={IconMoreV} size={'medium'} action={showMenu} />
       </div>
     </div>
   </div>
 </div>
-{#if expand && currentDescendants.length}
-  <div class="ml-8">
-    {#each descendants.get(value._id) ?? [] as nested}
-      <DepartmentCard value={nested} {descendants} />
-    {/each}
-  </div>
-{/if}
+<div class="ml-8">
+  {#each currentDescendants as nested}
+    <DepartmentCard value={nested} {descendants} />
+  {/each}
+</div>
 
 <style lang="scss">
   .container {

plugins/hr-resources/src/components/DepartmentEditor.svelte

@@ -21,7 +21,7 @@
   import hr from '../plugin'
 
   export let value: Ref<Department> | undefined
-  export let label: IntlString = hr.string.Department
+  export let label: IntlString = hr.string.ParentDepartmentLabel
   export let onChange: (value: any) => void
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
@@ -31,7 +31,7 @@
 
 <SpaceSelector
   _class={hr.class.Department}
-  label={hr.string.ParentDepartmentLabel}
+  {label}
   {size}
   {kind}
   {justify}