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

Move Transaction row to own component

Browse Source
This commit is contained in:
Jan Bader 2022-02-09 08:05:48 +00:00
parent 09a242f6f6
commit bd1e1cbfb8
2 changed files with 45 additions and 27 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>

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

@ -2,6 +2,7 @@
import { defineComponent } from "vue" import { defineComponent } from "vue"
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue' import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
import Currency from "../components/Currency.vue"; import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue";
export default defineComponent({ export default defineComponent({
data() { data() {
@ -13,7 +14,7 @@ export default defineComponent({
Amount: 0 Amount: 0
} }
}, },
components: { Autocomplete, Currency }, components: { Autocomplete, Currency, TransactionRow },
props: ["budgetid", "accountid"], props: ["budgetid", "accountid"],
methods: { methods: {
saveTransaction(e : MouseEvent) { saveTransaction(e : MouseEvent) {
@ -66,28 +67,9 @@ export default defineComponent({
</td> </td>
<td style="width: 20px;"></td> <td style="width: 20px;"></td>
</tr> </tr>
<tr v-for="(transaction, index) in $store.getters.Transactions" <TransactionRow v-for="(transaction, index) in $store.getters.Transactions"
class="{{transaction.Date.After now ? 'future' : ''}}" :transaction="transaction"
:class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']"> :index="index" />
<!--: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>
</table> </table>
</template> </template>
@ -96,10 +78,6 @@ table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
} }
td {
overflow: hidden;
white-space: nowrap;
}
.negative { .negative {
color: red; color: red;
} }