Add Labels support (#2104)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>

plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte

@@ -15,7 +15,8 @@
 <script lang="ts">
   import { WithLookup } from '@anticrm/core'
   import type { Issue, IssueStatus } from '@anticrm/tracker'
-  import { Button, Label } from '@anticrm/ui'
+  import { Component, Label } from '@anticrm/ui'
+  import tags from '@anticrm/tags'
   import tracker from '../../../plugin'
   import PriorityEditor from '../PriorityEditor.svelte'
   import StatusEditor from '../StatusEditor.svelte'
@@ -46,14 +47,7 @@
   <span class="label">
     <Label label={tracker.string.Labels} />
   </span>
-  <Button
-    label={tracker.string.Labels}
-    icon={tracker.icon.Labels}
-    size={'large'}
-    kind={'link'}
-    width={'100%'}
-    justify={'left'}
-  />
+  <Component is={tags.component.TagsAttributeEditor} props={{ object: issue }} />
 
   <div class="divider" />
 

plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte

@@ -14,11 +14,12 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import core, { AttachedData, Ref, SortingOrder, WithLookup } from '@anticrm/core'
-  import presentation, { getClient } from '@anticrm/presentation'
+  import core, { Account, AttachedData, Doc, generateId, Ref, SortingOrder, WithLookup } from '@anticrm/core'
+  import presentation, { getClient, KeyedAttribute } from '@anticrm/presentation'
   import { StyledTextArea } from '@anticrm/text-editor'
   import { IssueStatus, IssuePriority, Issue, Team, calcRank } from '@anticrm/tracker'
-  import { Button, EditBox } from '@anticrm/ui'
+  import { Button, Component, EditBox } from '@anticrm/ui'
+  import tags, { TagElement, TagReference } from '@anticrm/tags'
   import tracker from '../../../plugin'
   import AssigneeEditor from '../AssigneeEditor.svelte'
   import StatusEditor from '../StatusEditor.svelte'
@@ -34,6 +35,12 @@
   let newIssue: AttachedData<Issue> = getIssueDefaults()
   let thisRef: HTMLDivElement
   let focusIssueTitle: () => void
+  let labels: TagReference[] = []
+
+  const key: KeyedAttribute = {
+    key: 'labels',
+    attr: client.getHierarchy().getAttribute(tracker.class.Issue, 'labels')
+  }
 
   function getIssueDefaults (): AttachedData<Issue> {
     return {
@@ -90,10 +97,43 @@
       rank: calcRank(lastOne, undefined)
     }
 
-    await client.addCollection(tracker.class.Issue, space, parentIssue._id, parentIssue._class, 'subIssues', value)
+    const objectId = await client.addCollection(
+      tracker.class.Issue,
+      space,
+      parentIssue._id,
+      parentIssue._class,
+      'subIssues',
+      value
+    )
+    for (const label of labels) {
+      await client.addCollection(label._class, label.space, objectId, tracker.class.Issue, 'labels', {
+        title: label.title,
+        color: label.color,
+        tag: label.tag
+      })
+    }
     resetToDefaults()
   }
 
+  function addTagRef (tag: TagElement): void {
+    labels = [
+      ...labels,
+      {
+        _class: tags.class.TagReference,
+        _id: generateId() as Ref<TagReference>,
+        attachedTo: '' as Ref<Doc>,
+        attachedToClass: tracker.class.Issue,
+        collection: 'labels',
+        space: tags.space.Tags,
+        modifiedOn: 0,
+        modifiedBy: '' as Ref<Account>,
+        title: tag.title,
+        tag: tag._id,
+        color: tag.color
+      }
+    ]
+  }
+
   $: thisRef && thisRef.scrollIntoView({ behavior: 'smooth' })
   $: canSave = getTitle(newIssue.title ?? '').length > 0
   $: if (!newIssue.status && currentTeam?.defaultIssueStatus) {
@@ -150,6 +190,21 @@
         tooltipFill={false}
         on:change={({ detail }) => (newIssue.assignee = detail)}
       />
+      <Component
+        is={tags.component.TagsDropdownEditor}
+        props={{
+          items: labels,
+          key,
+          targetClass: tracker.class.Issue,
+          countLabel: tracker.string.NumberLabels
+        }}
+        on:open={(evt) => {
+          addTagRef(evt.detail)
+        }}
+        on:delete={(evt) => {
+          labels = labels.filter((it) => it._id !== evt.detail)
+        }}
+      />
     </div>
     <div class="buttons-group small-gap">
       <Button label={presentation.string.Cancel} size="small" kind="transparent" on:click={close} />