From ad6dc2a92d78159e9f935a13621e6b486878b16c Mon Sep 17 00:00:00 2001
From: Vladimir Voronin <voroninvyu@gmail.com>
Date: Fri, 25 Oct 2024 09:06:26 +0300
Subject: [PATCH] some tg tests

---
 src/App.vue                                   |   6 +-
 src/components/OverlayView.vue                |  15 ++-
 src/components/ToolBar.vue                    | 125 +++++++++++-------
 .../settings/CategorySettingView.vue          |   4 +-
 .../settings/RecurrentSettingView.vue         |   4 +-
 src/components/settings/SettingsView.vue      |   5 +-
 .../settings/categories/CategoryListItem.vue  |   2 +-
 7 files changed, 96 insertions(+), 65 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 53b7671..21d9b42 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
 
diff --git a/src/components/OverlayView.vue b/src/components/OverlayView.vue
index d89714d..27426fa 100644
--- a/src/components/OverlayView.vue
+++ b/src/components/OverlayView.vue
@@ -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"> <!-- Установлена минимальная ширина -->
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index 1fa7013..15f2099 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -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()
 
diff --git a/src/components/settings/CategorySettingView.vue b/src/components/settings/CategorySettingView.vue
index ede1206..beed5c5 100644
--- a/src/components/settings/CategorySettingView.vue
+++ b/src/components/settings/CategorySettingView.vue
@@ -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">
diff --git a/src/components/settings/RecurrentSettingView.vue b/src/components/settings/RecurrentSettingView.vue
index b8271b3..17815d9 100644
--- a/src/components/settings/RecurrentSettingView.vue
+++ b/src/components/settings/RecurrentSettingView.vue
@@ -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">
diff --git a/src/components/settings/SettingsView.vue b/src/components/settings/SettingsView.vue
index a654126..76ac1fc 100644
--- a/src/components/settings/SettingsView.vue
+++ b/src/components/settings/SettingsView.vue
@@ -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>
diff --git a/src/components/settings/categories/CategoryListItem.vue b/src/components/settings/categories/CategoryListItem.vue
index c9760a1..2ccb00a 100644
--- a/src/components/settings/categories/CategoryListItem.vue
+++ b/src/components/settings/categories/CategoryListItem.vue
@@ -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  ">