Implement account transactions with commodity detail view
This commit is contained in:
parent
d3250bcfe0
commit
aff795745c
GPG Key ID:
7234E476BF21C61A
@ -18,6 +18,37 @@
|
|||||||
|
|
||||||
import { db } from './db.ts';
|
import { db } from './db.ts';
|
||||||
|
|
||||||
|
export interface Amount {
|
||||||
|
quantity: number;
|
||||||
|
commodity: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Balance {
|
||||||
|
// A collection of Amount's
|
||||||
|
amounts: Amount[] = [];
|
||||||
|
|
||||||
|
add(quantity: number, commodity: string) {
|
||||||
|
const existingAmount = this.amounts.find((a) => a.commodity === commodity);
|
||||||
|
if (existingAmount) {
|
||||||
|
existingAmount.quantity += quantity;
|
||||||
|
} else {
|
||||||
|
this.amounts.push({ quantity: quantity, commodity: commodity });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clone(): Balance {
|
||||||
|
const newBalance = new Balance();
|
||||||
|
for (const amount of this.amounts) {
|
||||||
|
newBalance.amounts.push({ quantity: amount.quantity, commodity: amount.commodity });
|
||||||
|
}
|
||||||
|
return newBalance;
|
||||||
|
}
|
||||||
|
|
||||||
|
clean() {
|
||||||
|
this.amounts = this.amounts.filter((a) => a.quantity !== 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export function asCost(quantity: number, commodity: string): number {
|
export function asCost(quantity: number, commodity: string): number {
|
||||||
// Convert the amount to cost price in the reporting commodity
|
// Convert the amount to cost price in the reporting commodity
|
||||||
|
|
||||||
@ -56,7 +56,7 @@
|
|||||||
|
|
||||||
import { onUnmounted, ref } from 'vue';
|
import { onUnmounted, ref } from 'vue';
|
||||||
|
|
||||||
import { asCost } from '../commodities.ts';
|
import { asCost } from '../amounts.ts';
|
||||||
import { JoinedTransactionPosting, Transaction, db, joinedToTransactions } from '../db.ts';
|
import { JoinedTransactionPosting, Transaction, db, joinedToTransactions } from '../db.ts';
|
||||||
import { pp, ppWithCommodity } from '../display.ts';
|
import { pp, ppWithCommodity } from '../display.ts';
|
||||||
|
|
||||||
|
|||||||
@ -18,55 +18,36 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<h1 class="page-heading">
|
<h1 class="page-heading">
|
||||||
Account transactions
|
{{ route.params.account }}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div class="my-4 flex gap-x-2">
|
<div class="my-4 flex gap-x-2">
|
||||||
<!--<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
|
<!--<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
|
||||||
<PlusIcon />
|
<PlusIcon />
|
||||||
New transaction
|
New transaction
|
||||||
</a>
|
|
||||||
<a href="{{ url_for('account_transactions', account=account, commodity_detail=1) }}" class="btn-secondary">
|
|
||||||
Show commodity detail
|
|
||||||
</a>-->
|
</a>-->
|
||||||
|
<button v-if="commodityDetail" class="btn-secondary" @click="commodityDetail = false">Hide commodity detail</button>
|
||||||
|
<button v-if="!commodityDetail" class="btn-secondary" @click="commodityDetail = true">Show commodity detail</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="transaction-list" class="max-h-[100vh] overflow-y-scroll wk-aa">
|
<TransactionsWithCommodityView v-if="commodityDetail" :transactions="transactions"/>
|
||||||
<table class="min-w-full">
|
<TransactionsWithoutCommodityView v-if="!commodityDetail" :transactions="transactions"/>
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="py-0.5 pr-1 text-gray-900 font-semibold lg:w-[12ex] text-start">Date</th>
|
|
||||||
<th class="py-0.5 px-1 text-gray-900 font-semibold text-start">Description</th>
|
|
||||||
<th class="py-0.5 px-1 text-gray-900 font-semibold text-start">Related Account</th>
|
|
||||||
<th class="py-0.5 px-1 text-gray-900 font-semibold lg:w-[12ex] text-end">Dr</th>
|
|
||||||
<th class="py-0.5 px-1 text-gray-900 font-semibold lg:w-[12ex] text-end">Cr</th>
|
|
||||||
<th class="py-0.5 px-1 text-gray-900 font-semibold lg:w-[12ex] text-end">Balance</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="min-w-full">
|
|
||||||
<tr>
|
|
||||||
<td colspan="7">Loading data…</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Clusterize from 'clusterize.js';
|
|
||||||
|
|
||||||
//import { PlusIcon } from '@heroicons/vue/24/solid';
|
//import { PlusIcon } from '@heroicons/vue/24/solid';
|
||||||
|
|
||||||
import { onUnmounted } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
import { asCost } from '../commodities.ts';
|
import { JoinedTransactionPosting, Transaction, db, joinedToTransactions } from '../db.ts';
|
||||||
import { JoinedTransactionPosting, db, joinedToTransactions } from '../db.ts';
|
import TransactionsWithCommodityView from './TransactionsWithCommodityView.vue';
|
||||||
import { pp } from '../display.ts';
|
import TransactionsWithoutCommodityView from './TransactionsWithoutCommodityView.vue';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
let clusterize: Clusterize | null = null;
|
|
||||||
|
const commodityDetail = ref(false);
|
||||||
|
const transactions = ref([] as Transaction[]);
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
const session = await db.load();
|
const session = await db.load();
|
||||||
@ -80,81 +61,7 @@
|
|||||||
[route.params.account]
|
[route.params.account]
|
||||||
);
|
);
|
||||||
|
|
||||||
const transactions = joinedToTransactions(joinedTransactionPostings);
|
transactions.value = joinedToTransactions(joinedTransactionPostings);
|
||||||
|
|
||||||
// Render table
|
|
||||||
const rows = [];
|
|
||||||
|
|
||||||
for (const transaction of transactions) {
|
|
||||||
if (transaction.postings.length == 2) {
|
|
||||||
// Simple transaction
|
|
||||||
let thisAccountPosting, otherAccountPosting;
|
|
||||||
|
|
||||||
for (const posting of transaction.postings) {
|
|
||||||
if (posting.account === route.params.account) {
|
|
||||||
thisAccountPosting = posting;
|
|
||||||
} else {
|
|
||||||
otherAccountPosting = posting;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
rows.push(
|
|
||||||
`<tr class="border-t border-gray-300">
|
|
||||||
<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900">
|
|
||||||
${ transaction.description }
|
|
||||||
<!-- TODO: Edit button -->
|
|
||||||
</td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900"><a href="/transactions/${ encodeURIComponent(otherAccountPosting!.account) }" class="text-gray-900 hover:text-blue-700 hover:underline">${ otherAccountPosting!.account }</a></td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ thisAccountPosting!.quantity >= 0 ? pp(asCost(thisAccountPosting!.quantity, thisAccountPosting!.commodity)) : '' }</td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ thisAccountPosting!.quantity < 0 ? pp(asCost(-thisAccountPosting!.quantity, thisAccountPosting!.commodity)) : '' }</td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ pp(Math.abs(thisAccountPosting!.running_balance!)) }</td>
|
|
||||||
<td class="py-0.5 text-gray-900">${ thisAccountPosting!.running_balance! >= 0 ? 'Dr' : 'Cr' }</td>
|
|
||||||
</tr>`
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// Complex transaction
|
|
||||||
rows.push(
|
|
||||||
`<tr class="border-t border-gray-300">
|
|
||||||
<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
|
|
||||||
<td colspan="2" class="py-0.5 px-1 text-gray-900">
|
|
||||||
${ transaction.description }
|
|
||||||
<!-- TODO: Edit button -->
|
|
||||||
</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
</tr>`
|
|
||||||
)
|
|
||||||
|
|
||||||
for (const posting of transaction.postings) {
|
|
||||||
rows.push(
|
|
||||||
`<tr>
|
|
||||||
<td></td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900 text-end"><i>${ posting.quantity >= 0 ? 'Dr' : 'Cr' }</i></td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900"><a href="/transactions/${ encodeURIComponent(posting.account) }" class="text-gray-900 hover:text-blue-700 hover:underline">${ posting.account }</a></td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ posting.quantity >= 0 ? pp(asCost(posting.quantity, posting.commodity)) : '' }</td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ posting.quantity < 0 ? pp(asCost(-posting.quantity, posting.commodity)) : '' }</td>
|
|
||||||
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ posting.account === route.params.account ? pp(Math.abs(posting.running_balance!)) : '' }</td>
|
|
||||||
<td class="py-0.5 text-gray-900">${ posting.account === route.params.account ? (posting.running_balance! >= 0 ? 'Dr' : 'Cr') : '' }</td>
|
|
||||||
</tr>`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
clusterize = new Clusterize({
|
|
||||||
'rows': rows,
|
|
||||||
scrollElem: document.getElementById('transaction-list')!,
|
|
||||||
contentElem: document.querySelector('#transaction-list tbody')!
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
load();
|
load();
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (clusterize !== null) {
|
|
||||||
clusterize.destroy();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
151
src/pages/TransactionsWithCommodityView.vue
Normal file
151
src/pages/TransactionsWithCommodityView.vue
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
<!--
|
||||||
|
DrCr: Web-based double-entry bookkeeping framework
|
||||||
|
Copyright (C) 2022–2024 Lee Yingtong Li (RunasSudo)
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="transaction-list" class="max-h-[100vh] overflow-y-scroll wk-aa">
|
||||||
|
<table class="min-w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="py-0.5 pr-1 text-gray-900 font-semibold lg:w-[12ex] text-start">Date</th>
|
||||||
|
<th class="py-0.5 px-1 text-gray-900 font-semibold text-start">Description</th>
|
||||||
|
<th></th>
|
||||||
|
<th class="py-0.5 px-1 text-gray-900 font-semibold text-end">Amount</th>
|
||||||
|
<th class="py-0.5 px-1 text-gray-900 font-semibold text-end">Balance</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colspan="7">Loading data…</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Clusterize from 'clusterize.js';
|
||||||
|
|
||||||
|
import { onMounted, onUnmounted, watch } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
import { Balance } from '../amounts.ts';
|
||||||
|
import { Transaction } from '../db.ts';
|
||||||
|
import { ppWithCommodity } from '../display.ts';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const { transactions } = defineProps<{ transactions: Transaction[] }>();
|
||||||
|
|
||||||
|
const runningBalances = new Map();
|
||||||
|
let clusterize: Clusterize | null = null;
|
||||||
|
|
||||||
|
function renderTable() {
|
||||||
|
// Compute running balances
|
||||||
|
// Transactions are returned from DB in reverse order, so we iterate backwards
|
||||||
|
const runningBalance = new Balance();
|
||||||
|
for (let i = transactions.length - 1; i >= 0; i--) {
|
||||||
|
const transaction = transactions[i];
|
||||||
|
for (const posting of transaction.postings) {
|
||||||
|
if (posting.account === route.params.account) {
|
||||||
|
runningBalance.add(posting.quantity, posting.commodity);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save the running balance to display in the report
|
||||||
|
runningBalances.set(transaction, runningBalance.clone());
|
||||||
|
|
||||||
|
runningBalance.clean();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render table
|
||||||
|
const rows = [];
|
||||||
|
|
||||||
|
for (const transaction of transactions) {
|
||||||
|
rows.push(
|
||||||
|
`<tr class="border-t border-gray-300">
|
||||||
|
<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900">
|
||||||
|
${ transaction.description }
|
||||||
|
<!-- TODO: Edit button -->
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>`
|
||||||
|
);
|
||||||
|
|
||||||
|
const balanceAmounts = runningBalances.get(transaction).amounts;
|
||||||
|
|
||||||
|
// Display balance newest entries at the top
|
||||||
|
for (let i = balanceAmounts.length - 1; i >= 0; i--) {
|
||||||
|
const amount = balanceAmounts[i];
|
||||||
|
|
||||||
|
// Match the amount to the posting(s) in this transaction, if any
|
||||||
|
const postingsThisCommodity = transaction.postings.filter((p) => p.commodity === amount.commodity && p.account === route.params.account);
|
||||||
|
if (postingsThisCommodity.length === 0) {
|
||||||
|
// Just display the balance
|
||||||
|
rows.push(
|
||||||
|
`<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 text-end">${ ppWithCommodity(Math.abs(amount.quantity), amount.commodity) }</td>
|
||||||
|
<td class="py-0.5 text-gray-900">${ amount.quantity >= 0 ? 'Dr' : 'Cr' }</td>
|
||||||
|
</tr>`
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// Display all postings - display the balance only at the last posting
|
||||||
|
for (let i = 0; i < postingsThisCommodity.length; i++) {
|
||||||
|
const posting = postingsThisCommodity[i];
|
||||||
|
rows.push(
|
||||||
|
`<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 text-end">${ posting.quantity >= 0 ? 'Dr' : 'Cr' }</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 text-end">${ ppWithCommodity(Math.abs(posting.quantity), posting.commodity) }</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 text-end">${ i === postingsThisCommodity.length - 1 ? ppWithCommodity(Math.abs(amount.quantity), amount.commodity) : '' }</td>
|
||||||
|
<td class="py-0.5 text-gray-900">${ i === postingsThisCommodity.length - 1 ? (amount.quantity >= 0 ? 'Dr' : 'Cr') : '' }</td>
|
||||||
|
</tr>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (clusterize === null) {
|
||||||
|
clusterize = new Clusterize({
|
||||||
|
'rows': rows,
|
||||||
|
scrollElem: document.getElementById('transaction-list')!,
|
||||||
|
contentElem: document.querySelector('#transaction-list tbody')!
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
clusterize.update(rows);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(renderTable);
|
||||||
|
watch(() => transactions, renderTable);
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (clusterize !== null) {
|
||||||
|
clusterize.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
139
src/pages/TransactionsWithoutCommodityView.vue
Normal file
139
src/pages/TransactionsWithoutCommodityView.vue
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<!--
|
||||||
|
DrCr: Web-based double-entry bookkeeping framework
|
||||||
|
Copyright (C) 2022–2024 Lee Yingtong Li (RunasSudo)
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="transaction-list" class="max-h-[100vh] overflow-y-scroll wk-aa">
|
||||||
|
<table class="min-w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="py-0.5 pr-1 text-gray-900 font-semibold lg:w-[12ex] text-start">Date</th>
|
||||||
|
<th class="py-0.5 px-1 text-gray-900 font-semibold text-start">Description</th>
|
||||||
|
<th class="py-0.5 px-1 text-gray-900 font-semibold text-start">Related Account</th>
|
||||||
|
<th class="py-0.5 px-1 text-gray-900 font-semibold lg:w-[12ex] text-end">Dr</th>
|
||||||
|
<th class="py-0.5 px-1 text-gray-900 font-semibold lg:w-[12ex] text-end">Cr</th>
|
||||||
|
<th class="py-0.5 px-1 text-gray-900 font-semibold lg:w-[12ex] text-end">Balance</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="min-w-full">
|
||||||
|
<tr>
|
||||||
|
<td colspan="7">Loading data…</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Clusterize from 'clusterize.js';
|
||||||
|
|
||||||
|
import { onMounted, onUnmounted, watch } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
import { asCost } from '../amounts.ts';
|
||||||
|
import { Transaction } from '../db.ts';
|
||||||
|
import { pp } from '../display.ts';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const { transactions } = defineProps<{ transactions: Transaction[] }>();
|
||||||
|
|
||||||
|
let clusterize: Clusterize | null = null;
|
||||||
|
|
||||||
|
function renderTable() {
|
||||||
|
// Render table
|
||||||
|
const rows = [];
|
||||||
|
|
||||||
|
for (const transaction of transactions) {
|
||||||
|
if (transaction.postings.length == 2) {
|
||||||
|
// Simple transaction
|
||||||
|
let thisAccountPosting, otherAccountPosting;
|
||||||
|
|
||||||
|
for (const posting of transaction.postings) {
|
||||||
|
if (posting.account === route.params.account) {
|
||||||
|
thisAccountPosting = posting;
|
||||||
|
} else {
|
||||||
|
otherAccountPosting = posting;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rows.push(
|
||||||
|
`<tr class="border-t border-gray-300">
|
||||||
|
<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900">
|
||||||
|
${ transaction.description }
|
||||||
|
<!-- TODO: Edit button -->
|
||||||
|
</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900"><a href="/transactions/${ encodeURIComponent(otherAccountPosting!.account) }" class="text-gray-900 hover:text-blue-700 hover:underline">${ otherAccountPosting!.account }</a></td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ thisAccountPosting!.quantity >= 0 ? pp(asCost(thisAccountPosting!.quantity, thisAccountPosting!.commodity)) : '' }</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ thisAccountPosting!.quantity < 0 ? pp(asCost(-thisAccountPosting!.quantity, thisAccountPosting!.commodity)) : '' }</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ pp(Math.abs(thisAccountPosting!.running_balance!)) }</td>
|
||||||
|
<td class="py-0.5 text-gray-900">${ thisAccountPosting!.running_balance! >= 0 ? 'Dr' : 'Cr' }</td>
|
||||||
|
</tr>`
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
// Complex transaction
|
||||||
|
rows.push(
|
||||||
|
`<tr class="border-t border-gray-300">
|
||||||
|
<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
|
||||||
|
<td colspan="2" class="py-0.5 px-1 text-gray-900">
|
||||||
|
${ transaction.description }
|
||||||
|
<!-- TODO: Edit button -->
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>`
|
||||||
|
)
|
||||||
|
|
||||||
|
for (const posting of transaction.postings) {
|
||||||
|
rows.push(
|
||||||
|
`<tr>
|
||||||
|
<td></td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 text-end"><i>${ posting.quantity >= 0 ? 'Dr' : 'Cr' }</i></td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900"><a href="/transactions/${ encodeURIComponent(posting.account) }" class="text-gray-900 hover:text-blue-700 hover:underline">${ posting.account }</a></td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ posting.quantity >= 0 ? pp(asCost(posting.quantity, posting.commodity)) : '' }</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ posting.quantity < 0 ? pp(asCost(-posting.quantity, posting.commodity)) : '' }</td>
|
||||||
|
<td class="py-0.5 px-1 text-gray-900 lg:w-[12ex] text-end">${ posting.account === route.params.account ? pp(Math.abs(posting.running_balance!)) : '' }</td>
|
||||||
|
<td class="py-0.5 text-gray-900">${ posting.account === route.params.account ? (posting.running_balance! >= 0 ? 'Dr' : 'Cr') : '' }</td>
|
||||||
|
</tr>`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (clusterize === null) {
|
||||||
|
clusterize = new Clusterize({
|
||||||
|
'rows': rows,
|
||||||
|
scrollElem: document.getElementById('transaction-list')!,
|
||||||
|
contentElem: document.querySelector('#transaction-list tbody')!
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
clusterize.update(rows);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(renderTable);
|
||||||
|
watch(() => transactions, renderTable);
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (clusterize !== null) {
|
||||||
|
clusterize.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user