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

implemented rights and fixed some appearance bugs

Browse Source
This commit is contained in:
selina.mail
2024-03-26 22:54:13 +01:00
parent 3f88f6b821
commit 944b7d0503
19 changed files with 239 additions and 1009 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
layouts/Actionbar.vue
View File

@ -1,58 +1,65 @@
<template>
<aside
:class="['actionbar', loggedInUserDarkModeBoolean ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
@click="toggleActionbar">
<div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
id="indicator-icon" @click="toggleActionbar">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
</div>
<nav class="actions">
<button v-if="searchIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="search"
@click="toggleSearched">
<button v-if="searchIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="search" @click="toggleSearched">
<div class="icon" id="search-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Search-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Search</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Search</pre>
</Transition>
</button>
<button v-if="filterIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="filter"
@click="toggleFiltered">
<button v-if="filterIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="filter" @click="toggleFiltered">
<div class="icon" id="filter-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Filter-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
</Transition>
</button>
<button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="instances">
<button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="instances">
<div class="icon" id="instances-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Instances-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
</Transition>
</button>
<button v-if="solutionIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions"
@click="changeToSolutions">
<button v-if="solutionIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="solutions" @click="changeToSolutions">
<div class="icon" id="instances-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Instances-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
</Transition>
</button>
<button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="attachments">
<button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="attachments">
<div class="icon" id="attachments-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Attachments-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
</Transition>
</button>
<button v-if="sellIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="sell">
@ -61,66 +68,78 @@
src="/icons/actionbar-icons/Sell-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
</Transition>
</button>
<button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="archive">
<button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
id="archive">
<div class="icon" id="archive-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Archive-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
</Transition>
</button>
<button v-if="addIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
<button v-if="addIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
<div class="icon" id="new-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
</Transition>
</button>
<button v-if="addInstanceIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
<button v-if="addInstanceIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
<div class="icon" id="new-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
</Transition>
</button>
<router-link v-if="addSolutionIcon" to="/solutions" class="button"
<router-link v-if="addSolutionIcon && !loggedInUserReaderBool" to="/solutions" class="button"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
<button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution" @click="addSolution">
<button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
@click="addSolution">
<div class="icon" id="new-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
</Transition>
</button>
</router-link>
<button v-if="editIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
<button v-if="editIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
@click="toggleEditable">
<div class="icon" id="edit-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Edit-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
</Transition>
</button>
<button v-if="deleteIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete"
@click="deleteFunc">
<button v-if="deleteIcon && !loggedInUserReaderBool"
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
<div class="icon" id="delete-icon">
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Delete-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
<pre v-if="isExpanded"
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
</Transition>
</button>
</nav>
@ -147,8 +166,9 @@ const editIcon = computed(() => store.state.editIcon);
const deleteIcon = computed(() => store.state.deleteIcon);
const loggedInUserDarkModeBoolean = ref('');
const isExpanded = ref(true)
const isExpanded = ref(true);
const modeChanged = computed(() => store.state.updateDarkMode);
const loggedInUserReaderBool = ref(true);
// get accesss to the store
const store = useStore()
@ -191,20 +211,26 @@ const changeToSolutions = () => {
// watch(changeToSet, changeToSettingsPage)
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
loggedInUserDarkModeBoolean.value = true;
} else {
loggedInUserDarkModeBoolean.value = false;
}
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
loggedInUserDarkModeBoolean.value = true;
} else {
loggedInUserDarkModeBoolean.value = false;
}
const readerBool = getItem('logged-in-user-readerBool');
if (readerBool == 1) {
loggedInUserReaderBool.value = true;
} else {
loggedInUserReaderBool.value = false;
}
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
}
watch(modeChanged, getSession)

5
layouts/Navigationbar.vue
View File

@ -111,6 +111,7 @@ import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const modeChangedLocalstorage = computed(() => store.state.modeNavbar);
const loggedInUserDarkModeBoolean = ref('');
const isExpanded = ref(true);
@ -147,6 +148,9 @@ const ToggleSidebar = () => {
};
const getSession = async () => {
if (modeChangedLocalstorage.value) {
store.commit('resetModeNavbarChanged');
}
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
loggedInUserDarkModeBoolean.value = true;
@ -170,6 +174,7 @@ function getItem(item) {
}
watch(modeChanged, getSession)
watch(modeChangedLocalstorage, getSession)
onMounted(async () => {
await getSession();

3
layouts/PageHeader.vue
View File

@ -67,6 +67,9 @@ const getSession = async () => {
loggedInUserUsername.value = getItem('logged-in-user-username');
store.commit('resetLocalStorageChanged');
}
if (id.value.fullPath == '/login') {
darkMode.value = true;
}
}
const checkPath = async () => {

49
layouts/empty.vue
View File

@ -4,8 +4,8 @@
<slot />
</main>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
@ -13,32 +13,41 @@ import PageHeader from "../layouts/PageHeader.vue";
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
// const modeChanged = computed(() => store.state.updateDarkMode);
const route = useRoute()
const id = computed(() => route)
// watch(modeChanged, getSession)
const store = useStore();
const modeChangedLocalstorage = computed(() => store.state.modeLayout);
const loggedInUserDarkModeBoolean = ref('');
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
loggedInUserDarkModeBoolean.value = true;
} else {
loggedInUserDarkModeBoolean.value = false;
}
if (modeChangedLocalstorage.value) {
store.commit('resetModeLayoutChanged');
}
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
loggedInUserDarkModeBoolean.value = true;
} else {
loggedInUserDarkModeBoolean.value = false;
}
if (id.value.fullPath == '/login') {
loggedInUserDarkModeBoolean.value = true;
}
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
}
watch(modeChangedLocalstorage, getSession);
onMounted(async () => {
await getSession();
await getSession();
});
</script>
@ -46,9 +55,9 @@ onMounted(async () => {
export default {
name: "empty",
}
</script>
</script>
<style scoped>
* {
box-sizing: border-box;