94 lines
3.3 KiB
Vue
94 lines
3.3 KiB
Vue
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { FETCH_MONTH_BUDGET } from "../store/action-types";
|
|
import { TITLE } from "../store/mutation-types";
|
|
import Currency from "../components/Currency.vue";
|
|
|
|
interface Date {
|
|
Year:Number,
|
|
Month:Number,
|
|
}
|
|
|
|
export default defineComponent({
|
|
mounted() {
|
|
this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
|
|
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
|
|
},
|
|
watch: {
|
|
year() {
|
|
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
|
|
},
|
|
month() {
|
|
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
|
|
},
|
|
},
|
|
props: ["budgetid", "year", "month"],
|
|
computed: {
|
|
Categories() {
|
|
return this.$store.getters.Categories(this.year, this.month);
|
|
},
|
|
previous() : Date {
|
|
return {
|
|
Year: new Date(this.year, this.month - 1, 1).getFullYear(),
|
|
Month: new Date(this.year, this.month - 1, 1).getMonth(),
|
|
};
|
|
},
|
|
current() : Date {
|
|
return {
|
|
Year: new Date().getFullYear(),
|
|
Month: new Date().getMonth(),
|
|
};
|
|
},
|
|
selected() : Date {
|
|
return {
|
|
Year: this.year,
|
|
Month: Number(this.month) + 1
|
|
}
|
|
},
|
|
next() : Date {
|
|
return {
|
|
Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
|
|
Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
|
|
};
|
|
}
|
|
},
|
|
components: { Currency }
|
|
})
|
|
|
|
/*{{define "title"}}
|
|
{{printf "Budget for %s %d" .Date.Month .Date.Year}}
|
|
{{end}}*/
|
|
</script>
|
|
|
|
<template>
|
|
<h1>
|
|
Budget for {{selected.Month}}/{{selected.Year}}
|
|
</h1>
|
|
<div>
|
|
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + previous.Year + '/' + previous.Month">Previous Month</router-link> -
|
|
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + current.Year + '/' + current.Month">Current Month</router-link> -
|
|
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + next.Year + '/' + next.Month">Next Month</router-link>
|
|
</div>
|
|
<table class="container col-lg-12" id="content">
|
|
<tr>
|
|
<th>Group</th>
|
|
<th>Category</th>
|
|
<th></th>
|
|
<th></th>
|
|
<th>Leftover</th>
|
|
<th>Assigned</th>
|
|
<th>Activity</th>
|
|
<th>Available</th>
|
|
</tr>
|
|
<tr v-for="category in Categories">
|
|
<td>{{category.Group}}</td>
|
|
<td>{{category.Name}}</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="text-right"><Currency :value="category.AvailableLastMonth" /></td>
|
|
<td class="text-right"><Currency :value="category.Assigned" /></td>
|
|
<td class="text-right"><Currency :value="category.Activity" /></td>
|
|
<td class="text-right"><Currency :value="category.Available" /></td>
|
|
</tr>
|
|
</table>
|
|
</template> |