From 1a98b10eee72e728d6c903d2df78f9b9ca886c4a Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Thu, 4 May 2023 08:39:38 +0600
Subject: [PATCH] TSK-1403 Improve tags filter (#3126)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 .../src/components/TagItem.svelte             |  2 +-
 .../src/components/TagsEditor.svelte          | 24 +++---
 .../src/components/TagsFilter.svelte          | 76 +++++++++++--------
 3 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/plugins/tags-resources/src/components/TagItem.svelte b/plugins/tags-resources/src/components/TagItem.svelte
index f58dae046b..1e4967dace 100644
--- a/plugins/tags-resources/src/components/TagItem.svelte
+++ b/plugins/tags-resources/src/components/TagItem.svelte
@@ -31,7 +31,7 @@
 
   $: name = element?.title ?? tag?.title ?? 'New item'
 
-  $: tagIcon = schema === '3' ? undefined : tagLevel[(((tag?.weight ?? 0) % 3) + 1) as 1 | 2 | 3]
+  $: tagIcon = schema !== '9' ? undefined : tagLevel[(((tag?.weight ?? 0) % 3) + 1) as 1 | 2 | 3]
 </script>
 
 {#if inline}
diff --git a/plugins/tags-resources/src/components/TagsEditor.svelte b/plugins/tags-resources/src/components/TagsEditor.svelte
index 207219cfd1..1fd09f03da 100644
--- a/plugins/tags-resources/src/components/TagsEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsEditor.svelte
@@ -37,7 +37,7 @@
   export let key: KeyedAttribute
   export let showTitle = true
   export let elements: Map<Ref<TagElement>, TagElement>
-  export let schema: '3' | '9' = key.attr.schema ?? '9'
+  export let schema: '0' | '3' | '9' = key.attr.schema ?? '0'
 
   const dispatch = createEventDispatcher()
 
@@ -138,18 +138,20 @@
                   removeTag(tag._id)
                 }}
                 on:click={(evt) => {
-                  showPopup(
-                    WeightPopup,
-                    { value: tag.weight ?? 1, format: 'number', schema },
-                    getEventPopupPositionElement(evt),
-                    (res) => {
-                      if (Number.isFinite(res) && res >= 0 && res <= 8) {
-                        if (res != null) {
-                          dispatch('change', { tag, weight: res })
+                  if (schema !== '0') {
+                    showPopup(
+                      WeightPopup,
+                      { value: tag.weight ?? 1, format: 'number', schema },
+                      getEventPopupPositionElement(evt),
+                      (res) => {
+                        if (Number.isFinite(res) && res >= 0 && res <= 8) {
+                          if (res != null) {
+                            dispatch('change', { tag, weight: res })
+                          }
                         }
                       }
-                    }
-                  )
+                    )
+                  }
                 }}
               />
             {/each}
diff --git a/plugins/tags-resources/src/components/TagsFilter.svelte b/plugins/tags-resources/src/components/TagsFilter.svelte
index 1f47fdb803..4ae06355df 100644
--- a/plugins/tags-resources/src/components/TagsFilter.svelte
+++ b/plugins/tags-resources/src/components/TagsFilter.svelte
@@ -88,7 +88,7 @@
     const el: HTMLElement = ev.currentTarget as HTMLElement
     el.classList.toggle('show')
   }
-  const show: boolean = false
+  $: show = categories.length <= 1
 
   const getCount = (cat: TagCategory): string => {
     const count = objects.filter((el) => el.category === cat._id).filter((it) => selected.includes(it._id)).length
@@ -111,7 +111,7 @@
     categories = categories
   }
 
-  $: schema = filter.key.attribute.schema ?? '9'
+  $: schema = filter.key.attribute.schema ?? '0'
 
   const dispatch = createEventDispatcher()
   getValues(search)
@@ -131,22 +131,24 @@
       }}
       placeholder={phTraslate}
     />
-    <div class="flex-row-center flex-between flex-grow p-1">
-      <Label label={tags.string.Weight} />
-      <Button
-        label={tagLevelLabel}
-        icon={tagLevelIcon}
-        on:click={(evt) => {
-          showPopup(WeightPopup, { value: level, schema }, getEventPopupPositionElement(evt), (res) => {
-            if (Number.isFinite(res) && res >= 0 && res <= 8) {
-              if (res != null) {
-                level = res
+    {#if schema !== '0'}
+      <div class="flex-row-center flex-between flex-grow p-1">
+        <Label label={tags.string.Weight} />
+        <Button
+          label={tagLevelLabel}
+          icon={tagLevelIcon}
+          on:click={(evt) => {
+            showPopup(WeightPopup, { value: level, schema }, getEventPopupPositionElement(evt), (res) => {
+              if (Number.isFinite(res) && res >= 0 && res <= 8) {
+                if (res != null) {
+                  level = res
+                }
               }
-            }
-          })
-        }}
-      />
-    </div>
+            })
+          }}
+        />
+      </div>
+    {/if}
   </div>
   <div class="scroll">
     <div class="box">
@@ -154,24 +156,32 @@
         <Loading />
       {:else}
         {#each categories as cat}
-          {#if objects.filter((el) => el.category === cat._id).length > 0}
+          {@const values = objects.filter((el) => el.category === cat._id)}
+          {#if values.length > 0}
             <div class="sticky-wrapper">
-              <button class="menu-group__header" class:show={search !== '' || show} on:click={toggleGroup}>
-                <div class="flex-row-center">
-                  <span class="mr-1-5">{cat.label}</span>
-                  <div class="icon">
-                    <svg fill="var(--content-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M0,0L6,3L0,6Z" />
-                    </svg>
+              <button
+                class="menu-group__header"
+                class:show={search !== '' || show}
+                class:hidden={show}
+                on:click={toggleGroup}
+              >
+                {#if categories.length > 1}
+                  <div class="flex-row-center">
+                    <span class="mr-1-5">{cat.label}</span>
+                    <div class="icon">
+                      <svg fill="var(--content-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0,0L6,3L0,6Z" />
+                      </svg>
+                    </div>
                   </div>
-                </div>
-                <div class="flex-row-center text-xs">
-                  <span class="content-color mr-1">({objects.filter((el) => el.category === cat._id).length})</span>
-                  <span class="counter">{getCount(cat)}</span>
-                </div>
+                  <div class="flex-row-center text-xs">
+                    <span class="content-color mr-1">({values.length})</span>
+                    <span class="counter">{getCount(cat)}</span>
+                  </div>
+                {/if}
               </button>
               <div class="menu-group">
-                {#each objects.filter((el) => el.category === cat._id) as element}
+                {#each values as element}
                   <button
                     class="menu-item"
                     on:click={() => {
@@ -217,4 +227,8 @@
     display: flex;
     align-items: center;
   }
+
+  .hidden {
+    display: none;
+  }
 </style>