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

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

@ -1,21 +1,24 @@
<script lang="ts"> <script lang="ts">
import NewBudget from '../dialogs/NewBudget.vue'; import NewBudget from '../dialogs/NewBudget.vue';
import Card from '../components/Card.vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
props: ["budgetid"], props: ["budgetid"],
components: { NewBudget } components: { NewBudget, Card }
}) })
</script> </script>
<template> <template>
<h1>Budgets</h1> <h1>Budgets</h1>
<div> <div class="flex">
<div v-for="budget in $store.getters.Budgets" class="budget-item"> <Card v-for="budget in $store.getters.Budgets">
<div class="text-h5 grey lighten-2"> <router-link v-bind:to="'/budget/'+budget.ID" class="contents">
<router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</router-link> <!--<svg class="w-24"></svg>-->
</div> <p class="w-24 text-center text-6xl"></p>
</div> <span class="text-lg">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span>
</router-link>
</Card>
<NewBudget /> <NewBudget />
</div> </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-text>
</v-card-header> </v-card-header>
<v-card-actions class="justify-center"> <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-actions>
</v-card> </v-card>
</v-col> </v-col>
@ -82,7 +82,7 @@ export default defineComponent({
</v-card-header-text> </v-card-header-text>
</v-card-header> </v-card-header>
<v-card-actions class="justify-center"> <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-actions>
</v-card> </v-card>
</v-col> </v-col>
@ -95,7 +95,7 @@ export default defineComponent({
</v-card-header-text> </v-card-header-text>
</v-card-header> </v-card-header>
<v-card-actions class="justify-center"> <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-actions>
</v-card> </v-card>
</v-col> </v-col>
@ -121,7 +121,6 @@ export default defineComponent({
<v-btn <v-btn
:disabled="filesIncomplete" :disabled="filesIncomplete"
@click="ynabImport" @click="ynabImport"
color="primary"
>Importieren</v-btn> >Importieren</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>