[sc-7705] Disable label filters when a labelset is selected (#1096)

* [sc-7705] Disable label filters when a labelset is selected * Avoid id collision
nuclia · Nov 2, 2023 · c4cccc3 · c4cccc3
1 parent ab5d801
commit c4cccc3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/libs/search-widget/src/common/checkbox/Checkbox.scss b/libs/search-widget/src/common/checkbox/Checkbox.scss
@@ -22,6 +22,13 @@
       background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g fill="none" fill-rule="evenodd"><polygon fill="%23000" points="29.021 17.021 11.021 17.021 11.021 9.021 7.021 9.021 7.021 21.021 29.021 21.021" transform="rotate(-45 18.02 15.02)"/></g></svg>');
       background-size: var(--size-checkbox) var(--size-checkbox);
     }
+
+    &:disabled {
+      border-color: var(--color-neutral-light);
+      & ~ label {
+        color: var(--color-neutral-light);
+      }
+    }
   }
 
   label {

diff --git a/libs/search-widget/src/common/checkbox/Checkbox.svelte b/libs/search-widget/src/common/checkbox/Checkbox.svelte
@@ -1,27 +1,32 @@
+<script context="module">
+  let nextId = 0;
+</script>
 <script lang="ts">
-  import { slugify } from '../../core/utils';
   import { createEventDispatcher } from 'svelte';
 
   export let checked = false;
+  export let disabled = false;
 
   const dispatch = createEventDispatcher();
-  let labelElement: HTMLElement;
+  nextId++;
 
-  $: id = labelElement ? slugify(labelElement.innerText) : '';
+  $: id = `checkbox-${nextId}`;
   const onChange = () => {
     dispatch('change', checked);
   };
 </script>
 
-<div class="sw-checkbox">
+<div
+  class="sw-checkbox"
+  class:disabled>
   <input
     {id}
     type="checkbox"
     class="sw-checkbox-control"
+    {disabled}
     bind:checked
     on:change={onChange} />
   <label
-    bind:this={labelElement}
     for={id}>
     <slot />
   </label>

diff --git a/libs/search-widget/src/components/labels-expander/LabelsExpander.svelte b/libs/search-widget/src/components/labels-expander/LabelsExpander.svelte
@@ -2,7 +2,7 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import { map, Observable, take } from 'rxjs';
   import type { LabelSetWithId } from '../../core';
-  import { addLabelSetFilter, labelFilters, labelSetFilters, removeLabelSetFilter } from '../../core';
+  import { addLabelSetFilter, labelFilters, labelSetFilters, removeLabelFilter, removeLabelSetFilter } from '../../core';
   import IconButton from '../../common/button/IconButton.svelte';
   import Checkbox from '../../common/checkbox/Checkbox.svelte';
 
@@ -16,7 +16,13 @@
   );
 
   function selectLabelSet(labelSet, selected)  {
-    selected  ? addLabelSetFilter(labelSet.id, labelSet.kind) : removeLabelSetFilter(labelSet.id);
+    if (selected) {
+      labelSet.labels.forEach((label) => removeLabelFilter({ labelset: labelSet.id, label: label.title}));
+      addLabelSetFilter(labelSet.id, labelSet.kind)
+    }
+    else {
+      removeLabelSetFilter(labelSet.id);
+    }
   }
 
   function toggleLabelSet(labelSetId) {
@@ -60,6 +66,7 @@
           <div>
             <Checkbox
               checked={selectedLabels.includes(label.title)}
+              disabled={$selectedLabelSets.includes(labelSet.id)}
               on:change={(event) => dispatch('labelSelect', { labelSet, label, selected: event.detail })}>
               {label.title}
             </Checkbox>