From 06439768edbd5ae48deb269614f8a49d6f7a593c Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Mon, 18 Nov 2024 20:58:38 +1100
Subject: [PATCH] Allow filtering for only unclassified statement lines

---
 src/pages/GeneralLedgerView.vue                | 11 +++++++----
 src/pages/ImportStatementView.vue              |  6 +++---
 src/pages/JournalView.vue                      | 11 +++++++----
 src/pages/StatementLinesView.vue               | 16 ++++++++++++----
 src/pages/TransactionsView.vue                 |  8 +++++---
 src/pages/TransactionsWithCommodityView.vue    |  3 ++-
 src/pages/TransactionsWithoutCommodityView.vue |  3 ++-
 7 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/pages/GeneralLedgerView.vue b/src/pages/GeneralLedgerView.vue
index 276dfa9..23fb852 100644
--- a/src/pages/GeneralLedgerView.vue
+++ b/src/pages/GeneralLedgerView.vue
@@ -21,14 +21,16 @@
 		General ledger
 	</h1>
 	
-	<div class="my-4 flex gap-x-2">
+	<div class="my-4 flex gap-x-2 items-center">
 		<!-- Use a rather than RouterLink because RouterLink adds its own event handler -->
 		<a href="/journal/new-transaction" class="btn-primary pl-2" onclick="return openLinkInNewWindow(this);">
 			<PlusIcon class="w-4 h-4" />
 			New transaction
 		</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 class="flex items-baseline">
+			<input id="only-unclassified" class="ml-3 mr-1 self-center checkbox-primary" type="checkbox" v-model="commodityDetail">
+			<label for="only-unclassified" class="text-gray-900">Show commodity detail</label>
+		</div>
 	</div>
 	
 	<div id="transaction-list" class="max-h-[100vh] overflow-y-scroll wk-aa">
@@ -145,7 +147,8 @@
 			clusterize = new Clusterize({
 				'rows': rows,
 				scrollElem: document.getElementById('transaction-list')!,
-				contentElem: document.querySelector('#transaction-list tbody')!
+				contentElem: document.querySelector('#transaction-list tbody')!,
+				show_no_data_row: false,
 			});
 		} else {
 			clusterize.update(rows);
diff --git a/src/pages/ImportStatementView.vue b/src/pages/ImportStatementView.vue
index a71835e..f4413fe 100644
--- a/src/pages/ImportStatementView.vue
+++ b/src/pages/ImportStatementView.vue
@@ -83,7 +83,7 @@
 <script setup lang="ts">
 	import dayjs from 'dayjs';
 	
-	import { defineModel, ref, useTemplateRef } from 'vue';
+	import { ref, useTemplateRef } from 'vue';
 	import { useRouter } from 'vue-router';
 	
 	import { StatementLine, db } from '../db.ts';
@@ -92,8 +92,8 @@
 	
 	const fileInput = useTemplateRef('file');
 	
-	const selectedFilename = defineModel('selectedFilename', { default: '' });
-	const sourceAccount = defineModel('sourceAccount', { default: '' });
+	const selectedFilename = ref('');
+	const sourceAccount = ref('');
 	
 	const router = useRouter();
 	
diff --git a/src/pages/JournalView.vue b/src/pages/JournalView.vue
index e158af6..e62d752 100644
--- a/src/pages/JournalView.vue
+++ b/src/pages/JournalView.vue
@@ -21,14 +21,16 @@
 		Journal
 	</h1>
 	
-	<div class="my-4 flex gap-x-2">
+	<div class="my-4 flex gap-x-2 items-center">
 		<!-- Use a rather than RouterLink because RouterLink adds its own event handler -->
 		<a href="/journal/new-transaction" class="btn-primary pl-2" onclick="return openLinkInNewWindow(this);">
 			<PlusIcon class="w-4 h-4" />
 			New transaction
 		</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 class="flex items-baseline">
+			<input id="only-unclassified" class="ml-3 mr-1 self-center checkbox-primary" type="checkbox" v-model="commodityDetail">
+			<label for="only-unclassified" class="text-gray-900">Show commodity detail</label>
+		</div>
 	</div>
 	
 	<div id="transaction-list" class="max-h-[100vh] overflow-y-scroll wk-aa">
@@ -143,7 +145,8 @@
 			clusterize = new Clusterize({
 				'rows': rows,
 				scrollElem: document.getElementById('transaction-list')!,
-				contentElem: document.querySelector('#transaction-list tbody')!
+				contentElem: document.querySelector('#transaction-list tbody')!,
+				show_no_data_row: false,
 			});
 		} else {
 			clusterize.update(rows);
diff --git a/src/pages/StatementLinesView.vue b/src/pages/StatementLinesView.vue
index d98a468..49799e1 100644
--- a/src/pages/StatementLinesView.vue
+++ b/src/pages/StatementLinesView.vue
@@ -29,9 +29,10 @@
 			<RouterLink :to="{ name: 'import-statement' }" class="btn-secondary">
 				Import statement
 			</RouterLink>
-			<!--<a href="{{ url_for('statement_lines', **dict(request.args, unclassified=1)) }}" class="btn-secondary">
-				Show only unclassified lines
-			</a>-->
+			<div class="flex items-baseline">
+				<input id="only-unclassified" class="ml-3 mr-1 self-center checkbox-primary" type="checkbox" v-model="showOnlyUnclassified">
+				<label for="only-unclassified" class="text-gray-900">Show only unclassified lines</label>
+			</div>
 		</div>
 	</div>
 	
@@ -84,6 +85,7 @@
 		posting_accounts: string[]
 	}
 	
+	const showOnlyUnclassified = ref(false);
 	const statementLines = ref([] as StatementLine[]);
 	let clusterize: Clusterize | null = null;
 	
@@ -226,11 +228,15 @@
 				reconciliationCell =
 					`<span>${ otherAccount }</span>
 					<a href="/journal/edit-transaction/${ line.transaction_id }" class="text-gray-500 hover:text-gray-700" onclick="return openLinkInNewWindow(this);">${ PencilIconHTML }</a>`;
+				
+				if (showOnlyUnclassified.value) { continue; }
 			} else {
 				// Complex reconciliation
 				reconciliationCell =
 					`<i>(Complex)</i>
 					<a href="/journal/edit-transaction/${ line.transaction_id }" class="text-gray-500 hover:text-gray-700" onclick="return openLinkInNewWindow(this);">${ PencilIconHTML }</a>`;
+				
+				if (showOnlyUnclassified.value) { continue; }
 			}
 			
 			rows.push(
@@ -251,13 +257,15 @@
 			clusterize = new Clusterize({
 				'rows': rows,
 				scrollElem: document.getElementById('statement-line-list')!,
-				contentElem: document.querySelector('#statement-line-list tbody')!
+				contentElem: document.querySelector('#statement-line-list tbody')!,
+				show_no_data_row: false,
 			});
 		} else {
 			clusterize.update(rows);
 		}
 	}
 	
+	watch(showOnlyUnclassified, renderTable);
 	watch(statementLines, renderTable);
 	
 	load();
diff --git a/src/pages/TransactionsView.vue b/src/pages/TransactionsView.vue
index 9fc8526..a4fe38d 100644
--- a/src/pages/TransactionsView.vue
+++ b/src/pages/TransactionsView.vue
@@ -21,14 +21,16 @@
 		{{ route.params.account }}
 	</h1>
 	
-	<div class="my-4 flex gap-x-2">
+	<div class="my-4 flex gap-x-2 items-center">
 		<!-- Use a rather than RouterLink because RouterLink adds its own event handler -->
 		<a href="/journal/new-transaction" class="btn-primary pl-2" onclick="return openLinkInNewWindow(this);">
 			<PlusIcon class="w-4 h-4" />
 			New transaction
 		</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 class="flex items-baseline">
+			<input id="only-unclassified" class="ml-3 mr-1 self-center checkbox-primary" type="checkbox" v-model="commodityDetail">
+			<label for="only-unclassified" class="text-gray-900">Show commodity detail</label>
+		</div>
 	</div>
 	
 	<TransactionsWithCommodityView v-if="commodityDetail" :transactions="transactions"/>
diff --git a/src/pages/TransactionsWithCommodityView.vue b/src/pages/TransactionsWithCommodityView.vue
index 3533e37..9f1d1dc 100644
--- a/src/pages/TransactionsWithCommodityView.vue
+++ b/src/pages/TransactionsWithCommodityView.vue
@@ -140,7 +140,8 @@
 			clusterize = new Clusterize({
 				'rows': rows,
 				scrollElem: document.getElementById('transaction-list')!,
-				contentElem: document.querySelector('#transaction-list tbody')!
+				contentElem: document.querySelector('#transaction-list tbody')!,
+				show_no_data_row: false,
 			});
 		} else {
 			clusterize.update(rows);
diff --git a/src/pages/TransactionsWithoutCommodityView.vue b/src/pages/TransactionsWithoutCommodityView.vue
index 65d943c..eed5fb8 100644
--- a/src/pages/TransactionsWithoutCommodityView.vue
+++ b/src/pages/TransactionsWithoutCommodityView.vue
@@ -139,7 +139,8 @@
 			clusterize = new Clusterize({
 				'rows': rows,
 				scrollElem: document.getElementById('transaction-list')!,
-				contentElem: document.querySelector('#transaction-list tbody')!
+				contentElem: document.querySelector('#transaction-list tbody')!,
+				show_no_data_row: false,
 			});
 		} else {
 			clusterize.update(rows);