Annika
85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<template>
|
|
<div class="component">
|
|
<div class="hidden md:block cursor-pointer">
|
|
<form @submit.prevent="createCategory">
|
|
<input type="text" v-model="newCatName" placeholder="Add New Category" required class="text-slate-50 bg-stone-800 hover:bg-green-300 hover:text-stone-900 p-1">
|
|
<button type="submit" class="text-slate-50 bg-stone-800 hover:bg-green-300 hover:text-stone-900 p-1">
|
|
<i class="mdi mdi-plus"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="flex md:mt-6 md:mx-40 flex-col md:flex-row">
|
|
<div class="md:w-4/12 md:order-last my-4 md:my-0 bg-stone-800">analysis container</div>
|
|
<div class="md:w-8/12 md:mr-4">
|
|
<div class="flex justify-between bg-stone-700 text-green-300 hover:bg-green-200 hover:text-stone-900 mb-2 p-2 pr-0">
|
|
<h3 class="text-2xl font-semibold">Category</h3>
|
|
<div class="flex">
|
|
<p class="w-16 font-semibold px-2 border-l-2 border-stone-900">Spent</p>
|
|
<p class="w-16 font-semibold px-2 border-l-2 border-stone-900">Budg</p>
|
|
</div>
|
|
</div>
|
|
<Category v-for="c in categories" :key="c._id" :category="c" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { computed, onMounted } from 'vue'
|
|
import { AppState } from '../AppState'
|
|
import { categoriesService } from '../services/CategoriesService'
|
|
import { logger } from '../utils/Logger'
|
|
|
|
|
|
export default {
|
|
setup(){
|
|
onMounted(async () => {
|
|
try {
|
|
// console.log(AppState.categories)
|
|
await categoriesService.getAll()
|
|
// console.log(AppState.categories)
|
|
} catch (error) {
|
|
logger.log(error)
|
|
}
|
|
})
|
|
return {
|
|
newCatName: '',
|
|
categories: computed(() => AppState.categories),
|
|
async createCategory() {
|
|
try {
|
|
await categoriesService.create(this.newCatName)
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|
|
|
|
<!--
|
|
import { computed, onMounted } from 'vue'
|
|
import { AppState } from '../AppState'
|
|
import { transactionsService } from '../services/TransactionsService'
|
|
import { logger } from '../utils/Logger'
|
|
|
|
export default {
|
|
setup(){
|
|
onMounted(async () => {
|
|
try {
|
|
await transactionsService.getAll()
|
|
} catch (error) {
|
|
logger.log(error)
|
|
}
|
|
})
|
|
return {
|
|
transactions: computed(() => AppState.transactions)
|
|
}
|
|
}
|
|
} --> |