From 54f167805eacd32346dac4ec0fd5c27cd33a21ac Mon Sep 17 00:00:00 2001
From: Vyacheslav Tumanov <me@slavatumanov.me>
Date: Tue, 30 Jan 2024 08:59:30 +0500
Subject: [PATCH] UBER-1005: Array<Ref<T>> support as custom attribute (#4471)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
---
 .github/pull_request_template.md              |  2 +-
 models/contact/src/index.ts                   |  4 ++
 models/hr/src/index.ts                        |  4 ++
 models/recruit/src/index.ts                   |  4 ++
 models/tracker/src/presenters.ts              |  4 ++
 .../src/components/ContactArrayEditor.svelte  |  6 ++-
 .../src/components/ClassAttributeRow.svelte   | 13 ++++-
 .../components/typeEditors/ArrayEditor.svelte |  7 +--
 .../src/components/ArrayEditor.svelte         | 52 +++++++++++++++++++
 .../src/components/ArrayEditorPopup.svelte    | 39 ++++++++++++++
 plugins/view-resources/src/index.ts           |  2 +
 plugins/view-resources/src/plugin.ts          |  3 +-
 12 files changed, 132 insertions(+), 8 deletions(-)
 create mode 100644 plugins/view-resources/src/components/ArrayEditor.svelte
 create mode 100644 plugins/view-resources/src/components/ArrayEditorPopup.svelte

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 0793385b4c..a4f7807795 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -7,7 +7,7 @@
 * [ ] - UI test added to added/changed functionality?
 * [ ] - Screenshot is added to PR if applicable ?
 * [ ] - Does a local formatting is applied (rush format)
-* [ ] - Does a local svele-check is applied (rush svelte-check)
+* [ ] - Does a local svelte-check is applied (rush svelte-check)
 * [ ] - Does a local UI tests are executed [UI Testing](../tests/readme.md)
 * [ ] - Does the code work? Check whether function and logic are correct.
 * [ ] - Does Changelog.md is updated with changes?
diff --git a/models/contact/src/index.ts b/models/contact/src/index.ts
index e875c27748..6800ba6aa2 100644
--- a/models/contact/src/index.ts
+++ b/models/contact/src/index.ts
@@ -715,6 +715,10 @@ export function createModel (builder: Builder): void {
     presenter: contact.component.OrganizationPresenter
   })
 
+  builder.mixin(contact.class.Organization, core.class.Class, view.mixin.ArrayEditor, {
+    inlineEditor: contact.component.ContactArrayEditor
+  })
+
   builder.mixin(contact.class.Contact, core.class.Class, view.mixin.ObjectPresenter, {
     presenter: contact.component.ContactPresenter
   })
diff --git a/models/hr/src/index.ts b/models/hr/src/index.ts
index a3d934975f..ddd4ce7a4f 100644
--- a/models/hr/src/index.ts
+++ b/models/hr/src/index.ts
@@ -207,6 +207,10 @@ export function createModel (builder: Builder): void {
     editor: hr.component.EditDepartment
   })
 
+  builder.mixin(hr.class.Department, core.class.Class, view.mixin.ArrayEditor, {
+    inlineEditor: view.component.ArrayEditor
+  })
+
   builder.mixin(hr.class.Request, core.class.Class, view.mixin.ObjectEditor, {
     editor: hr.component.EditRequest
   })
diff --git a/models/recruit/src/index.ts b/models/recruit/src/index.ts
index 671943046f..7cf635ab1c 100644
--- a/models/recruit/src/index.ts
+++ b/models/recruit/src/index.ts
@@ -263,6 +263,10 @@ export function createModel (builder: Builder): void {
     inlineEditor: recruit.component.VacancyEditor
   })
 
+  builder.mixin(recruit.class.Vacancy, core.class.Class, view.mixin.ArrayEditor, {
+    inlineEditor: view.component.ArrayEditor
+  })
+
   builder.mixin(recruit.class.Applicant, core.class.Class, notification.mixin.ClassCollaborators, {
     fields: ['createdBy']
   })
diff --git a/models/tracker/src/presenters.ts b/models/tracker/src/presenters.ts
index 072e7f4e85..dd60944675 100644
--- a/models/tracker/src/presenters.ts
+++ b/models/tracker/src/presenters.ts
@@ -122,6 +122,10 @@ export function definePresenters (builder: Builder): void {
     inlineEditor: tracker.component.ComponentSelector
   })
 
+  builder.mixin(tracker.class.Component, core.class.Class, view.mixin.ArrayEditor, {
+    inlineEditor: view.component.ArrayEditor
+  })
+
   builder.mixin(tracker.class.Component, core.class.Class, view.mixin.AttributePresenter, {
     presenter: tracker.component.ComponentRefPresenter
   })
diff --git a/plugins/contact-resources/src/components/ContactArrayEditor.svelte b/plugins/contact-resources/src/components/ContactArrayEditor.svelte
index 9e02ef8846..d69781df4d 100644
--- a/plugins/contact-resources/src/components/ContactArrayEditor.svelte
+++ b/plugins/contact-resources/src/components/ContactArrayEditor.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
   import { Contact } from '@hcengineering/contact'
-  import { Ref } from '@hcengineering/core'
+  import { ArrOf, Doc, Ref, RefTo } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import ContactList from './ContactList.svelte'
 
   export let label: IntlString
   export let value: Ref<Contact>[]
+  export let type: ArrOf<RefTo<Doc>> | undefined
   export let onChange: (refs: Ref<Contact>[]) => void
   export let readonly = false
-
+  $: _clazz = (type?.of as RefTo<Doc>)?.to
   let timer: any
 
   function onUpdate (evt: CustomEvent<Ref<Contact>[]>): void {
@@ -22,6 +23,7 @@
 <ContactList
   items={value}
   {label}
+  _class={_clazz}
   on:update={onUpdate}
   kind={'link'}
   size={'medium'}
diff --git a/plugins/setting-resources/src/components/ClassAttributeRow.svelte b/plugins/setting-resources/src/components/ClassAttributeRow.svelte
index e054454741..98ca5f1713 100644
--- a/plugins/setting-resources/src/components/ClassAttributeRow.svelte
+++ b/plugins/setting-resources/src/components/ClassAttributeRow.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { AnyAttribute, EnumOf, Type } from '@hcengineering/core'
+  import core, { AnyAttribute, ArrOf, Doc, EnumOf, RefTo, Type } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import { AnySvelteComponent, Icon, IconMoreV2, Label, IconOpenedArrow } from '@hcengineering/ui'
@@ -40,6 +40,11 @@
     const res = await client.findOne(core.class.Enum, { _id: ref })
     return res?.name
   }
+  function getArrayName (type: Type<any>): IntlString | undefined {
+    const ref = (type as ArrOf<any>).of
+    const res = client.getHierarchy().getClass((ref as RefTo<Doc>).to)
+    return res?.label
+  }
 </script>
 
 <button class="hulyTableAttr-content__row" class:hovered class:selected on:contextmenu on:click>
@@ -74,6 +79,12 @@
         {/if}
       {/await}
     {/if}
+    {#if attribute.type._class === core.class.ArrOf}
+      {@const name = getArrayName(attribute.type)}
+      {#if name}
+        : <Label label={name} />
+      {/if}
+    {/if}
   </div>
   <div class="hulyTableAttr-content__row-arrow">
     <IconOpenedArrow size={'small'} />
diff --git a/plugins/setting-resources/src/components/typeEditors/ArrayEditor.svelte b/plugins/setting-resources/src/components/typeEditors/ArrayEditor.svelte
index 89b3ef61ff..8d66dc9579 100644
--- a/plugins/setting-resources/src/components/typeEditors/ArrayEditor.svelte
+++ b/plugins/setting-resources/src/components/typeEditors/ArrayEditor.svelte
@@ -37,9 +37,10 @@
     .map((p) => hierarchy.getClass(p))
     .filter((p) => {
       return (
-        hierarchy.hasMixin(p, view.mixin.ArrayEditor) &&
-        hierarchy.hasMixin(p, view.mixin.ObjectEditor) &&
-        p.label !== undefined
+        (hierarchy.hasMixin(p, view.mixin.ArrayEditor) &&
+          hierarchy.hasMixin(p, view.mixin.ObjectEditor) &&
+          p.label !== undefined) ||
+        p._id === core.class.RefTo
       )
     })
 
diff --git a/plugins/view-resources/src/components/ArrayEditor.svelte b/plugins/view-resources/src/components/ArrayEditor.svelte
new file mode 100644
index 0000000000..2e35be804e
--- /dev/null
+++ b/plugins/view-resources/src/components/ArrayEditor.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Button, eventToHTMLElement, Icon, Label, showPopup } from '@hcengineering/ui'
+  import { Ref, Doc, ArrOf, RefTo } from '@hcengineering/core'
+  import { IntlString } from '@hcengineering/platform'
+
+  import ArrayEditorPopup from './ArrayEditorPopup.svelte'
+  import { getClient } from '@hcengineering/presentation'
+
+  export let object: Doc
+  export let label: IntlString
+  export let value: Ref<Doc>[] = []
+  export let type: ArrOf<RefTo<Doc>>
+  export let onChange: (refs: Ref<Doc>[]) => void
+  $: _clazz = (type.of as RefTo<Doc>).to
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+  function openPopup (event: MouseEvent) {
+    showPopup(
+      ArrayEditorPopup,
+      {
+        _class: (type.of as RefTo<Doc>).to,
+        space: object.space,
+        placeholder: label,
+        selectedObjects: value
+      },
+      eventToHTMLElement(event),
+      undefined,
+      (result) => {
+        value = result ?? []
+        onChange(value)
+      }
+    )
+  }
+  $: icon = hierarchy.getClass(_clazz).icon
+</script>
+
+<Button kind={'link'} size={'medium'} justify={'left'} width={'100%'} on:click={openPopup}>
+  <svelte:fragment slot="content">
+    {#if icon !== undefined}
+      <div class="btn-icon"><Icon {icon} size={'small'} /></div>
+    {/if}
+    {#if value?.length > 0}
+      <div class="flex-row-center flex-nowrap pointer-events-none">
+        <span class="label nowrap">
+          {value.length + ' items'}
+        </span>
+      </div>
+    {:else}
+      <Label {label} />
+    {/if}
+  </svelte:fragment>
+</Button>
diff --git a/plugins/view-resources/src/components/ArrayEditorPopup.svelte b/plugins/view-resources/src/components/ArrayEditorPopup.svelte
new file mode 100644
index 0000000000..49126c7582
--- /dev/null
+++ b/plugins/view-resources/src/components/ArrayEditorPopup.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+
+  import { Class, Doc, Ref, Space } from '@hcengineering/core'
+  import { IntlString } from '@hcengineering/platform'
+  import { ObjectPopup } from '@hcengineering/presentation'
+
+  export let _class: Ref<Class<Doc>>
+  export let selectedObjects: Ref<Doc>[] = []
+  export let placeholder: IntlString
+  export let space: Ref<Space>
+  export let isSingleSelect = false
+  export let ignoreObjects: Ref<Doc>[] = []
+
+  const dispatch = createEventDispatcher()
+
+  async function onUpdate ({ detail }: CustomEvent<Ref<Doc>[] | null | undefined>) {
+    dispatch('update', detail)
+  }
+</script>
+
+<ObjectPopup
+  {_class}
+  {selectedObjects}
+  {placeholder}
+  {ignoreObjects}
+  multiSelect={!isSingleSelect}
+  on:close
+  on:update={onUpdate}
+  on:changeContent
+>
+  <svelte:fragment slot="item" let:item>
+    <div class="flex flex-grow overflow-label" class:mt-2={'medium'} class:mb-2={'medium'}>
+      <span>
+        {item.name ?? item.label}
+      </span>
+    </div>
+  </svelte:fragment>
+</ObjectPopup>
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index 4543fd9df8..f766ae6240 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -18,6 +18,7 @@ import { type Resources } from '@hcengineering/platform'
 import { getEventPopupPositionElement, type PopupAlignment } from '@hcengineering/ui'
 import { actionImpl } from './actionImpl'
 import ActionsPopup from './components/ActionsPopup.svelte'
+import ArrayEditor from './components/ArrayEditor.svelte'
 import BooleanEditor from './components/BooleanEditor.svelte'
 import BooleanPresenter from './components/BooleanPresenter.svelte'
 import BooleanTruePresenter from './components/BooleanTruePresenter.svelte'
@@ -203,6 +204,7 @@ export default async (): Promise<Resources> => ({
   actionImpl,
   component: {
     ArrayFilter,
+    ArrayEditor,
     ClassPresenter,
     ClassRefPresenter,
     ObjectFilter,
diff --git a/plugins/view-resources/src/plugin.ts b/plugins/view-resources/src/plugin.ts
index 54c6041a6d..1f2609316d 100644
--- a/plugins/view-resources/src/plugin.ts
+++ b/plugins/view-resources/src/plugin.ts
@@ -28,7 +28,8 @@ export default mergeIds(viewId, view, {
     StringFilter: '' as AnyComponent,
     TimestampFilter: '' as AnyComponent,
     FilterTypePopup: '' as AnyComponent,
-    ProxyPresenter: '' as AnyComponent
+    ProxyPresenter: '' as AnyComponent,
+    ArrayEditor: '' as AnyComponent
   },
   string: {
     Contains: '' as IntlString,