Merge pull request #65 from samply/feature/add-links-to-footer

Add links to CCP footer
samply · Mar 19, 2024 · d3a002d · d3a002d
2 parents c6b435a + 59e237e
commit d3a002d
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 57 deletions.
diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
@@ -8,13 +8,13 @@
         dktkHistologyMeasure,
     } from "./measures";
 
-    let mockCatalogueData = "";
+    let catalogueData = "";
     let libraryOptions = "";
 
     fetch("catalogues/catalogue-dktk.json")
         .then((response) => response.text())
         .then((data) => {
-            mockCatalogueData = data;
+            catalogueData = data;
         });
 
     fetch("options.json")
@@ -137,7 +137,7 @@
 <main>
     <div class="search">
         <lens-search-bar
-            treeData={mockCatalogueData}
+            treeData={catalogueData}
             noMatchesFoundMessage={"keine Ergebnisse gefunden"}
         />
         <lens-info-button
@@ -163,7 +163,8 @@
             <lens-catalogue
                 toggleIconUrl="right-arrow-svgrepo-com.svg"
                 addIconUrl="long-right-arrow-svgrepo-com.svg"
-                treeData={mockCatalogueData}
+                infoIconUrl="info-circle-svgrepo-com.svg"
+                treeData={catalogueData}
                 texts={catalogueText}
                 toggle={{ collapsable: false, open: catalogueopen }}
             />
@@ -275,14 +276,21 @@
 </main>
 
 <footer>
-    <a class="user-agreement" href="http">Nutzervereinbarung</a>
-    <a class="email" href="mailto:[email protected]">[email protected]</a>
-    <div class="copyright">
-        <span>&#169; 2023</span>
-        <a href="https://dktk.dkfz.de/en/clinical-platform/about-ccp"
-            >Clinical Comunication Platform (CCP)</a
-        >
-    </div>
+    <a
+        class="ccp"
+        href="https://dktk.dkfz.de/klinische-plattformen/ueber-die-ccp/about-ccp"
+    >
+        Clinical Communication Platform (CCP)
+    </a>
+    <a class="email" href="mailto:[email protected]">Kontakt</a>
+    <a class="user-agreement" href="http" download="nutzervereinbarung"
+        >Nutzungsvereinbarung</a
+    >
+    <a class="privacy-policy" href="http" download="datenschutzerklaerung"
+        >Datenschutz</a
+    >
+    <a class="imprint" href="https://www.dkfz.de/de/impressum.html">Impressum</a
+    >
 </footer>
 
-<lens-options options={libraryOptions} catalogueData={mockCatalogueData} />
+<lens-options options={libraryOptions} {catalogueData} />
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -225,8 +225,8 @@ footer {
 
 
 footer {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  display: flex;
+  justify-content: center;
   padding: var(--gap-s);
   background-color: var(--white);
   border-radius: var(--border-radius-small);
@@ -236,15 +236,16 @@ footer {
   bottom: 0;
 }
 
-.email {
-  justify-self: center;
-}
+footer a {
+  color: var(--blue);
+  padding: 0 var(--gap-xs);
+  border-right: solid 1px var(--blue);
 
-.copyright {
-  justify-self: end;
-  text-align: right;
 }
 
+.imprint {
+  border-right: none;
+}
 
 .result-table-hint-text {
   padding-top: 20px;

diff --git a/packages/lib/src/components/Options.wc.svelte b/packages/lib/src/components/Options.wc.svelte
@@ -17,27 +17,30 @@
     import { catalogue } from "../stores/catalogue";
     import { iconStore } from "../stores/icons";
     import type { Criteria } from "../types/treeData";
+    import type { LensOptions } from "../types/options";
 
-    export let options: object = {};
+    export let options: LensOptions = {};
     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); 
-        }}}
+    const updateIconStore = (options: LensOptions): void => {
+        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;
-      });
-    }
+            return store;
+        });
+    };
 
     $: $lensOptions = options;
     $: updateIconStore(options);

diff --git a/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte b/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte
@@ -10,7 +10,10 @@
 />
 
 <script lang="ts">
-    import { getHumanReadableQuery, buildHumanReadableRecursively } from "../../stores/negotiate";
+    import {
+        getHumanReadableQuery,
+        buildHumanReadableRecursively,
+    } from "../../stores/negotiate";
     import { returnNestedValues } from "../../helpers/ast-transformer";
     import type { AstElement } from "../../types/ast";
     import type { QueryItem } from "../../types/queryData";
@@ -19,8 +22,7 @@
     export let message: string[] = [];
     export let noQueryMessage: string = "Search for all results";
     export let showQuery: boolean = false;
-    
-    export let infoIconUrl: string | null = null;
+
     export let onlyChildInfo: boolean = false;
     export let queryItem: QueryItem | undefined = undefined;
 
@@ -37,14 +39,14 @@
 
     const displayQueryInfo = (queryItem?: QueryItem): void => {
         if (showQuery) {
-             if (onlyChildInfo && queryItem !== undefined) {
-                let childMessage =
-                    buildHumanReadableRecursively(
-                    returnNestedValues(queryItem) as AstElement, "");
-                message = childMessage.length > 0
-                    ? [childMessage] : [noQueryMessage];
-                
-             } else {
+            if (onlyChildInfo && queryItem !== undefined) {
+                let childMessage = buildHumanReadableRecursively(
+                    returnNestedValues(queryItem) as AstElement,
+                    "",
+                );
+                message =
+                    childMessage.length > 0 ? [childMessage] : [noQueryMessage];
+            } else {
                 message =
                     getHumanReadableQuery().length > 0
                         ? [getHumanReadableQuery()]
@@ -55,21 +57,21 @@
     };
 </script>
 
-<button part="info-button" on:click={
-                              onlyChildInfo
-                                  ? displayQueryInfo(queryItem)
-                                  : displayQueryInfo
-                                    } on:focusout={onFocusOut}>
+<button
+    part="info-button"
+    on:click={onlyChildInfo ? displayQueryInfo(queryItem) : displayQueryInfo}
+    on:focusout={onFocusOut}
+>
     {#if iconUrl}
         <img part="info-button-icon" src={iconUrl} alt="info icon" />
     {:else}
         <span part="info-button-icon"> &#9432; </span>
     {/if}
     {#if tooltipOpen}
         <div part="info-button-dialogue">
-          {#each message as msg}
-              <div part="info-button-dialogue-message">{msg}</div>
-          {/each}
+            {#each message as msg}
+                <div part="info-button-dialogue-message">{msg}</div>
+            {/each}
         </div>
     {/if}
 </button>