fix empty category
This commit is contained in:
@@ -285,7 +285,7 @@ onMounted(async () => {
|
|||||||
|
|
||||||
:style="tgApp ? `padding-top: ${insetTop}px !important` : 'padding-top: 2rem !important'">
|
: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 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">
|
<div v-if="categories.filter(i => i.type == CategoryType.INCOME).length>0" class="flex flex-col w-full">
|
||||||
<span>Income categories</span>
|
<span>Income categories</span>
|
||||||
<div class="flex card justify-items-start justify-start h-fit">
|
<div class="flex card justify-items-start justify-start h-fit">
|
||||||
<div v-for="(cat, idx) in incomeCategories" :key="cat.id"
|
<div v-for="(cat, idx) in incomeCategories" :key="cat.id"
|
||||||
@@ -354,49 +354,50 @@ onMounted(async () => {
|
|||||||
<!-- optionValue="value"-->
|
<!-- optionValue="value"-->
|
||||||
<!-- class="!w-full !items-center !justify-center !border-none "/>-->
|
<!-- class="!w-full !items-center !justify-center !border-none "/>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <div class="card flex flex-col w-full items-center justify-center">-->
|
<!-- <div class="card flex flex-col w-full items-center justify-center">-->
|
||||||
|
|
||||||
<!-- <span class="text-lg hidden lg:flex">Вид транзакции</span>-->
|
<!-- <span class="text-lg hidden lg:flex">Вид транзакции</span>-->
|
||||||
<!-- <SelectButton v-model="transactionKind" :options="optionsKind" optionLabel="label"-->
|
<!-- <SelectButton v-model="transactionKind" :options="optionsKind" optionLabel="label"-->
|
||||||
<!-- optionValue="value"-->
|
<!-- optionValue="value"-->
|
||||||
<!-- class="!w-full !items-center !justify-center !border-none "/>-->
|
<!-- class="!w-full !items-center !justify-center !border-none "/>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col w-full justify-items-start">
|
<div class="flex flex-row w-full justify-between gap-4 ">
|
||||||
<label class="!font-semibold text-gray-600 pl-2">Transaction name</label>
|
<div class="flex flex-col w-full justify-items-start">
|
||||||
<div class="flex card !justify-start !items-start !p-4 !pl-5 ">
|
<label class="!font-semibold text-gray-600 pl-2">Transaction comment</label>
|
||||||
<input class="font-extralight w-full focus:outline-0" placeholder="Name"
|
<div class="flex card !justify-start !items-start !p-[1.11rem] !pl-5 ">
|
||||||
@input="transactionComment?.length ==0 ? isCommentError = true : isCommentError=false"
|
<input class="font-extralight w-full focus:outline-0" placeholder="Comment"
|
||||||
v-model="transactionComment"/>
|
@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>
|
||||||
<span v-if="isCommentError" class="text-sm !text-red-500 font-extralight">Comment couldn't be empty.</span>
|
<div class="flex flex-col w-full justify-items-start">
|
||||||
|
<label class="!font-semibold text-gray-600 pl-2">Transaction category</label>
|
||||||
</div>
|
<div class="flex card !justify-start !items-start !p-3 !pl-5 cursor-pointer"
|
||||||
<div class="flex flex-col w-full justify-items-start">
|
@click="isCategorySelectorOpened = true; isCategoryError=false;">
|
||||||
<label class="!font-semibold text-gray-600 pl-2">Transaction category</label>
|
<div class="flex flex-row w-full gap-2 items-center justify-between">
|
||||||
<div class="flex card !justify-start !items-start !p-4 !pl-5 cursor-pointer"
|
<div v-if="transactionCategory" class="flex flex-row gap-2 items-center">
|
||||||
@click="isCategorySelectorOpened = true; isCategoryError=false;">
|
<span class="!text-3xl ">{{ transactionCategory.icon }}</span>
|
||||||
<div class="flex flex-row w-full gap-2 items-center justify-between">
|
<div class="flex flex-col ">
|
||||||
<div v-if="transactionCategory" 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 class=" !">{{ transactionCategory.name }}
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-else class="flex flex-row gap-2 items-center">
|
||||||
<div v-else class="flex flex-row gap-2 items-center">
|
<i class="pi pi-question !text-3xl "></i>
|
||||||
<i class="pi pi-question !text-3xl "></i>
|
<div class="flex flex-col ">
|
||||||
<div class="flex flex-col ">
|
|
||||||
<span class=" !">Категория не определена
|
<span class=" !">Категория не определена
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<i class="pi pi-angle-right !font-extralight"/>
|
||||||
</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>
|
||||||
<span v-if="isCategoryError" class="text-sm text-red-500 font-extralight">Category should be selected</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex !flex-col w-full justify-items-start">
|
<div class="flex !flex-col w-full justify-items-start">
|
||||||
<label class="!font-semibold text-gray-600 !pl-2">Transaction date</label>
|
<label class="!font-semibold text-gray-600 !pl-2">Transaction date</label>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
|
|||||||
Reference in New Issue
Block a user