From 95debfbd71667c10931c049ab61a26d44c756bcc Mon Sep 17 00:00:00 2001
From: Vladimir Voronin <voroninvyu@gmail.com>
Date: Thu, 24 Oct 2024 23:18:56 +0300
Subject: [PATCH] fix

---
 src/App.vue                                   |  3 -
 src/components/OverlayView.vue                |  6 +-
 src/components/budgets/BudgetList.vue         |  2 +-
 .../budgets/TransactionEditDrawer.vue         | 96 ++++++++++---------
 src/plugins/axios.ts                          |  2 +-
 5 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index da4d327..04c2fab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,9 +15,6 @@
 <script setup lang="ts">
 import MenuBar from "./components/MenuBar.vue";
 import OverlayView from "@/components/OverlayView.vue";
-import axios from "@/plugins/axios";
-
-console.log(axios)
 
 // @Options({
 //   components: {
diff --git a/src/components/OverlayView.vue b/src/components/OverlayView.vue
index 82171ea..1e56d62 100644
--- a/src/components/OverlayView.vue
+++ b/src/components/OverlayView.vue
@@ -85,11 +85,11 @@ onMounted(() => {
     />
 
     <SpeedDial :model="items" :radius="120" type="quarter" direction="up"
-               class=" mb-10 h-fit" :style="{ position: 'fixed', right: 0, bottom: 0 }"
+               class=" mb-10 h-fit !items-end me-10" :style="{ position: 'fixed', right: 0, bottom: 0 }"
                pt:menuitem="m-2">
-      <template #item="{ item, toggleCallback }">
+      <template #item="{ item, toggleCallback }" >
         <div
-            class="flex flex-row items-center justify-between  p-2 border w-56 bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
+              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>
diff --git a/src/components/budgets/BudgetList.vue b/src/components/budgets/BudgetList.vue
index 1fcfe0f..de74ad9 100644
--- a/src/components/budgets/BudgetList.vue
+++ b/src/components/budgets/BudgetList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-4">
     <!-- Заголовок -->
-    <h2 class="text-4xl mb-6  mt-14 font-bold">Monthly Budgets</h2>
+    <h2 class="text-4xl mb-6  font-bold">Monthly Budgets</h2>
 
     <!-- Плитка с бюджетами -->
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
diff --git a/src/components/budgets/TransactionEditDrawer.vue b/src/components/budgets/TransactionEditDrawer.vue
index 87866ee..a458301 100644
--- a/src/components/budgets/TransactionEditDrawer.vue
+++ b/src/components/budgets/TransactionEditDrawer.vue
@@ -6,9 +6,10 @@ import FloatLabel from "primevue/floatlabel";
 import InputNumber from "primevue/inputnumber";
 import Button from "primevue/button";
 import {ref, onMounted, computed} from 'vue';
-import {Transaction,  TransactionType} from "@/models/Transaction";
+import {Transaction, TransactionType} from "@/models/Transaction";
 import {CategoryType} from "@/models/Category";
 import SelectButton from "primevue/selectbutton";
+import Select from "primevue/select";
 import {
   createTransactionRequest,
   getTransactionTypes,
@@ -162,12 +163,11 @@ const dateErrorMessage = computed(() => {
   console.log('tut')
   if (editedTransaction.value.transactionType.code != 'PLANNED' && editedTransaction.value.date > new Date()) {
     console.log('tut2')
-      return 'При мгновенных тратах дата должна быть меньше текущей!'
-  } else if (editedTransaction.value.transactionType.code == 'PLANNED' && editedTransaction.value.date < new Date()){
+    return 'При мгновенных тратах дата должна быть меньше текущей!'
+  } else if (editedTransaction.value.transactionType.code == 'PLANNED' && editedTransaction.value.date < new Date()) {
     console.log('tu3')
     return 'При плановых тратах дата должна быть больше текущей!'
-  }
-  else {
+  } else {
     console.log('tu4')
     return ''
   }
@@ -187,7 +187,7 @@ onMounted(async () => {
 
 <template>
 
-  <div class="card flex justify-center">
+  <div class="card flex justify-center h-dvh">
 
     <Drawer :visible="visible" :header="isEditing ? 'Edit Transaction' : 'Create Transaction'" :showCloseIcon="false"
             position="right" @hide="closeDrawer"
@@ -195,21 +195,22 @@ onMounted(async () => {
       <div v-if="loading">
         Loading...
       </div>
-      <div v-else class="p-fluid grid formgrid p-4 w-full gap-5">
+      <div v-else class=" grid gap-4 w-full ">
 
         <div class="relative w-full justify-center justify-items-center ">
           <div class="flex flex-col justify-items-center gap-2">
-
-            <!--            {{editedTransaction.value.transactionType}}-->
-            <SelectButton v-if="!isEditing" v-model="editedTransaction.transactionType" :allow-empty="false"
-                          :options="transactionTypes"
-                          optionLabel="name"
-                          aria-labelledby="basic"
-                          class="justify-center"/>
-            <SelectButton v-model="selectedCategoryType" :options="categoryTypes" :allow-empty="false"
-                          optionLabel="name"
-                          aria-labelledby="basic"
-                          @change="categoryTypeChanged" class="justify-center"/>
+            <div class="flex flex-row gap-2">
+              <!--            {{editedTransaction.value.transactionType}}-->
+              <Select v-if="!isEditing" v-model="editedTransaction.transactionType" :allow-empty="false"
+                            :options="transactionTypes"
+                            optionLabel="name"
+                            aria-labelledby="basic"
+                            class="justify-center"/>
+              <SelectButton v-model="selectedCategoryType" :options="categoryTypes" :allow-empty="false"
+                            optionLabel="name"
+                            aria-labelledby="basic"
+                            @change="categoryTypeChanged" class="justify-center"/>
+            </div>
             <button class="border border-gray-300 rounded-lg w-full z-50"
                     @click="isCategorySelectorOpened = !isCategorySelectorOpened">
               <div class="flex flex-row  items-center pe-4 py-2 ">
@@ -252,17 +253,35 @@ onMounted(async () => {
             </div>
           </div>
         </div>
-        <!-- Comment Input -->
-        <div class="field col-12 w-full">
-          <FloatLabel variant="on" class="w-full">
-            <label for="comment">Comment</label>
-            <InputText class="w-full"
-                       :invalid="!editedTransaction.comment"
-                       id="comment"
-                       v-model="editedTransaction.comment"
+        <div class="grid grid-cols-4">
+          <div class=" ">
 
-            />
-          </FloatLabel>
+            <FloatLabel variant="on" class="w-10">
+              <InputNumber class="!w-10"
+                           :invalid="!editedTransaction.amount"
+                           :minFractionDigits="0"
+                           id="amount"
+                           v-model="editedTransaction.amount"
+                           mode="currency"
+                           currency="RUB"
+                           locale="ru-RU"
+
+              />
+              <label for="amount" class="!w-10">Amount</label>
+            </FloatLabel>
+          </div>
+          <!-- Comment Input -->
+          <div class="field col-12  col-span-3">
+            <FloatLabel variant="on" class="l">
+              <label for="comment">Comment</label>
+              <InputText class="w-full"
+                         :invalid="!editedTransaction.comment"
+                         id="comment"
+                         v-model="editedTransaction.comment"
+
+              />
+            </FloatLabel>
+          </div>
         </div>
 
         <!-- Date Picker -->
@@ -277,30 +296,17 @@ onMounted(async () => {
                         v-model="editedTransaction.date"
                         dateFormat="yy-mm-dd"
                         showIcon
+
             />
             <p :class="dateErrorMessage != '' ? 'visible' : 'invisible'"
-               class="text-red-400">{{dateErrorMessage}}</p>
+               class="text-red-400">{{ dateErrorMessage }}</p>
 
 
           </FloatLabel>
         </div>
 
         <!-- Amount Input -->
-        <div class="field col-12">
-          <FloatLabel variant="on">
-            <InputNumber class="w-full"
-                         :invalid="!editedTransaction.amount"
-                         :minFractionDigits="0"
-                         id="amount"
-                         v-model="editedTransaction.amount"
-                         mode="currency"
-                         currency="RUB"
-                         locale="ru-RU"
 
-            />
-            <label for="amount">Amount</label>
-          </FloatLabel>
-        </div>
 
         <!-- Buttons -->
         <div class="field col-12 flex justify-content-end gap-4">
@@ -318,7 +324,5 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.formgrid .field {
-  margin-bottom: 1rem;
-}
+
 </style>
diff --git a/src/plugins/axios.ts b/src/plugins/axios.ts
index 7940dd4..a307c9f 100644
--- a/src/plugins/axios.ts
+++ b/src/plugins/axios.ts
@@ -3,7 +3,7 @@ import axios from 'axios';
 
 // Создание экземпляра axios с базовым URL
 const apiClient = axios.create({
-    baseURL: 'https://luminic.space/api/v1',
+    baseURL: 'http://localhost:8000/api/v1',
     headers: {
         'Content-Type': 'application/json',