Board: Fix tags/labels for board table view (#2045)

* Board: Fix tags/labels for board table view

Signed-off-by: Anna No <anna.no@xored.com>

* fix formatting

Signed-off-by: Anna No <anna.no@xored.com>

models/board/src/index.ts

@@ -286,7 +286,7 @@ export function createModel (builder: Builder): void {
         value: 'object'
       },
       label: board.string.Labels,
-      icon: board.icon.Card,
+      icon: tags.icon.Tags,
       input: 'any',
       inline: true,
       category: board.category.Card,

models/recruit/src/index.ts

@@ -95,7 +95,7 @@ export class TCandidate extends TPerson implements Candidate {
   @Index(IndexKind.FullText)
   source?: string
 
-  @Prop(Collection(tags.class.TagReference, recruit.string.SkillLabel), recruit.string.SkillsLabel)
+  @Prop(Collection(tags.class.TagReference, recruit.string.SkillLabel), recruit.string.SkillsLabel, recruit.icon.Skills)
   skills?: number
 
   @Prop(Collection(recruit.class.Review, recruit.string.Review), recruit.string.Reviews)
@@ -215,7 +215,7 @@ export function createModel (builder: Builder): void {
           {
             id: skillsId,
             component: recruit.component.SkillsView,
-            icon: tags.icon.Tags,
+            icon: recruit.icon.Skills,
             label: recruit.string.SkillsLabel,
             createItemLabel: recruit.string.SkillCreateLabel,
             position: 'bottom'
@@ -275,7 +275,8 @@ export function createModel (builder: Builder): void {
           sortingKey: 'skills',
           props: {
             _class: recruit.mixin.Candidate,
-            key: 'skills'
+            key: 'skills',
+            icon: recruit.icon.Skills
           }
         },
         'modifiedOn',

models/recruit/src/migration.ts

@@ -49,7 +49,7 @@ async function createDefaults (tx: TxOperations): Promise<void> {
     tags.class.TagCategory,
     tags.space.Tags,
     {
-      icon: tags.icon.Tags,
+      icon: recruit.icon.Skills,
       label: 'Other',
       targetClass: recruit.mixin.Candidate,
       tags: [],
@@ -64,7 +64,7 @@ async function createDefaults (tx: TxOperations): Promise<void> {
       tags.class.TagCategory,
       tags.space.Tags,
       {
-        icon: tags.icon.Tags,
+        icon: recruit.icon.Skills,
         label: c.label,
         targetClass: recruit.mixin.Candidate,
         tags: c.skills,

plugins/board-resources/src/components/TableView.svelte

@@ -26,13 +26,17 @@
     '$lookup.state',
     {
       key: '',
-      presenter: tags.component.TagsAttributeEditor,
+      presenter: tags.component.TagsPresenter,
-      props: { isEditable: false },
+      label: board.string.Labels,
-      label: board.string.Labels
+      sortingKey: 'labels',
+      props: {
+        _class: board.class.Card,
+        key: 'labels'
+      }
     },
     'startDate',
     'dueDate',
-    { key: 'members', presenter: board.component.UserBoxList, label: board.string.Members, sortingKey: '' },
+    { key: 'members', presenter: board.component.UserBoxList, label: board.string.Members, sortingKey: 'members' },
     'modifiedOn'
   ]}
   {options}

plugins/recruit-assets/assets/icons.svg

@@ -32,4 +32,7 @@
     <path d="M7.91486 10.1761C7.80538 9.1186 6.91913 8.30487 5.8592 8.29183C5.53827 8.92804 5.21105 9.90848 5.01729 10.5311C4.93355 10.8002 5.16675 11.0527 5.44262 10.9905C6.16831 10.8268 7.36057 10.5217 7.91486 10.1761Z"/>
     <path d="M4.75 2C2.67893 2 1 3.67893 1 5.75V11.25C1 13.3211 2.67893 15 4.75 15H10.2501C12.3212 15 14.0001 13.3211 14.0001 11.25V8C14.0001 7.58579 13.6643 7.25 13.2501 7.25C12.8359 7.25 12.5001 7.58579 12.5001 8V11.25C12.5001 12.4926 11.4927 13.5 10.2501 13.5H4.75C3.50736 13.5 2.5 12.4926 2.5 11.25V5.75C2.5 4.50736 3.50736 3.5 4.75 3.5H7C7.41421 3.5 7.75 3.16421 7.75 2.75C7.75 2.33579 7.41421 2 7 2H4.75Z"/>
   </symbol>
+    <symbol id="skills" viewBox="0 0 24 24">
+    <path d="M22.8,8.7c0-0.3-0.2-0.6-0.5-0.7L11.8,3.8c-0.2-0.1-0.4-0.1-0.6,0L0.7,8C0.4,8.1,0.2,8.4,0.2,8.7 s0.2,0.6,0.5,0.7L5,11.1v6c0,0.2,0.1,0.4,0.2,0.5l0.5-0.5c-0.5,0.5-0.5,0.5-0.5,0.5l0,0l0,0l0,0l0,0c0,0,0.1,0.1,0.1,0.1 c0.1,0.1,0.2,0.2,0.3,0.3C6,18.3,6.5,18.6,7,19c1.1,0.6,2.7,1.3,4.5,1.3c1.8,0,3.4-0.7,4.5-1.3c0.5-0.3,1-0.6,1.3-0.9 c0.2-0.1,0.3-0.2,0.3-0.3c0,0,0.1-0.1,0.1-0.1l0,0l0,0l0,0l0,0l-0.5-0.5c0.5,0.5,0.5,0.5,0.5,0.5c0.1-0.1,0.2-0.3,0.2-0.5v-6 l3.3-1.3v3.6c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8L22.8,8.7C22.8,8.7,22.8,8.7,22.8,8.7C22.8,8.7,22.8,8.7,22.8,8.7z M16.5,16.8c0,0-0.1,0.1-0.1,0.1c-0.3,0.2-0.6,0.5-1.1,0.8c-0.9,0.6-2.2,1.1-3.7,1.1c-1.5,0-2.8-0.5-3.7-1.1 c-0.5-0.3-0.8-0.5-1.1-0.8c-0.1,0-0.1-0.1-0.1-0.1v-5.1l4.7,1.9c0.2,0.1,0.4,0.1,0.6,0l4.7-1.9V16.8z M11.5,12.1L3,8.7l8.5-3.4 L20,8.7L11.5,12.1z" />
+  </symbol>
 </svg>

plugins/recruit-assets/src/index.ts

@@ -26,7 +26,8 @@ loadMetadata(recruit.icon, {
   Application: `${icons}#application`,
   Review: `${icons}#application`,
   Opinion: `${icons}#application`,
-  CreateCandidate: `${icons}#new-candidate`
+  CreateCandidate: `${icons}#new-candidate`,
+  Skills: `${icons}#skills`
 })
 
 addStringsLoader(recruitId, async (lang: string) => await import(`../lang/${lang}.json`))

plugins/recruit-resources/src/components/SkillsView.svelte

@@ -17,6 +17,7 @@
   props={{
     targetClass: recruit.mixin.Candidate,
     title: recruit.string.SkillsLabel,
+    icon: recruit.icon.Skills,
     item: recruit.string.SkillLabel,
     key: 'skills',
     сreateItemLabel: recruit.string.SkillCreateLabel,

plugins/recruit/src/index.ts

@@ -119,7 +119,8 @@ const recruit = plugin(recruitId, {
     Application: '' as Asset,
     Review: '' as Asset,
     Opinion: '' as Asset,
-    CreateCandidate: '' as Asset
+    CreateCandidate: '' as Asset,
+    Skills: '' as Asset
   },
   space: {
     VacancyTemplates: '' as Ref<KanbanTemplateSpace>,

plugins/tags-assets/assets/icons.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="tags" viewBox="0 0 24 24">
+  <symbol id="tags" viewBox="0 0 16 16">
-    <path d="M22.8,8.7c0-0.3-0.2-0.6-0.5-0.7L11.8,3.8c-0.2-0.1-0.4-0.1-0.6,0L0.7,8C0.4,8.1,0.2,8.4,0.2,8.7 s0.2,0.6,0.5,0.7L5,11.1v6c0,0.2,0.1,0.4,0.2,0.5l0.5-0.5c-0.5,0.5-0.5,0.5-0.5,0.5l0,0l0,0l0,0l0,0c0,0,0.1,0.1,0.1,0.1 c0.1,0.1,0.2,0.2,0.3,0.3C6,18.3,6.5,18.6,7,19c1.1,0.6,2.7,1.3,4.5,1.3c1.8,0,3.4-0.7,4.5-1.3c0.5-0.3,1-0.6,1.3-0.9 c0.2-0.1,0.3-0.2,0.3-0.3c0,0,0.1-0.1,0.1-0.1l0,0l0,0l0,0l0,0l-0.5-0.5c0.5,0.5,0.5,0.5,0.5,0.5c0.1-0.1,0.2-0.3,0.2-0.5v-6 l3.3-1.3v3.6c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8L22.8,8.7C22.8,8.7,22.8,8.7,22.8,8.7C22.8,8.7,22.8,8.7,22.8,8.7z M16.5,16.8c0,0-0.1,0.1-0.1,0.1c-0.3,0.2-0.6,0.5-1.1,0.8c-0.9,0.6-2.2,1.1-3.7,1.1c-1.5,0-2.8-0.5-3.7-1.1 c-0.5-0.3-0.8-0.5-1.1-0.8c-0.1,0-0.1-0.1-0.1-0.1v-5.1l4.7,1.9c0.2,0.1,0.4,0.1,0.6,0l4.7-1.9V16.8z M11.5,12.1L3,8.7l8.5-3.4 L20,8.7L11.5,12.1z" />
+    <path d="M2.5,9.8l3.7,3.7c0,0,0,0,0,0c0.6,0.6,1.6,0.6,2.2,0l5.5-5.5C13.9,8,14,7.8,14,7.7V2.5C14,2.2,13.8,2,13.5,2H8.3 C8.1,2,8,2.1,7.9,2.1L2.5,7.6C2.2,7.9,2,8.3,2,8.7C2,9.1,2.2,9.5,2.5,9.8z M3.2,8.3L8.5,3H13v4.5l-5.3,5.3c-0.2,0.2-0.6,0.2-0.8,0 L3.2,9.1C3.1,9,3,8.9,3,8.7S3.1,8.4,3.2,8.3z"/>
-  </symbol>  
+  </symbol>
 </svg>

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

@@ -14,18 +14,20 @@
 -->
 <script lang="ts">
   import { Ref } from '@anticrm/core'
+  import { Asset } from '@anticrm/platform'
   import { TagElement } from '@anticrm/tags'
-  import { Icon } from '@anticrm/ui'
+  import { AnySvelteComponent, Icon } from '@anticrm/ui'
   import tags from '../plugin'
 
   export let value: TagElement
   export let tagElements: Map<Ref<TagElement>, { count: number; modifiedOn: number }> | undefined
+  export let icon: Asset | AnySvelteComponent = tags.icon.Tags
   export let onTag: ((tag: TagElement) => void) | undefined = undefined
 </script>
 
 {#if (tagElements?.get(value._id)?.count ?? 0) > 0}
   <div class="sm-tool-icon" on:click={() => onTag?.(value)}>
-    <span class="icon"><Icon icon={tags.icon.Tags} size={'small'} /> </span>
+    <span class="icon"><Icon {icon} size={'small'} /> </span>
     &nbsp;{tagElements?.get(value._id)?.count ?? 0}
   </div>
 {/if}

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

@@ -28,9 +28,11 @@
     {#each items as value}
       <TagReferencePresenter {value} />
     {/each}
-    <Button kind="link" on:click={tagsHandler}>
+    {#if isEditable}
-      <Icon icon={IconAdd} slot="content" size="small" />
+      <Button kind="link" on:click={tagsHandler}>
-    </Button>
+        <Icon icon={IconAdd} slot="content" size="small" />
+      </Button>
+    {/if}
   </div>
 {:else if isEditable}
   <Button kind="link" on:click={tagsHandler}>

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

@@ -75,7 +75,7 @@
 
 <Tooltip label={key.attr.label} direction={labelDirection}>
   <Button
-    icon={tags.icon.Tags}
+    icon={key.attr.icon ?? tags.icon.Tags}
     label={items.length > 0 ? undefined : key.attr.label}
     width={width ?? 'min-content'}
     {kind}

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

@@ -14,8 +14,9 @@
 -->
 <script lang="ts">
   import { Class, Doc, Ref } from '@anticrm/core'
+  import { Asset } from '@anticrm/platform'
   import { getClient } from '@anticrm/presentation'
-  import { Icon, tooltip } from '@anticrm/ui'
+  import { AnySvelteComponent, Icon, tooltip } from '@anticrm/ui'
   import { getCollectionCounter } from '@anticrm/view-resources'
   import tagsId from '../plugin'
   import TagsPresentationPopup from './TagsPresentationPopup.svelte'
@@ -23,6 +24,7 @@
   export let value: Doc
   export let _class: Ref<Class<Doc>>
   export let key: string
+  export let icon: Asset | AnySvelteComponent = tagsId.icon.Tags
 
   const client = getClient()
 
@@ -39,6 +41,6 @@
     }}
     class="sm-tool-icon"
   >
-    <span class="icon"><Icon icon={tagsId.icon.Tags} size={'small'} /></span>&nbsp;{tags}
+    <span class="icon"><Icon {icon} size="small" /></span>&nbsp;{tags}
   </div>
 {/if}

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

@@ -14,16 +14,17 @@
 -->
 <script lang="ts">
   import { Class, Doc, DocumentQuery, FindOptions, Ref } from '@anticrm/core'
-  import { IntlString, translate } from '@anticrm/platform'
+  import { Asset, IntlString, translate } from '@anticrm/platform'
   import { createQuery } from '@anticrm/presentation'
   import { TagCategory, TagElement } from '@anticrm/tags'
-  import { Button, Icon, IconAdd, Label, SearchEdit, showPopup } from '@anticrm/ui'
+  import { AnySvelteComponent, Button, Icon, IconAdd, Label, SearchEdit, showPopup } from '@anticrm/ui'
   import { TableBrowser } from '@anticrm/view-resources'
   import tags from '../plugin'
   import CategoryBar from './CategoryBar.svelte'
   import CreateTagElement from './CreateTagElement.svelte'
 
   export let title: IntlString = tags.string.Tags
+  export let icon: Asset | AnySvelteComponent = tags.icon.Tags
   export let item: IntlString = tags.string.Tag
   export let сreateItemLabel: IntlString = tags.string.TagCreateLabel
   export let targetClass: Ref<Class<Doc>>
@@ -87,7 +88,7 @@
 
 <div class="ac-header full">
   <div class="ac-header__wrap-title">
-    <div class="ac-header__icon"><Icon icon={tags.icon.Tags} size={'small'} /></div>
+    <div class="ac-header__icon"><Icon {icon} size={'small'} /></div>
     <span class="ac-header__title"><Label label={title} /></span>
   </div>
 
@@ -132,7 +133,7 @@
       key: '',
       presenter: tags.component.TagElementCountPresenter,
       label: item,
-      props: { tagElements, label: item, onTag },
+      props: { tagElements, label: item, icon, onTag },
       sortingKey: '@tagCount',
       sortingFunction: countSorting
     },