From aff795745c33eb638ec84b27a552c79fa2e7a375 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Sat, 16 Nov 2024 21:17:46 +1100
Subject: [PATCH] Implement account transactions with commodity detail view

---
 src/{commodities.ts => amounts.ts}            |  31 ++++
 src/pages/GeneralLedgerView.vue               |   2 +-
 src/pages/TransactionsView.vue                | 119 ++------------
 src/pages/TransactionsWithCommodityView.vue   | 151 ++++++++++++++++++
 .../TransactionsWithoutCommodityView.vue      | 139 ++++++++++++++++
 5 files changed, 335 insertions(+), 107 deletions(-)
 rename src/{commodities.ts => amounts.ts} (68%)
 create mode 100644 src/pages/TransactionsWithCommodityView.vue
 create mode 100644 src/pages/TransactionsWithoutCommodityView.vue

diff --git a/src/commodities.ts b/src/amounts.ts
similarity index 68%
rename from src/commodities.ts
rename to src/amounts.ts
index 8a27866..7f25600 100644
--- a/src/commodities.ts
+++ b/src/amounts.ts
@@ -18,6 +18,37 @@
 
 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 {
 	// Convert the amount to cost price in the reporting commodity
 	
diff --git a/src/pages/GeneralLedgerView.vue b/src/pages/GeneralLedgerView.vue
index c8d9eaf..29c3468 100644
--- a/src/pages/GeneralLedgerView.vue
+++ b/src/pages/GeneralLedgerView.vue
@@ -56,7 +56,7 @@
 	
 	import { onUnmounted, ref } from 'vue';
 	
-	import { asCost } from '../commodities.ts';
+	import { asCost } from '../amounts.ts';
 	import { JoinedTransactionPosting, Transaction, db, joinedToTransactions } from '../db.ts';
 	import { pp, ppWithCommodity } from '../display.ts';
 	
diff --git a/src/pages/TransactionsView.vue b/src/pages/TransactionsView.vue
index 411a629..9873b91 100644
--- a/src/pages/TransactionsView.vue
+++ b/src/pages/TransactionsView.vue
@@ -18,55 +18,36 @@
 
 <template>
 	<h1 class="page-heading">
-		Account transactions
+		{{ route.params.account }}
 	</h1>
 	
 	<div class="my-4 flex gap-x-2">
 		<!--<a href="{{ url_for('journal_new_transaction') }}" class="btn-primary pl-2">
 			<PlusIcon />
 			New transaction
-		</a>
-		<a href="{{ url_for('account_transactions', account=account, commodity_detail=1) }}" class="btn-secondary">
-			Show commodity detail
 		</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 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>
+	<TransactionsWithCommodityView v-if="commodityDetail" :transactions="transactions"/>
+	<TransactionsWithoutCommodityView v-if="!commodityDetail" :transactions="transactions"/>
 </template>
 
 <script setup lang="ts">
-	import Clusterize from 'clusterize.js';
-	
 	//import { PlusIcon } from '@heroicons/vue/24/solid';
 	
-	import { onUnmounted } from 'vue';
+	import { ref } from 'vue';
 	import { useRoute } from 'vue-router';
 	
-	import { asCost } from '../commodities.ts';
-	import { JoinedTransactionPosting, db, joinedToTransactions } from '../db.ts';
-	import { pp } from '../display.ts';
+	import { JoinedTransactionPosting, Transaction, db, joinedToTransactions } from '../db.ts';
+	import TransactionsWithCommodityView from './TransactionsWithCommodityView.vue';
+	import TransactionsWithoutCommodityView from './TransactionsWithoutCommodityView.vue';
 	
 	const route = useRoute();
-	let clusterize: Clusterize | null = null;
+	
+	const commodityDetail = ref(false);
+	const transactions = ref([] as Transaction[]);
 	
 	async function load() {
 		const session = await db.load();
@@ -80,81 +61,7 @@
 			[route.params.account]
 		);
 		
-		const transactions = 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')!
-		});
+		transactions.value = joinedToTransactions(joinedTransactionPostings);
 	}
 	load();
-	
-	onUnmounted(() => {
-		if (clusterize !== null) {
-			clusterize.destroy();
-		}
-	});
 </script>
diff --git a/src/pages/TransactionsWithCommodityView.vue b/src/pages/TransactionsWithCommodityView.vue
new file mode 100644
index 0000000..ac2a463
--- /dev/null
+++ b/src/pages/TransactionsWithCommodityView.vue
@@ -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>
diff --git a/src/pages/TransactionsWithoutCommodityView.vue b/src/pages/TransactionsWithoutCommodityView.vue
new file mode 100644
index 0000000..f18131d
--- /dev/null
+++ b/src/pages/TransactionsWithoutCommodityView.vue
@@ -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>