Feat(catalogue): select all button for single-select elements

packages/demo/public/options.json

@@ -1,6 +1,9 @@
 {
     "iconOptions": {
-        "infoUrl": "info-circle-svgrepo-com.svg"
+        "infoUrl": "info-circle-svgrepo-com.svg",
+        "selectAll": {
+            "text": "Add all"
+        }
     },
     "chartOptions": {
         "patients": {

packages/lib/src/components/Options.wc.svelte

@@ -35,6 +35,22 @@
                     ) {
                         store.set("infoUrl", options.iconOptions.infoUrl);
                     }
+                    if (
+                        "selectAll" in options.iconOptions &&
+                        typeof options.iconOptions["selectAll"] === "object" &&
+                        options.iconOptions.selectAll
+                    ) {
+                        // Allow for future possibility of iconUrl instead of text
+                        if (
+                            "text" in options.iconOptions.selectAll &&
+                            typeof options.iconOptions.selectAll["text"] ===
+                                "string"
+                        )
+                            store.set(
+                                "selectAllText",
+                                options.iconOptions.selectAll.text,
+                            );
+                    }
                 }
             }
 

packages/lib/src/components/catalogue/DataTreeElement.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { addItemToQuery, activeQueryGroupIndex } from "../../stores/query";
     import type { Category } from "../../types/treeData";
     import DataTreeElement from "./DataTreeElement.svelte";
     import NumberInputComponent from "./NumberInputComponent.svelte";
@@ -37,7 +38,6 @@
      * watches the open tree nodes store to update the open state of the subcategorys
      */
     let open: boolean = false;
-
     $: {
         if (subCategoryName) {
             open = $openTreeNodes
@@ -93,6 +93,13 @@
         });
     };
 
+    let finalParent: boolean =
+        !("childCategories" in element) &&
+        (!("fieldType" in element) ||
+            ("fieldType" in element &&
+                typeof element.fieldType === "string" &&
+                element.fieldType == "single-select"));
+
     /**
      * watches the number input store to update the number input components
      */
@@ -131,6 +138,32 @@
         }
         return store;
     });
+
+    $: selectAllText = $iconStore.get("selectAllText");
+
+    const selectAllOptions = (): void => {
+        if (!("criteria" in element)) return;
+
+        element.criteria.forEach((criterion) => {
+            const queryItem: QueryItem = {
+                id: uuidv4(),
+                key: element.key,
+                name: element.name,
+                system: "system" in element ? element.system : "",
+                type: "type" in element ? element.type : "",
+                values: [
+                    {
+                        name: criterion.name,
+                        value: criterion.aggregatedValue
+                            ? criterion.aggregatedValue
+                            : criterion.key,
+                        queryBindId: uuidv4(),
+                    },
+                ],
+            };
+            addItemToQuery(queryItem, $activeQueryGroupIndex);
+        });
+    };
 </script>
 
 <div part="data-tree-element">
@@ -160,6 +193,12 @@
         <InfoButtonComponent message={element.infoButtonText} />
     {/if}
 
+    {#if finalParent && open}
+        <button part="add-all-options-button" on:click={selectAllOptions}>
+            {selectAllText ? selectAllText : "Add all"}
+        </button>
+    {/if}
+
     {#if open}
         {#if "childCategories" in element}
             {#each element.childCategories as child}

packages/lib/src/styles/catalogue.css

@@ -52,6 +52,17 @@ lens-catalogue::part(data-tree-element-toggle-icon) {
   transition: all 0.1s ease-in-out;
 }
 
+lens-catalogue::part(add-all-options-button) {
+  background-color: var(--button-background-color);
+  border-radius: var(--border-radius-small);
+  color: var(--button-color);
+  position: relative;
+  padding: 3px 8px;
+  cursor: pointer;
+  border: none;
+  left: +15px;
+}
+
 lens-catalogue::part(data-tree-element-toggle-icon-open) {
   transform: rotate(0deg);
 }