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

some tg tests

Browse Source
This commit is contained in:
Vladimir Voronin
2024-10-25 09:06:26 +03:00
parent dd7779bc1c
commit ad6dc2a92d
7 changed files with 96 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/ToolBar.vue
View File

@@ -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>-->
<!-- &lt;!&ndash; Кнопка "Edit" слева &ndash;&gt;-->
<!-- <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()