fix

2024-10-24 23:18:56 +03:00
parent f2e94764a3
commit 95debfbd71
5 changed files with 55 additions and 54 deletions
--- 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: {
--- 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>
--- 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">
--- 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>
--- 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',