new version of budget view
This commit is contained in:
@@ -25,6 +25,7 @@ import {Chart as ChartJS} from 'chart.js/auto';
|
||||
import SelectButton from "primevue/selectbutton";
|
||||
import Divider from "primevue/divider";
|
||||
import TransactionForm from "@/components/transactions/TransactionForm.vue";
|
||||
import Checkbox from "primevue/checkbox";
|
||||
|
||||
// Зарегистрируем плагин
|
||||
ChartJS.register(ChartDataLabels);
|
||||
@@ -370,8 +371,8 @@ const saveLimit = async (category) => {
|
||||
const updateLimitOnBackend = async (categoryId, newLimit) => {
|
||||
await fetch(`/api/categories/${categoryId}/limit`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ limit: newLimit }),
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify({limit: newLimit}),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -873,7 +874,9 @@ onMounted(async () => {
|
||||
<span class="font-light text-sm">+ Добавить</span>
|
||||
</button>
|
||||
|
||||
<button class="font-light text-sm" @click="catsExpanded ? expandCats(false) : expandCats(true)">{{ catsExpanded ? 'Скрыть все': 'Раскрыть все'}}</button>
|
||||
<button class="font-light text-sm" @click="catsExpanded ? expandCats(false) : expandCats(true)">
|
||||
{{ catsExpanded ? 'Скрыть все' : 'Раскрыть все' }}
|
||||
</button>
|
||||
</div>
|
||||
<ul class="space-y-2">
|
||||
|
||||
@@ -883,8 +886,10 @@ onMounted(async () => {
|
||||
class="flex flex-col p-4 shadow-lg rounded-lg bg-white transition-transform duration-300 ">
|
||||
|
||||
<div class="flex flex-row justify-between w-full items-center transition-transform duration-300">
|
||||
<!-- {{category}}-->
|
||||
<span class="text-lg font-bold items-center">{{ category.name.category.name }} {{category.name.icon }}</span>
|
||||
<!-- {{category}}-->
|
||||
<span class="text-lg font-bold items-center">{{
|
||||
category.name.category.name
|
||||
}} {{ category.name.icon }}</span>
|
||||
<div class="flex flex-row gap-4">
|
||||
|
||||
<span>{{
|
||||
@@ -922,49 +927,46 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div>
|
||||
<!-- Планируемые расходы -->
|
||||
<div>
|
||||
<div class="pb-4">
|
||||
<div class="flex flex-row gap-4 items-center mb-4">
|
||||
<h3 class="text-2xl font-bold text-rose-500 ">Расходы</h3>
|
||||
<button @click="openDrawer('PLANNED', 'INCOME')">
|
||||
<span class="font-light text-sm">+ Добавить</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="space-y-2">
|
||||
<ul class="grid grid-cols-2 gap-4">
|
||||
<li v-for="(category, categoryId) in categoriesTransactions" :key="categoryId"
|
||||
class="flex flex-col p-4 shadow-lg rounded-lg bg-white ">
|
||||
class="flex flex-col justify-between p-4 shadow-lg rounded-lg bg-white ">
|
||||
<div class="">
|
||||
<div class="flex flex-row justify-between w-full items-center">
|
||||
<span class="text-2xl font-bold">{{ category.name.category.icon }} {{
|
||||
category.name.category.name
|
||||
}}</span>
|
||||
<div class="flex flex-row gap-4">
|
||||
<span class="text-2xl font-bold line-clamp-1">{{
|
||||
category.name.category.icon
|
||||
}} {{ category.name.category.name }}</span>
|
||||
<div class="flex flex-row line-clamp-1">
|
||||
|
||||
<span>{{
|
||||
formatAmount(category.name.currentSpent)
|
||||
}} / </span>
|
||||
<span>{{ formatAmount(category.name.currentSpent) }} / </span>
|
||||
<!-- Если редактируемая категория — показываем input -->
|
||||
|
||||
<input
|
||||
v-if="editingCategoryId === category.name.category.id"
|
||||
v-model.number="category.name.currentLimit"
|
||||
@blur="(category)"
|
||||
@keyup.enter="updateBudgetCategory(category.name)"
|
||||
type="number"
|
||||
class=" border-b w-20 "
|
||||
class=" border-b w-20 p-0 "
|
||||
autofocus
|
||||
/>
|
||||
|
||||
<!-- Если НЕ редактируем, показываем текст -->
|
||||
<span v-else @click="startEditing(category)" class="cursor-pointer hover:underline">
|
||||
{{ formatAmount(category.name.currentLimit) }} ₽
|
||||
</span>
|
||||
|
||||
<button v-if="category.transactions.length>0" :class="{'rotate-90': expenseCategoriesState[categoryId].isOpened}"
|
||||
<span v-else @click="startEditing(category)"
|
||||
class=" p-0 cursor-pointer hover:underline text-left">{{
|
||||
formatAmount(category.name.currentLimit)
|
||||
}} ₽</span>
|
||||
<button v-if="category.transactions.length>0"
|
||||
:class="{'rotate-90': expenseCategoriesState[categoryId].isOpened}"
|
||||
@click="expenseCategoriesState[categoryId].isOpened = !expenseCategoriesState[categoryId].isOpened">
|
||||
<i class="pi pi-angle-right transition-transform duration-300 text-5xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-300"
|
||||
enter-from-class="opacity-0 transform -translate-y-2"
|
||||
@@ -982,23 +984,34 @@ onMounted(async () => {
|
||||
@transaction-updated="updateTransactions"
|
||||
@transaction-checked="updateTransactions"
|
||||
/>
|
||||
<div
|
||||
class="flex justify-between bg-white min-w-fit max-h-fit flex-row items-center gap-4 w-full ">
|
||||
<div>
|
||||
<p class=" font-bold text-gray-700 dark:text-gray-400">
|
||||
🗓️ Остаток на внеплановые
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-lg line-clamp-1 ">
|
||||
{{
|
||||
formatAmount(category.name.currentLimit - category.name.currentPlanned)
|
||||
}} ₽
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0">
|
||||
<!-- <Divider class="!p-0 !pb-1 !m-0"/>-->
|
||||
<div class="flex flex-row justify-between w-full items-center">
|
||||
<span class="font-bold">🗓️ Остаток на внеплановые:</span>
|
||||
<span class="font-bold text-lg">{{ category.name.currentLimit - category.name.currentPlanned }} ₽</span>
|
||||
<span class="font-bold">🗓️ Остаток всего:</span>
|
||||
<span class="font-bold text-lg">{{
|
||||
formatAmount(category.name.currentLimit - category.name.currentSpent)
|
||||
}} ₽</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class=" h-full gap-4 flex-col row-span-6 lg:hidden ">
|
||||
<div class="flex flex-row ">
|
||||
@@ -1031,16 +1044,6 @@ onMounted(async () => {
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"-->
|
||||
<!-- :transaction-type="transactionType"-->
|
||||
<!-- :category-type="categoryType"-->
|
||||
<!-- :transactions="transactions.slice(0,3)"-->
|
||||
<!-- @transaction-updated="updateTransactions"-->
|
||||
<!-- @delete-transaction="updateTransactions"-->
|
||||
<!-- @create-transaction="updateTransactions"-->
|
||||
<!-- @close-drawer="closeDrawer"-->
|
||||
|
||||
<!-- />-->
|
||||
|
||||
<TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="transactionType"
|
||||
:category-type="categoryType" @close-drawer="closeDrawer" @transaction-updated="updateTransactions"
|
||||
@@ -1048,6 +1051,8 @@ onMounted(async () => {
|
||||
@create-transaction="updateTransactions"/>
|
||||
</div>
|
||||
|
||||
<div id="footer" class="h-24 bg-gray-100"/>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user