luminic-space/luminic-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new version of budget view

Browse Source
This commit is contained in:
xds
2025-02-11 16:02:58 +03:00
parent 8d8b1df4ed
commit b434640162
1 changed files with 83 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/budgets/BudgetView2.vue
View File

@@ -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);
@@ -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">
@@ -884,7 +887,9 @@ onMounted(async () => {
<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>
<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>