73 lines
2.3 KiB
Vue
73 lines
2.3 KiB
Vue
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { TITLE } from "../store/mutation-types";
|
|
|
|
export default defineComponent({
|
|
mounted() {
|
|
this.$store.dispatch(TITLE, "Budget for " + this.month + " " + this.year)
|
|
},
|
|
props: ["budgetid", "year", "month"],
|
|
data() {
|
|
return {
|
|
Year: this.year || new Date().getFullYear(),
|
|
Month: this.month || new Date().getMonth()
|
|
}
|
|
},
|
|
computed: {
|
|
previous() {
|
|
return {
|
|
Year: new Date(this.$data.Year, this.$data.Month - 1, 1).getFullYear(),
|
|
Month: new Date(this.$data.Year, this.$data.Month - 1, 1).getMonth(),
|
|
}
|
|
},
|
|
current() {
|
|
return {
|
|
Year: new Date().getFullYear(),
|
|
Month: new Date().getMonth(),
|
|
}
|
|
},
|
|
next() {
|
|
return {
|
|
Year: new Date(this.$data.Year, this.$data.Month + 1, 1).getFullYear(),
|
|
Month: new Date(this.$data.Year, this.$data.Month + 1, 1).getMonth(),
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
/*{{define "title"}}
|
|
{{printf "Budget for %s %d" .Date.Month .Date.Year}}
|
|
{{end}}*/
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + previous.Year + '/' + previous.Month">Previous Month</router-link> -
|
|
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + current.Year + '/' + current.Month">Current Month</router-link> -
|
|
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + 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 $store.state.Categories">
|
|
<td>{{category.Group}}</td>
|
|
<td>{{category.Name}}</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>{{category.AvailableLastMonth}}</td>
|
|
<td>{{category.Assigned}}</td>
|
|
<td>{{category.Activity}}</td>
|
|
<td>{{category.Available}}</td>
|
|
</tr>
|
|
</table>
|
|
</template> |