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

63
pages/issueItems.vue
View File

@ -2,7 +2,8 @@
<section id="content">
<div id="content-header">
<router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips
</h1>
</router-link>
&nbsp;
&nbsp;
@ -21,23 +22,23 @@
&nbsp;
&nbsp;
<router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues
</h1>
</router-link>
</div>
<div id="content-body">
<IssueStateSearch v-if="onIssueItemList" />
<IssueTable v-if="onIssueItemList"/>
<Issue v-if="onIssueItem"/>
<IssueVariants v-if="onIssueItem"/>
<IssueVariant v-if="onIssueItemVariant"/>
<IssueTable v-if="onIssueItemList" />
<Issue v-if="onIssueItem" />
<IssueVariants v-if="onIssueItem" />
<IssueVariant v-if="onIssueItemVariant" />
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
<script setup>
import { ref, onMounted, watch } from 'vue';
import IssueStateSearch from "../components/IssueStateSearch.vue";
import IssueTable from "../components/server/IssueTable.vue";
import Issue from "../components/server/Issue.vue";
@ -47,6 +48,7 @@ import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const onIssueItemList = computed(() => store.state.onIssueItemList);
const onIssueItem = computed(() => store.state.onIssueItem);
const onIssueItemVariant = computed(() => store.state.onIssueItemVariant);
@ -56,27 +58,50 @@ definePageMeta({
title: 'Issue Items'
})
const darkMode = ref(true)
const loggedInUserDarkModeBoolean = ref('');
const defaultIssueSlipPage = () => {
store.commit('resetStore');
store.commit('changeToIssueSliplist')
store.commit('resetStore');
store.commit('changeToIssueSliplist')
}
const defaultIssuePage = () => {
store.commit('resetStore');
store.commit('changeToIssueItemList')
store.commit('resetStore');
store.commit('changeToIssueItemList')
}
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>
export default {
name: "IssueItemsPage",
}
</script>
<style scoped>
* {
box-sizing: border-box;