tg app fix sizes
This commit is contained in:
@@ -8,33 +8,39 @@ 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";
|
||||
|
||||
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<string | undefined>(route.params.id)
|
||||
const recurrentId = ref<number | undefined>(route.params.id)
|
||||
const mode = computed(() => {
|
||||
return recurrentId.value ? "edit" : "create"
|
||||
})
|
||||
const recurrentCategory = ref<Category>({})
|
||||
const recurrentName = ref<string>()
|
||||
const recurrentCategory = ref<Category>({} as Category)
|
||||
const isCategoryError = ref(false)
|
||||
const recurrentName = ref<string>('')
|
||||
const isNameError = ref(false)
|
||||
const recurrentAmount = ref<number>(0)
|
||||
const recurrentDate = ref<number>(Math.floor(Math.random() * 31) )
|
||||
const isAmountError = ref(false)
|
||||
const recurrentDate = ref<number>(Math.floor(Math.random() * 31))
|
||||
const isDateError = ref(false)
|
||||
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
console.log('here')
|
||||
if (spaceStore.selectedSpaceId) {
|
||||
categories.value = await categoriesService.fetchCategories(spaceStore.selectedSpaceId)
|
||||
if (categories.value.length > 0) {
|
||||
if (mode.value === "edit") {
|
||||
console.log('here2')
|
||||
let recurrent = await recurrentsService.fetchRecurrent(spaceStore.selectedSpaceId, Number(recurrentId.value))
|
||||
recurrentCategory.value = recurrent.category
|
||||
recurrentName.value = recurrent.name
|
||||
@@ -83,8 +89,81 @@ function handlePaste(e: ClipboardEvent) {
|
||||
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")
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (tgApp && ['ios', 'android'].includes(tgApp.platform)) {
|
||||
@@ -94,15 +173,37 @@ onMounted(async () => {
|
||||
await fetchData()
|
||||
if (mode.value === "edit") {
|
||||
|
||||
toolbar.registerHandler('deleteRecurrent', () => {
|
||||
console.log("delete recurrent")
|
||||
toolbar.registerHandler('deleteRecurrent', async () => {
|
||||
if (spaceStore.selectedSpaceId && recurrentId.value) {
|
||||
await recurrentsService.deleteRecurrent(spaceStore.selectedSpaceId, recurrentId.value)
|
||||
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
|
||||
router.back()
|
||||
}
|
||||
})
|
||||
toolbar.registerHandler('updateRecurrent', () => {
|
||||
console.log("update Recurrent")
|
||||
toolbar.registerHandler('updateRecurrent', async () => {
|
||||
if (spaceStore.selectedSpaceId) {
|
||||
try {
|
||||
await recurrentsService.updateRecurrent(spaceStore.selectedSpaceId, 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', () => {
|
||||
console.log("create Recurrent")
|
||||
toolbar.registerHandler('createRecurrent', async () => {
|
||||
if (spaceStore.selectedSpaceId) {
|
||||
await recurrentsService.createRecurrent(spaceStore.selectedSpaceId, buildCreate())
|
||||
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
|
||||
router.back()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -141,10 +242,9 @@ onMounted(async () => {
|
||||
|
||||
<div class="flex flex-col w-full ">
|
||||
<div class="flex-col w-full">
|
||||
|
||||
<InputNumber
|
||||
v-model="recurrentAmount"
|
||||
@input="handleInput"
|
||||
@input=" isAmountError = false"
|
||||
@paste="handlePaste"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
@@ -153,6 +253,7 @@ onMounted(async () => {
|
||||
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>
|
||||
@@ -162,7 +263,8 @@ onMounted(async () => {
|
||||
</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="card !justify-start !items-start !p-4 !pl-5 cursor-pointer" @click="isCategorySelectorOpened = true">
|
||||
<div class="card !justify-start !items-start !p-4 !pl-5 cursor-pointer"
|
||||
@click="isCategorySelectorOpened = true; isCategoryError=false;">
|
||||
<div class="flex-row w-full gap-2 items-center justify-between">
|
||||
<div class="flex-row gap-2 items-center">
|
||||
<span class="!text-3xl ">{{ recurrentCategory.icon }}</span>
|
||||
@@ -174,12 +276,16 @@ onMounted(async () => {
|
||||
<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="card !justify-start !items-start !p-4 !pl-5 ">
|
||||
<input class="font-extralight w-full focus:outline-0" placeholder="Name" v-model="recurrentName"/>
|
||||
<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>
|
||||
@@ -188,11 +294,12 @@ onMounted(async () => {
|
||||
<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">
|
||||
@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>
|
||||
|
||||
Reference in New Issue
Block a user