chet novoe

src/components/budgets/TransactionEditDrawer.vue

@@ -18,6 +18,7 @@ import {
 } from "@/services/transactionService";
 import {getCategories, getCategoryTypes} from "@/services/categoryService";
 import {useToast} from "primevue/usetoast";
+import LoadingView from "@/components/LoadingView.vue";
 
 const props = defineProps({
   visible: {
@@ -192,9 +193,7 @@ onMounted(async () => {
     <Drawer :visible="visible" :header="isEditing ? 'Edit Transaction' : 'Create Transaction'" :showCloseIcon="false"
             position="right" @hide="closeDrawer"
             class="!w-128  ">
-      <div v-if="loading">
-        Loading...
-      </div>
+      <LoadingView v-if="loading"/>
       <div v-else class=" grid gap-4 w-full ">
 
         <div class="relative w-full justify-center justify-items-center ">
@@ -253,11 +252,11 @@ onMounted(async () => {
             </div>
           </div>
         </div>
-        <div class="grid grid-cols-4">
-          <div class=" ">
+        <div class="flex flex-row gap-4">
 
-            <FloatLabel variant="on" class="w-10">
-              <InputNumber class="!w-10"
+
+            <FloatLabel variant="on" class="">
+              <InputNumber class=""
                            :invalid="!editedTransaction.amount"
                            :minFractionDigits="0"
                            id="amount"
@@ -267,12 +266,12 @@ onMounted(async () => {
                            locale="ru-RU"
 
               />
-              <label for="amount" class="!w-10">Amount</label>
+              <label for="amount" class="">Amount</label>
             </FloatLabel>
-          </div>
+
           <!-- Comment Input -->
-          <div class="field col-12  col-span-3">
-            <FloatLabel variant="on" class="l">
+
+            <FloatLabel variant="on" class="w-full">
               <label for="comment">Comment</label>
               <InputText class="w-full"
                          :invalid="!editedTransaction.comment"
@@ -281,7 +280,7 @@ onMounted(async () => {
 
               />
             </FloatLabel>
-          </div>
+
         </div>
 
         <!-- Date Picker -->
@@ -309,7 +308,7 @@ onMounted(async () => {
 
 
         <!-- Buttons -->
-        <div class="field col-12 flex justify-content-end gap-4">
+        <div class="fixed  col-12 bottom-6 flex justify-content-end gap-4">
 
           <Button label="Save" icon="pi pi-check" class="p-button-success"
                   @click="isEditing ? updateTransaction() : createTransaction()"/>