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

Implement dummy row for new transaction

Browse Source
This commit is contained in:
Jan Bader 2022-02-01 20:23:19 +00:00
parent 37a842b395
commit 2b885ca189
1 changed files with 61 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
web/src/pages/Account.vue
View File

@ -2,44 +2,89 @@
import { defineComponent } from "vue"
export default defineComponent({
props: ["budgetid", "accountid"]
data() {
return {
TransactionDate: new Date().toISOString().substring(0, 10),
Payee: "",
}
},
props: ["budgetid", "accountid"],
methods: {
saveTransaction(e : MouseEvent) {
e.preventDefault();
}
}
})
</script>
<template>
<v-container>
<h1>{{$store.getters.CurrentAccount.Name}}</h1>
<h1>{{ $store.getters.CurrentAccount.Name }}</h1>
<p>
Current Balance: <span :class="$store.getters.CurrentAccount.Balance.Int < 0 ? 'negative' : ''">{{$store.getters.CurrentAccount.Balance.Int / 100}}</span>
Current Balance:
<span
:class="$store.getters.CurrentAccount.Balance.Int < 0 ? 'negative' : ''"
>{{ $store.getters.CurrentAccount.Balance.Int / 100 }}</span>
</p>
<table>
<tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}">
<td style="width: 90px;">{{transaction.Date.substring(0, 10)}}</td>
<tr>
<td style="width: 90px;">
<input type="date" v-model="TransactionDate" />
</td>
<td style="max-width: 150px;">
{{transaction.Payee}}
<input type="text" v-model="Payee" />
</td>
<td style="max-width: 200px;">
{{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}}
<input type="text" />
</td>
<td>
<a :href="'/budget/'+$store.getters.CurrentBudget.ID+'/transaction/'+transaction.ID">{{transaction.Memo}}</a>
<input type="text" />
</td>
<td style="width: 80px;" :class="transaction.Amount.Int < 0 ? 'negative' : ''">
{{transaction.Amount.Int / 100}}
<td style="width: 80px;">
<input type="number" />
</td>
<td style="width: 20px;">
{{transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*")}}
<input type="submit" @click="saveTransaction" value="ι" />
</td>
<td style="width: 20px;">
{{transaction.GroupID ? "☀" : ""}}
<td style="width: 20px;"></td>
</tr>
<tr
v-for="transaction in $store.getters.Transactions"
class="{{transaction.Date.After now ? 'future' : ''}}"
>
<td style="width: 90px;">{{ transaction.Date.substring(0, 10) }}</td>
<td style="max-width: 150px;">{{ transaction.Payee }}</td>
<td
style="max-width: 200px;"
>{{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}</td>
<td>
<a
:href="'/budget/' + $store.getters.CurrentBudget.ID + '/transaction/' + transaction.ID"
>{{ transaction.Memo }}</a>
</td>
<td
style="width: 80px;"
:class="transaction.Amount.Int < 0 ? 'negative' : ''"
>{{ transaction.Amount.Int / 100 }}</td>
<td
style="width: 20px;"
>{{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}</td>
<td style="width: 20px;">{{ transaction.GroupID ? "☀" : "" }}</td>
</tr>
</table>
</v-container>
</template>
<style>
table {width: 100%; table-layout:fixed}
td {overflow: hidden; white-space: nowrap;}
.negative {color: red;}
table {
width: 100%;
table-layout: fixed;
}
td {
overflow: hidden;
white-space: nowrap;
}
.negative {
color: red;
}
</style>