Merge pull request #58 from samply/refactor/info-icon-from-options-store

Access info icon from iconStore (via options component) instead of hard-coded path
samply · Mar 13, 2024 · cef8c29 · cef8c29
2 parents 25604f3 + d06c8f8
commit cef8c29
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/packages/demo/public/options.json b/packages/demo/public/options.json
@@ -1,4 +1,7 @@
 {
+    "iconOptions": {
+        "infoUrl": "info-circle-svgrepo-com.svg"
+    },
     "chartOptions": {
         "patients": {
             "legendMapping": {
@@ -166,4 +169,4 @@
             }
         ]
     }
-}
+}
diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
@@ -141,7 +141,6 @@
             noMatchesFoundMessage={"keine Ergebnisse gefunden"}
         />
         <lens-info-button
-            infoIconUrl="info-circle-svgrepo-com.svg"
             noQueryMessage="Leere Suchanfrage: Sucht nach allen Ergebnissen."
             showQuery={true}
         />
@@ -156,7 +155,6 @@
         <div class="catalogue">
             <h2>Suchkriterien</h2>
             <lens-info-button
-                infoIconUrl="info-circle-svgrepo-com.svg"
                 message={[
                     `Bei Patienten mit mehreren onkologischen Diagnosen, können sich ausgewählte Suchkriterien nicht nur auf eine Erkrankung beziehen, sondern auch auf Weitere.`,
                     `Innerhalb einer Kategorie werden verschiedene Ausprägungen mit einer „Oder-Verknüpfung“ gesucht; bei der Suche über mehrere Kategorien mit einer „Und-Verknüpfung“.`,
@@ -165,7 +163,6 @@
             <lens-catalogue
                 toggleIconUrl="right-arrow-svgrepo-com.svg"
                 addIconUrl="long-right-arrow-svgrepo-com.svg"
-                infoIconUrl="info-circle-svgrepo-com.svg"
                 treeData={mockCatalogueData}
                 texts={catalogueText}
                 toggle={{ collapsable: false, open: catalogueopen }}

diff --git a/packages/lib/src/components/Options.wc.svelte b/packages/lib/src/components/Options.wc.svelte
@@ -15,11 +15,31 @@
      */
     import { lensOptions } from "../stores/options";
     import { catalogue } from "../stores/catalogue";
+    import { iconStore } from "../stores/icons";
     import type { Criteria } from "../types/treeData";
 
     export let options: object = {};
     export let catalogueData: Criteria[] = [];
 
+    const updateIconStore = (options) => {
+      iconStore.update((store) => {
+        if (typeof options === "object" &&
+            "iconOptions" in options) {
+                
+          if (typeof options.iconOptions === "object" &&
+              options.iconOptions) {
+          
+            if ("infoUrl" in options.iconOptions &&
+                typeof options.iconOptions["infoUrl"] === "string") {
+        
+               store.set("infoUrl", options.iconOptions.infoUrl); 
+        }}}
+
+         return store;
+      });
+    }
+
     $: $lensOptions = options;
+    $: updateIconStore(options);
     $: $catalogue = catalogueData;
 </script>
diff --git a/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte b/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte
@@ -24,14 +24,8 @@
     export let onlyChildInfo: boolean = false;
     export let queryItem: QueryItem | undefined = undefined;
 
-    iconStore.update((store) => {
-        if (infoIconUrl) {
-            store.set("info", infoIconUrl);
-        }
-        return store;
-    });
+    $: iconUrl = $iconStore.get("infoUrl");
 
-    $: iconUrl = $iconStore.get("info");
     /**
      * handles the toggling of the tooltip
      */