feat: use footer from settings

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>

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>

apps/directory/src/functions/bookmarkMapper.ts

@@ -3,11 +3,12 @@ import { useFiltersStore } from "../stores/filtersStore";
 import { useCollectionStore } from "../stores/collectionStore";
 import { labelValuePair, useCheckoutStore } from "../stores/checkoutStore";
 import useErrorHandler from "../composables/errorHandler";
+import { LocationQuery } from "vue-router";
 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];

apps/directory/src/router/index.js

@@ -49,7 +49,6 @@ const router = createRouter({
       component: ConfigurationScreen,
       beforeEnter: async (_to, _from, next) => {
         const settingsStore = useSettingsStore();
-        await settingsStore.initializeConfig();
         if (settingsStore.showSettings) {
           next();
         } else {