jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Extract card and use for budget list

Browse Source
This commit is contained in:
Jan Bader 2022-02-04 17:16:03 +00:00
parent dfa8f369f0
commit 3f7f646120
3 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/dialogs/NewBudget.vue
View File

@ -1,4 +1,5 @@
<script lang="ts">
import Card from '../components/Card.vue';
import { defineComponent } from "vue";
import { NEW_BUDGET } from "../store/action-types";
@ -9,6 +10,7 @@ export default defineComponent({
budgetName: ""
}
},
components: { Card },
methods: {
saveBudget() {
this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
@ -22,7 +24,10 @@ export default defineComponent({
</script>
<template>
<button color="primary" dark @click="newBudget">New Budget</button>
<Card>
<p class="w-24 text-center text-6xl">+</p>
<button class="text-lg" dark @click="newBudget">New Budget</button>
</Card>
<div v-if="dialog" justify="center">
<div>
<div>
@ -32,8 +37,8 @@ export default defineComponent({
<input type="text" v-model="budgetName" label="Budget name" required />
</div>
<div>
<button color="blue darken-1" text @click="dialog = false">Close</button>
<button color="blue darken-1" text @click="saveBudget">Save</button>
<button @click="dialog = false">Close</button>
<button @click="saveBudget">Save</button>
</div>
</div>
</div>

19
web/src/pages/Dashboard.vue
View File

@ -1,21 +1,24 @@
<script lang="ts">
import NewBudget from '../dialogs/NewBudget.vue';
import Card from '../components/Card.vue';
import { defineComponent } from 'vue';
export default defineComponent({
props: ["budgetid"],
components: { NewBudget }
components: { NewBudget, Card }
})
</script>
<template>
<h1>Budgets</h1>
<div>
<div v-for="budget in $store.getters.Budgets" class="budget-item">
<div class="text-h5 grey lighten-2">
<router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</router-link>
</div>
</div>
<div class="flex">
<Card v-for="budget in $store.getters.Budgets">
<router-link v-bind:to="'/budget/'+budget.ID" class="contents">
<!--<svg class="w-24"></svg>-->
<p class="w-24 text-center text-6xl"></p>
<span class="text-lg">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span>
</router-link>
</Card>
<NewBudget />
</div>
</template>
</template>

7
web/src/pages/Settings.vue
View File

@ -69,7 +69,7 @@ export default defineComponent({
</v-card-header-text>
</v-card-header>
<v-card-actions class="justify-center">
<v-btn @click="clearBudget" color="error">Clear budget</v-btn>
<v-btn @click="clearBudget">Clear budget</v-btn>
</v-card-actions>
</v-card>
</v-col>
@ -82,7 +82,7 @@ export default defineComponent({
</v-card-header-text>
</v-card-header>
<v-card-actions class="justify-center">
<v-btn @click="deleteBudget" color="error">Delete budget</v-btn>
<v-btn @click="deleteBudget">Delete budget</v-btn>
</v-card-actions>
</v-card>
</v-col>
@ -95,7 +95,7 @@ export default defineComponent({
</v-card-header-text>
</v-card-header>
<v-card-actions class="justify-center">
<v-btn @click="cleanNegative" color="primary">Fix negative</v-btn>
<v-btn @click="cleanNegative">Fix negative</v-btn>
</v-card-actions>
</v-card>
</v-col>
@ -121,7 +121,6 @@ export default defineComponent({
<v-btn
:disabled="filesIncomplete"
@click="ynabImport"
color="primary"
>Importieren</v-btn>
</v-card-actions>
</v-card>