make new localstorage function file

src/boot/lang.js

@@ -1,10 +1,10 @@
 import { createI18n } from 'vue-i18n';
 import yaml from 'js-yaml';
+import { getLocalLanguage } from 'src/localstorage/localStorage';
 
 export const lang = [];
 
 const systemLocale = navigator.language || 'en-US';
-const savedLang = localStorage.getItem('lang');
 
 const messages = {};
 const modules = import.meta.glob('src/assets/lang/*.yaml', {
@@ -39,7 +39,7 @@ function resolveLocale(desiredLocale) {
   return messages['en'] ? 'en' : Object.keys(messages)[0];
 }
 
-const selectedLocale = resolveLocale(savedLang || systemLocale);
+const selectedLocale = resolveLocale(getLocalLanguage() || systemLocale);
 
 const i18n = createI18n({
   legacy: false, // Composition API mode

src/boot/quasar-global.ts

@@ -3,44 +3,29 @@ import { setQuasarInstance } from 'src/vueLib/utils/globalQ';
 import { setRouterInstance } from 'src/vueLib/utils/globalRouter';
 import { databaseName, logo, appName } from 'src/vueLib/models/settings';
 import { Dark } from 'quasar';
+import { getLocalDarkMode, getLocalSettings } from 'src/localstorage/localStorage';
 
 export default boot(({ app, router }) => {
   setRouterInstance(router); // store router for global access
   const $q = app.config.globalProperties.$q;
   setQuasarInstance($q);
 
-  Dark.set(localStorage.getItem('mode') === 'true');
+  Dark.set(getLocalDarkMode());
 
-  logo.value = localStorage.getItem('icon') ?? logo.value;
-  appName.value = localStorage.getItem('appName') ?? appName.value;
-  databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
-  let primaryColor = localStorage.getItem('primaryColor');
-  if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {
-    primaryColor = null;
-  }
-  let primaryColorText = localStorage.getItem('primaryColorText');
-  if (
-    primaryColorText == null ||
-    primaryColorText === 'undefined' ||
-    primaryColorText.trim() === ''
-  ) {
-    primaryColorText = null;
-  }
-  let secondaryColor = localStorage.getItem('secondaryColor');
-  if (secondaryColor == null || secondaryColor === 'undefined' || secondaryColor.trim() === '') {
-    secondaryColor = null;
-  }
-  let secondaryColorText = localStorage.getItem('secondaryColorText');
-  if (
-    secondaryColorText == null ||
-    secondaryColorText === 'undefined' ||
-    secondaryColorText.trim() === ''
-  ) {
-    secondaryColorText = null;
-  }
+  const settings = getLocalSettings();
 
-  document.documentElement.style.setProperty('--q-primary', primaryColor ?? '#1976d2');
-  document.documentElement.style.setProperty('--q-primary-text', primaryColorText ?? '#ffffff');
-  document.documentElement.style.setProperty('--q-secondary', secondaryColor ?? '#26a69a');
-  document.documentElement.style.setProperty('--q-secondary-text', secondaryColorText ?? '#ffffff');
+  logo.value = settings.icon ?? logo.value;
+  appName.value = settings.appName ?? appName.value;
+  databaseName.value = settings.databaseName ?? databaseName.value;
+
+  document.documentElement.style.setProperty('--q-primary', settings.primaryColor ?? '#1976d2');
+  document.documentElement.style.setProperty(
+    '--q-primary-text',
+    settings.primaryColorText ?? '#ffffff',
+  );
+  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor ?? '#26a69a');
+  document.documentElement.style.setProperty(
+    '--q-secondary-text',
+    settings.secondaryColorText ?? '#ffffff',
+  );
 });

src/boot/restore-route.js

@@ -1,6 +1,7 @@
 import { boot } from 'quasar/wrappers';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { appApi } from './axios';
+import { getLocalLastRoute, setLocalLastRoute } from 'src/localstorage/localStorage';
 
 export default boot(async ({ router }) => {
   const userStore = useUserStore();
@@ -14,7 +15,7 @@ export default boot(async ({ router }) => {
 
   // Restore logic after router is ready but before navigation
   router.isReady().then(() => {
-    const lastRoute = localStorage.getItem('lastRoute');
+    const lastRoute = getLocalLastRoute();
     const currentPath = router.currentRoute.value.fullPath;
 
     // Restore only if:
@@ -34,7 +35,7 @@ export default boot(async ({ router }) => {
   router.afterEach((to) => {
     // Don't save login page as "last route"
     if (to.path !== '/login' && to.path !== '/') {
-      localStorage.setItem('lastRoute', to.fullPath);
+      setLocalLastRoute(to.fullPath);
     }
   });
 });

src/localstorage/localStorage.ts

@@ -0,0 +1,93 @@
+import { Dark } from 'quasar';
+import type { Settings } from 'src/vueLib/models/settings';
+import { updateOrAddObject } from 'src/vueLib/utils/utils';
+import { ref } from 'vue';
+
+export function setLocalSettings(settings: Settings) {
+  localStorage.setItem('icon', settings.icon);
+  localStorage.setItem('appName', settings.appName);
+  localStorage.setItem('databaseName', settings.databaseName);
+  localStorage.setItem('primaryColor', settings.primaryColor);
+  localStorage.setItem('primaryColorText', settings.primaryColorText);
+  localStorage.setItem('secondaryColor', settings.secondaryColor);
+  localStorage.setItem('secondaryColorText', settings.secondaryColorText);
+}
+
+export function getLocalSettings(): Settings {
+  return <Settings>{
+    icon: localStorage.getItem('icon'),
+    appName: localStorage.getItem('appName'),
+    databaseName: localStorage.getItem('databaseName'),
+    primaryColor: localStorage.getItem('primaryColor'),
+    primaryColorText: localStorage.getItem('primaryColorText'),
+    secondaryColor: localStorage.getItem('secondaryColor'),
+    secondaryColorText: localStorage.getItem('secondaryColorText'),
+  };
+}
+
+export function clearLocalStorage() {
+  localStorage.removeItem('icon');
+  localStorage.removeItem('appName');
+  localStorage.removeItem('databaseName');
+  localStorage.removeItem('primaryColor');
+  localStorage.removeItem('primaryColorText');
+  localStorage.removeItem('secondaryColor');
+  localStorage.removeItem('secondaryColorText');
+  localStorage.removeItem('lastRoute');
+  localStorage.removeItem('mode');
+  localStorage.removeItem('lang');
+}
+
+export function setLocalDarkMode() {
+  localStorage.setItem('mode', String(Dark.mode));
+}
+
+export function getLocalDarkMode(): boolean {
+  return localStorage.getItem('mode') === 'true';
+}
+
+export function setLocalLastRoute(route: string) {
+  localStorage.setItem('lastRoute', route);
+}
+
+export function getLocalLastRoute(): string {
+  return localStorage.getItem('lastRoute') || '/members';
+}
+
+export function setLocalLanguage(language: string) {
+  localStorage.setItem('lang', language);
+}
+
+export function getLocalLanguage(): string | null {
+  return localStorage.getItem('lang');
+}
+
+type pageDefault = {
+  page: string;
+  filteredColumn: string;
+  filteredValue: string[];
+};
+
+type pageDefaults = pageDefault[];
+
+const pageDefaults = ref<pageDefaults>([]);
+
+export function setLocalPageDefaults(
+  page: string,
+  filteredColumn?: string,
+  filteredValue?: string[],
+) {
+  updateOrAddObject(
+    pageDefaults.value,
+    { page: page, filteredColumn: filteredColumn, filteredValue: filteredValue },
+    'page',
+  );
+  localStorage.setItem('pageDefaults', JSON.stringify(pageDefaults.value));
+}
+
+export function getLocalPageDefaults(page: string): pageDefault | null {
+  const defaults = localStorage.getItem('pageDefaults');
+  if (!defaults) return null;
+  pageDefaults.value = JSON.parse(defaults);
+  return pageDefaults.value.find((e) => e.page === page) || null;
+}

src/pages/LoginPage.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { getLocalLastRoute } from 'src/localstorage/localStorage';
 import LoginForm from 'src/vueLib/login/LoginForm.vue';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { nextTick, onMounted } from 'vue';
@@ -21,7 +22,6 @@ onMounted(() => {
 
 const forwardToPage = async () => {
   await nextTick();
-  const lastRoute = localStorage.getItem('lastRoute') || '/members';
-  await router.push(lastRoute);
+  await router.push(getLocalLastRoute());
 };
 </script>

src/pages/SettingsPage.vue

@@ -1,8 +1,8 @@
 <template>
+  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
+
   <div class="text-h2 flex flex-center">
     <q-card class="q-gutter-md">
-      <p class="text-center text-bold text-h3 text-primary q-pt-md">{{ $t('settings') }}</p>
-
       <div>
         <q-card class="q-ma-lg">
           <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
@@ -151,6 +151,7 @@ import { appApi } from 'src/boot/axios';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { type Settings } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import { setLocalSettings } from 'src/localstorage/localStorage';
 
 const { NotifyResponse } = useNotify();
 const colorGroup = ref(false);
@@ -190,13 +191,7 @@ function save() {
   document.documentElement.style.setProperty('--q-secondary-text', settings.secondaryColorText);
   appName.value = settings.appName;
   logo.value = settings.icon;
-  localStorage.setItem('icon', settings.icon);
-  localStorage.setItem('appName', settings.appName);
-  localStorage.setItem('databaseName', settings.databaseName);
-  localStorage.setItem('primaryColor', settings.primaryColor);
-  localStorage.setItem('primaryColorText', settings.primaryColorText);
-  localStorage.setItem('secondaryColor', settings.secondaryColor);
-  localStorage.setItem('secondaryColorText', settings.secondaryColorText);
+  setLocalSettings(settings);
 
   const tempuser = user.user;
   if (tempuser) {

src/vueLib/login/LoginMenu.vue

@@ -54,6 +54,7 @@ import { useUserStore } from './userStore';
 import { useRoute } from 'vue-router';
 import { Dark } from 'quasar';
 import { useLogin } from './useLogin';
+import { setLocalDarkMode, setLocalLanguage } from 'src/localstorage/localStorage';
 
 const userLogin = useLogin();
 const route = useRoute();
@@ -81,7 +82,7 @@ const loginText = computed(() => {
 //switch between dark and light mode and save it in localStorage
 function toggleDarkMode() {
   Dark.toggle();
-  localStorage.setItem('mode', String(Dark.mode));
+  setLocalDarkMode();
 }
 
 // opens login page if no user is logged in otherwise it serves as logout
@@ -99,6 +100,7 @@ const langSelection = ref(lang);
 // Watch for changes and update i18n locale
 watch(langSelected, (newLang) => {
   i18n.global.locale = newLang;
-  localStorage.setItem('lang', newLang);
+
+  setLocalLanguage(newLang);
 });
 </script>

src/vueLib/login/useLogin.ts

@@ -3,6 +3,7 @@ import { useUserStore } from './userStore';
 import { useNotify } from '../general/useNotify';
 import type { Settings } from '../models/settings';
 import { appName, logo } from '../models/settings';
+import { clearLocalStorage, setLocalSettings } from 'src/localstorage/localStorage';
 
 const refreshTime = 10000;
 let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -22,12 +23,7 @@ export function useLogin() {
         document.documentElement.style.setProperty('--q-primary-text', sets.primaryColorText);
         document.documentElement.style.setProperty('--q-secondary', sets.secondaryColor);
         document.documentElement.style.setProperty('--q-secondary-text', sets.secondaryColorText);
-        localStorage.setItem('icon', sets.icon);
-        localStorage.setItem('databaseName', sets.databaseName);
-        localStorage.setItem('primaryColor', sets.primaryColor);
-        localStorage.setItem('primaryColorText', sets.primaryColorText);
-        localStorage.setItem('secondaryColor', sets.secondaryColor);
-        localStorage.setItem('secondaryColorText', sets.secondaryColorText);
+        setLocalSettings(sets);
       });
 
       const resp = await appApi.get('/login/me');
@@ -49,7 +45,7 @@ export function useLogin() {
     });
 
     userStore.clearUser();
-    localStorage.clear();
+    clearLocalStorage();
     stopRefreshInterval();
   }