92 lines
3.1 KiB
Vue
92 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
|
|
import CategorySettingView from "@/components/settings/CategorySettingView.vue";
|
|
import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue";
|
|
|
|
import {onMounted, ref} from "vue";
|
|
import Divider from "primevue/divider";
|
|
import CategoriesList from "@/components/settings/categories/CategoriesList.vue";
|
|
import RecurrentList from "@/components/settings/recurrent/RecurrentList.vue";
|
|
import CommonSettings from "@/components/settings/CommonSettings.vue";
|
|
|
|
const selectedModeCode = ref("common")
|
|
|
|
const selectMode = (mode: string) => {
|
|
localStorage.setItem("selectedSettingPage", mode);
|
|
selectedModeCode.value = mode;
|
|
}
|
|
|
|
onMounted(() => {
|
|
const localStorageMode = localStorage.getItem("selectedSettingPage");
|
|
if (localStorageMode) {
|
|
selectedModeCode.value = localStorageMode;
|
|
} else selectedModeCode.value = "common";
|
|
})
|
|
|
|
|
|
const pages = ref([
|
|
{
|
|
"code": "common",
|
|
"title": "Общие",
|
|
"icon": "pi pi-cog"
|
|
},
|
|
{
|
|
"code": "categories",
|
|
"title": "Категории",
|
|
"icon": "pi pi-bars"
|
|
},
|
|
{
|
|
"code": "recurrent",
|
|
"title": "Ежемесячные платежи",
|
|
"icon": "pi pi-calendar-clock"
|
|
},
|
|
{
|
|
"code": "notifications",
|
|
"title": "Уведомления",
|
|
"icon": "pi pi-bell"
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="flex bg-gray-100 flex-col h-full px-4 gap-4 ">
|
|
<h2 class="text-4xl font-bold ">Настройки</h2>
|
|
|
|
<div class="xl:grid xl:grid-cols-8 w-full h-full ">
|
|
<div class=" hidden xl:flex flex-row items-start justify-end col-start-2 col-span-1 ">
|
|
<ul class=" flex-col gap-1 ">
|
|
<li v-for="page in pages" :key="page.code"
|
|
class="flex flex-row gap-2 p-2 hover:bg-emerald-100 hover:text-emerald-700 hover:rounded-md items-center"
|
|
:class="selectedModeCode == page.code ? 'bg-blue-100' : ''" @click="selectMode(page.code)">
|
|
<i :class="page.icon"/>{{ page.title }}
|
|
</li>
|
|
</ul>
|
|
<Divider layout="vertical"/>
|
|
</div>
|
|
<div
|
|
class="flex xl:hidden sm:col-span-1 w-full h-fit p-2 mb-2 overflow-y-scroll outline outline-1 outline-gray-300 rounded-xl">
|
|
<ul class=" min-w-fit w-full items-start">
|
|
<li v-for="page in pages"
|
|
class=" flex flex-row gap-2 px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
|
|
:class="selectedModeCode == page.code ? '!bg-emerald-50 text-emerald-700': '' "
|
|
@click="selectMode(page.code)">
|
|
<i :class="page.icon"/>{{ page.title }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class=" flex flex-col col-span-5 gap-2 justify-start justify-items-start">
|
|
<CommonSettings v-if="selectedModeCode == 'common'"/>
|
|
<CategoriesList v-else-if="selectedModeCode == 'categories'"/>
|
|
<RecurrentList v-else-if="selectedModeCode == 'recurrent'"/>
|
|
<p v-else-if="selectedModeCode == 'notifications'"
|
|
class="flex justify-items-start justify-center items-center h-screen">NOTIFICATIONS UNDER CONSTRUCTIONS</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |