add network
This commit is contained in:
409
src/components/transactions/TransactionCreateUpdate.vue
Normal file
409
src/components/transactions/TransactionCreateUpdate.vue
Normal file
@@ -0,0 +1,409 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import {DatePicker, Divider, InputNumber, SelectButton} from "primevue";
|
||||
import ConfirmDialog from "@/components/ConfirmDialog.vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {useToolbarStore} from "@/stores/toolbar-store";
|
||||
import {useToast} from "primevue/usetoast";
|
||||
import {useSpaceStore} from "@/stores/spaceStore";
|
||||
import {computed, onMounted, ref} from "vue";
|
||||
import {Category} from "@/models/category";
|
||||
import {TransactionService} from "@/services/transactions-service";
|
||||
import {CreateTransactionDTO, UpdateTransactionDTO} from "@/models/transaction";
|
||||
import {CategoryType, TransactionKind, TransactionKindName, TransactionType, TransactionTypeName} from "@/models/enums";
|
||||
import {useTransactionStore} from "@/stores/transactions-store";
|
||||
import {categoriesService} from "@/services/categories-service";
|
||||
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const toolbar = useToolbarStore();
|
||||
const toast = useToast();
|
||||
const spaceStore = useSpaceStore();
|
||||
const transactionService = TransactionService
|
||||
const transactionStore = useTransactionStore()
|
||||
const tgApp = window.Telegram.WebApp
|
||||
|
||||
const isCategorySelectorOpened = ref(false);
|
||||
|
||||
const categories = ref<Category[]>([]);
|
||||
const transactionId = ref<number | undefined>(route.params.id)
|
||||
const mode = computed(() => {
|
||||
return transactionId.value ? "edit" : "create"
|
||||
})
|
||||
|
||||
const isDeleteAlertVisible = ref(false)
|
||||
const deleteAlertMessage = ref('Do you want to delete transaction?')
|
||||
|
||||
// Генерим опции: [{ label: "Расходы", value: "EXPENSE" }, ...]
|
||||
const optionsType = Object.values(TransactionType).map(type => ({
|
||||
label: TransactionTypeName[type],
|
||||
value: type
|
||||
}))
|
||||
|
||||
// Генерим опции: [{ label: "Расходы", value: "EXPENSE" }, ...]
|
||||
const optionsKind = Object.values(TransactionKind).map(type => ({
|
||||
label: TransactionKindName[type],
|
||||
value: type
|
||||
}))
|
||||
|
||||
|
||||
const transactionType = ref<TransactionType>(TransactionType.EXPENSE)
|
||||
const isTypeError = ref<boolean>(false);
|
||||
const transactionKind = ref<TransactionKind>(TransactionKind.INSTANT)
|
||||
const isKindError = ref<boolean>(false);
|
||||
const transactionCategory = ref<Category>({} as Category)
|
||||
const isCategoryError = ref(false)
|
||||
const transactionComment = ref<string>('')
|
||||
const isCommentError = ref(false)
|
||||
const transactionAmount = ref<number>(0)
|
||||
const isAmountError = ref(false)
|
||||
const transactionDate = ref<Date>(new Date())
|
||||
const isDateError = ref(false)
|
||||
const isDone = ref(false)
|
||||
|
||||
const fetchCategories = async () => {
|
||||
|
||||
try {
|
||||
if (spaceStore.selectedSpaceId) {
|
||||
categories.value = await categoriesService.fetchCategories(spaceStore.selectedSpaceId)
|
||||
if (categories.value.length > 0) {
|
||||
transactionCategory.value = categories.value[0]
|
||||
}
|
||||
} else throw Error("No space selected")
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Error while fetching categories.",
|
||||
detail: error.message,
|
||||
life: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
|
||||
try {
|
||||
if (spaceStore.selectedSpaceId && transactionId.value) {
|
||||
categories.value = await categoriesService.fetchCategories(spaceStore.selectedSpaceId);
|
||||
let data = await transactionService.getTransaction(spaceStore.selectedSpaceId, Number(transactionId.value));
|
||||
transactionType.value = data.type;
|
||||
transactionKind.value = data.kind;
|
||||
transactionCategory.value = data.category;
|
||||
transactionComment.value = data.comment;
|
||||
transactionAmount.value = data.amount;
|
||||
transactionDate.value = new Date(data.date);
|
||||
} else {
|
||||
throw new Error("Could not find any space")
|
||||
}
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Failed to load transaction data.",
|
||||
detail: error,
|
||||
life: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
if (!transactionType.value) {
|
||||
isTypeError.value = true;
|
||||
return false;
|
||||
}
|
||||
if (!transactionKind.value) {
|
||||
isKindError.value = true;
|
||||
return false;
|
||||
}
|
||||
if (!transactionCategory.value) {
|
||||
isCategoryError.value = true
|
||||
return false
|
||||
}
|
||||
if (transactionComment.value.length == 0) {
|
||||
isCommentError.value = true
|
||||
return false
|
||||
}
|
||||
if (transactionAmount.value <= 0) {
|
||||
isAmountError.value = true
|
||||
return false
|
||||
}
|
||||
if (!transactionDate.value) {
|
||||
isDateError.value = true
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const buildUpdate = (): UpdateTransactionDTO => {
|
||||
if (validateForm()) {
|
||||
return {
|
||||
type: transactionType.value,
|
||||
kind: transactionKind.value,
|
||||
categoryId: transactionCategory.value.id,
|
||||
comment: transactionComment.value,
|
||||
amount: transactionAmount.value,
|
||||
isDone: isDone.value,
|
||||
date: transactionDate.value
|
||||
} as UpdateTransactionDTO
|
||||
} else {
|
||||
throw new Error("Form is not valid")
|
||||
}
|
||||
}
|
||||
|
||||
const buildCreate = (): CreateTransactionDTO => {
|
||||
if (validateForm()) {
|
||||
return {
|
||||
type: transactionType.value,
|
||||
kind: transactionKind.value,
|
||||
categoryId: transactionCategory.value.id,
|
||||
comment: transactionComment.value,
|
||||
amount: transactionAmount.value,
|
||||
date: transactionDate.value
|
||||
} as CreateTransactionDTO
|
||||
} else {
|
||||
throw new Error("Form is not valid")
|
||||
}
|
||||
}
|
||||
|
||||
const moveUser = async () => {
|
||||
if (window.history.length > 1) {
|
||||
console.log('moved back')
|
||||
router.back()
|
||||
} else {
|
||||
console.log('moved forward')
|
||||
await router.push('/categories')
|
||||
}
|
||||
}
|
||||
|
||||
const deleteTransaction = async () => {
|
||||
if (spaceStore.selectedSpaceId && transactionId.value) {
|
||||
await transactionService.deleteTransaction(spaceStore.selectedSpaceId, Number(transactionId.value))
|
||||
await transactionStore.fetchTransactions(spaceStore.selectedSpaceId)
|
||||
await moveUser()
|
||||
}
|
||||
}
|
||||
|
||||
const insetTop = ref(54)
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
if (route.query.type === "EXPENSE") transactionType.value = TransactionType.EXPENSE
|
||||
if (route.query.type === "INCOME") transactionType.value = TransactionType.INCOME
|
||||
|
||||
if (route.query.kind === "INSTANT") transactionKind.value = TransactionKind.INSTANT
|
||||
if (route.query.kind === "PLANNING") transactionKind.value = TransactionKind.PLANNING
|
||||
|
||||
// Remove query params AFTER reading them
|
||||
if (route.query.type || route.query.kind) {
|
||||
router.replace({path: route.path}) // instead of window.location
|
||||
}
|
||||
await fetchCategories()
|
||||
if (tgApp && ['ios', 'android'].includes(tgApp.platform)) {
|
||||
insetTop.value = tgApp.contentSafeAreaInset.top + tgApp.safeAreaInset.top
|
||||
}
|
||||
|
||||
if (mode.value === "edit") {
|
||||
await fetchData()
|
||||
toolbar.registerHandler('deleteTransaction', () => {
|
||||
if (tgApp.initData) {
|
||||
tgApp.showConfirm(deleteAlertMessage.value, async (confirmed: boolean) => {
|
||||
if (confirmed) {
|
||||
await deleteTransaction()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
isDeleteAlertVisible.value = true
|
||||
}
|
||||
})
|
||||
toolbar.registerHandler('updateTransaction', async () => {
|
||||
if (spaceStore.selectedSpaceId) {
|
||||
// await categoriesStore.fetchCategories(spaceStore.selectedSpaceId)
|
||||
try {
|
||||
let updateDTO = buildUpdate()
|
||||
await transactionService.updateTransaction(spaceStore.selectedSpaceId, Number(transactionId.value), updateDTO)
|
||||
console.log(updateDTO)
|
||||
await moveUser()
|
||||
} catch (e) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Error while updating transaction",
|
||||
detail: e,
|
||||
life: 3000,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
toolbar.registerHandler('createTransaction', async () => {
|
||||
if (spaceStore.selectedSpaceId) {
|
||||
// await categoriesStore.fetchCategories(spaceStore.selectedSpaceId)
|
||||
try {
|
||||
let createDTO = buildCreate()
|
||||
await transactionService.createTransaction(spaceStore.selectedSpaceId, createDTO)
|
||||
console.log(createDTO)
|
||||
await moveUser()
|
||||
} catch (e) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "Error while creating transaction",
|
||||
detail: e,
|
||||
life: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex ">
|
||||
<span v-if="categories.length == 0" class="card">Looks like you have no created categories yet. <router-link
|
||||
to="/categories/create" class="!text-blue-400">Try to create some first.</router-link></span>
|
||||
|
||||
<div v-else class="flex flex-col w-full justify-items-start gap-1">
|
||||
<ConfirmDialog
|
||||
v-if="isDeleteAlertVisible"
|
||||
:message="deleteAlertMessage"
|
||||
:callback="(confirmed) => { if (confirmed) deleteTransaction(); isDeleteAlertVisible = false; }"
|
||||
/>
|
||||
<!-- Fixed modal container -->
|
||||
<div v-if="isCategorySelectorOpened"
|
||||
class="absolute inset-0 top-0 z-[1000] flex items-start justify-center p-4 overflow-y-auto "
|
||||
style="background-color: var(--primary-color); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);"
|
||||
|
||||
:style="tgApp ? `padding-top: ${insetTop}px !important` : 'padding-top: 2rem !important'">
|
||||
<div class="flex flex-col w-full max-w-md !h-dvh !pb-20">
|
||||
<div v-if="categories.filter(i => i.type == CategoryType.INCOME).length>0" class="flex flex-col w-full">
|
||||
<span>Income categories</span>
|
||||
<div class="flex card justify-items-start justify-start h-fit">
|
||||
<div v-for="(cat, idx) in categories.filter(i => i.type == CategoryType.INCOME)" :key="cat.id"
|
||||
@click="transactionCategory = cat; transactionType = cat.type == 'EXPENSE' ? TransactionType.EXPENSE : TransactionType.INCOME; isCategorySelectorOpened = false"
|
||||
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold cursor-pointer hover:bg-gray-50 transition-colors">
|
||||
<div class="flex flex-row w-full items-center justify-between py-3">
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<span class="text-3xl">{{ cat.icon }} </span>
|
||||
<div class="flex flex-col justify-between">
|
||||
<div class="flex flex-row"> {{ cat.name }}</div>
|
||||
<div class="flex flex-row text-sm text-gray-600">{{ cat.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="pi pi-angle-right !font-extralight"/>
|
||||
</div>
|
||||
<Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="categories.filter(i => i.type == CategoryType.EXPENSE).length>0" class="flex flex-col w-full">
|
||||
<span>Expense categories</span>
|
||||
<div class="flex card justify-items-start justify-start h-fit">
|
||||
<div v-for="(cat, idx) in categories.filter(i => i.type == CategoryType.EXPENSE)" :key="cat.id"
|
||||
@click="transactionCategory = cat; transactionType = cat.type == 'EXPENSE' ? TransactionType.EXPENSE : TransactionType.INCOME; isCategorySelectorOpened = false"
|
||||
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold cursor-pointer hover:bg-gray-50 transition-colors">
|
||||
<div class="flex flex-row w-full items-center justify-between py-3">
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<span class="text-3xl">{{ cat.icon }} </span>
|
||||
<div class="flex flex-col justify-between">
|
||||
<div class="flex flex-row"> {{ cat.name }}</div>
|
||||
<div class="flex flex-row text-sm text-gray-600">{{ cat.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="pi pi-angle-right !font-extralight"/>
|
||||
</div>
|
||||
<Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-full ">
|
||||
<div class="flex flex-col w-full">
|
||||
<InputNumber
|
||||
v-model="transactionAmount"
|
||||
@input=" isAmountError = false"
|
||||
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="Amount"
|
||||
suffix="₽"
|
||||
class="text-7xl font-bold w-full text-center focus:outline-none !p-0 !m-0"
|
||||
|
||||
/>
|
||||
<span v-if="isAmountError" class="text-sm !text-red-500 font-extralight">Amount couldn't be less then 1</span>
|
||||
<!-- <span class="absolute right-2 top-1/2 -translate-y-1/2 text-7xl font-bold">₽</span>-->
|
||||
|
||||
<label class="!justify-items-center !justify-center !font-extralight text-gray-600 text-center">Amount</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex lg:flex-row flex-col w-full justify-between gap-4 ">
|
||||
<!-- <div class="card flex flex-col w-full items-center justify-center">-->
|
||||
<!-- <span class="text-lg hidden lg:flex">Тип транзакции</span>-->
|
||||
<!-- <SelectButton v-model="transactionType" :options="optionsType" optionLabel="label"-->
|
||||
<!-- optionValue="value"-->
|
||||
<!-- class="!w-full !items-center !justify-center !border-none "/>-->
|
||||
<!-- </div>-->
|
||||
<div class="card flex flex-col w-full items-center justify-center">
|
||||
|
||||
<span class="text-lg hidden lg:flex">Вид транзакции</span>
|
||||
<SelectButton v-model="transactionKind" :options="optionsKind" optionLabel="label"
|
||||
optionValue="value"
|
||||
class="!w-full !items-center !justify-center !border-none "/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full justify-items-start">
|
||||
<label class="!font-semibold text-gray-600 pl-2">Transaction name</label>
|
||||
<div class="flex card !justify-start !items-start !p-4 !pl-5 ">
|
||||
<input class="font-extralight w-full focus:outline-0" placeholder="Name"
|
||||
@input="transactionComment?.length ==0 ? isCommentError = true : isCommentError=false"
|
||||
v-model="transactionComment"/>
|
||||
</div>
|
||||
<span v-if="isCommentError" class="text-sm !text-red-500 font-extralight">Comment couldn't be empty.</span>
|
||||
|
||||
</div>
|
||||
<div class="flex flex-col w-full justify-items-start">
|
||||
<label class="!font-semibold text-gray-600 pl-2">Transaction category</label>
|
||||
<div class="flex card !justify-start !items-start !p-4 !pl-5 cursor-pointer"
|
||||
@click="isCategorySelectorOpened = true; isCategoryError=false;">
|
||||
<div class="flex flex-row w-full gap-2 items-center justify-between">
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<span class="!text-3xl ">{{ transactionCategory.icon }}</span>
|
||||
<div class="flex flex-col ">
|
||||
<span class=" !">{{ transactionCategory.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="pi pi-angle-right !font-extralight"/>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="isCategoryError" class="text-sm text-red-500 font-extralight">Category should be selected</span>
|
||||
</div>
|
||||
|
||||
<div class="flex !flex-col w-full justify-items-start">
|
||||
<label class="!font-semibold text-gray-600 !pl-2">Transaction date</label>
|
||||
<div class="card flex justify-center">
|
||||
<DatePicker inline v-model="transactionDate" class="w-auto !border-0"/>
|
||||
</div>
|
||||
|
||||
<span v-if="isDateError" class="text-sm text-red-500 font-extralight">
|
||||
Date couldn't be empty or less than 1 and greater than 31.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.p-datepicker-panel) {
|
||||
width: 100% !important;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user