implemented mvt and solutions

pages/assets.vue

@@ -1,7 +1,9 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
+      <router-link to="/assets" class="button" id="assets-button" @click="defaultAssetPage()">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
+      </router-link>
     </div>
     <div id="content-body">
       <ClientSearch v-if="onAssetlist || onCustomerAssetlist" />
@@ -16,8 +18,8 @@
     </div>
   </section>
 </template>
-  
-  
+
+
 <script setup>
 import { ref } from 'vue';
 
@@ -43,6 +45,11 @@ definePageMeta({
   layout: 'default'
 })
 
+const defaultAssetPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToAssetlist')
+}
+
 const darkMode = ref(true)
 </script>
 
@@ -51,7 +58,7 @@ export default {
   name: "AssetPage",
 }
 </script>
-    
+
 <style scoped>
 * {
   box-sizing: border-box;
@@ -102,4 +109,8 @@ export default {
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
+
+.button {
+  text-decoration: none;
+}
 </style>

pages/clients.vue

@@ -16,7 +16,6 @@
   </section>
 </template>
   
-  
 <script setup>
 import { ref } from 'vue';
 

pages/maintenanceVisits.vue

@@ -31,7 +31,7 @@
       <MaintenanceVisitsTemplateTable v-if="onTemplatelist" />
       <MaintenanceVisitsTemplateTableNoClient v-if="onCustomerTemplatelist" />
       <MaintenanceVisitsTemplate v-if="onTemplate" />
-      <TemplateChecklist v-if="onTemplate" />
+      <TemplateChecklistMVT v-if="onTemplate" />
       <TemplateSearch v-if="onInstancelist" />
       <MaintenanceVisitsInstanceTable v-if="onInstancelist" />
       <MaintenanceVisitsInstance v-if="onInstance" />
@@ -48,7 +48,7 @@ import ClientSearch from "../components/ClientSearch.vue";
 import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
 import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
 import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
-import TemplateChecklist from "../components/server/TemplateChecklist.vue";
+import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
 import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
 import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";

pages/solutions.vue

@@ -1,19 +1,20 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
+      <router-link to="/solutions" class="button" id="solutions-button" @click="defaultSolutionPage()">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
+      </router-link>
     </div>
     <div id="content-body">
-      <ClientSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
-      <SolutionTable v-if="onSolutionlist"/>
-      <SolutionTableNoClient v-if="onCustomerSolutionlist"/>
-      <Solution v-if="onSolution"/>
-      <SolutionChecklist v-if="onSolution"/>
+      <ClientSearch v-if="onSolutionlist || onCustomerSolutionlist" />
+      <SolutionTable v-if="onSolutionlist" />
+      <SolutionTableNoClient v-if="onCustomerSolutionlist" />
+      <Solution v-if="onSolution" />
+      <SolutionChecklist v-if="onSolution" />
     </div>
   </section>
 </template>
-  
-  
+
 <script setup>
 import { ref } from 'vue';
 
@@ -22,17 +23,24 @@ import SolutionTable from "../components/server/SolutionTable.vue";
 import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue";
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const onSolutionlist = computed(() => store.state.onSolutionlist);
+const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
+const onSolution = computed(() => store.state.onSolution);
 
 definePageMeta({
   layout: 'default'
 })
 
-const darkMode = ref(true)
+const defaultSolutionPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToSolutionlist')
+}
 
-// to render the right components
-const onSolutionlist = ref(true)
-const onCustomerSolutionlist = ref(false)
-const onSolution = ref(false)
+const darkMode = ref(true)
 </script>
 
 <script>
@@ -40,9 +48,9 @@ export default {
   name: "AssetPage",
 }
 </script>
-    
-    
-    
+
+
+
 <style scoped>
 * {
   box-sizing: border-box;
@@ -93,4 +101,8 @@ export default {
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
+
+.button {
+  text-decoration: none;
+}
 </style>