Allow filtering for only unclassified statement lines

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>
+		<div class="flex items-baseline">
-		<button v-if="!commodityDetail" class="btn-secondary" @click="commodityDetail = true">Show commodity detail</button>
+			<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);

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 selectedFilename = ref('');
-	const sourceAccount = defineModel('sourceAccount', { default: '' });
+	const sourceAccount = ref('');
 	
 	const router = useRouter();
 	

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>
+		<div class="flex items-baseline">
-		<button v-if="!commodityDetail" class="btn-secondary" @click="commodityDetail = true">Show commodity detail</button>
+			<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);

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">
+			<div class="flex items-baseline">
-				Show only unclassified lines
+				<input id="only-unclassified" class="ml-3 mr-1 self-center checkbox-primary" type="checkbox" v-model="showOnlyUnclassified">
-			</a>-->
+				<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();

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>
+		<div class="flex items-baseline">
-		<button v-if="!commodityDetail" class="btn-secondary" @click="commodityDetail = true">Show commodity detail</button>
+			<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"/>

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);

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);