344 lines
12 KiB
Vue
344 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import {useRoute} from "vue-router";
|
|
import {computed, onMounted, ref} from "vue";
|
|
import {useToolbarStore} from "@/stores/toolbar-store";
|
|
import {useToast} from "primevue/usetoast";
|
|
import {Divider, InputNumber} from "primevue";
|
|
import {categoriesService} from "@/services/categories-service";
|
|
import {useSpaceStore} from "@/stores/spaceStore";
|
|
import {recurrentsService} from "@/services/recurrents-service";
|
|
import {Category} from "@/models/category";
|
|
import router from "@/router";
|
|
import {useRecurrentsStore} from "@/stores/recurrent-store";
|
|
import {CreateRecurrentOperationDTO, UpdateRecurrentOperationDTO} from "@/models/recurrent-operation";
|
|
import ConfirmDialog from "@/components/ConfirmDialog.vue";
|
|
|
|
const route = useRoute()
|
|
const toolbar = useToolbarStore();
|
|
const toast = useToast();
|
|
const spaceStore = useSpaceStore();
|
|
const recurrentsStore = useRecurrentsStore();
|
|
|
|
const isCategorySelectorOpened = ref(false);
|
|
|
|
const categories = ref<Category[]>([]);
|
|
const recurrentId = ref<number | undefined>(route.params.id)
|
|
const mode = computed(() => {
|
|
return recurrentId.value ? "edit" : "create"
|
|
})
|
|
const recurrentCategory = ref<Category>({} as Category)
|
|
const isCategoryError = ref(false)
|
|
const recurrentName = ref<string>('')
|
|
const isNameError = ref(false)
|
|
const recurrentAmount = ref<number>(0)
|
|
const isAmountError = ref(false)
|
|
const recurrentDate = ref<number>(Math.floor(Math.random() * 31))
|
|
const isDateError = ref(false)
|
|
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
if (spaceStore.selectedSpaceId) {
|
|
categories.value = await categoriesService.fetchCategories(spaceStore.selectedSpaceId)
|
|
if (categories.value.length > 0) {
|
|
if (mode.value === "edit") {
|
|
let recurrent = await recurrentsService.fetchRecurrent(spaceStore.selectedSpaceId, Number(recurrentId.value))
|
|
recurrentCategory.value = recurrent.category
|
|
recurrentName.value = recurrent.name
|
|
recurrentAmount.value = recurrent.amount
|
|
recurrentDate.value = recurrent.date
|
|
} else {
|
|
recurrentCategory.value = categories.value[0]
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.log(err)
|
|
toast.add({
|
|
severity: "error",
|
|
summary: "Error while fetching category",
|
|
detail: err.detail.message,
|
|
life: 3000,
|
|
})
|
|
}
|
|
}
|
|
|
|
function handleInput(e: Event) {
|
|
const el = e.target as HTMLInputElement
|
|
const val = el.value.trim()
|
|
|
|
// если пусто — сбрасываем
|
|
if (!val) {
|
|
recurrentAmount.value = 0
|
|
return
|
|
}
|
|
|
|
// пробуем преобразовать в число
|
|
const num = Number(val)
|
|
recurrentAmount.value = isNaN(num) ? 0 : num
|
|
}
|
|
|
|
function handlePaste(e: ClipboardEvent) {
|
|
e.preventDefault() // предотвратить стандартную вставку
|
|
const text = e.clipboardData?.getData('text')?.trim() ?? ''
|
|
|
|
if (!text) {
|
|
recurrentAmount.value = 0
|
|
return
|
|
}
|
|
|
|
const num = Number(text)
|
|
recurrentAmount.value = isNaN(num) ? 0 : num
|
|
}
|
|
|
|
const tgApp = (window as any)?.Telegram?.WebApp;
|
|
const insetTop = ref(54)
|
|
const resetForm = () => {
|
|
isAmountError.value = false
|
|
isCategoryError.value = false
|
|
isNameError.value = false
|
|
isDateError.value = false
|
|
}
|
|
|
|
const validateForm = (): boolean => {
|
|
if (!recurrentCategory.value) {
|
|
isCategoryError.value = true
|
|
return false
|
|
}
|
|
if (recurrentAmount.value <= 0) {
|
|
isAmountError.value = true
|
|
return false
|
|
}
|
|
if (recurrentName.value.length == 0) {
|
|
isNameError.value = true
|
|
return false
|
|
}
|
|
|
|
if (recurrentDate.value < 1 && recurrentDate.value > 31) {
|
|
isDateError.value = true
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
const buildUpdate = (): UpdateRecurrentOperationDTO => {
|
|
if (validateForm()) {
|
|
if (mode.value === "edit") {
|
|
return {
|
|
categoryId: recurrentCategory.value.id,
|
|
name: recurrentName.value,
|
|
amount: recurrentAmount.value,
|
|
date: recurrentDate.value,
|
|
} as UpdateRecurrentOperationDTO
|
|
} else {
|
|
toast.add({
|
|
severity: "warn",
|
|
summary: "You cannot create while edit",
|
|
detail: "Editing only available when recurrent id is provided.",
|
|
})
|
|
throw new Error("Editing only available when recurrent id is provided.")
|
|
}
|
|
} else {
|
|
throw new Error("Form is not valid")
|
|
}
|
|
|
|
}
|
|
|
|
const buildCreate = (): CreateRecurrentOperationDTO => {
|
|
if (validateForm()) {
|
|
if (mode.value === "create") {
|
|
return {
|
|
categoryId: recurrentCategory.value.id,
|
|
name: recurrentName.value,
|
|
amount: recurrentAmount.value,
|
|
date: recurrentDate.value,
|
|
} as CreateRecurrentOperationDTO
|
|
} else {
|
|
toast.add({
|
|
severity: "warn",
|
|
summary: "You cannot edit while creating",
|
|
detail: "Creating only available when no recurrent id is provided.",
|
|
})
|
|
throw new Error("Creating only available when creating")
|
|
}
|
|
} else {
|
|
throw new Error("Form is not valid")
|
|
}
|
|
}
|
|
|
|
const isDeleteAlertVisible = ref(false)
|
|
const deleteAlertMessage = ref('Do you want to delete recurrent?')
|
|
const deleteRecurrent = async () => {
|
|
await recurrentsService.deleteRecurrent(spaceStore.selectedSpaceId, recurrentId.value)
|
|
// await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
|
|
if (window.history.length > 1) {
|
|
router.back()
|
|
} else {
|
|
await router.push('/categories')
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (tgApp && ['ios', 'android'].includes(tgApp.platform)) {
|
|
insetTop.value = tgApp.contentSafeAreaInset.top + tgApp.safeAreaInset.top
|
|
}
|
|
|
|
await fetchData()
|
|
if (mode.value === "edit") {
|
|
|
|
toolbar.registerHandler('deleteRecurrent', async () => {
|
|
console.log('deleteRecurrent1')
|
|
|
|
if (spaceStore.selectedSpaceId && recurrentId.value) {
|
|
console.log('deleteRecurrent2')
|
|
if (tgApp.initData) {
|
|
console.log('deleteRecurrent3')
|
|
tgApp.showConfirm(deleteAlertMessage.value, async (confirmed: boolean) => {
|
|
if (confirmed) {
|
|
console.log("recurrent id is deleted")
|
|
await deleteRecurrent()
|
|
}
|
|
})
|
|
} else {
|
|
console.log('deleteRecurrent4')
|
|
isDeleteAlertVisible.value = true
|
|
}
|
|
}
|
|
})
|
|
toolbar.registerHandler('updateRecurrent', async () => {
|
|
if (spaceStore.selectedSpaceId) {
|
|
try {
|
|
await recurrentsService.updateRecurrent(spaceStore.selectedSpaceId, Number(recurrentId.value), buildUpdate())
|
|
// await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
|
|
router.back()
|
|
} catch (error) {
|
|
toast.add({
|
|
severity: "error",
|
|
summary: "Error while updating recurrent",
|
|
detail: error.message,
|
|
life: 3000,
|
|
})
|
|
}
|
|
|
|
}
|
|
})
|
|
} else {
|
|
toolbar.registerHandler('createRecurrent', async () => {
|
|
if (spaceStore.selectedSpaceId) {
|
|
await recurrentsService.createRecurrent(spaceStore.selectedSpaceId, buildCreate())
|
|
// await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
|
|
router.back()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="categories.length===0" class="card !gap-4 !p-10">
|
|
<span class="">No categories available.</span>
|
|
<span class="text-center">Maybe you want to <router-link to="/categories" class="!text-blue-700">create a new category</router-link> first?</span>
|
|
</div>
|
|
<div v-else class="flex flex-col w-full justify-items-start gap-1">
|
|
<ConfirmDialog
|
|
v-if="isDeleteAlertVisible"
|
|
:message="deleteAlertMessage"
|
|
:callback="(confirmed) => { if (confirmed) deleteRecurrent(); isDeleteAlertVisible = false; }"
|
|
/>
|
|
<!-- Fixed modal container -->
|
|
<div v-if="isCategorySelectorOpened" class="fixed inset-0 z-50 flex items-start justify-center p-4 overflow-y-auto"
|
|
style="background-color: var(--primary-color); "
|
|
:style="tgApp ? `padding-top: ${insetTop}px !important` : 'padding-top: 2rem !important'">
|
|
<div class="flex w-full max-w-md">
|
|
<div class="flex card justify-items-start justify-start">
|
|
|
|
<div v-for="(cat, idx) in categories" :key="cat.id"
|
|
@click="recurrentCategory = cat; 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 class="flex flex-col w-full ">
|
|
<div class="flex flex-col w-full">
|
|
<InputNumber
|
|
v-model="recurrentAmount"
|
|
@input=" isAmountError = false"
|
|
@paste="handlePaste"
|
|
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 flex-col w-full justify-items-start">
|
|
<label class="!font-semibold text-gray-600 pl-2">Recurrent 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 ">{{ recurrentCategory.icon }}</span>
|
|
<div class="flex flex-col ">
|
|
<span class=" !">{{ recurrentCategory.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">Recurrent 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="recurrentName?.length ==0 ? isNameError = true : isNameError=false" v-model="recurrentName"/>
|
|
</div>
|
|
<span v-if="isNameError" class="text-sm !text-red-500 font-extralight">Name 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">Recurrent date</label>
|
|
<div class="flex card !justify-start !items-start !pl-2">
|
|
<div class="flex !grid !grid-cols-7 gap-2">
|
|
<div v-for="i in 31"
|
|
class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full cursor-pointer flex"
|
|
:class="recurrentDate == i ? 'bg-green-200' : 'bg-gray-100'"
|
|
@click="recurrentDate=i; isDateError=false">
|
|
{{ i }}
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<label class="!font-extralight text-gray-600 !pl-2">recurrent every N day of month</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |