Implement account transactions view

src/GeneralLedgerView.vue

@@ -57,53 +57,25 @@
 	import { onUnmounted, ref } from 'vue';
 	
 	import { asCost } from './commodities.ts';
-	import { db } from './db.ts';
+	import { JoinedTransactionPosting, Transaction, db, joinedToTransactions } from './db.ts';
 	import { pp, ppWithCommodity } from './display.ts';
 	
 	const commodityDetail = ref(false);
 	
-	interface _Transaction {
+	let transactions: Transaction[] = [];
-		id: number,
-		dt: string,
-		description: string,
-		postings: _Posting[]
-	}
-	
-	interface _Posting {
-		id: number,
-		description: string,
-		account: string,
-		quantity: number,
-		commodity: string
-	}
-	
-	const transactions: _Transaction[] = [];
 	let clusterize: Clusterize | null = null;
 	
 	async function load() {
 		const session = await db.load();
 		
-		const transactionsRaw: {transaction_id: number, dt: string, transaction_description: string, id: number, description: string, account: string, quantity: number, commodity: string}[] = await session.select('SELECT transaction_id, dt, transactions.description AS transaction_description, postings.id, postings.description, account, quantity, commodity FROM transactions LEFT JOIN postings ON transactions.id = postings.transaction_id ORDER BY dt DESC, transaction_id DESC, postings.id');
+		const joinedTransactionPostings: JoinedTransactionPosting[] = await session.select(
+			`SELECT transaction_id, dt, transactions.description AS transaction_description, postings.id, postings.description, account, quantity, commodity
+			FROM transactions
+			JOIN postings ON transactions.id = postings.transaction_id
+			ORDER BY dt DESC, transaction_id DESC, postings.id`
+		);
 		
-		// Group postings into transactions
+		transactions = joinedToTransactions(joinedTransactionPostings);
-		for (const transactionRaw of transactionsRaw) {
-			if (transactions.length === 0 || transactions.at(-1)!.id !== transactionRaw.transaction_id) {
-				transactions.push({
-					id: transactionRaw.transaction_id,
-					dt: transactionRaw.dt,
-					description: transactionRaw.transaction_description,
-					postings: []
-				});
-			}
-			
-			transactions.at(-1)!.postings.push({
-				id: transactionRaw.id,
-				description: transactionRaw.description,
-				account: transactionRaw.account,
-				quantity: transactionRaw.quantity,
-				commodity: transactionRaw.commodity
-			});
-		}
 		
 		renderTable();
 	}
@@ -125,9 +97,9 @@
 					rows.push(
 						`<tr>
 							<td class=""></td>
-							<td class="py-0.5 px-1 text-gray-900 lg:w-[30%]">${ posting.description || '' }</td>
+							<td class="py-0.5 px-1 text-gray-900 lg:w-[30%]">${ posting.description ?? '' }</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 lg:w-[30%]">${ posting.account }</td>
+							<td class="py-0.5 px-1 text-gray-900 lg:w-[30%]"><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 text-end">
 								${ posting.quantity >= 0 ? ppWithCommodity(posting.quantity, posting.commodity) : '' }
 							</td>
@@ -140,9 +112,9 @@
 					rows.push(
 						`<tr>
 							<td class=""></td>
-							<td class="py-0.5 px-1 text-gray-900 lg:w-[30%]">${ posting.description || '' }</td>
+							<td class="py-0.5 px-1 text-gray-900 lg:w-[30%]">${ posting.description ?? '' }</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 lg:w-[30%]">${ posting.account }</td>
+							<td class="py-0.5 px-1 text-gray-900 lg:w-[30%]"><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>

src/HomeView.vue

@@ -31,8 +31,8 @@
 		<div class="px-4">
 			<h2 class="font-medium text-gray-700 mb-2">General reports</h2>
 			<ul class="list-disc ml-6">
-				<li><RouterLink to="/general-ledger" class="text-gray-900 hover:text-blue-700 hover:underline">General ledger</RouterLink></li>
+				<li><RouterLink :to="{ name: 'general-ledger' }" class="text-gray-900 hover:text-blue-700 hover:underline">General ledger</RouterLink></li>
-				<li><RouterLink to="/trial-balance" class="text-gray-900 hover:text-blue-700 hover:underline">Trial balance</RouterLink></li>
+				<li><RouterLink :to="{ name: 'trial-balance' }" class="text-gray-900 hover:text-blue-700 hover:underline">Trial balance</RouterLink></li>
 				<!--<li><a href="#" class="text-gray-900 hover:text-blue-700 hover:underline">Balance sheet</a></li>-->
 				<!--<li><a href="#" class="text-gray-900 hover:text-blue-700 hover:underline">Income statement</a></li>-->
 			</ul>

src/TransactionsView.vue

@@ -0,0 +1,160 @@
+<!--
+	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>
+	<h1 class="page-heading">
+		Account transactions
+	</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>-->
+	</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>
+</template>
+
+<script setup lang="ts">
+	import Clusterize from 'clusterize.js';
+	
+	//import { PlusIcon } from '@heroicons/vue/24/solid';
+	
+	import { onUnmounted } from 'vue';
+	import { useRoute } from 'vue-router';
+	
+	import { asCost } from './commodities.ts';
+	import { JoinedTransactionPosting, db, joinedToTransactions } from './db.ts';
+	import { pp } from './display.ts';
+	
+	const route = useRoute();
+	let clusterize: Clusterize | null = null;
+	
+	async function load() {
+		const session = await db.load();
+		
+		const joinedTransactionPostings: JoinedTransactionPosting[] = await session.select(
+			`SELECT transaction_id, dt, transactions.description AS transaction_description, postings.id, postings.description, account, quantity, commodity, running_balance
+			FROM transactions
+			JOIN postings ON transactions.id = postings.transaction_id
+			WHERE transactions.id IN (SELECT transaction_id FROM postings WHERE postings.account = $1)
+			ORDER by dt DESC, transaction_id DESC, postings.id`,
+			[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')!
+		});
+	}
+	load();
+	
+	onUnmounted(() => {
+		if (clusterize !== null) {
+			clusterize.destroy();
+		}
+	});
+</script>

src/TrialBalanceView.vue

@@ -31,7 +31,7 @@
 		</thead>
 		<tbody>
 			<tr v-for="account in accounts">
-				<td class="py-0.5 pr-1 text-gray-900"><a href="#" class="hover:text-blue-700 hover:underline">{{ account.account }}</a></td>
+				<td class="py-0.5 pr-1 text-gray-900"><RouterLink :to="{ name: 'transactions', params: { 'account': account.account } }" class="hover:text-blue-700 hover:underline">{{ account.account }}</RouterLink></td>
 				<td class="py-0.5 px-1 text-gray-900 text-end">
 					<template v-if="account.quantity >= 0">{{ pp(account.quantity) }}</template>
 				</td>

src/db.ts

@@ -68,3 +68,60 @@ export async function totalBalances(session: Database): Promise<{account: string
 		JOIN postings p4 ON p3.account = p4.account AND p3.max_tid = p4.transaction_id ORDER BY account
 	`);
 }
+
+// Type definitions
+
+export interface Transaction {
+	id: number,
+	dt: string,
+	description: string,
+	postings: Posting[]
+}
+
+export interface Posting {
+	id: number,
+	description: string,
+	account: string,
+	quantity: number,
+	commodity: string,
+	running_balance?: number
+}
+
+export interface JoinedTransactionPosting {
+	transaction_id: number,
+	dt: string,
+	transaction_description: string,
+	id: number,
+	description: string,
+	account: string,
+	quantity: number,
+	commodity: string,
+	running_balance?: number
+}
+
+export function joinedToTransactions(joinedTransactionPostings: JoinedTransactionPosting[]): Transaction[] {
+	// Group postings into transactions
+	const transactions: Transaction[] = [];
+	
+	for (const joinedTransactionPosting of joinedTransactionPostings) {
+		if (transactions.length === 0 || transactions.at(-1)!.id !== joinedTransactionPosting.transaction_id) {
+			transactions.push({
+				id: joinedTransactionPosting.transaction_id,
+				dt: joinedTransactionPosting.dt,
+				description: joinedTransactionPosting.transaction_description,
+				postings: []
+			});
+		}
+		
+		transactions.at(-1)!.postings.push({
+			id: joinedTransactionPosting.id,
+			description: joinedTransactionPosting.description,
+			account: joinedTransactionPosting.account,
+			quantity: joinedTransactionPosting.quantity,
+			commodity: joinedTransactionPosting.commodity,
+			running_balance: joinedTransactionPosting.running_balance
+		});
+	}
+	
+	return transactions;
+}

src/main.ts

@@ -22,18 +22,16 @@ import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 
 import App from './App.vue';
-import HomeView from './HomeView.vue';
-import GeneralLedgerView from './GeneralLedgerView.vue';
-import TrialBalanceView from './TrialBalanceView.vue';
 
 import { db } from './db.ts';
 
 async function initApp() {
 	// Init router
 	const routes = [
-		{ path: '/', component: HomeView },
+		{ path: '/', name: 'index', component: () => import('./HomeView.vue') },
-		{ path: '/general-ledger', component: GeneralLedgerView },
+		{ path: '/general-ledger', name: 'general-ledger', component: () => import('./GeneralLedgerView.vue') },
-		{ path: '/trial-balance', component: TrialBalanceView },
+		{ path: '/transactions/:account', name: 'transactions', component: () => import('./TransactionsView.vue') },
+		{ path: '/trial-balance', name: 'trial-balance', component: () => import('./TrialBalanceView.vue') },
 	];
 	const router = createRouter({
 		history: createWebHistory(),