fix empty category

This commit is contained in:
xds
2025-11-10 09:17:07 +03:00
parent 87f64b0fb6
commit 239e3e43ac

View File

@@ -29,6 +29,8 @@ const tgApp = window.Telegram.WebApp
const isCategorySelectorOpened = ref(false); const isCategorySelectorOpened = ref(false);
const categories = ref<Category[]>([]); 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 transactionId = ref<number | undefined>(route.params.id)
const mode = computed(() => { const mode = computed(() => {
return transactionId.value ? "edit" : "create" 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 <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> 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 <ConfirmDialog
v-if="isDeleteAlertVisible" v-if="isDeleteAlertVisible"
:message="deleteAlertMessage" :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"> <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 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" @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"> 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 w-full items-center justify-between py-3">
@@ -299,14 +301,14 @@ onMounted(async () => {
</div> </div>
<i class="pi pi-angle-right !font-extralight"/> <i class="pi pi-angle-right !font-extralight"/>
</div> </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>
</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> <span>Expense 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 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" @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"> 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 w-full items-center justify-between py-3">
@@ -319,7 +321,7 @@ onMounted(async () => {
</div> </div>
<i class="pi pi-angle-right !font-extralight"/> <i class="pi pi-angle-right !font-extralight"/>
</div> </div>
<Divider v-if="idx + 1 !== categories.length" class="!m-0"/> <Divider v-if="idx + 1 !== expenseCategories.length" class="!m-0"/>
</div> </div>
</div> </div>
</div> </div>