Show User box groupping (#2095)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

models/lead/src/plugin.ts

@@ -36,7 +36,6 @@ export default mergeIds(leadId, lead, {
     GotoLeadApplication: '' as IntlString
   },
   component: {
-    CreateFunnel: '' as AnyComponent,
     CreateLead: '' as AnyComponent,
     EditLead: '' as AnyComponent,
     KanbanCard: '' as AnyComponent,

packages/presentation/src/components/ObjectPopup.svelte

@@ -48,6 +48,8 @@
 
   export let searchField: string = 'name'
 
+  export let groupBy = '_class'
+
   export let create:
     | {
         component: AnyComponent
@@ -71,11 +73,19 @@
       _id: { $nin: ignoreObjects }
     },
     (result) => {
+      result.sort((a, b) => {
+        const aval: string = `${(a as any)[groupBy]}`
+        const bval: string = `${(b as any)[groupBy]}`
+        return aval.localeCompare(bval)
+      })
       objects = result
     },
     { ...(options ?? {}), limit: 200 }
   )
 
+  $: showCategories =
+    objects.map((it) => (it as any)[groupBy]).filter((it, index, arr) => arr.indexOf(it) === index).length > 1
+
   const checkSelected = (person: Doc, objects: Doc[]): void => {
     if (selectedElements.has(person._id)) {
       selectedElements.delete(person._id)
@@ -143,6 +153,9 @@
       }
     })
   }
+  function toAny (obj: any): any {
+    return obj
+  }
 </script>
 
 <FocusHandler {manager} />
@@ -162,6 +175,17 @@
   <div class="scroll">
     <div class="box">
       <ListView bind:this={list} count={objects.length} bind:selection>
+        <svelte:fragment slot="category" let:item>
+          {#if showCategories}
+            {@const obj = toAny(objects[item])}
+            {#if item === 0 || (item > 0 && toAny(objects[item - 1])[groupBy] !== obj[groupBy])}
+              <!--Category for first item-->
+              <div class="category-box">
+                <slot name="category" item={obj} />
+              </div>
+            {/if}
+          {/if}
+        </svelte:fragment>
         <svelte:fragment slot="item" let:item>
           {@const obj = objects[item]}
           <button

packages/presentation/src/components/UsersPopup.svelte

@@ -16,8 +16,9 @@
   import { Contact, getFirstName, Person } from '@anticrm/contact'
   import type { Class, Doc, FindOptions, Ref } from '@anticrm/core'
   import type { Asset, IntlString } from '@anticrm/platform'
-  import { AnyComponent, AnySvelteComponent } from '@anticrm/ui'
+  import { AnyComponent, AnySvelteComponent, Icon, Label } from '@anticrm/ui'
   import presentation from '..'
+  import { getClient } from '../utils'
   import ObjectPopup from './ObjectPopup.svelte'
   import UserInfo from './UserInfo.svelte'
 
@@ -34,6 +35,7 @@
   export let shadows: boolean = true
   export let icon: Asset | AnySvelteComponent | undefined = undefined
 
+  const hierarchy = getClient().getHierarchy()
   export let create:
     | {
         component: AnyComponent
@@ -61,6 +63,7 @@
   {allowDeselect}
   {titleDeselect}
   {placeholder}
+  groupBy={'_class'}
   bind:selectedObjects={selectedUsers}
   bind:ignoreObjects={ignoreUsers}
   {shadows}
@@ -73,4 +76,16 @@
       <UserInfo size={'x-small'} value={person} {icon} />
     </div>
   </svelte:fragment>
+
+  <svelte:fragment slot="category" let:item={person}>
+    {@const cl = hierarchy.getClass(person._class)}
+    <div class="flex flex-grow overflow-label">
+      <span class="fs-medium flex-center gap-2 mt-2 mb-2 ml-2">
+        {#if cl.icon}
+          <Icon icon={cl.icon} size={'small'} />
+        {/if}
+        <Label label={cl.label} />
+      </span>
+    </div>
+  </svelte:fragment>
 </ObjectPopup>

plugins/lead-resources/src/components/CreateCustomer.svelte

@@ -174,7 +174,7 @@
   }}
   bind:createMore
 >
-  <svelte:fragment slot="space">
+  <svelte:fragment slot="header">
     <Button
       icon={targetClass.icon}
       label={targetClass.label}

plugins/lead-resources/src/components/CreateLead.svelte

@@ -97,7 +97,15 @@
   }}
 >
   <svelte:fragment slot="header">
-    <SpaceSelector _class={lead.class.Funnel} label={lead.string.FunnelName} bind:space={_space} />
+    <SpaceSelector
+      _class={lead.class.Funnel}
+      label={lead.string.FunnelName}
+      bind:space={_space}
+      create={{
+        component: lead.component.CreateFunnel,
+        label: lead.string.CreateFunnel
+      }}
+    />
   </svelte:fragment>
   <StatusControl slot="error" {status} />
   <EditBox
@@ -116,6 +124,7 @@
       bind:value={customer}
       kind={'no-border'}
       size={'small'}
+      create={{ component: lead.component.CreateCustomer, label: lead.string.CreateCustomer }}
     />
   </svelte:fragment>
 </Card>

plugins/lead-resources/src/plugin.ts

@@ -40,6 +40,7 @@ export default mergeIds(leadId, lead, {
   },
   component: {
     CreateCustomer: '' as AnyComponent,
-    LeadsPresenter: '' as AnyComponent
+    LeadsPresenter: '' as AnyComponent,
+    CreateFunnel: '' as AnyComponent
   }
 })

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

@@ -422,7 +422,7 @@
   }}
   bind:createMore
 >
-  <svelte:fragment slot="space">
+  <svelte:fragment slot="header">
     <Button
       icon={contact.icon.Person}
       label={contact.string.Person}

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -16,7 +16,7 @@
   import { AttachmentStyledBox } from '@anticrm/attachment-resources'
   import { Employee } from '@anticrm/contact'
   import core, { AttachedData, generateId, Ref, SortingOrder, WithLookup } from '@anticrm/core'
-  import presentation, { Card, createQuery, getClient, SpaceSelector } from '@anticrm/presentation'
+  import { Card, createQuery, getClient, SpaceSelector } from '@anticrm/presentation'
   import { calcRank, Issue, IssuePriority, IssueStatus, Project, Team } from '@anticrm/tracker'
   import {
     ActionIcon,
@@ -33,11 +33,11 @@
   import tracker from '../plugin'
   import AssigneeEditor from './issues/AssigneeEditor.svelte'
   import ParentIssue from './issues/ParentIssue.svelte'
-  import SetParentIssueActionPopup from './SetParentIssueActionPopup.svelte'
+  import PriorityEditor from './issues/PriorityEditor.svelte'
+  import StatusEditor from './issues/StatusEditor.svelte'
   import ProjectSelector from './ProjectSelector.svelte'
   import SetDueDateActionPopup from './SetDueDateActionPopup.svelte'
-  import StatusEditor from './issues/StatusEditor.svelte'
-  import PriorityEditor from './issues/PriorityEditor.svelte'
+  import SetParentIssueActionPopup from './SetParentIssueActionPopup.svelte'
 
   export let space: Ref<Team>
   export let status: Ref<IssueStatus> | undefined = undefined
@@ -215,16 +215,14 @@
 >
   <svelte:fragment slot="header">
     <SpaceSelector _class={tracker.class.Team} label={tracker.string.Team} bind:space={_space} />
-  </svelte:fragment>
-  <svelte:fragment slot="space">
-    <Button
+    <!-- <Button
       icon={tracker.icon.Home}
       label={presentation.string.Save}
       size={'small'}
       kind={'no-border'}
       disabled
       on:click={() => {}}
-    />
+    /> -->
   </svelte:fragment>
   {#if parentIssue}
     <ParentIssue issue={parentIssue} on:close={clearParentIssue} />