diff --git a/src/components/budgets/BudgetCategoryView.vue b/src/components/budgets/BudgetCategoryView.vue index 351c26d..7ca71ef 100644 --- a/src/components/budgets/BudgetCategoryView.vue +++ b/src/components/budgets/BudgetCategoryView.vue @@ -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; + } +);