finished customer pages

pages/customers.vue

@@ -1,17 +1,20 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
+      <router-link to="/customers" class="button" id="customers-button" @click="defaultCustomerPage()">
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
+      </router-link>
     </div>
     <div id="content-body">
       <CustomerTable v-if="onCustomerlist" />
       <Customer v-if="onCustomer" />
-      <CustomerQuickAccess v-if="onCustomer" />
-      <CustomerEmployeeList v-if="onEmployeelist" />
-      <CustomerEmployee v-if="onEmployee" />
+      <!-- <CustomerQuickAccess v-if="onCustomer" /> -->
+      <ClientSearch v-if="onCustomerEmployeelist || onDepartmentlist" />
+      <CustomerEmployeeList v-if="onCustomerEmployeelist" />
+      <CustomerEmployee v-if="onCustomerEmployee" />
       <CustomerDepartmentList v-if="onDepartmentlist" />
       <CustomerDepartment v-if="onDepartment" />
-      <CustomerDepartmentEmployeeList v-if="onDepartment" />
+      <CustomerDepartmentEmployeeList v-if="onDepartment && !addBool" />
     </div>
   </section>
 </template>
@@ -22,6 +25,7 @@ import { ref, onMounted, watch } from 'vue';
 import CustomerTable from "../components/server/CustomerTable.vue";
 import Customer from "../components/server/Customer.vue";
 import CustomerQuickAccess from "../components/server/CustomerQuickAccess.vue";
+import ClientSearch from "../components/ClientSearch.vue";
 import CustomerEmployeeList from "../components/server/CustomerEmployeeList.vue";
 import CustomerEmployee from "../components/server/CustomerEmployee.vue";
 import CustomerDepartmentList from '~/components/server/CustomerDepartmentList.vue';
@@ -31,6 +35,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const addBool = computed(() => store.state.new);
+
+const onCustomerlist = computed(() => store.state.onCustomerlist);
+const onCustomer = computed(() => store.state.onCustomer);
+const onCustomerEmployeelist = computed(() => store.state.onCustomerEmployeelist);
+const onCustomerEmployee = computed(() => store.state.onCustomerEmployee);
+const onDepartmentlist = computed(() => store.state.onDepartmentlist);
+const onDepartment = computed(() => store.state.onDepartment);
 const modeChanged = computed(() => store.state.updateDarkMode);
 
 definePageMeta({
@@ -38,15 +50,12 @@ definePageMeta({
   title: 'Customers'
 })
 
-const loggedInUserDarkModeBoolean = ref('');
+const defaultCustomerPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToCustomerlist')
+}
 
-// to render the right components
-const onCustomerlist = ref(true)
-const onCustomer = ref(true)
-const onEmployeelist = ref(true)
-const onEmployee = ref(true)
-const onDepartmentlist = ref(true)
-const onDepartment = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
 
 const getSession = async () => {
   const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -106,9 +115,14 @@ export default {
   height: 3.125rem;
 }
 
+.button {
+  text-decoration: none;
+}
+
 #page-name {
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
+  text-decoration: underline;
 }
 
 .h1-darkmode {

pages/home.vue

@@ -6,7 +6,7 @@
     </div>
     <div id="content-body">
       <Dashboard />
-      <QuickAccess />
+      <!-- <QuickAccess /> -->
     </div>
   </section>
 </template>