some tg tests
This commit is contained in:
Vladimir Voronin
@@ -2,15 +2,15 @@
|
||||
|
||||
<div id="app" class="flex flex-col h-screen bg-gray-100 gap-4">
|
||||
<!-- MenuBar всегда фиксирован сверху -->
|
||||
<MenuBar class="w-full sticky invisible lg:visible top-0 z-10"/>
|
||||
<MenuBar class="w-full sticky hidden lg:block top-0 z-10"/>
|
||||
<ToolBar class=" fixed visible lg:invisible bottom-0 z-10"/>
|
||||
|
||||
<!-- Контентная часть заполняет оставшееся пространство -->
|
||||
<div class="flex-grow ">
|
||||
|
||||
<router-view class="w-full h-full "/>
|
||||
<router-view class="w-full h-full mt-4 lg:mt-0"/>
|
||||
</div>
|
||||
<OverlayView/>
|
||||
<OverlayView class="w-full sticky invisible lg:visible top-0 z-10"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -84,10 +84,17 @@ onMounted(() => {
|
||||
@close-drawer="closeDrawer()"
|
||||
/>
|
||||
|
||||
<SpeedDial :model="items" :radius="120" type="quarter" direction="up"
|
||||
class=" mb-10 h-fit !items-end me-10 hidden lg:!fixed" :style="{ right: 0, bottom: 0 }"
|
||||
pt:menuitem="m-2">
|
||||
<template #item="{ item, toggleCallback }" >
|
||||
<SpeedDial
|
||||
:model="items"
|
||||
:radius="120"
|
||||
type="quarter"
|
||||
direction="up"
|
||||
class="lg:flex lg:fixed hidden mb-10 h-fit !items-end me-10"
|
||||
:style="{ position: 'fixed', right: 0, bottom: 0 }"
|
||||
pt:menuitem="m-2">
|
||||
|
||||
|
||||
<template #item="{ item, toggleCallback }" >
|
||||
<div
|
||||
class="flex flex-row items-start gap-2 justify-between right-10 p-2 border bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
|
||||
@click="toggleCallback"> <!-- Установлена минимальная ширина -->
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class=" items-center toolbar-example justify-between " style="width: 80%; left:10%; bottom: 1.5rem;">
|
||||
<div
|
||||
class=" items-center toolbar-example justify-between bg-white outline rounded-xl outline-gray-300 shadow-lg h-fit fixed"
|
||||
style="width: 90%; left:5%; bottom: 1.5rem;">
|
||||
<TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
|
||||
|
||||
|
||||
@@ -8,69 +10,90 @@
|
||||
|
||||
@close-drawer="closeDrawer()"
|
||||
/>
|
||||
<Toolbar class="flex flex-row ">
|
||||
<!-- <template #start>-->
|
||||
<!-- <!– Кнопка "Edit" слева –>-->
|
||||
<!-- <Button label="Edit" icon="pi pi-pencil" class="p-button-text" @click="onEditClick"/>-->
|
||||
<!-- </template>-->
|
||||
<template #center >
|
||||
<!-- Заголовок по центру -->
|
||||
<div class="!flex flex-row !gap-5">
|
||||
<router-link to="/budgets">
|
||||
<Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Бюджеты" icon-pos="top" />
|
||||
<div class="flex flex-row rounded-full px-2 justify-between overflow-x">
|
||||
<div class="flex flex-col gap-2 p-2">
|
||||
<router-link to="/budgets" class="items-center flex flex-col gap-2">
|
||||
<i class="pi pi-briefcase text-2xl" style="font-size: 1.5rem"></i>
|
||||
<p>Бюджеты</p>
|
||||
</router-link>
|
||||
<router-link to="/transactions">
|
||||
<Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Транзакции" icon-pos="top" />
|
||||
</router-link>
|
||||
<router-link to="/settings">
|
||||
<Button icon="pi pi-plus" class="p-button-text !p-0 !gap-0" @click="toggleCallback " label="Настройки" icon-pos="top" />
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<template #end>
|
||||
<!-- Кнопка "Add" справа -->
|
||||
|
||||
<SpeedDial :model="items" :radius="120" type="quarter" direction="up"
|
||||
class=" mb-10 h-fit !items-end me-10" :style="{ position: 'fixed' }"
|
||||
pt:menuitem="m-2">
|
||||
<template #button="{ toggleCallback }">
|
||||
<Button icon="pi pi-plus" class="p-button-text" @click="toggleCallback" label="Создать" icon-pos="top" />
|
||||
</template>
|
||||
<template #item="{ item, toggleCallback }">
|
||||
<div
|
||||
class="flex flex-row items-start gap-2 justify-between right-10 p-2 border bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
|
||||
@click="toggleCallback"> <!-- Установлена минимальная ширина -->
|
||||
|
||||
<span>{{ item.label }}</span>
|
||||
<span :class="item.icon"></span>
|
||||
</div>
|
||||
</template>
|
||||
</SpeedDial>
|
||||
|
||||
|
||||
</template>
|
||||
<div class="flex flex-col-reverse fixed bottom-6">
|
||||
<p>hui</p>
|
||||
<p>hui</p>
|
||||
<p>hui</p>
|
||||
<p>hui</p>
|
||||
<p>hui</p>
|
||||
</div>
|
||||
</Toolbar>
|
||||
<div class="flex flex-col gap-2 p-2">
|
||||
<router-link to="/transactions" class="items-center flex flex-col gap-2">
|
||||
<i class="pi pi-wallet text-2xl" style="font-size: 1.5rem"></i>
|
||||
<p>Транзакции</p>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class=" flex-col gap-2 p-2 hidden sm:flex">
|
||||
<router-link to="/settings" class="items-center flex flex-col gap-2">
|
||||
<i class="pi pi-check text-2xl" style="font-size: 1.5rem"></i>
|
||||
<p>Настройки</p>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Создать с подменю -->
|
||||
<div class="relative flex-col gap-2 p-2 items-center hidden sm:flex" @click="showSubmenu = !showSubmenu"
|
||||
@mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">
|
||||
<!-- <router-link to="/transactions/create" class="items-center flex flex-col gap-2">-->
|
||||
<i class="pi pi-cog text-2xl" style="font-size: 1.5rem"></i>
|
||||
<p>Создать</p>
|
||||
<!-- </router-link>-->
|
||||
|
||||
<!-- Подменю для Создать -->
|
||||
<div v-if="showSubmenu" class="absolute bottom-full right-0 mb-2 w-48 p-2 bg-white shadow-lg rounded-lg z-50">
|
||||
<div class="flex flex-col gap-2 items-start">
|
||||
<button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">
|
||||
<p>Создать текущую</p>
|
||||
</button>
|
||||
<button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">
|
||||
<p> Создать плановый расход</p>
|
||||
</button>
|
||||
<button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">
|
||||
Создать плановое поступление
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-col gap-2 p-2 items-center flex sm:hidden" @click="showSubmenu = !showSubmenu"
|
||||
@mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">
|
||||
<!-- <router-link to="/transactions/create" class="items-center flex flex-col gap-2">-->
|
||||
<i class="pi pi-bars text-2xl" style="font-size: 1.5rem"></i>
|
||||
<p>Меню</p>
|
||||
<!-- </router-link>-->
|
||||
|
||||
<!-- Подменю для Создать -->
|
||||
<div v-if="showSubmenu" class="absolute bottom-full right-0 mb-2 w-48 p-2 bg-white shadow-lg rounded-lg z-50">
|
||||
<div class="flex flex-col-reverse gap-2 items-start">
|
||||
<button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">
|
||||
<p>Создать текущую</p>
|
||||
</button>
|
||||
<button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">
|
||||
<p class="text-left"> Создать плановый расход</p>
|
||||
</button>
|
||||
<button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">
|
||||
<p class="text-left">Создать плановое поступление</p>
|
||||
</button>
|
||||
<router-link to="/settings" class="items-center flex flex-col gap-2 p-2">
|
||||
<!-- <i class="pi pi-check text-2xl" style="font-size: 1.5rem"></i>-->
|
||||
<p>Настройки</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref} from 'vue';
|
||||
import Toolbar from 'primevue/toolbar';
|
||||
import Button from 'primevue/button';
|
||||
import SpeedDial from "primevue/speeddial";
|
||||
import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
|
||||
import {TransactionType} from "@/models/Transaction";
|
||||
import {CategoryType} from "@/models/Category";
|
||||
import {useRoute} from "vue-router";
|
||||
|
||||
const showSubmenu = ref(false);
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
@@ -30,11 +30,11 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="loading" class="flex flex-row mt-40">
|
||||
<div v-if="loading" class="flex flex-row ">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else class="">
|
||||
<div class="flex flex-col mt-40 bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
|
||||
<div class="flex flex-col bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
|
||||
<div class="flex flex-row items-center min-w-fit justify-between">
|
||||
<p class="text-2xl font-bold">Categories</p>
|
||||
<router-link to="/settings/categories">
|
||||
|
||||
@@ -27,11 +27,11 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="loading" class="flex flex-row mt-40">
|
||||
<div v-if="loading" class="flex flex-row ">
|
||||
Loading...
|
||||
</div>
|
||||
<div v-else class="">
|
||||
<div class="flex flex-col mt-40 bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
|
||||
<div class="flex flex-col bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
|
||||
<div class="flex flex-row items-center min-w-fit justify-between">
|
||||
<p class="text-2xl font-bold">Recurrent operations</p>
|
||||
<router-link to="/settings/recurrents">
|
||||
|
||||
@@ -7,8 +7,9 @@ import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue
|
||||
<template>
|
||||
|
||||
<div class="flex flex-col h-full px-4 ">
|
||||
<h2 class="text-4xl font-bold ">Monthly Budgets</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 ">
|
||||
<h2 class="text-4xl font-bold ">Настройки</h2>
|
||||
test
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 items-start ">
|
||||
<CategorySettingView />
|
||||
<RecurrentSettingView />
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@ const deleteCategory = () => {
|
||||
<p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
|
||||
<div class="flex flex-col items-start justify-items-start w-full">
|
||||
<p class="font-bold">{{ category.name }}</p>
|
||||
<p class="font-light">{{ category.description }}</p>
|
||||
<p class="font-light line-clamp-1">{{ category.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row items-center p-x-4 gap-2 ">
|
||||
|
||||
Reference in New Issue
Block a user