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-29 16:06:45 +03:00
parent c5ee833ca7
commit a71f34a6ba
22 changed files with 912 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/components/budgets/TransactionEditDrawer.vue
View File

@@ -40,10 +40,10 @@ const props = defineProps({
}
});
const emit = defineEmits(['create-transaction', 'update-transaction', 'delete-transaction', 'close-drawer']);
const emit = defineEmits(['create-transaction', 'update-transaction', 'delete-transaction', 'close-drawer', 'transaction-updated']);
const toast = useToast();
const categoryTypeChanged = () => {
console.log(selectedCategoryType.value)
editedTransaction.value.category = selectedCategoryType.value.code == "EXPENSE" ? expenseCategories.value[0] : incomeCategories.value[0];
}
@@ -82,11 +82,30 @@ const fetchCategoriesAndTypes = async () => {
categoryTypes.value = categoryTypesResponse.data;
transactionTypes.value = transactionTypesResponse.data;
console.log(entireCategories.value)
} catch (error) {
console.error('Error fetching categories and types:', error);
}
};
const checkForm = () => {
const errorMessages = {
transactionType: 'Тип транзакции должен быть выбран',
category: 'Категория должна быть выбрана',
date: 'Дата должна быть выбрана',
comment: 'Комментарий должен быть введен',
amount: 'Сумма не может быть пустой или 0'
};
if (!editedTransaction.value.transactionType) return showError(errorMessages.transactionType);
if (!editedTransaction.value.category) return showError(errorMessages.category);
if (!editedTransaction.value.date) return showError(errorMessages.date);
if (!editedTransaction.value.comment) return showError(errorMessages.comment);
if (!editedTransaction.value.amount || editedTransaction.value.amount === 0) return showError(errorMessages.amount);
return true;
};
// Инициализация данных
const prepareData = () => {
if (!props.transaction) {
@@ -102,39 +121,84 @@ const prepareData = () => {
}
};
const result = ref(false)
const isError = ref(false)
const resultText = ref('')
const computeResult = (resultState, error) => {
if (!resultState && error) {
result.value = true;
isError.value = true
resultText.value = `Ошибка: ${error.message}`
} else {
result.value = true;
isError.value = false
resultText.value = 'Успех!'
}
setTimeout(() => {
result.value = false
resultText.value = ''
}, 1000)
}
const showError = (message) => {
result.value = true;
isError.value = true;
resultText.value = message;
return false;
};
// Создание транзакции
const createTransaction = async () => {
try {
loading.value = true;
if (editedTransaction.value.transactionType.code === 'INSTANT') {
editedTransaction.value.isDone = true;
if (checkForm()) {
try {
loading.value = true;
if (editedTransaction.value.transactionType.code === 'INSTANT') {
editedTransaction.value.isDone = true;
}
await createTransactionRequest(editedTransaction.value);
toast.add({severity: 'success', summary: 'Transaction created!', detail: 'Транзакция создана!', life: 3000});
emit('create-transaction', editedTransaction.value);
computeResult(true)
resetForm();
} catch (error) {
computeResult(false, error)
console.error('Error creating transaction:', error);
} finally {
loading.value = false;
}
await createTransactionRequest(editedTransaction.value);
toast.add({severity: 'success', summary: 'Transaction created!', detail: 'Транзакция создана!', life: 3000});
emit('create-transaction', editedTransaction.value);
resetForm();
} catch (error) {
console.error('Error creating transaction:', error);
} finally {
loading.value = false;
console.log(editedTransaction.value)
}
setTimeout(() => {
result.value = false
resultText.value = ''
}, 1000)
};
// Обновление транзакции
const updateTransaction = async () => {
try {
loading.value = true;
const response = await updateTransactionRequest(editedTransaction.value);
editedTransaction.value = response.data;
toast.add({severity: 'success', summary: 'Transaction updated!', detail: 'Транзакция обновлена!', life: 3000});
emit('update-transaction', editedTransaction.value);
} catch (error) {
console.error('Error updating transaction:', error);
} finally {
loading.value = false;
if (checkForm()) {
try {
loading.value = true;
const response = await updateTransactionRequest(editedTransaction.value);
response.data;
// toast.add({severity: 'success', summary: 'Transaction updated!', detail: 'Транзакция обновлена!', life: 3000});
emit('update-transaction', editedTransaction.value);
emit('transaction-updated');
computeResult(true)
} catch (error) {
computeResult(false, error)
console.error('Error updating transaction:', error);
} finally {
loading.value = false;
}
}
setTimeout(() => {
result.value = false
resultText.value = ''
}, 1000)
};
// Удаление транзакции
@@ -145,7 +209,11 @@ const deleteTransaction = async () => {
toast.add({severity: 'success', summary: 'Transaction deleted!', detail: 'Транзакция удалена!', life: 3000});
emit('delete-transaction', editedTransaction.value);
closeDrawer()
computeResult(true)
} catch (error) {
computeResult(false, error)
toast.add({severity: 'warn', summary: 'Error!', detail: 'Транзакция обновлена!', life: 3000});
console.error('Error deleting transaction:', error);
} finally {
loading.value = false;
@@ -162,15 +230,15 @@ const resetForm = () => {
};
const dateErrorMessage = computed(() => {
console.log('tut')
if (editedTransaction.value.transactionType.code != 'PLANNED' && editedTransaction.value.date > new Date()) {
console.log('tut2')
return 'При мгновенных тратах дата должна быть меньше текущей!'
} else if (editedTransaction.value.transactionType.code == 'PLANNED' && editedTransaction.value.date < new Date()) {
console.log('tu3')
return 'При плановых тратах дата должна быть больше текущей!'
} else {
console.log('tu4')
return ''
}
})
@@ -183,12 +251,16 @@ const userAgent = ref(null);
// Мониторинг при монтировании
onMounted(async () => {
loading.value = true;
await fetchCategoriesAndTypes();
prepareData();
loading.value = false;
const deviceInfo = platform;
isMobile.value = deviceInfo.os.family === 'iOS' || deviceInfo.os.family === 'Android';
console.log(deviceInfo);
console.log()
})
</script>
@@ -196,14 +268,32 @@ onMounted(async () => {
<div class="card flex justify-center h-dvh">
<Drawer :visible="visible" :header="isEditing ? 'Edit Transaction' : 'Create Transaction'" :showCloseIcon="false"
position="right" @hide="closeDrawer"
class="!w-128 ">
<div v-if="result" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
<div
class=" px-10 py-5 rounded-lg border border-gray-200 flex flex-col items-center gap-4"
:class="isError ? 'bg-red-100' : 'bg-green-100'"
aria-label="Custom ProgressSpinner">
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-green-500'" style="font-size: 2rem;"/>
<p class="text-green-700" :class="isError ? 'text-red-500' : 'text-green-500'">{{ resultText }}</p>
</div>
</div>
<div class="absolute w-full h-screen">
<!-- Полупрозрачный белый фон -->
<!-- <div class="absolute top-0 left-0 w-full h-full bg-white opacity-50 z-0"></div>-->
<!-- Спиннер поверх -->
</div>
<LoadingView v-if="loading"/>
<div v-else class=" grid gap-4 w-full ">
<div class="relative w-full justify-center justify-items-center ">
{{userAgent}}
<div class="flex flex-col justify-items-center gap-2">
<div class="flex flex-row gap-2">
<!-- {{editedTransaction.value.transactionType}}-->
@@ -217,7 +307,7 @@ onMounted(async () => {
aria-labelledby="basic"
@change="categoryTypeChanged" class="justify-center"/>
</div>
<button class="border border-gray-300 rounded-lg w-full z-50"
<button class="border border-gray-300 rounded-lg w-full z-40"
@click="isCategorySelectorOpened = !isCategorySelectorOpened">
<div class="flex flex-row items-center pe-4 py-2 ">
<div class="flex flex-row justify-between w-full gap-4 px-4 items-center">
@@ -241,7 +331,7 @@ onMounted(async () => {
<!-- Анимированное открытие списка категорий -->
<div v-show="isCategorySelectorOpened"
class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
class="absolute left-0 right-0 top-full overflow-y-auto z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
:class="{ 'max-h-0': !isCategorySelectorOpened, 'max-h-[500px]': isCategorySelectorOpened }">
<div class="grid grid-cols-2 mt-2">
<button
@@ -319,8 +409,7 @@ onMounted(async () => {
<!-- Buttons -->
{{ keyboardOpen }}
<div class="fixed col-12 flex justify-content-end gap-4"
:style="keyboardOpen && isMobile ? 'bottom : 350px;' :' bottom: 5rem;'">
<div class="fixed col-12 flex justify-content-end gap-4 bottom-8">
<Button label="Save" icon="pi pi-check" class="p-button-success"
@click="isEditing ? updateTransaction() : createTransaction()"/>