UBER-267: Fix created selection (#3269)

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

packages/presentation/lang/en.json

@@ -26,6 +26,7 @@
     "Edit": "Edit",
     "DocumentPreview": "Preview",
     "MakePrivate": "Make private",
-    "MakePrivateDescription": "Only members can see it"
+    "MakePrivateDescription": "Only members can see it",
+    "Created": "Created"
   }
 }

packages/presentation/lang/ru.json

@@ -26,6 +26,7 @@
     "Edit": "Редактировать",    
     "DocumentPreview": "Предпросмотр",
     "MakePrivate": "Сделать личным",
-    "MakePrivateDescription": "Только пользователи могут видеть это"
+    "MakePrivateDescription": "Только пользователи могут видеть это",
+    "Created": "Созданные"
   }
 }

packages/presentation/src/components/DocPopup.svelte

@@ -24,12 +24,12 @@
     IconCheck,
     IconSearch,
     ListView,
+    closeTooltip,
     createFocusManager,
     deviceOptionsStore,
     resizeObserver,
     showPopup,
-    tooltip,
-    closeTooltip
+    tooltip
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
@@ -58,6 +58,7 @@
   export let create: ObjectCreate | undefined = undefined
   export let readonly = false
   export let disallowDeselect: Ref<Doc>[] | undefined = undefined
+  export let created: Doc[] = []
 
   let search: string = ''
 
@@ -66,6 +67,7 @@
   const dispatch = createEventDispatcher()
 
   $: showCategories =
+    created.length > 0 ||
     objects.map((it) => (it as any)[groupBy]).filter((it, index, arr) => arr.indexOf(it) === index).length > 1
 
   const checkSelected = (item: Doc): void => {
@@ -130,6 +132,7 @@
         const newPerson = await client.findOne(_class, { _id: res })
         if (newPerson !== undefined) {
           search = c.update?.(newPerson) ?? ''
+          dispatch('created', newPerson)
           dispatch('search', search)
         }
       }
@@ -177,6 +180,13 @@
   $: updateLocation(scrollDiv, selectedDiv, objects, selected)
 
   const forbiddenDeselectItemIds = new Set(disallowDeselect)
+
+  function getGroup (doc: Doc, groupBy: any): any {
+    if (created.find((it) => it._id === doc._id) !== undefined) {
+      return '_created'
+    }
+    return toAny(doc)[groupBy]
+  }
 </script>
 
 <FocusHandler {manager} />
@@ -225,7 +235,7 @@
         <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])}
+            {#if item === 0 || (item > 0 && getGroup(objects[item - 1], groupBy) !== getGroup(obj, groupBy))}
               <!--Category for first item-->
               {#if item > 0}<div class="menu-separator" />{/if}
               <div class="category-box">

packages/presentation/src/components/ObjectPopup.svelte

@@ -15,6 +15,7 @@
 <script lang="ts">
   import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
   import type { IntlString } from '@hcengineering/platform'
+  import { Label } from '@hcengineering/ui'
   import presentation from '..'
   import { ObjectCreate } from '../types'
   import { createQuery } from '../utils'
@@ -45,6 +46,8 @@
   export let readonly = false
   export let disallowDeselect: Ref<Doc>[] | undefined = undefined
 
+  const created: Doc[] = []
+
   let search: string = ''
   let objects: Doc[] = []
 
@@ -68,7 +71,12 @@
         const bval: string = `${(b as any)[groupBy]}`
         return aval.localeCompare(bval)
       })
+      if (created.length > 0) {
+        const cmap = new Set(created.map((it) => it._id))
+        objects = [...created, ...result.filter((d) => !cmap.has(d._id))]
+      } else {
         objects = result
+      }
     },
     { ...(options ?? {}), limit: 200 }
   )
@@ -98,6 +106,8 @@
   on:close
   on:changeContent
   on:search={(e) => (search = e.detail)}
+  on:created={(doc) => created.push(doc.detail)}
+  {created}
 >
   <svelte:fragment slot="item" let:item>
     {#if $$slots.item}
@@ -105,7 +115,13 @@
     {/if}
   </svelte:fragment>
   <svelte:fragment slot="category" let:item>
-    {#if $$slots.category}
+    {#if created.length > 0 && created.find((it) => it._id === item._id) !== undefined}
+      <div class="menu-group__header">
+        <span class="overflow-label">
+          <Label label={presentation.string.Created} />
+        </span>
+      </div>
+    {:else if $$slots.category}
       <slot name="category" {item} />
     {/if}
   </svelte:fragment>

packages/presentation/src/plugin.ts

@@ -57,7 +57,8 @@ export default plugin(presentationId, {
     DocumentPreview: '' as IntlString,
     MakePrivate: '' as IntlString,
     MakePrivateDescription: '' as IntlString,
-    OpenInANewTab: '' as IntlString
+    OpenInANewTab: '' as IntlString,
+    Created: '' as IntlString
   },
   metadata: {
     RequiredVersion: '' as Metadata<string>,