luminic-space/app-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add category transactions modal and expandable category list to the dashboard.

Browse Source
This commit is contained in:
xds
2025-11-25 01:30:53 +03:00
parent 397175e34b
commit 203727de3e
7 changed files with 371 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/App.vue
View File

@@ -3,13 +3,13 @@ import SpaceList from "@/components/space-list/SpaceList.vue";
import Toolbar from "@/components/Toolbar.vue";
import Toast from "primevue/toast";
import ProgressSpinner from "primevue/progressspinner";
import {useSpaceStore} from "@/stores/spaceStore";
import {useToolbarStore} from "@/stores/toolbar-store";
import { useSpaceStore } from "@/stores/spaceStore";
import { useToolbarStore } from "@/stores/toolbar-store";
import router from "@/router";
import {useRoute} from "vue-router";
import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
import {useToast} from "primevue/usetoast";
import {useUserStore} from "@/stores/userStore";
import { useRoute } from "vue-router";
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useToast } from "primevue/usetoast";
import { useUserStore } from "@/stores/userStore";
const spaceStore = useSpaceStore();
const toolbarStore = useToolbarStore();
@@ -25,13 +25,13 @@ const isTelegram = computed(() => !!tgApp);
const isSpaceSelectorVisible = ref(false);
const isSpaceSelected = computed(
() => spaceStore.selectedSpaceId === undefined || isSpaceSelectorVisible.value
() => spaceStore.selectedSpaceId === undefined || isSpaceSelectorVisible.value
);
const menu = [
{name: "Dashboard", icon: "pi pi-chart-bar", link: "/", navStack: 'dashboard'},
{name: "Transactions", icon: "pi pi-list", link: "/transactions", navStack: 'transactions'},
{name: "Settings", icon: "pi pi-cog", link: "/settings", navStack: 'settings'},
{ name: "Dashboard", icon: "pi pi-chart-bar", link: "/", navStack: 'dashboard' },
{ name: "Transactions", icon: "pi pi-list", link: "/transactions", navStack: 'transactions' },
{ name: "Settings", icon: "pi pi-cog", link: "/settings", navStack: 'settings' },
];
function spaceSelected() {
@@ -124,8 +124,8 @@ onMounted(async () => {
// 🔁 следим за изменением маршрута
watch(
() => route.path,
() => setupBackButton()
() => route.path,
() => setupBackButton()
);
onBeforeUnmount(() => {
@@ -138,54 +138,43 @@ onBeforeUnmount(() => {
</script>
<template>
<Toast/>
<Toast />
<div v-if="isLoading">
<ProgressSpinner/>
<ProgressSpinner />
</div>
<div v-else>
<div v-if="!userStore.isAuthorized">
<router-view/>
<router-view />
</div>
<div v-else class="flex flex-col tg " :class="['ios', 'android'].includes(platform) ? '!pt-10' : ''">
<SpaceList v-if="isSpaceSelected && userStore.isAuthorized" @space-selected="spaceSelected"/>
<SpaceList v-if="isSpaceSelected && userStore.isAuthorized" @space-selected="spaceSelected" />
<div v-else class="flex flex-col w-full gap-4">
<div class="flex w-full flex flex-row items-end justify-end pt-2 pe-4">
<Toolbar/>
<Toolbar />
</div>
<div class="flex flex-col w-full h-full items-end px-4 gap-4 pb-6">
<router-view class=" w-full"/>
<router-view class=" w-full" />
</div>
<button
v-if="isInputFocused"
@click="blurAllInputs"
class="fixed bottom-4 right-4 z-50 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg"
>
<button v-if="isInputFocused" @click="blurAllInputs"
class="fixed bottom-4 right-4 z-50 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg">
Готово
</button>
<nav v-if="isNavVisible"
class="fixed inset-x-0 bottom-4 z-50 w-full flex justify-center items-center "
style="padding-bottom: var(--tg-content-safe-area-inset-bottom) !important;"
>
<div class="flex h-full items-center justify-between py-2 bg-white rounded-4xl px-6 w-fit shadow">
<!-- <div class="flex h-full justify-items-center items-center justify-between py-2 bg-white rounded-4xl !px-6 w-fit">-->
<router-link
v-for="item in menu"
:key="item.link"
:to="item.link"
class="flex w-fit h-full flex-col items-center gap-2 !py-2 !px-4"
:class="route.meta.navStack === item.navStack ? 'bg-green-100 rounded-2xl ' : ''"
>
<i class="!text-lg" :class="item.icon"/>
<nav v-if="isNavVisible" class="fixed bottom-4 left-1/2 -translate-x-1/2 z-50"
style="padding-bottom: var(--tg-content-safe-area-inset-bottom) !important;">
<div class="flex items-center justify-between py-2 bg-white rounded-4xl px-6 shadow">
<router-link v-for="item in menu" :key="item.link" :to="item.link"
class="flex w-fit h-full flex-col items-center gap-2 !py-2 !px-4"
:class="route.meta.navStack === item.navStack ? 'bg-green-100 rounded-2xl ' : ''">
<i class="!text-lg" :class="item.icon" />
<span class="font-medium text-gray-900">{{ item.name }}</span>
</router-link>
</div>
</nav>
<div class="flex h-16"/>
<div class="flex h-16" />
</div>
</div>
</div>