TSK-360: Assignee selection enhancements

packages/presentation/lang/en.json

@@ -28,6 +28,12 @@
     "Edit": "Edit",
     "SelectAvatar": "Select avatar",
     "GravatarsManaged": "Gravatars are managed through",
+    "CategoryCurrentUser": "Current user",
+    "Assigned": "Assigned",
+    "CategoryPreviousAssigned": "Previously assigned",
+    "CategoryProjectLead": "Project lead",
+    "CategoryProjectMembers": "Project members",
+    "CategoryOther": "Other",
     "InltPropsValue": "{value}"
   }
 }

packages/presentation/lang/ru.json

@@ -22,12 +22,18 @@
     "NumberSpaces": "{count, plural, =0 {В} =1 {В 1 месте} other {В # местах}}",
     "InThis": "В этом {space}",
     "NoMatchesInThis": "В этом {space} совпадения не обнаружены",
-    "NoMatchesFound": "Не найдено соответсвий",
+    "NoMatchesFound": "Не найдено соответствий",
     "NotInThis": "Не в этом {space}",
     "Add": "Добавить",
     "Edit": "Редактировать",
     "SelectAvatar": "Выбрать аватар",
     "GravatarsManaged": "Граватары управляются через",
+    "CategoryCurrentUser": "Текущий пользователь",
+    "Assigned": "Назначен",
+    "CategoryPreviousAssigned": "Ранее назначенные",
+    "CategoryProjectLead": "Руководитель проекта",
+    "CategoryProjectMembers": "Участники проекта",
+    "CategoryOther": "Прочие",
     "InltPropsValue": "{value}"
   }
 }

packages/presentation/package.json

@@ -42,6 +42,7 @@
     "@hcengineering/login": "^0.6.1",
     "@hcengineering/image-cropper": "^0.6.0",
     "@hcengineering/client": "^0.6.6",
+    "@hcengineering/tracker": "^0.6.1",
     "@hcengineering/setting": "^0.6.2",
     "fast-equals": "^2.0.3"
   }

packages/presentation/src/components/AssigneeBox.svelte

@@ -0,0 +1,177 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import contact, { Contact, Employee, formatName } from '@hcengineering/contact'
+  import { AttachedData, Class, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
+  import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
+  import { Issue, IssueTemplateData } from '@hcengineering/tracker'
+  import {
+    ActionIcon,
+    Button,
+    ButtonKind,
+    ButtonSize,
+    getEventPositionElement,
+    getFocusManager,
+    Icon,
+    IconOpen,
+    Label,
+    LabelAndProps,
+    showPanel,
+    showPopup,
+    tooltip
+  } from '@hcengineering/ui'
+  import view from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+  import presentation, { getClient } from '..'
+  import IconPerson from './icons/Person.svelte'
+  import UserInfo from './UserInfo.svelte'
+  import AssigneePopup from './AssigneePopup.svelte'
+
+  export let _class: Ref<Class<Employee>> = contact.class.Employee
+  export let excluded: Ref<Contact>[] | undefined = undefined
+  export let options: FindOptions<Employee> | undefined = undefined
+  export let docQuery: DocumentQuery<Employee> | undefined = {
+    active: true
+  }
+  export let label: IntlString
+  export let placeholder: IntlString = presentation.string.Search
+  export let value: Ref<Employee> | null | undefined
+  export let titleDeselect: IntlString | undefined = undefined
+
+  export let assignedTo: Issue | AttachedData<Issue> | IssueTemplateData
+  export let readonly = false
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = undefined
+  export let focusIndex = -1
+  export let showTooltip: LabelAndProps | undefined = undefined
+  export let showNavigate = true
+  export let id: string | undefined = undefined
+
+  const icon = IconPerson
+
+  const dispatch = createEventDispatcher()
+
+  let selected: Employee | undefined
+  let container: HTMLElement
+
+  const client = getClient()
+
+  async function updateSelected (value: Ref<Employee> | null | undefined) {
+    selected = value ? await client.findOne(_class, { _id: value }) : undefined
+  }
+
+  $: updateSelected(value)
+
+  function getName (obj: Contact): string {
+    const isPerson = client.getHierarchy().isDerived(obj._class, contact.class.Person)
+    return isPerson ? formatName(obj.name) : obj.name
+  }
+  const mgr = getFocusManager()
+
+  const _click = (ev: MouseEvent): void => {
+    if (!readonly) {
+      showPopup(
+        AssigneePopup,
+        {
+          _class,
+          options,
+          docQuery,
+          assignedTo,
+          ignoreUsers: excluded ?? [],
+          icon,
+          selected: value,
+          placeholder,
+          titleDeselect
+        },
+        !$$slots.content ? container : getEventPositionElement(ev),
+        (result) => {
+          if (result === null) {
+            value = null
+            selected = undefined
+            dispatch('change', null)
+          } else if (result !== undefined && result._id !== value) {
+            value = result._id
+            dispatch('change', value)
+          }
+          mgr?.setFocusPos(focusIndex)
+        }
+      )
+    }
+  }
+
+  $: hideIcon = size === 'x-large' || (size === 'large' && kind !== 'link')
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div {id} bind:this={container} class="min-w-0" class:w-full={width === '100%'} class:h-full={$$slots.content}>
+  {#if $$slots.content}
+    <div
+      class="w-full h-full flex-streatch"
+      on:click={_click}
+      use:tooltip={selected !== undefined ? { label: getEmbeddedLabel(getName(selected)) } : undefined}
+    >
+      <slot name="content" />
+    </div>
+  {:else}
+    <Button {focusIndex} width={width ?? 'min-content'} {size} {kind} {justify} {showTooltip} on:click={_click}>
+      <span
+        slot="content"
+        class="overflow-label flex-grow"
+        class:flex-between={showNavigate && selected}
+        class:dark-color={value == null}
+      >
+        <div
+          class="disabled"
+          style:width={showNavigate && selected
+            ? `calc(${width ?? 'min-content'} - 1.5rem)`
+            : `${width ?? 'min-content'}`}
+          use:tooltip={selected !== undefined ? { label: getEmbeddedLabel(getName(selected)) } : undefined}
+        >
+          {#if selected}
+            {#if hideIcon || selected}
+              <UserInfo value={selected} size={kind === 'link' ? 'x-small' : 'tiny'} {icon} />
+            {:else}
+              {getName(selected)}
+            {/if}
+          {:else}
+            <div class="flex-presenter">
+              {#if icon}
+                <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
+                  <Icon {icon} size={kind === 'link' ? 'small' : size} />
+                </div>
+              {/if}
+              <div class="label no-underline">
+                <Label {label} />
+              </div>
+            </div>
+          {/if}
+        </div>
+        {#if selected && showNavigate}
+          <ActionIcon
+            icon={IconOpen}
+            size={'small'}
+            action={() => {
+              if (selected) {
+                showPanel(view.component.EditDoc, selected._id, selected._class, 'content')
+              }
+            }}
+          />
+        {/if}
+      </span>
+    </Button>
+  {/if}
+</div>