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

38
components/server/EmployeeTable.vue
View File

@ -11,12 +11,11 @@
Username</th>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode']">ID</th>
</tr>
<tr v-for="u in userList" :key="u.id"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']">
<tr v-for="u in userList" :key="u.id" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']">
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<nuxt-link to="/employees" id="nuxt-link" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
@click="goToChosenEmployee(u.id)">
{{ u.fullName }}
</nuxt-link>
@ -24,7 +23,7 @@
<td
:class="['Username', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Username-darkmode' : 'Username-lightmode']">
<nuxt-link to="/employees" id="nuxt-link" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
@click="goToChosenEmployee(u.id)">
{{ u.username }}
</nuxt-link>
@ -45,13 +44,15 @@ import { computed } from 'vue';
// get accesss to the store
const store = useStore()
const modeChanged = computed(() => store.state.updateDarkMode);
const goToChosenEmployee = (id) => {
store.commit('setChosenEmployee', id);
store.commit('changeToEmployee');
};
const employeeFilter = computed(() => store.state.filteredByCustomer);
const darkMode = ref(true)
const darkMode = ref('')
const userList = ref([]);
//get all users
@ -81,7 +82,27 @@ const getFilteredUsersByUser = async () => {
watch(employeeFilter, getEmployees);
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
darkMode.value = true;
} else {
darkMode.value = false;
}
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
}
watch(modeChanged, getSession)
onMounted(async () => {
getSession();
await getEmployees();
});
</script>
@ -223,6 +244,13 @@ th {
#nuxt-link {
text-decoration: none;
}
.nuxt-link-darkmode {
color: white;
}
.nuxt-link-lightmode {
color: #000;
}
</style>