adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

implemented mode change

Browse Source
This commit is contained in:
selina.mail
2024-03-25 23:23:37 +01:00
parent 45a4b58f26
commit 3f88f6b821
71 changed files with 3020 additions and 1006 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pages/customers.vue
View File

@ -1,23 +1,23 @@
<template>
<section id="content">
<div id="content-header">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
</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"/>
<CustomerDepartmentList v-if="onDepartmentlist"/>
<CustomerDepartment v-if="onDepartment"/>
<CustomerDepartmentEmployeeList v-if="onDepartment"/>
<CustomerTable v-if="onCustomerlist" />
<Customer v-if="onCustomer" />
<CustomerQuickAccess v-if="onCustomer" />
<CustomerEmployeeList v-if="onEmployeelist" />
<CustomerEmployee v-if="onEmployee" />
<CustomerDepartmentList v-if="onDepartmentlist" />
<CustomerDepartment v-if="onDepartment" />
<CustomerDepartmentEmployeeList v-if="onDepartment" />
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import CustomerTable from "../components/server/CustomerTable.vue";
import Customer from "../components/server/Customer.vue";
@ -27,13 +27,18 @@ import CustomerEmployee from "../components/server/CustomerEmployee.vue";
import CustomerDepartmentList from '~/components/server/CustomerDepartmentList.vue';
import CustomerDepartment from '~/components/server/CustomerDepartment.vue';
import CustomerDepartmentEmployeeList from '~/components/server/CustomerDepartmentEmployeeList.vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
definePageMeta({
layout: 'default',
title: 'Customers'
})
const darkMode = ref(true)
const loggedInUserDarkModeBoolean = ref('');
// to render the right components
const onCustomerlist = ref(true)
@ -42,6 +47,29 @@ const onEmployeelist = ref(true)
const onEmployee = ref(true)
const onDepartmentlist = ref(true)
const onDepartment = ref(true)
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>
@ -49,8 +77,8 @@ export default {
name: "CustomersPage",
}
</script>
<style scoped>
* {
box-sizing: border-box;