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

chet novoe

Browse Source
This commit is contained in:
Vladimir Voronin
2024-10-30 12:51:50 +03:00
parent 5e49e223ee
commit df9899f673
3 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/budgets/BudgetCategoryView.vue
View File

@@ -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"/>

8
src/components/budgets/BudgetView.vue
View File

@@ -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">

4
src/plugins/axios.ts
View File

@@ -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',