Implement account transactions view
This commit is contained in:
parent
eb72c3be95
commit
5e4033a1e2
GPG Key ID:
7234E476BF21C61A
@ -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 {
|
||||
id: number,
|
||||
dt: string,
|
||||
description: string,
|
||||
postings: _Posting[]
|
||||
}
|
||||
|
||||
interface _Posting {
|
||||
id: number,
|
||||
description: string,
|
||||
account: string,
|
||||
quantity: number,
|
||||
commodity: string
|
||||
}
|
||||
|
||||
const transactions: _Transaction[] = [];
|
||||
let 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
|
||||
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
|
||||
});
|
||||
}
|
||||
transactions = joinedToTransactions(joinedTransactionPostings);
|
||||
|
||||
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>
|
||||
|
||||
@ -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="/trial-balance" class="text-gray-900 hover:text-blue-700 hover:underline">Trial balance</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="{ 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>
|
||||
|
||||
160
src/TransactionsView.vue
Normal file
160
src/TransactionsView.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
57
src/db.ts
57
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;
|
||||
}
|
||||
|
||||
10
src/main.ts
10
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: '/general-ledger', component: GeneralLedgerView },
|
||||
{ path: '/trial-balance', component: TrialBalanceView },
|
||||
{ path: '/', name: 'index', component: () => import('./HomeView.vue') },
|
||||
{ path: '/general-ledger', name: 'general-ledger', component: () => import('./GeneralLedgerView.vue') },
|
||||
{ path: '/transactions/:account', name: 'transactions', component: () => import('./TransactionsView.vue') },
|
||||
{ path: '/trial-balance', name: 'trial-balance', component: () => import('./TrialBalanceView.vue') },
|
||||
];
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user