From 32c4315fc903c39c0382d7a24f7c73674ad0bc7f Mon Sep 17 00:00:00 2001
From: Joris de Keijser <chinook25@gmail.com>
Date: Wed, 12 Feb 2025 10:18:37 +0100
Subject: [PATCH] feat: use footer from settings (#4689)

---
 apps/directory/src/App.vue                    |  65 ++++-----
 apps/directory/src/components/Footer.vue      | 128 ------------------
 .../configuration/LandingpageEditor.vue       |   6 +-
 .../directory/src/functions/bookmarkMapper.ts |  23 ++--
 apps/directory/src/router/index.js            |  15 +-
 apps/directory/src/stores/settingsStore.js    |  65 +++++----
 .../src/views/ConfigurationScreen.vue         |   1 -
 apps/directory/tests/hello-world.spec.ts      |   2 +-
 apps/ui/package.json                          |   2 +-
 .../java/org/molgenis/emx2/rdf/RDFTest.java   |   1 -
 10 files changed, 85 insertions(+), 223 deletions(-)
 delete mode 100644 apps/directory/src/components/Footer.vue

diff --git a/apps/directory/src/App.vue b/apps/directory/src/App.vue
index 428e7a9d92..f2fd104844 100644
--- a/apps/directory/src/App.vue
+++ b/apps/directory/src/App.vue
@@ -1,22 +1,22 @@
 <template>
   <Molgenis v-model="session" style="background-color: white">
-    <template v-if="banner" #banner>
-      <div v-html="banner"></div>
+    <template #banner>
+      <div v-html="banner" />
     </template>
     <Error />
     <RouterView @click="closeAllDropdownButtons" />
     <template #footer>
-      <Footer />
+      <div v-html="footer" />
     </template>
   </Molgenis>
 </template>
 
-<script setup>
+<script setup lang="ts">
+//@ts-expect-error
 import { Molgenis } from "molgenis-components";
-import { computed, onMounted, ref, watch } from "vue";
-import { useRoute } from "vue-router";
+import { computed, ref, watch } from "vue";
+import { LocationQuery, useRoute } from "vue-router";
 import Error from "./components/Error.vue";
-import Footer from "./components/Footer.vue";
 import { applyBookmark, createBookmark } from "./functions/bookmarkMapper";
 import { useCheckoutStore } from "./stores/checkoutStore";
 import { useFiltersStore } from "./stores/filtersStore";
@@ -24,14 +24,23 @@ import { useSettingsStore } from "./stores/settingsStore";
 
 const route = useRoute();
 const query = computed(() => route.query);
+
 const filtersStore = useFiltersStore();
 const checkoutStore = useCheckoutStore();
+const settingsStore = useSettingsStore();
+
+const banner = computed(() => settingsStore.config.banner);
+const footer = computed(() => settingsStore.config.footer);
 
-const banner = ref("");
+const session = ref({});
+
+watch(session, () => {
+  settingsStore.setSessionInformation(session.value);
+});
 
 watch(
   query,
-  (newQuery, oldQuery) => {
+  (newQuery: LocationQuery, oldQuery) => {
     if (newQuery && Object.keys(newQuery).length) {
       const remainingKeys = Object.keys(newQuery).filter(
         (key) => key !== "cart"
@@ -60,43 +69,19 @@ watch(
   },
   { immediate: true, deep: true }
 );
-onMounted(async () => {
-  const settingsStore = useSettingsStore();
-  await settingsStore.initializeConfig();
-
-  if (settingsStore.config.banner) {
-    banner.value = settingsStore.config.banner;
-  }
-});
 
-function closeAllDropdownButtons(event) {
+function closeAllDropdownButtons(event: any) {
   const allDropdownButtons = document.querySelectorAll(".dropdown-button");
-  if (event.target.id) {
-    for (const dropdownButton of allDropdownButtons) {
-      if (dropdownButton.id !== event.target.id) {
+  if (event.target?.id) {
+    allDropdownButtons.forEach((dropdownButton) => {
+      if (dropdownButton.id !== event.target?.id) {
         dropdownButton.removeAttribute("open");
       }
-    }
+    });
   } else {
-    for (const dropdownButton of allDropdownButtons) {
+    allDropdownButtons.forEach((dropdownButton) => {
       dropdownButton.removeAttribute("open");
-    }
+    });
   }
 }
 </script>
-
-<script>
-export default {
-  data() {
-    return {
-      session: {},
-    };
-  },
-  watch: {
-    session(sessionState) {
-      const settingsStore = useSettingsStore();
-      settingsStore.setSessionInformation(sessionState);
-    },
-  },
-};
-</script>
diff --git a/apps/directory/src/components/Footer.vue b/apps/directory/src/components/Footer.vue
deleted file mode 100644
index c2a101b19d..0000000000
--- a/apps/directory/src/components/Footer.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div class="container">
-    <div class="col-12>">
-      <footer class="bottom-0 p-0 w-100 text-primary-text">
-        <hr class="mt-10 mb-10" />
-        <div class="row d-flex flex-column flex-md-row">
-          <div class="col text-center mb-4 mb-md-0">
-            <a href="https://bbmri-eric.eu">
-              <img
-                width="auto"
-                height="40"
-                src="/img/bbmri-eric-logo.png"
-                alt="logo negotiator"
-              />
-            </a>
-          </div>
-          <div class="col text-center">
-            <span> Follow Us: </span>
-            <a
-              v-if="isFooterFollowUsVisible"
-              href="https://www.linkedin.com/company/bbmri-eric/mycompany"
-              class="link-dark ms-2"
-            >
-              <i class="bi bi-linkedin mr-3" />
-            </a>
-            <a
-              v-if="isFooterFollowUsVisible"
-              href="https://twitter.com/BBMRIERIC"
-              class="link-dark ms-2"
-            >
-              <i class="bi bi-twitter-x mr-3" />
-            </a>
-            <a
-              v-if="isFooterFollowUsVisible"
-              href="https://www.bbmri-eric.eu/bbmri-eric/bbmri-eric-podcast/"
-              class="link-dark ms-2"
-            >
-              <i class="bi bi-mic-fill" />
-            </a>
-            <div class="mt-2 mb-2 mb-md-0">
-              <a
-                href="https://github.com/molgenis/molgenis-emx2"
-                class="text-primary-text ps-2"
-              >
-                <i class="bi bi-github" />
-                GitHub
-              </a>
-            </div>
-
-            <div v-if="isFooterFollowUsVisible" class="mt-2 mb-2 mb-md-0">
-              <a
-                href="https://status.bbmri-eric.eu/"
-                class="text-primary-text ps-2"
-              >
-                <i class="bi bi-check-circle" />
-                BBMRI-ERIC Status page
-              </a>
-            </div>
-          </div>
-
-          <div class="col text-center">
-            <a
-              class="link-dark text-primary-text"
-              href="https://www.bbmri-eric.eu/wp-content/uploads/BBMRI-ERIC_work-program_2022-2024_DIGITAL.pdf"
-            >
-              <img
-                width="22"
-                height="22"
-                src="/img/work-programme.png"
-                alt="Work programme image"
-              />
-              Work Programme
-            </a>
-            <div v-if="isFooterFollowUsVisible" class="ms-md-3 mt-2">
-              <a
-                role="button"
-                class="btn btn-light ms-md-5 text-primary-text"
-                href="https://www.bbmri-eric.eu/news-event/"
-              >
-                Subscribe To Our Newsletter
-              </a>
-            </div>
-            <div v-if="isFooterFollowUsVisible" class="ms-md-2 mt-2">
-              <a
-                class="link-dark text-primary-text me-5"
-                href="https://www.bbmri-eric.eu/privacy-notice/"
-              >
-                Privacy Policy
-              </a>
-            </div>
-          </div>
-          <div>
-            <div class="row mt-2">
-              <div class="col text-center">
-                <p>&copy; 2024 BBMRI-ERIC</p>
-              </div>
-              <div class="col text-center text-light ms-4"></div>
-              <div class="col text-center ms-5">
-                Need help?
-                <a href="mailto:directory@helpdesk.bbmri-eric.eu">Contact us </a
-                >.
-              </div>
-            </div>
-          </div>
-        </div>
-      </footer>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-const isFooterFollowUsVisible = ref<boolean>(true);
-</script>
-
-<style scoped>
-a {
-  text-decoration: none;
-}
-.row > * {
-  flex-shrink: 0;
-  width: 100%;
-  max-width: 100%;
-  padding-right: calc(var(--bs-gutter-x) * 0.5);
-  padding-left: calc(var(--bs-gutter-x) * 0.5);
-  margin-top: var(--bs-gutter-y);
-}
-</style>
diff --git a/apps/directory/src/components/configuration/LandingpageEditor.vue b/apps/directory/src/components/configuration/LandingpageEditor.vue
index 4515081846..1733ad16b5 100644
--- a/apps/directory/src/components/configuration/LandingpageEditor.vue
+++ b/apps/directory/src/components/configuration/LandingpageEditor.vue
@@ -10,9 +10,9 @@
           @change="save"
           v-model="newConfig.landingpage.enabled"
         />
-        <label class="form-check-label" for="landingpageEnabled"
-          >Landingpage enabled</label
-        >
+        <label class="form-check-label" for="landingpageEnabled">
+          Landingpage enabled
+        </label>
       </div>
       <div class="form-group">
         <label for="landingpageHeaderInput">Landingpage header</label>
diff --git a/apps/directory/src/functions/bookmarkMapper.ts b/apps/directory/src/functions/bookmarkMapper.ts
index 044db5d3db..d8644541b3 100644
--- a/apps/directory/src/functions/bookmarkMapper.ts
+++ b/apps/directory/src/functions/bookmarkMapper.ts
@@ -1,13 +1,14 @@
+import { LocationQuery } from "vue-router";
+import useErrorHandler from "../composables/errorHandler";
 import router from "../router";
-import { useFiltersStore } from "../stores/filtersStore";
-import { useCollectionStore } from "../stores/collectionStore";
 import { labelValuePair, useCheckoutStore } from "../stores/checkoutStore";
-import useErrorHandler from "../composables/errorHandler";
+import { useCollectionStore } from "../stores/collectionStore";
+import { useFiltersStore } from "../stores/filtersStore";
 let bookmarkApplied = false;
 
 const { setError } = useErrorHandler();
 
-export async function applyBookmark(watchedQuery: Record<string, string>) {
+export async function applyBookmark(watchedQuery: LocationQuery) {
   if (bookmarkApplied) {
     bookmarkApplied = false;
     return;
@@ -23,11 +24,11 @@ export async function applyBookmark(watchedQuery: Record<string, string>) {
 
   /**  negotiator token */
   if (watchedQuery.nToken) {
-    checkoutStore.nToken = watchedQuery.nToken;
+    checkoutStore.nToken = watchedQuery.nToken as string;
   }
 
   if (watchedQuery.cart) {
-    const decoded = decodeURIComponent(watchedQuery.cart);
+    const decoded = decodeURIComponent(watchedQuery.cart as string);
     const cartIdString = atob(decoded);
     const cartIds = cartIdString.split(",");
     const missingCollections =
@@ -52,9 +53,9 @@ export async function applyBookmark(watchedQuery: Record<string, string>) {
   /** we load the filters, grab the names, so we can loop over it to map the selections */
   const filters = Object.keys(filtersStore.facetDetails);
   if (watchedQuery.matchAll) {
-    const matchAllFilters = decodeURIComponent(watchedQuery.matchAll).split(
-      ","
-    );
+    const matchAllFilters = decodeURIComponent(
+      watchedQuery.matchAll as string
+    ).split(",");
     for (const filterName of matchAllFilters) {
       filtersStore.updateFilterType(filterName, "all", true);
     }
@@ -62,7 +63,9 @@ export async function applyBookmark(watchedQuery: Record<string, string>) {
 
   for (const filterName of filters) {
     if (watchedQuery[filterName]) {
-      const filtersToAdd: string = decodeURIComponent(watchedQuery[filterName]);
+      const filtersToAdd: string = decodeURIComponent(
+        watchedQuery[filterName] as string
+      );
 
       if (filterName === "Diagnosisavailable") {
         const diagnosisFacetDetails = filtersStore.facetDetails[filterName];
diff --git a/apps/directory/src/router/index.js b/apps/directory/src/router/index.js
index 42c6401351..755f1ab82c 100644
--- a/apps/directory/src/router/index.js
+++ b/apps/directory/src/router/index.js
@@ -1,14 +1,14 @@
 import { createRouter, createWebHashHistory } from "vue-router";
-import HomeView from "../views/HomeView.vue";
+import { useSettingsStore } from "../stores/settingsStore";
 import AboutView from "../views/AboutView.vue";
-import Landingpage from "../views/Landingpage.vue";
 import BiobankReport from "../views/BiobankReport.vue";
-import ServiceReport from "../views/ServiceReport.vue";
-import NetworkReport from "../views/NetworkReport.vue";
 import CollectionReport from "../views/CollectionReport.vue";
-import StudyReport from "../views/StudyReport.vue";
 import ConfigurationScreen from "../views/ConfigurationScreen.vue";
-import { useSettingsStore } from "../stores/settingsStore";
+import HomeView from "../views/HomeView.vue";
+import Landingpage from "../views/Landingpage.vue";
+import NetworkReport from "../views/NetworkReport.vue";
+import ServiceReport from "../views/ServiceReport.vue";
+import StudyReport from "../views/StudyReport.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -47,9 +47,8 @@ const router = createRouter({
     {
       path: "/configuration",
       component: ConfigurationScreen,
-      beforeEnter: async (_to, _from, next) => {
+      beforeEnter: (_to, _from, next) => {
         const settingsStore = useSettingsStore();
-        await settingsStore.initializeConfig();
         if (settingsStore.showSettings) {
           next();
         } else {
diff --git a/apps/directory/src/stores/settingsStore.js b/apps/directory/src/stores/settingsStore.js
index 0aa3dec3ff..ba2e4b7133 100644
--- a/apps/directory/src/stores/settingsStore.js
+++ b/apps/directory/src/stores/settingsStore.js
@@ -17,14 +17,11 @@ import initialStudyColumns from "../property-config/initialStudyColumns";
 const { setError } = useErrorHandler();
 
 export const useSettingsStore = defineStore("settingsStore", () => {
-  let session = ref({});
-  let configUpdateStatus = ref(0);
-
+  const session = ref({});
+  const configUpdateStatus = ref(0);
   const currentPage = ref(1);
-
-  let configurationFetched = ref(false);
-
-  let config = ref({
+  const configurationFetched = ref(false);
+  const config = ref({
     language: "en",
     graphqlEndpoint: "graphql",
     negotiatorType: "eric-negotiator",
@@ -39,13 +36,32 @@ export const useSettingsStore = defineStore("settingsStore", () => {
     landingpage: initialLandingpage,
     pageSize: 12,
     i18n,
-    banner: undefined, //"<div style='background-color: #72f6b2; padding: 10px; text-align: center;'>I am in a banner</div>"
+    banner: ``,
+    footer: ``,
+  });
+
+  const showSettings = computed(() => {
+    return session.value.roles?.includes("Manager");
+  });
+
+  const uiText = computed(() => {
+    return config.value.i18n[config.value.language];
   });
 
+  initializeConfig();
+
   async function initializeConfig() {
-    let response;
+    if (configurationFetched.value) return;
+
+    await loadConfig();
+  }
+
+  async function loadConfig() {
+    configurationFetched.value = false;
+
+    let configPromise;
     try {
-      response = await new QueryEMX2(config.value.graphqlEndpoint)
+      configPromise = new QueryEMX2(config.value.graphqlEndpoint)
         .table("_settings")
         .select(["key", "value"])
         .execute();
@@ -54,35 +70,23 @@ export const useSettingsStore = defineStore("settingsStore", () => {
       return;
     }
 
+    const response = await configPromise;
+
     const savedDirectoryConfig = response._settings.find(
       (setting) => setting.key === "directory"
     );
 
-    if (savedDirectoryConfig && savedDirectoryConfig.value) {
+    if (savedDirectoryConfig?.value) {
       config.value = JSON.parse(decodeURI(savedDirectoryConfig.value));
     }
 
     configurationFetched.value = true;
   }
 
-  /** for when user logs-in / out */
   function setSessionInformation(newSession) {
     session.value = newSession;
   }
 
-  const showSettings = computed(() => {
-    return session.value.roles?.includes("Manager");
-  });
-
-  const uiText = computed(() => {
-    return config.value.i18n[config.value.language];
-  });
-
-  async function GetApplicationConfiguration() {
-    /** Fetch the latest config, if applicable */
-    await initializeConfig();
-    return config.value;
-  }
   async function SaveApplicationConfiguration(configuration) {
     configUpdateStatus.value = 0;
 
@@ -91,7 +95,9 @@ export const useSettingsStore = defineStore("settingsStore", () => {
     ).saveSetting("directory", configuration);
 
     configUpdateStatus.value = updateResult.includes("success") ? 204 : 401;
+    loadConfig();
   }
+
   async function UpdateConfig(newConfig) {
     config.value = newConfig;
   }
@@ -99,14 +105,13 @@ export const useSettingsStore = defineStore("settingsStore", () => {
   return {
     config,
     configurationFetched,
+    configUpdateStatus,
     currentPage,
+    showSettings,
+    uiText,
     initializeConfig,
-    UpdateConfig,
-    GetApplicationConfiguration,
     setSessionInformation,
-    showSettings,
     SaveApplicationConfiguration,
-    configUpdateStatus,
-    uiText,
+    UpdateConfig,
   };
 });
diff --git a/apps/directory/src/views/ConfigurationScreen.vue b/apps/directory/src/views/ConfigurationScreen.vue
index 12fb9c403b..0bde4da47e 100644
--- a/apps/directory/src/views/ConfigurationScreen.vue
+++ b/apps/directory/src/views/ConfigurationScreen.vue
@@ -244,7 +244,6 @@ watch(configUpdateStatus, (newStatus) => {
 
 onMounted(async () => {
   editorType.value = views.ui;
-  await settingsStore.GetApplicationConfiguration();
 });
 
 function getFacetTitle(index: number) {
diff --git a/apps/directory/tests/hello-world.spec.ts b/apps/directory/tests/hello-world.spec.ts
index cbe55b966a..41a07e948a 100644
--- a/apps/directory/tests/hello-world.spec.ts
+++ b/apps/directory/tests/hello-world.spec.ts
@@ -8,5 +8,5 @@ test("should run playwright", async ({ page }) => {
 
 test("directory page should load", async ({ page }) => {
   await page.goto(getAppRoute());
-  await expect(page.getByRole("paragraph")).toContainText("© 2024 BBMRI-ERIC");
+  expect(await page.title()).toBe("BBMRI-ERIC Directory");
 });
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 2ecf96191d..5387de097b 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@pinia/nuxt": "0.5.1",
     "pinia": "2.1.7",
-    "vue":"3.5.13",
+    "vue": "3.5.13",
     "vue-router": "4.4.3"
   },
   "license": "LGPL-3.0",
diff --git a/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/RDFTest.java b/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/RDFTest.java
index 753bb6966e..bff52f3ab1 100644
--- a/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/RDFTest.java
+++ b/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/RDFTest.java
@@ -1285,7 +1285,6 @@ void refBackInRdf() throws IOException {
   void testRefLinkWorks() throws IOException {
     var handler = new InMemoryRDFHandler() {};
     assertDoesNotThrow(() -> getAndParseRDF(Selection.of(refLinkTest), handler));
-
   }
 
   /**