chet novoe
This commit is contained in:
@@ -7,25 +7,25 @@
|
|||||||
<!-- Плитка с бюджетами -->
|
<!-- Плитка с бюджетами -->
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
<!-- Будущие и текущие бюджеты -->
|
<!-- Будущие и текущие бюджеты -->
|
||||||
<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 v-for="budget in budgetInfos" :key="budget.id" class="p-4 shadow-lg rounded-lg bg-white" :class="budget.dateTo < new Date() ? 'bg-gray-100 opacity-60' : ''">
|
||||||
<div class="flex flex-row justify-between">
|
<div class="flex flex-row justify-between">
|
||||||
<div class="text-xl font-bold mb-2">{{ budget.budget.name }}</div>
|
<div class="text-xl font-bold mb-2">{{ budget.name }}</div>
|
||||||
<router-link :to="'/budgets/'+budget.budget.id">
|
<router-link :to="'/budgets/'+budget.id">
|
||||||
<i class="pi pi-arrow-circle-right text-green-500" style="font-size: 1.5rem;"/>
|
<i class="pi pi-arrow-circle-right text-green-500" style="font-size: 1.5rem;"/>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-gray-600 mb-4">
|
<div class="text-sm text-gray-600 mb-4">
|
||||||
{{ formatDate(budget.budget.dateFrom) }} - {{ formatDate(budget.budget.dateTo) }}
|
{{ formatDate(budget.dateFrom) }} - {{ formatDate(budget.dateTo) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div class="text-sm">Total Income: <span class="font-bold">{{ formatAmount(budget.totalIncomes) }} ₽</span></div>
|
<!-- <div class="text-sm">Total Income: <span class="font-bold">{{ formatAmount(budgettotalIncomes) }} ₽</span></div>-->
|
||||||
<div class="text-sm">Total Expenses: <span class="font-bold">{{ formatAmount(budget.totalExpenses) }} ₽</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">Planned Expenses: <span class="font-bold">{{ formatAmount(budget.totalExpenses) }} ₽</span></div>-->
|
||||||
<div class="text-sm flex items-center">
|
<div class="text-sm flex items-center">
|
||||||
Unplanned Expenses:
|
Unplanned Expenses:
|
||||||
<span class="ml-2 font-bold">{{ formatAmount(budget.totalIncomes - budget.totalExpenses) }} ₽</span>
|
<!-- <span class="ml-2 font-bold">{{ formatAmount(budget.totalIncomes - budget.totalExpenses) }} ₽</span>-->
|
||||||
<!-- Прогресс бар -->
|
<!-- Прогресс бар -->
|
||||||
<ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
|
<!-- <ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -57,7 +57,7 @@ import {onMounted, ref} from 'vue';
|
|||||||
import ProgressBar from 'primevue/progressbar';
|
import ProgressBar from 'primevue/progressbar';
|
||||||
import {BudgetInfo} from "@/models/Budget";
|
import {BudgetInfo} from "@/models/Budget";
|
||||||
import {getBudgetInfos} from "@/services/budgetsService";
|
import {getBudgetInfos} from "@/services/budgetsService";
|
||||||
import {formatAmount, formatDate} from "@/utils/utils";
|
import { formatDate} from "@/utils/utils";
|
||||||
import LoadingView from "@/components/LoadingView.vue";
|
import LoadingView from "@/components/LoadingView.vue";
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|||||||
@@ -7,19 +7,19 @@ export const getBudgetInfos = async () => {
|
|||||||
let response = await apiClient.get('/budgets/');
|
let response = await apiClient.get('/budgets/');
|
||||||
let budgetInfos = response.data;
|
let budgetInfos = response.data;
|
||||||
budgetInfos.forEach((budgetInfo: Budget) => {
|
budgetInfos.forEach((budgetInfo: Budget) => {
|
||||||
budgetInfo.budget.dateFrom = new Date(budgetInfo.budget.dateFrom);
|
budgetInfo.dateFrom = new Date(budgetInfo.dateFrom);
|
||||||
budgetInfo.budget.dateTo = new Date(budgetInfo.budget.dateTo);
|
budgetInfo.dateTo = new Date(budgetInfo.dateTo);
|
||||||
budgetInfo.plannedExpenses.forEach(e => {
|
// budgetInfo.plannedExpenses.forEach(e => {
|
||||||
e.date = new Date(e.date)
|
// e.date = new Date(e.date)
|
||||||
})
|
// })
|
||||||
|
//
|
||||||
budgetInfo.plannedIncomes.forEach(e => {
|
// budgetInfo.plannedIncomes.forEach(e => {
|
||||||
e.date = new Date(e.date)
|
// e.date = new Date(e.date)
|
||||||
})
|
// })
|
||||||
|
//
|
||||||
budgetInfo.transactions.forEach(e => {
|
// budgetInfo.transactions.forEach(e => {
|
||||||
e.date = new Date(e.date)
|
// e.date = new Date(e.date)
|
||||||
})
|
// })
|
||||||
})
|
})
|
||||||
return budgetInfos
|
return budgetInfos
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user