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

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

@ -2,7 +2,18 @@
import { defineComponent } from "vue" import { defineComponent } from "vue"
export default defineComponent({ 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> </script>
@ -10,36 +21,70 @@ export default defineComponent({
<v-container> <v-container>
<h1>{{ $store.getters.CurrentAccount.Name }}</h1> <h1>{{ $store.getters.CurrentAccount.Name }}</h1>
<p> <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> </p>
<table> <table>
<tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}"> <tr>
<td style="width: 90px;">{{transaction.Date.substring(0, 10)}}</td> <td style="width: 90px;">
<input type="date" v-model="TransactionDate" />
</td>
<td style="max-width: 150px;"> <td style="max-width: 150px;">
{{transaction.Payee}} <input type="text" v-model="Payee" />
</td> </td>
<td style="max-width: 200px;"> <td style="max-width: 200px;">
{{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}} <input type="text" />
</td> </td>
<td> <td>
<a :href="'/budget/'+$store.getters.CurrentBudget.ID+'/transaction/'+transaction.ID">{{transaction.Memo}}</a> <input type="text" />
</td> </td>
<td style="width: 80px;" :class="transaction.Amount.Int < 0 ? 'negative' : ''"> <td style="width: 80px;">
{{transaction.Amount.Int / 100}} <input type="number" />
</td> </td>
<td style="width: 20px;"> <td style="width: 20px;">
{{transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*")}} <input type="submit" @click="saveTransaction" value="ι" />
</td> </td>
<td style="width: 20px;"> <td style="width: 20px;"></td>
{{transaction.GroupID ? "☀" : ""}} </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>
<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> </tr>
</table> </table>
</v-container> </v-container>
</template> </template>
<style> <style>
table {width: 100%; table-layout:fixed} table {
td {overflow: hidden; white-space: nowrap;} width: 100%;
.negative {color: red;} table-layout: fixed;
}
td {
overflow: hidden;
white-space: nowrap;
}
.negative {
color: red;
}
</style> </style>