116 lines
4.2 KiB
Vue
116 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
|
|
import {useSpaceStore} from "@/stores/spaceStore";
|
|
import {useToast} from "primevue/usetoast";
|
|
import {Divider} from "primevue";
|
|
import {computed, onMounted, ref} from "vue";
|
|
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()
|
|
const categoryStore = useCategoriesStore()
|
|
const toolbar = useToolbarStore()
|
|
const router = useRouter()
|
|
|
|
|
|
const categories = ref<Category[]>([])
|
|
const incomeCategories = computed(() => {
|
|
return categories.value.filter(i => i.type == CategoryType.INCOME)
|
|
})
|
|
const expenseCategories = computed(() => {
|
|
return categories.value.filter(i => i.type == CategoryType.EXPENSE)
|
|
})
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
if (spaceStore.selectedSpaceId !== undefined) {
|
|
let spaceId = spaceStore.selectedSpaceId!!
|
|
await categoryStore.fetchCategories(spaceId)
|
|
categories.value = categoryStore.categories
|
|
}
|
|
} catch (error: Error) {
|
|
toast.add({
|
|
severity: 'error',
|
|
summary: 'Failed to fetch categories.',
|
|
detail: error.message
|
|
})
|
|
}
|
|
}
|
|
|
|
const toCreation = () => {
|
|
router.push(`/categories/create`)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchData()
|
|
toolbar.registerHandler('openCategoryCreation', () => {
|
|
toCreation()
|
|
})
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="flex flex-col w-full !pb-10 gap-6">
|
|
<div class="flex flex-col">
|
|
<span class="!pl-4">Income categories</span>
|
|
<div class="flex card flex-col ">
|
|
|
|
<span v-if="incomeCategories.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 incomeCategories.keys()"
|
|
:key="incomeCategories[key].id"
|
|
@click="router.push(`/categories/${incomeCategories[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"> {{ incomeCategories[key].icon }}</span>
|
|
<div class="flex flex-col !font-bold "> {{ incomeCategories[key].name }}
|
|
<div class="flex flex-row text-sm">{{ incomeCategories[key].description }} |
|
|
{{ CategoryTypeName[incomeCategories[key].type] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<i class="pi pi-angle-right !font-extralight"/>
|
|
</div>
|
|
<Divider v-if="key+1 !== incomeCategories.length" class="!m-0 !py-3"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="!pl-4">Expense categories</span>
|
|
<div class="flex card ">
|
|
|
|
<span v-if="expenseCategories.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 expenseCategories.keys()"
|
|
:key="expenseCategories[key].id"
|
|
@click="router.push(`/categories/${expenseCategories[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"> {{ expenseCategories[key].icon }}</span>
|
|
<div class="flex flex-col !font-bold "> {{ expenseCategories[key].name }}
|
|
<div class="flex flex-row text-sm">{{ expenseCategories[key].description }} |
|
|
{{ CategoryTypeName[expenseCategories[key].type] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<i class="pi pi-angle-right !font-extralight"/>
|
|
</div>
|
|
<Divider v-if="key+1 !== expenseCategories.length" class="!m-0 !py-3"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |