From f1573b9e306af9df7009b0bdfa5377599250d9b9 Mon Sep 17 00:00:00 2001
From: Vladimir Voronin <voroninvyu@gmail.com>
Date: Fri, 25 Oct 2024 21:05:18 +0300
Subject: [PATCH] chet novoe

---
 src/assets/main.css                           |   4 +
 src/components/LoadingView.vue                |  28 ++++
 src/components/budgets/BudgetList.vue         | 146 +++++++++---------
 src/components/budgets/BudgetView.vue         |  17 +-
 .../budgets/TransactionEditDrawer.vue         |  25 ++-
 src/services/axiosSetup.ts                    |   3 +-
 src/services/budgetsService.ts                |  24 ++-
 7 files changed, 144 insertions(+), 103 deletions(-)
 create mode 100644 src/components/LoadingView.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index 1f98ff5..5ff2caf 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -4,6 +4,10 @@
 @tailwind components;
 @tailwind utilities;
 
+.p-inputnumber-input{
+    width: 7rem;
+}
+
 /*#app {*/
 /*  !*max-width: 1280px;*!*/
 /*  !*margin: 0 auto;*!*/
diff --git a/src/components/LoadingView.vue b/src/components/LoadingView.vue
new file mode 100644
index 0000000..1a4a2ca
--- /dev/null
+++ b/src/components/LoadingView.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+import ProgressSpinner from "primevue/progressspinner";
+
+
+</script>
+
+<template>
+  <div  class="relative w-full h-screen">
+    <!-- Полупрозрачный белый фон -->
+    <div class="absolute top-0 left-0 w-full h-full bg-white opacity-50 z-0"></div>
+
+    <!-- Спиннер поверх -->
+    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
+      <ProgressSpinner
+          style="width: 50px; height: 50px;"
+          strokeWidth="8"
+          fill="transparent"
+          animationDuration=".5s"
+          aria-label="Custom ProgressSpinner"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/budgets/BudgetList.vue b/src/components/budgets/BudgetList.vue
index 0c2662e..7be4ada 100644
--- a/src/components/budgets/BudgetList.vue
+++ b/src/components/budgets/BudgetList.vue
@@ -1,28 +1,29 @@
 <template>
-  <div class="px-4 bg-gray-100 h-full ">
+  <LoadingView v-if="loading"/>
+  <div v-else class="px-4 bg-gray-100 h-full ">
     <!-- Заголовок -->
     <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">
       <!-- Будущие и текущие бюджеты -->
-      <div v-for="budget in upcomingBudgets" :key="budget.id" class="p-4 shadow-lg rounded-lg bg-white">
+      <div v-for="budget in budgetInfos" :key="budget.budget.id" class="p-4 shadow-lg rounded-lg bg-white" :class="budget.budget.dateTo < new Date() ? 'bg-gray-100 opacity-60' : ''">
         <div class="flex flex-row justify-between">
-          <div class="text-xl font-bold mb-2">{{ budget.month }}</div>
-          <router-link to="/budgets/1">
-            <Button icon="pi pi-arrow-circle-right" rounded text size="large"/>
+          <div class="text-xl font-bold mb-2">{{ budget.budget.name }}</div>
+          <router-link :to="'/budgets/'+budget.budget.id">
+            <i class="pi pi-arrow-circle-right text-green-500" style="font-size: 1.5rem;"/>
           </router-link>
         </div>
         <div class="text-sm text-gray-600 mb-4">
-          {{ budget.startDate }} - {{ budget.endDate }}
+          {{ formatDate(budget.budget.dateFrom) }} - {{ formatDate(budget.budget.dateTo) }}
         </div>
         <div class="mb-4">
-          <div class="text-sm">Total Income: <span class="font-bold">{{ budget.totalIncome }}</span></div>
-          <div class="text-sm">Total Expenses: <span class="font-bold">{{ budget.totalExpenses }}</span></div>
-          <div class="text-sm">Planned Expenses: <span class="font-bold">{{ budget.plannedExpenses }}</span></div>
+          <div class="text-sm">Total Income: <span class="font-bold">{{ formatAmount(budget.totalIncomes) }} ₽</span></div>
+          <div class="text-sm">Total Expenses: <span class="font-bold">{{ formatAmount(budget.totalExpenses) }} ₽</span></div>
+          <div class="text-sm">Planned Expenses: <span class="font-bold">{{ formatAmount(budget.totalExpenses) }} ₽</span></div>
           <div class="text-sm flex items-center">
             Unplanned Expenses:
-            <span class="ml-2 font-bold">{{ budget.remainingForUnplanned }}</span>
+            <span class="ml-2 font-bold">{{ formatAmount(budget.totalIncomes - budget.totalExpenses) }} ₽</span>
             <!-- Прогресс бар -->
             <ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
           </div>
@@ -51,73 +52,72 @@
   </div>
 </template>
 
-<script lang="ts">
-import {ref} from 'vue';
+<script setup lang="ts">
+import {onMounted, ref} from 'vue';
 import ProgressBar from 'primevue/progressbar';
-import Button from "primevue/button";
+import {BudgetInfo} from "@/models/Budget";
+import {getBudgetInfos} from "@/services/budgetsService";
+import {formatAmount, formatDate} from "@/utils/utils";
+import LoadingView from "@/components/LoadingView.vue";
 
-export default {
-  components: {
-    ProgressBar,
-    Button
+const loading = ref(false)
+const budgetInfos = ref<BudgetInfo[]>([])
+
+const upcomingBudgets = ref([
+  {
+    id: 1,
+    month: 'October 2024',
+    startDate: '2024-10-01',
+    endDate: '2024-10-31',
+    totalIncome: '500,000 RUB',
+    totalExpenses: '350,000 RUB',
+    plannedExpenses: '300,000 RUB',
+    remainingForUnplanned: '50,000 RUB',
+    unplannedProgress: 60, // Прогресс в процентах
   },
-  setup() {
-    const upcomingBudgets = ref([
-      {
-        id: 1,
-        month: 'October 2024',
-        startDate: '2024-10-01',
-        endDate: '2024-10-31',
-        totalIncome: '500,000 RUB',
-        totalExpenses: '350,000 RUB',
-        plannedExpenses: '300,000 RUB',
-        remainingForUnplanned: '50,000 RUB',
-        unplannedProgress: 60, // Прогресс в процентах
-      },
-      {
-        id: 2,
-        month: 'November 2024',
-        startDate: '2024-11-01',
-        endDate: '2024-11-30',
-        totalIncome: '550,000 RUB',
-        totalExpenses: '320,000 RUB',
-        plannedExpenses: '250,000 RUB',
-        remainingForUnplanned: '70,000 RUB',
-        unplannedProgress: 50,
-      },
-    ]);
-
-    const pastBudgets = ref([
-      {
-        id: 3,
-        month: 'September 2024',
-        startDate: '2024-09-01',
-        endDate: '2024-09-30',
-        totalIncome: '450,000 RUB',
-        totalExpenses: '400,000 RUB',
-        plannedExpenses: '350,000 RUB',
-        remainingForUnplanned: '50,000 RUB',
-        unplannedProgress: 90,
-      },
-      {
-        id: 4,
-        month: 'August 2024',
-        startDate: '2024-08-01',
-        endDate: '2024-08-31',
-        totalIncome: '400,000 RUB',
-        totalExpenses: '370,000 RUB',
-        plannedExpenses: '320,000 RUB',
-        remainingForUnplanned: '50,000 RUB',
-        unplannedProgress: 85,
-      },
-    ]);
-
-    return {
-      upcomingBudgets,
-      pastBudgets,
-    };
+  {
+    id: 2,
+    month: 'November 2024',
+    startDate: '2024-11-01',
+    endDate: '2024-11-30',
+    totalIncome: '550,000 RUB',
+    totalExpenses: '320,000 RUB',
+    plannedExpenses: '250,000 RUB',
+    remainingForUnplanned: '70,000 RUB',
+    unplannedProgress: 50,
   },
-};
+]);
+const pastBudgets = ref([
+  {
+    id: 3,
+    month: 'September 2024',
+    startDate: '2024-09-01',
+    endDate: '2024-09-30',
+    totalIncome: '450,000 RUB',
+    totalExpenses: '400,000 RUB',
+    plannedExpenses: '350,000 RUB',
+    remainingForUnplanned: '50,000 RUB',
+    unplannedProgress: 90,
+  },
+  {
+    id: 4,
+    month: 'August 2024',
+    startDate: '2024-08-01',
+    endDate: '2024-08-31',
+    totalIncome: '400,000 RUB',
+    totalExpenses: '370,000 RUB',
+    plannedExpenses: '320,000 RUB',
+    remainingForUnplanned: '50,000 RUB',
+    unplannedProgress: 85,
+  },
+]);
+
+onMounted(async () => {
+  loading.value = true;
+  budgetInfos.value = await getBudgetInfos()
+  console.log(budgetInfos.value)
+  loading.value = false
+})
 </script>
 
 <style scoped>
diff --git a/src/components/budgets/BudgetView.vue b/src/components/budgets/BudgetView.vue
index 75925e2..d71e575 100644
--- a/src/components/budgets/BudgetView.vue
+++ b/src/components/budgets/BudgetView.vue
@@ -1,20 +1,6 @@
 <template>
   <Toast/>
-  <div v-if="loading" class="relative w-full h-screen">
-    <!-- Полупрозрачный белый фон -->
-    <div class="absolute top-0 left-0 w-full h-full bg-white opacity-50 z-0"></div>
-
-    <!-- Спиннер поверх -->
-    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
-      <ProgressSpinner
-          style="width: 50px; height: 50px;"
-          strokeWidth="8"
-          fill="transparent"
-          animationDuration=".5s"
-          aria-label="Custom ProgressSpinner"
-      />
-    </div>
-  </div>
+  <LoadingView v-if="loading"/>
 
   <div v-else class="px-4 bg-gray-100 h-full ">
     <div v-if="updateLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
@@ -216,6 +202,7 @@ import UnplannedCategoryView from "@/components/budgets/UnplannedCategoryView.vu
 import {TransactionType} from "@/models/Transaction";
 import Toast from "primevue/toast";
 import Button from "primevue/button";
+import LoadingView from "@/components/LoadingView.vue";
 
 const loading = ref(true);
 const updateLoading = ref(false);
diff --git a/src/components/budgets/TransactionEditDrawer.vue b/src/components/budgets/TransactionEditDrawer.vue
index a458301..716e3de 100644
--- a/src/components/budgets/TransactionEditDrawer.vue
+++ b/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()"/>
diff --git a/src/services/axiosSetup.ts b/src/services/axiosSetup.ts
index 3342235..0185b06 100644
--- a/src/services/axiosSetup.ts
+++ b/src/services/axiosSetup.ts
@@ -4,7 +4,8 @@ import { useRouter } from 'vue-router';
 
 // Создаем экземпляр axios
 const api = axios.create({
-    baseURL: 'https://luminic.space/api/v1',
+    // baseURL: 'https://luminic.space/api/v1',
+    baseURL: 'http://localhost:8000/api/v1',
 });
 
 // Устанавливаем токен из localStorage при каждом запуске
diff --git a/src/services/budgetsService.ts b/src/services/budgetsService.ts
index c0f29b2..e3fceed 100644
--- a/src/services/budgetsService.ts
+++ b/src/services/budgetsService.ts
@@ -1,7 +1,29 @@
 import apiClient from '@/services/axiosSetup';
-import {BudgetCategory} from "@/models/Budget";
+import {Budget, BudgetCategory} from "@/models/Budget";
 // Импортируете настроенный экземпляр axios
 
+export const getBudgetInfos = async () => {
+    console.log('getBudgetInfos');
+    let response = await apiClient.get('/budgets/');
+    let budgetInfos = response.data;
+    budgetInfos.forEach((budgetInfo: Budget) => {
+        budgetInfo.budget.dateFrom = new Date(budgetInfo.budget.dateFrom);
+        budgetInfo.budget.dateTo = new Date(budgetInfo.budget.dateTo);
+        budgetInfo.plannedExpenses.forEach(e => {
+            e.date = new Date(e.date)
+        })
+
+        budgetInfo.plannedIncomes.forEach(e => {
+            e.date = new Date(e.date)
+        })
+
+        budgetInfo.transactions.forEach(e => {
+            e.date = new Date(e.date)
+        })
+    })
+    return budgetInfos
+}
+
 export const getBudgetInfo = async (budget_id: number) => {
     console.log('getBudgetInfo');
     let budgetInfo = await apiClient.get('/budgets/' + budget_id);