TSK-849: Show labels in list (#2749)

+ speedup list rendering

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

models/tracker/src/index.ts

@@ -566,6 +566,11 @@ export function createModel (builder: Builder): void {
         { key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true } },
         { key: '', presenter: tracker.component.SubIssuesSelector, props: {} },
         { key: '', presenter: view.component.GrowPresenter, props: { type: 'grow' } },
+        {
+          key: '$lookup.labels',
+          presenter: tags.component.LabelsPresenter,
+          props: { kind: 'list', full: false, lookupField: 'labels' }
+        },
         { key: '', presenter: tracker.component.DueDatePresenter, props: { kind: 'list' } },
         {
           key: '',

plugins/tags-resources/src/components/LabelsPresenter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Doc } from '@hcengineering/core'
+  import { Doc, WithLookup } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import type { TagReference } from '@hcengineering/tags'
   import tags from '@hcengineering/tags'
@@ -8,21 +8,28 @@
   import TagsEditorPopup from './TagsEditorPopup.svelte'
   import { createEventDispatcher, afterUpdate } from 'svelte'
 
-  export let object: Doc
+  export let object: WithLookup<Doc>
   export let full: boolean
   export let ckeckFilled: boolean = false
   export let kind: 'short' | 'full' = 'short'
   export let isEditable: boolean = false
   export let action: (evt: MouseEvent) => Promise<void> | void = async () => {}
 
+  export let lookupField: string | undefined
+
   const dispatch = createEventDispatcher()
 
   let items: TagReference[] = []
   const query = createQuery()
 
-  $: query.query(tags.class.TagReference, { attachedTo: object._id }, (result) => {
-    items = result
-  })
+  $: if (lookupField === undefined) {
+    query.query(tags.class.TagReference, { attachedTo: object._id }, (result) => {
+      items = result
+    })
+  } else {
+    query.unsubscribe()
+    items = (object.$lookup as any)[lookupField]
+  }
   async function tagsHandler (evt: MouseEvent): Promise<void> {
     showPopup(TagsEditorPopup, { object }, getEventPopupPositionElement(evt))
   }
@@ -42,6 +49,7 @@
 <div
   class="labels-container"
   style:justify-content={kind === 'short' ? 'space-between' : 'flex-start'}
+  class:w-full={kind === 'full'}
   style:flex-wrap={kind === 'short' ? 'nowrap' : 'wrap'}
   use:resizeObserver={(element) => {
     allWidth = element.clientWidth
@@ -64,7 +72,6 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    width: 100%;
     min-width: 0;
     border-radius: 0.25rem;
   }

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

@@ -203,7 +203,7 @@
   />
 </div>
 {#if hasSubIssues}
-  <ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
+  <ExpandCollapse isExpanded={!isCollapsed} on:changeContent>
     <div class="flex-col flex-no-shrink max-h-30 list clear-mins" class:collapsed={isCollapsed}>
       <Scroller>
         <DraftIssueChildList
@@ -220,7 +220,7 @@
   </ExpandCollapse>
 {/if}
 {#if isCreating && team}
-  <ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
+  <ExpandCollapse isExpanded={!isCollapsed} on:changeContent>
     <DraftIssueChildEditor
       {team}
       {statuses}

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

@@ -160,19 +160,21 @@
 <div class="mt-1">
   {#if issueStatuses}
     {#if hasSubIssues && viewOptions && viewlet}
-      <ExpandCollapse isExpanded={!isCollapsed} duration={400}>
-        <div class="list" class:collapsed={isCollapsed}>
-          <SubIssueList
-            teams={_teams}
-            {viewlet}
-            {viewOptions}
-            issueStatuses={_issueStatuses}
-            query={{ attachedTo: issue._id }}
-          />
-        </div>
+      <ExpandCollapse isExpanded={!isCollapsed}>
+        {#if !isCollapsed}
+          <div class="list" class:collapsed={isCollapsed}>
+            <SubIssueList
+              teams={_teams}
+              {viewlet}
+              {viewOptions}
+              issueStatuses={_issueStatuses}
+              query={{ attachedTo: issue._id }}
+            />
+          </div>
+        {/if}
       </ExpandCollapse>
     {/if}
-    <ExpandCollapse isExpanded={!isCollapsed} duration={400}>
+    <ExpandCollapse isExpanded={!isCollapsed}>
       {#if isCreating}
         {@const team = teams.get(issue.space)}
         {@const statuses = issueStatuses.get(issue.space)}

plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte

@@ -84,7 +84,7 @@
   />
 </div>
 {#if hasSubIssues}
-  <ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
+  <ExpandCollapse isExpanded={!isCollapsed} on:changeContent>
     <div class="flex-col flex-no-shrink max-h-30 list clear-mins" class:collapsed={isCollapsed}>
       <Scroller>
         <IssueTemplateChildList
@@ -100,7 +100,7 @@
   </ExpandCollapse>
 {/if}
 {#if isCreating}
-  <ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
+  <ExpandCollapse isExpanded={!isCollapsed} on:changeContent>
     <IssueTemplateChildEditor
       {project}
       {sprint}

plugins/tracker-resources/src/components/workflow/Statuses.svelte

@@ -300,7 +300,7 @@
                 {/if}
               </div>
             {/each}
-            <ExpandCollapse duration={200} isExpanded>
+            <ExpandCollapse isExpanded>
               {#if editingStatus && !('_id' in editingStatus) && editingStatus.category === category._id}
                 <StatusEditor value={editingStatus} on:cancel={cancelEditing} on:save={addStatus} {isSaving} isSingle />
               {/if}

plugins/view-resources/src/components/list/ListCategory.svelte

@@ -300,7 +300,7 @@
       }}
     />
   {/if}
-  <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined} duration={400}>
+  <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined}>
     {#if !lastLevel}
       <div class="p-2">
         <ListCategories
@@ -332,7 +332,7 @@
           on:dragstart={dragStartHandler}
         />
       </div>
-    {:else if itemModels}
+    {:else if itemModels && (!collapsed || dragItemIndex !== undefined)}
       {#if limited}
         {#each limited as docObject, i (docObject._id)}
           <ListItem