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

Merge pull request 'design-improvements' (#5) from design-improvements into master

Browse Source 
Reviewed-on: #5
This commit is contained in:
Jan Bader 2022-02-09 23:40:27 +01:00
commit 499d78a781
2 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/components/TransactionRow.vue Normal file
View File

@ -0,0 +1,40 @@
<script lang="ts">
import { defineComponent } from "vue";
import Currency from "./Currency.vue";
export default defineComponent({
props: [ "transaction", "index" ],
components: { Currency }
})
</script>
<template>
<tr class="{{transaction.Date.After now ? 'future' : ''}}"
:class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']">
<!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
<td style="width: 90px;">{{ transaction.Date.substring(0, 10) }}</td>
<td style="max-width: 150px;">{{ transaction.TransferAccount ? "Transfer : " + transaction.TransferAccount : transaction.Payee }}</td>
<td style="max-width: 200px;">
{{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}
</td>
<td>
<a :href="'/budget/' + $store.getters.CurrentBudgetID + '/transaction/' + transaction.ID">
{{ transaction.Memo }}
</a>
</td>
<td>
<Currency class="block" :value="transaction.Amount" />
</td>
<td style="width: 20px;">
{{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}
</td>
<td style="width: 20px;">{{ transaction.GroupID ? "☀" : "" }}</td>
</tr>
</template>
<style>
td {
overflow: hidden;
white-space: nowrap;
}
</style>

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

@ -2,6 +2,7 @@
import { defineComponent } from "vue"
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue";
export default defineComponent({
data() {
@ -13,7 +14,7 @@ export default defineComponent({
Amount: 0
}
},
components: { Autocomplete, Currency },
components: { Autocomplete, Currency, TransactionRow },
props: ["budgetid", "accountid"],
methods: {
saveTransaction(e : MouseEvent) {
@ -45,6 +46,15 @@ export default defineComponent({
<Currency :value="$store.getters.CurrentAccount.Balance" />
</p>
<table>
<tr class="font-bold">
<td style="width: 90px;">Date</td>
<td style="max-width: 150px;">Payee</td>
<td style="max-width: 200px;">Category</td>
<td>Memo</td>
<td class="text-right">Amount</td>
<td style="width: 20px;"></td>
<td style="width: 20px;"></td>
</tr>
<tr>
<td style="width: 90px;" class="text-sm">
<input type="date" v-model="TransactionDate" />
@ -58,36 +68,17 @@ export default defineComponent({
<td>
<input type="text" v-model="Memo" />
</td>
<td style="width: 80px;">
<input type="currency" v-model="Amount" />
<td style="width: 80px;" class="text-right">
<input class="text-right" type="currency" v-model="Amount" />
</td>
<td style="width: 20px;">
<input type="submit" @click="saveTransaction" value="Save" />
</td>
<td style="width: 20px;"></td>
</tr>
<tr v-for="(transaction, index) in $store.getters.Transactions"
class="{{transaction.Date.After now ? 'future' : ''}}"
:class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']">
<!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
<td style="width: 90px;">{{ transaction.Date.substring(0, 10) }}</td>
<td style="max-width: 150px;">{{ transaction.TransferAccount ? "Transfer : " + transaction.TransferAccount : transaction.Payee }}</td>
<td
style="max-width: 200px;"
>{{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}</td>
<td>
<a
:href="'/budget/' + $store.getters.CurrentBudgetID + '/transaction/' + transaction.ID"
>{{ transaction.Memo }}</a>
</td>
<td>
<Currency class="block" :value="transaction.Amount" />
</td>
<td
style="width: 20px;"
>{{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}</td>
<td style="width: 20px;">{{ transaction.GroupID ? "☀" : "" }}</td>
</tr>
<TransactionRow v-for="(transaction, index) in $store.getters.Transactions"
:transaction="transaction"
:index="index" />
</table>
</template>
@ -96,10 +87,6 @@ table {
width: 100%;
table-layout: fixed;
}
td {
overflow: hidden;
white-space: nowrap;
}
.negative {
color: red;
}