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

274
components/EmployeeSearch.vue
View File

@ -1,129 +1,153 @@
<template>
<section :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employee</div>
<pre v-if="!filtered"
:class="['data', 'pre-customer', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ employeeFilter }}</pre>
<input v-if="filtered" v-model="employeeFilter" @change="filterList()"
:class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
</section>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const filtered = computed(() => store.state.filtered);
const filteredTerm = computed(() => store.state.filteredByCustomer);
const employeeFilter = ref(store.state.filteredByCustomer);
const darkMode = ref(true)
// update filtered term
const updateFilterTerm = () => {
employeeFilter.value = filteredTerm.value
<section :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employee</div>
<pre v-if="!filtered"
:class="['data', 'pre-customer', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ employeeFilter }}</pre>
<input v-if="filtered" v-model="employeeFilter" @change="filterList()"
:class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
</section>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const filtered = computed(() => store.state.filtered);
const filteredTerm = computed(() => store.state.filteredByCustomer);
const employeeFilter = ref(store.state.filteredByCustomer);
const darkMode = ref('');
// update filtered term
const updateFilterTerm = () => {
employeeFilter.value = filteredTerm.value
}
const checkFiltered = () => {
if (!filtered.value) {
employeeFilter.value = ''
filterList();
}
const checkFiltered = () => {
if (!filtered.value) {
employeeFilter.value = ''
filterList();
}
}
// update the filtered term in the store
const filterList = () => {
store.commit('updateFilterbyCustomer', employeeFilter.value);
}
watch(filteredTerm, updateFilterTerm)
watch(filtered, checkFiltered)
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
darkMode.value = true;
} else {
darkMode.value = false;
}
// update the filtered term in the store
const filterList = () => {
store.commit('updateFilterbyCustomer', employeeFilter.value);
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
watch(filteredTerm, updateFilterTerm)
watch(filtered, checkFiltered)
</script>
<script>
export default {
name: "EmployeeSearch",
};
</script>
<style scoped>
.employee-search {
display: flex;
align-items: center;
padding: 0.625em 1.875em;
gap: 1.25em;
width: 30.125em;
height: 3.125em;
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
border-radius: 0.625em;
}
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #fff;
}
.label {
width: 2.5625em;
height: 1.875em;
font-family: "Overpass";
font-style: normal;
font-weight: 400;
font-size: 0.875em;
line-height: 1.875;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}
.data {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0 0.625rem;
border-radius: 0.3125rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
letter-spacing: 5%;
font: 400 0.75rem/250% Overpass, sans-serif;
}
.pre-darkmode {
background-color: #212121;
color: #fff;
}
.pre-lightmode {
background-color: #EBEBEB;
color: #000;
}
.input-customer {
border: none;
margin-left: 1rem;
}
.pre-customer {
margin-left: 1rem;
}
.data-darkmode {
background-color: #212121;
color: #fff;
}
.data-lightmode {
background-color: #EBEBEB;
color: #000;
}
</style>
}
watch(modeChanged, getSession)
onMounted(async () => {
await getSession();
});
</script>
<script>
export default {
name: "EmployeeSearch",
};
</script>
<style scoped>
.employee-search {
display: flex;
align-items: center;
padding: 0.625em 1.875em;
gap: 1.25em;
width: 30.125em;
height: 3.125em;
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
border-radius: 0.625em;
}
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #fff;
}
.label {
width: 2.5625em;
height: 1.875em;
font-family: "Overpass";
font-style: normal;
font-weight: 400;
font-size: 0.875em;
line-height: 1.875;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}
.data {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0 0.625rem;
border-radius: 0.3125rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
letter-spacing: 5%;
font: 400 0.75rem/250% Overpass, sans-serif;
}
.pre-darkmode {
background-color: #212121;
color: #fff;
}
.pre-lightmode {
background-color: #EBEBEB;
color: #000;
}
.input-customer {
border: none;
margin-left: 1rem;
}
.pre-customer {
margin-left: 1rem;
}
.data-darkmode {
background-color: #212121;
color: #fff;
}
.data-lightmode {
background-color: #EBEBEB;
color: #000;
}
</style>