feat: use footer from settings (#4689)

molgenis · Feb 12, 2025 · 32c4315 · 32c4315
1 parent a420ed1
commit 32c4315
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 223 deletions.
diff --git a/apps/directory/src/App.vue b/apps/directory/src/App.vue
@@ -1,37 +1,46 @@
 <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";
 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
diff --git 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
@@ -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,17 +53,19 @@ 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);
     }
   }
 
   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
@@ -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 {