Fix tags popup and Applicant Labels (#1958)

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

changelog.md

@@ -6,6 +6,7 @@ Platform:
 
 - Fix first filter disappear
 - Adjust label editors design
+- Fix skills/labels selection and show real usage counter
 
 ## 0.6.22
 

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

@@ -46,7 +46,7 @@
   const dispatch = createEventDispatcher()
 
   onMount(() => {
-    dispatch('open', { ignoreKeys: ['comments', 'number'] })
+    dispatch('open', { ignoreKeys: ['comments', 'number'], allowedCollections: ['labels'] })
   })
 </script>
 

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

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

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

@@ -64,20 +64,18 @@
     showPopup(CreateTagElement, { targetClass }, 'top')
   }
 
-  const isSelected = (element: TagElement): boolean => {
+  const isSelected = (selected: Ref<TagElement>[], element: TagElement): boolean => {
     if (selected.filter((p) => p === element._id).length > 0) return true
     return false
   }
-  const checkSelected = (element: TagElement): void => {
+  const checkSelected = (_selected: Ref<TagElement>[], element: TagElement): void => {
-    if (isSelected(element)) {
+    if (isSelected(_selected, element)) {
-      selected = selected.filter((p) => p !== element._id)
+      selected = _selected.filter((p) => p !== element._id)
       dispatch('update', { action: 'remove', tag: element })
     } else {
-      selected = [...selected, element._id]
+      selected = [..._selected, element._id]
       dispatch('update', { action: 'add', tag: element })
     }
-    objects = objects
-    categories = categories
     dispatch('update', { action: 'selected', selected: selected })
   }
   const toggleGroup = (ev: MouseEvent): void => {
@@ -92,6 +90,13 @@
   onMount(() => {
     if (searchElement) searchElement.focus()
   })
+  const tagSort = (a: TagElement, b: TagElement) => {
+    const r = (b.refCount ?? 0) - (a.refCount ?? 0)
+    if (r === 0) {
+      return b.title.localeCompare(a.title)
+    }
+    return r
+  }
 </script>
 
 <div class="selectPopup maxHeight">
@@ -133,9 +138,7 @@
   <div class="scroll">
     <div class="box">
       {#each categories as cat}
-        {@const catObjects = objects
+        {@const catObjects = objects.filter((el) => el.category === cat._id).sort(tagSort)}
-          .filter((el) => el.category === cat._id)
-          .sort((a, b) => (b.refCount ?? 0) - (a.refCount ?? 0))}
         {#if catObjects.length > 0}
           <div class="sticky-wrapper">
             <button
@@ -167,14 +170,17 @@
                 <button
                   class="menu-item"
                   on:click={() => {
-                    checkSelected(element)
+                    checkSelected(selected, element)
                   }}
                 >
                   <div class="check pointer-events-none">
-                    <CheckBox checked={isSelected(element)} primary />
+                    <CheckBox checked={isSelected(selected, element)} primary />
                   </div>
                   <div class="tag" style="background-color: {getPlatformColor(element.color)};" />
                   {element.title}
+                  <span class="ml-2 text-xs">
+                    ({element.refCount ?? 0})
+                  </span>
                 </button>
               {/each}
             </div>

plugins/task-resources/src/components/TaskHeader.svelte

@@ -26,6 +26,7 @@
   export let mixins: Mixin<Doc>[]
   export let ignoreKeys: string[]
   export let vertical: boolean = false
+  export let allowedCollections: string[] = []
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -77,7 +78,7 @@
     <AttributesBar {object} _class={object._class} keys={['doneState', 'state']} showHeader={false} />
   </div>
 {:else}
-  <DocAttributeBar {object} {ignoreKeys} {mixins} on:update />
+  <DocAttributeBar {object} {ignoreKeys} {mixins} {allowedCollections} on:update />
 {/if}
 
 <style lang="scss">

plugins/view-resources/src/components/EditDoc.svelte

@@ -88,6 +88,7 @@
   $: getMixins(parentClass, object)
 
   let ignoreKeys: string[] = []
+  let allowedCollections: string[] = []
   let ignoreMixins: Set<Ref<Mixin<Doc>>> = new Set<Ref<Mixin<Doc>>>()
 
   async function updateKeys (): Promise<void> {
@@ -238,11 +239,11 @@
         {#if headerEditor !== undefined}
           <Component
             is={headerEditor}
-            props={{ object, keys, mixins, ignoreKeys, vertical: dir === 'column' }}
+            props={{ object, keys, mixins, ignoreKeys, vertical: dir === 'column', allowedCollections }}
             on:update={updateKeys}
           />
         {:else if dir === 'column'}
-          <DocAttributeBar {object} {mixins} {ignoreKeys} on:update={updateKeys} />
+          <DocAttributeBar {object} {mixins} {ignoreKeys} {allowedCollections} on:update={updateKeys} />
         {:else}
           <AttributesBar {object} _class={realObjectClass} {keys} />
         {/if}
@@ -256,12 +257,13 @@
         on:open={(ev) => {
           ignoreKeys = ev.detail.ignoreKeys
           ignoreMixins = new Set(ev.detail.ignoreMixins)
+          allowedCollections = ev.detail.allowedCollections ?? []
           getMixins(parentClass, object)
           updateKeys()
         }}
       />
     {/if}
-    {#each collectionEditors as collection}
+    {#each collectionEditors.filter((it) => !allowedCollections.includes(it.key.key)) as collection}
       {#if collection.editor}
         <div class="mt-6">
           <Component