From df9899f673ea56be3510d8737ab600bb17158adf Mon Sep 17 00:00:00 2001
From: Vladimir Voronin <voroninvyu@gmail.com>
Date: Wed, 30 Oct 2024 12:51:50 +0300
Subject: [PATCH] chet novoe

---
 src/components/budgets/BudgetCategoryView.vue | 60 ++++++++++---------
 src/components/budgets/BudgetView.vue         |  8 +--
 src/plugins/axios.ts                          |  4 +-
 3 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/components/budgets/BudgetCategoryView.vue b/src/components/budgets/BudgetCategoryView.vue
index 351c26d..7ca71ef 100644
--- a/src/components/budgets/BudgetCategoryView.vue
+++ b/src/components/budgets/BudgetCategoryView.vue
@@ -3,71 +3,75 @@ import Button from "primevue/button";
 import InputNumber from "primevue/inputnumber";
 import ProgressBar from "primevue/progressbar";
 
-import {Category} from "@/models/Category";
-import {computed, ref} from "vue";
-import {formatAmount} from "@/utils/utils";
+import { Category } from "@/models/Category";
+import { computed, ref, watch } from "vue";
+import { formatAmount } from "@/utils/utils";
 
 const props = defineProps({
   category: {
-    type: Object as Category,
-    require: true
+    type: Object as () => Category,
+    required: true
   },
   budgetId: {
     type: Number,
-    require: true
+    required: true
   }
-})
+});
 
-const emits = defineEmits(['category-updated'])
+const emits = defineEmits(["category-updated"]);
 
 const isEditing = ref(false);
+const currentLimit = ref(props.category.currentLimit);
+
 const startEditing = () => {
   isEditing.value = true;
-}
+};
 
 const stopEditing = () => {
   isEditing.value = false;
+  emits("category-updated", { ...props.category, currentLimit: currentLimit.value });
+};
 
-  emits('category-updated', editedCategory.value);
+// Реактивное вычисление отношения затрат к плану
+const spentPlannedRatio = computed(() => {
+  return props.category.currentLimit
+      ? (props.category.currentSpent / props.category.currentLimit) * 100
+      : 0;
+});
 
-}
-// const selectedCategorySettingType = ref(props.category.categorySetting.type)
-
-const categoryAmount = ref(1000)
-
-const editedCategory = ref(props.category);
-const spentPlannedRatio = computed( () => {
-  if (editedCategory.value.currentLimit == 0){
-    return 0;
-  } else {
-    return editedCategory.value.currentSpent / editedCategory.value.currentLimit * 100
-  }
-})
+// Синхронизация `currentLimit` с `props.category.currentLimit` при обновлении
+watch(
+    () => props.category.currentLimit,
+    (newLimit) => {
+      currentLimit.value = newLimit;
+    }
+);
 </script>
 
 <template>
 
   <div class="p-2 shadow-lg rounded-lg bg-white flex justify-between flex-col ">
+
     <div class="flex flex-row justify-between w-full">
       <div :class="isEditing ? 'w-1/5': ''" class="min-w-1 w-4/6 justify-between ">
-        <h4 class="text-lg line-clamp-1">{{editedCategory.category.icon }} {{ editedCategory.category.name }}</h4>
+        <h4 class="text-lg line-clamp-1">{{props.category.category.icon }} {{ props.category.category.name }}</h4>
 <!--        <p class="text-sm text-gray-500 line-clamp-1 min-w-1 ">{{ editedCategory.category.description }}</p>-->
       </div>
-      <div class="flex flex-row gap-2 justify-end  items-center w-3/6 ">
+      <div class="flex flex-row gap-2 justify-end  items-center w-4/6 ">
 
         <!-- Сумма, которая становится редактируемой при клике -->
         <button v-if="!isEditing" @click="startEditing"
                 class="text-lg font-bold cursor-pointer w-fit text-end line-clamp-1">
           <div class="flex flex-row gap-2 items-baseline" >
           <p class="font-light text-sm" :class="spentPlannedRatio == 0 ? 'hidden': ''">{{spentPlannedRatio.toFixed(0)}} %</p>
-          <p class="line-clamp-1 w-fit">{{ formatAmount(editedCategory.currentSpent) }} /
-            {{ formatAmount(editedCategory.currentLimit) }} ₽</p>
+          <p class="line-clamp-1 w-fit">{{ formatAmount(props.category.currentSpent) }} /
+            {{ formatAmount(currentLimit) }} ₽</p>
           </div>
         </button>
 
         <InputNumber v-else ref="inputRefs" type="text" v-model="editedCategory.currentLimit"
                      class="text-lg font-bold border-b-2 border-gray-300 outline-none focus:border-blue-500  w-32 text-right"
-                     :min="editedCategory.categoryPlannedLimit" :max="900000" :invalid="editedCategory.currentLimit < editedCategory.categoryPlannedLimit" v-tooltip.top="'Сумма не должна быть ниже суммы запланированных!'"/>
+                     :min="props.category.categoryPlannedLimit" :max="900000" :invalid="currentLimit < props.category.categoryPlannedLimit" v-tooltip.top="'Сумма не должна быть ниже суммы запланированных!'"/>
         <Button v-if="isEditing" @click="stopEditing" icon="pi pi-check" severity="success" rounded outlined
                 aria-label="Search"/>
 
diff --git a/src/components/budgets/BudgetView.vue b/src/components/budgets/BudgetView.vue
index 228abbc..dc48881 100644
--- a/src/components/budgets/BudgetView.vue
+++ b/src/components/budgets/BudgetView.vue
@@ -44,12 +44,12 @@
                      class="chart "/>
 
 
-              <div class="flex gap-5 items-center  justify-items-center ">
+              <div class="flex gap-5 items-center  justify-items-center w-full ">
                 <div class="w-full">
                   <button class="grid grid-cols-2 gap-5 items-center w-full" @click="detailedShowed = !detailedShowed">
                     <div class="flex flex-col items-center font-bold ">
                       <h4 class="text-lg font-bold">Поступления</h4>
-                      <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                         +{{ formatAmount(totalIncomes) }}
                         ₽
                       </div>
@@ -57,7 +57,7 @@
                     </div>
                     <div class="flex flex-col items-center ">
                       <h4 class="text-lg font-bold ">Расходы</h4>
-                      <div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
+                      <div class="font-light bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
                         -{{ formatAmount(totalExpenses) }}
                         ₽
                       </div>
@@ -94,7 +94,7 @@
                 </div>
 
               </div>
-              <div class="grid gap-5 items-center  justify-items-center ">
+              <div class="grid gap-5 items-center  justify-items-center w-full">
                 <div class="w-full">
                   <button class="grid grid-cols-3 justify-between  gap-5 items-center w-full"
                           @click="detailedShowed = !detailedShowed">
diff --git a/src/plugins/axios.ts b/src/plugins/axios.ts
index 59c1ae6..feec0f8 100644
--- a/src/plugins/axios.ts
+++ b/src/plugins/axios.ts
@@ -3,8 +3,8 @@ import axios from 'axios';
 
 // Создание экземпляра axios с базовым URL
 const apiClient = axios.create({
-    // baseURL: 'https://luminic.space/api/v1',
-    baseURL: 'http://localhost:8000/api/v1',
+    baseURL: 'https://luminic.space/api/v1',
+    // baseURL: 'http://localhost:8000/api/v1',
     headers: {
         'Content-Type': 'application/json',