fix empty category
This commit is contained in:
@@ -29,6 +29,8 @@ const tgApp = window.Telegram.WebApp
|
||||
const isCategorySelectorOpened = ref(false);
|
||||
|
||||
const categories = ref<Category[]>([]);
|
||||
const incomeCategories = computed(() => categories.value.filter(i => i.type == CategoryType.INCOME))
|
||||
const expenseCategories = computed(() => categories.value.filter(i => i.type == CategoryType.EXPENSE))
|
||||
const transactionId = ref<number | undefined>(route.params.id)
|
||||
const mode = computed(() => {
|
||||
return transactionId.value ? "edit" : "create"
|
||||
@@ -270,7 +272,7 @@ onMounted(async () => {
|
||||
<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">
|
||||
<div v-else class="flex flex-col w-full justify-items-start gap-1 pb-10">
|
||||
<ConfirmDialog
|
||||
v-if="isDeleteAlertVisible"
|
||||
:message="deleteAlertMessage"
|
||||
@@ -286,7 +288,7 @@ onMounted(async () => {
|
||||
<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"
|
||||
<div v-for="(cat, idx) in incomeCategories" :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">
|
||||
@@ -299,14 +301,14 @@ onMounted(async () => {
|
||||
</div>
|
||||
<i class="pi pi-angle-right !font-extralight"/>
|
||||
</div>
|
||||
<Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
|
||||
<Divider v-if="idx + 1 !== incomeCategories.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">
|
||||
<div v-if="incomeCategories.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"
|
||||
<div v-for="(cat, idx) in expenseCategories" :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">
|
||||
@@ -319,7 +321,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
<i class="pi pi-angle-right !font-extralight"/>
|
||||
</div>
|
||||
<Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
|
||||
<Divider v-if="idx + 1 !== expenseCategories.length" class="!m-0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user