implemented mode change

pages/issueSlips.vue

@@ -2,7 +2,8 @@
   <section id="content">
     <div id="content-header">
       <router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips
+        </h1>
       </router-link>
       &nbsp;
       &nbsp;
@@ -21,13 +22,12 @@
       &nbsp;
       &nbsp;
       <router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
       </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onIssueSliplist" />
       <IssueSlipTable v-if="onIssueSliplist" />
-      <!-- <IssueSlipTableNoCustomer v-if="onCustomerIssueSliplist" /> -->
       <IssueSlip v-if="onIssueSlip" />
       <OrderingInformation v-if="onIssueSlip" />
       <Accounting v-if="onIssueSlip" />
@@ -37,11 +37,9 @@
 
 
 <script setup>
-import { ref } from 'vue';
-
+import { ref, onMounted, watch } from 'vue';
 import CustomerSearch from "../components/CustomerSearch.vue";
 import IssueSlipTable from "../components/server/IssueSlipTable.vue";
-// import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCustomer.vue";
 import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
@@ -49,17 +47,16 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onIssueSliplist = computed(() => store.state.onIssueSliplist);
-// const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
 const onIssueSlip = computed(() => store.state.onIssueSlip);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
   title: 'Issue Slips'
 })
 
-const darkMode = ref(true)
-
 const defaultIssueSlipPage = () => {
   store.commit('resetStore');
   store.commit('changeToIssueSliplist')
@@ -69,6 +66,29 @@ const defaultIssuePage = () => {
   store.commit('resetStore');
   store.commit('changeToIssueItemList')
 }
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>