fix empty category
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user