chore: update frontend to latest dsp-meta-svc state

Author: mpro7

web-frontend/public/global.css

@@ -49,9 +49,6 @@ a.email {
   color: var(--dasch-primary) !important;
   font-size: 0.85rem;
 }
-a:visited {
-  color: inherit;
-}
 /* disable fancy animation for certain links */
 .regular-link::before {
   background: none;

web-frontend/src/Footer.svelte

@@ -17,7 +17,7 @@
     {#if version}
       <div class=version>{`Version: v${version}`}</div>
     {/if}
-    <div class=copyright>© 2021-2023 DaSCH</div>
+    <div class=copyright>© 2021-2024 DaSCH</div>
   </div>
 </footer>
 

web-frontend/src/interfaces.ts

@@ -49,7 +49,7 @@ export interface Project {
   endDate?: string;
   contactPoint?: string;
   secondaryURL?: URL;
-  publications?: string[];
+  publications?: Publications[];
   grants?: string[];
   alternativeNames?: Text[];
 }
@@ -156,3 +156,8 @@ export interface DataManagementPlan {
   available?: boolean;
   url?: URL;
 }
+
+export interface Publications {
+  text: string;
+  url?: URL[];
+}

web-frontend/src/project-page/ProjectPage.svelte

@@ -11,15 +11,32 @@
   import Loading from "../Loading.svelte";
 
   const mobileResolution = window.innerWidth < 992;
+  const isTestEnvironment: boolean = window.location.hostname === 'localhost' || window.location.hostname.startsWith('meta.test');
+  const descriptionLanguages = new Map<string, string>([
+    // contains languages that are presented in provided descriptions, update if necessary
+    ["ar", "Arabic"],
+    ["de", "German"],
+    ["en", "English"],
+    ["fr", "French"]
+  ]);
 
   let isDescriptionExpanded: boolean;
   let descriptionLinesNumber: number;
   let arePublicationsExpanded: boolean;
-  let isTestEnvironment: boolean = window.location.hostname === 'localhost' || window.location.hostname.startsWith('meta.dev')
+  let displayedDescriptionsLanguage: string = "";
+  let availableDescriptionsIso: string[] = [];
+
+  const getIso = (language: string): string => {
+    const lang = (availableDescriptionsIso.length === 1) ? availableDescriptionsIso[0] : language
+    return [...descriptionLanguages].find(([key, val]) => val === lang)[0]
+  }
 
   onMount(async () => {
     // wait with component creation for the data to be fetched
     await getProjectMetadata();
+    availableDescriptionsIso = Object.keys($projectMetadata?.project.description);
+    // initialize iso language to load => assumption is if more than 1 language is available English exists and set as default
+    displayedDescriptionsLanguage = availableDescriptionsIso.length === 1 ? availableDescriptionsIso[0] : "en"
   });
 
   onDestroy(() => {
@@ -34,7 +51,7 @@
     const baseUrl = `${protocol}//${window.location.hostname}${port}/`;
     const projectID = window.location.pathname.split("/")[2];
 
-    const res = await fetch(`${baseUrl}api/projects/${projectID}`);
+    const res = await fetch(`${baseUrl}api/v1/projects/${projectID}`);
     const metadata: Metadata = await res.json();
 
     projectMetadata.set(metadata);
@@ -56,18 +73,20 @@
   };
 
   const getDivHeight = () => {
-    let lineHeight: number;
-    let divHeight: number;
-    try {
-      const el = document.getElementById("description");
-      divHeight = el.scrollHeight;
-      lineHeight = parseInt(window.getComputedStyle(el).getPropertyValue('line-height'));
-    } catch (error) {
-      lineHeight = 20;
-      divHeight = 19;
-    }
-    descriptionLinesNumber = divHeight / lineHeight;
-    isDescriptionExpanded = descriptionLinesNumber > 6 ? false : true;
+    setTimeout(() => {
+      let lineHeight: number;
+      let divHeight: number;
+      try {
+        const el = document.getElementById("description");
+        divHeight = el.scrollHeight;
+        lineHeight = parseInt(window.getComputedStyle(el).getPropertyValue('line-height'));
+      } catch (error) {
+        lineHeight = 20;
+        divHeight = 19;
+      }
+      descriptionLinesNumber = divHeight / lineHeight;
+      isDescriptionExpanded = descriptionLinesNumber > 6 ? false : true;
+    }, 100);
   };
 </script>
 
@@ -113,9 +132,17 @@
         <!-- Description -->
         <div class="property-row">
           {#if $projectMetadata?.project.description && getText($projectMetadata?.project.description)}
-            <span class="label new-subtitle">Description</span>
+            <span class="label new-subtitle" style="display: block;">Description 
+              <span style={availableDescriptionsIso.length <= 1 ? "display: none" : "display: contents"}> in 
+                {#each Object.keys($projectMetadata?.project.description).map(k=> descriptionLanguages.get(k)) as l}
+                  <button class="language {availableDescriptionsIso.length > 1 && displayedDescriptionsLanguage === getIso(l) ? "active" : ""}" on:click={() => displayedDescriptionsLanguage = getIso(l)}>
+                    {l}
+                  </button>
+                {/each}
+              </span>
+            </span>
             <div id="description" class="data new-text {isDescriptionExpanded ? '' : 'description-short'}">
-              {getText($projectMetadata?.project.description)}
+              {$projectMetadata?.project.description[displayedDescriptionsLanguage]}
             </div>
             {#if descriptionLinesNumber > 6}
               <div on:click={toggleDescriptionExpand} class="expand-button">
@@ -133,9 +160,27 @@
             <span class="label new-subtitle">Publications</span>
             {#each $projectMetadata?.project.publications as p, i}
               {#if i > 1}
-                <span class={arePublicationsExpanded ? "data new-text" : "hidden"}>{p}</span>
+                <span class={arePublicationsExpanded ? "data new-text" : "hidden"}>{p.text}
+                  {#if p.url}
+                    {#each p.url as url, n}
+                      <a href={url.url} class="publication-link {arePublicationsExpanded ? "data" : "hidden"}" target=_>
+                        {url.text}
+                        {p.url.length > 0 && n < p.url.length - 1 ? "," : ""}
+                      </a>
+                    {/each}
+                  {/if}
+                </span>
               {:else}
-                <span class="data new-text">{p}</span>
+                <span class="data new-text">{p.text}
+                  {#if p.url}
+                    {#each p.url as url, n}
+                      <a href={url.url} class="publication-link {arePublicationsExpanded ? "data" : "hidden"}" target=_>
+                        {url.text}
+                        {p.url.length > 0 && n < p.url.length - 1 ? "," : ""}
+                      </a>
+                    {/each}
+                  {/if}
+                </span>
               {/if}
             {/each}
           </div>
@@ -259,6 +304,30 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+  .publication-link {
+    display: contents;
+    color: var(--lead-colour);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  button.language {
+    width: 80px;
+    margin: 0 5px;
+    border: 1px solid var(--lead-colour);
+    background-color: #fff;
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 0.25rem;
+    padding: 5px 10px;
+    color: var(--lead-colour);
+    box-shadow: var(--shadow-1);
+  }
+  button.language.active {
+    color: white;
+    background-color: var(--dasch-secondary);
+    border-color: #dee2e6 #dee2e6 #fff;
+  }
 
   @supports (-moz-appearance: none) {
     button.gototop-button {margin-bottom: 40px;}

web-frontend/src/project-page/ProjectWidget.svelte

@@ -5,7 +5,7 @@
   let isTestEnvironment: boolean = window.location.hostname === 'localhost' || window.location.hostname.startsWith('meta.test')
 
   const truncateString = (s: string) => {
-    // TODO: can this be improved? 1. dynamic length depending on space; 2. show full text on hover
+    // TODO: can this be improved? 1. dynamic langth depending on space; 2. show full text on hover
     if (s.length > 35) {
       return `${s.slice(0, 35)}...`;
     } else return s;
@@ -150,7 +150,6 @@
       <div class=label>Funder</div>
       {#each $projectMetadata?.project.funders.map((o) => {return findObjectByID(o)}) as f}
           {#if f.__type === "Person"}
-            {console.log('person',f)}
             <!-- TODO: handle funding person - need to find example -->
             <!-- <div class=data>{findObjectById(f)?.givenName.split(";").join(" ")} {findObjectById(f)?.familyName}</div> -->
           {:else if f.__type === "Organization"}