add network
This commit is contained in:
@@ -8,6 +8,7 @@ import {Category} from "@/models/category";
|
||||
import {useToolbarStore} from "@/stores/toolbar-store";
|
||||
import {useRouter} from "vue-router";
|
||||
import {useCategoriesStore} from "@/stores/categories-store";
|
||||
import {CategoryType, CategoryTypeName} from "@/models/enums";
|
||||
|
||||
const toast = useToast()
|
||||
const spaceStore = useSpaceStore()
|
||||
@@ -20,7 +21,7 @@ const categories = ref<Category[]>([])
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
if (spaceStore.selectedSpaceId !== null) {
|
||||
if (spaceStore.selectedSpaceId !== undefined) {
|
||||
let spaceId = spaceStore.selectedSpaceId!!
|
||||
await categoryStore.fetchCategories(spaceId)
|
||||
categories.value = categoryStore.categories
|
||||
@@ -50,21 +51,56 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex flex-col w-full !pb-10 gap-6">
|
||||
<div class="flex flex-col">
|
||||
<span>Income categories</span>
|
||||
<div class="flex card flex-col ">
|
||||
|
||||
<div class="card">
|
||||
<div v-for="key in categories.keys()" :key="categories[key].id"
|
||||
@click="router.push(`/categories/${categories[key].id}/edit`)"
|
||||
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold ">
|
||||
<div class="flex-row w-full items-center justify-between">
|
||||
<div class="flex-row items-center gap-2 ">
|
||||
<span class="text-3xl"> {{ categories[key].icon }}</span>
|
||||
<div class="flex-col !font-bold "> {{ categories[key].name }}
|
||||
<div class="flex flex-row text-sm">{{ categories[key].description }}</div>
|
||||
<span v-if="categories.filter(i => i.type == CategoryType.INCOME).length ==0 ">It looks like you haven't create any income category yet. <router-link
|
||||
to="/categories/create" class="!text-blue-400">Try to create some first.</router-link></span>
|
||||
<div v-else v-for="key in categories.filter(i => i.type == CategoryType.INCOME).keys()"
|
||||
:key="categories[key].id"
|
||||
@click="router.push(`/categories/${categories[key].id}/edit`)"
|
||||
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold ">
|
||||
<div class="flex flex-row w-full items-center justify-between">
|
||||
<div class="flex flex-row items-center gap-2 ">
|
||||
<span class="text-3xl"> {{ categories[key].icon }}</span>
|
||||
<div class="flex flex-col !font-bold "> {{ categories[key].name }}
|
||||
<div class="flex flex-row text-sm">{{ categories[key].description }} |
|
||||
{{ CategoryTypeName[categories[key].type] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="pi pi-angle-right !font-extralight"/>
|
||||
</div>
|
||||
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span>Expense categories</span>
|
||||
<div class="flex card ">
|
||||
|
||||
<span v-if="categories.filter(i => i.type == CategoryType.EXPENSE).length ==0 ">It looks like you haven't create any expense category yet. <router-link
|
||||
to="/categories/create" class="!text-blue-400">Try to create some first.</router-link></span>
|
||||
<div v-else v-for="key in categories.filter(i => i.type == CategoryType.EXPENSE).keys()"
|
||||
:key="categories[key].id"
|
||||
@click="router.push(`/categories/${categories[key].id}/edit`)"
|
||||
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold ">
|
||||
<div class="flex flex-row w-full items-center justify-between">
|
||||
<div class="flex flex-row items-center gap-2 ">
|
||||
<span class="text-3xl"> {{ categories[key].icon }}</span>
|
||||
<div class="flex flex-col !font-bold "> {{ categories[key].name }}
|
||||
<div class="flex flex-row text-sm">{{ categories[key].description }} |
|
||||
{{ CategoryTypeName[categories[key].type] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="pi pi-angle-right !font-extralight"/>
|
||||
</div>
|
||||
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
|
||||
</div>
|
||||
<i class="pi pi-angle-right !font-extralight"/>
|
||||
</div>
|
||||
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user