implemented accounting pages

pages/issueSlips.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <router-link to="/issueSlips" class="button" id="issueSlips-button">
+      <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>
       </router-link>
       &nbsp;
@@ -20,22 +20,22 @@
       &nbsp;
       &nbsp;
       &nbsp;
-      <router-link to="/issues" class="button" id="issues-button">
+      <router-link to="/issues" class="button" id="issues-button" @click="defaultIssuePage()">
         <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
       </router-link>
     </div>
     <div id="content-body">
-      <ClientSearch v-if="onIssueSliplist || onCustomerIssueSliplist"/>
-      <IssueSlipTable v-if="onIssueSliplist"/>
-      <IssueSlipTableNoClient v-if="onCustomerIssueSliplist"/>
-      <IssueSlip v-if="onIssueSlip"/>
-      <OrderingInformation v-if="onIssueSlip"/>
-      <Accounting v-if="onIssueSlip"/>
+      <ClientSearch v-if="onIssueSliplist || onCustomerIssueSliplist" />
+      <IssueSlipTable v-if="onIssueSliplist" />
+      <IssueSlipTableNoClient v-if="onCustomerIssueSliplist" />
+      <IssueSlip v-if="onIssueSlip" />
+      <OrderingInformation v-if="onIssueSlip" />
+      <Accounting v-if="onIssueSlip" />
     </div>
   </section>
 </template>
-    
-    
+
+
 <script setup>
 import { ref } from 'vue';
 
@@ -45,6 +45,13 @@ import IssueSlipTableNoClient from "../components/server/IssueSlipTableNoClient.
 import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const onIssueSliplist = computed(() => store.state.onIssueSliplist);
+const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
+const onIssueSlip = computed(() => store.state.onIssueSlip);
 
 definePageMeta({
   layout: 'default'
@@ -52,20 +59,25 @@ definePageMeta({
 
 const darkMode = ref(true)
 
-// to render the right components
-const onIssueSliplist = ref(true)
-const onCustomerIssueSliplist = ref(false)
-const onIssueSlip = ref(false)
+const defaultIssueSlipPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToIssueSliplist')
+}
+
+const defaultIssuePage = () => {
+  store.commit('resetStore');
+  store.commit('changeToIssueItemList')
+}
 </script>
-  
+
 <script>
 export default {
   name: "IssueSlipPage",
 }
 </script>
-      
-      
-      
+
+
+
 <style scoped>
 * {
   box-sizing: border-box;