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

finished customer pages

Browse Source
This commit is contained in:
selina.mail
2024-04-07 14:14:02 +02:00
parent d0b867404e
commit a02cbbb187
49 changed files with 4392 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/customers.vue
View File

@ -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 {