bartek/actual-importer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace transactions table with notifications

Browse Source
This commit is contained in:
Bartłomiej Pluta
2025-05-21 14:12:36 +02:00
parent 490d6aa650
commit e1dc42c254
2 changed files with 25 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/pages/PrepareTransactionsPage/TransactionsTable.module.css
View File

@@ -1,19 +1,9 @@
.transactionTable { .transactionsTable {
tbody tr { .transaction {
cursor: pointer; cursor: pointer;
} }
td { .amount {
.date {
white-space: nowrap;
}
.amount {
font-family: monospace;
}
}
.disabled td {
color: var(--bulma-text-light);
} }
} }

45
web/src/pages/PrepareTransactionsPage/TransactionsTable.tsx
View File

@@ -1,6 +1,7 @@
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import type { Transaction } from "../../types/api"; import type { Transaction } from "../../types/api";
import styles from "./TransactionsTable.module.css"; import styles from "./TransactionsTable.module.css";
import classNames from "classnames";
export type TransactionsTableProps = { export type TransactionsTableProps = {
transactions: Transaction[]; transactions: Transaction[];
@@ -45,33 +46,29 @@ export default function TransactionsTable({ transactions, deselected, deselect,
const reversedTransactions = useMemo(() => transactions.slice().reverse(), [transactions]); const reversedTransactions = useMemo(() => transactions.slice().reverse(), [transactions]);
const renderRow = useCallback((transaction: Transaction, index: number) => ( const renderRow = useCallback((transaction: Transaction, index: number) => (
<tr key={index} onClick={() => changeSelection(index)} className={`${!readonly && deselected.includes(index) ? styles.disabled : ""}`}> <div
<td><span title={transactionType(transaction)}>{transactionEmoji(transaction)}</span></td> key={index}
<td className={styles.date}>{transaction.date}</td> onClick={() => changeSelection(index)}
<td className={styles.amount}>{transaction.amount}</td> className={classNames('notification', styles.transaction, {
<td>{transaction.id ? <abbr title={`ID: ${transaction.id}`}>{transaction.title}</abbr> : transaction.title}</td> 'is-success': transaction.kind === 'regular' && transaction.amount > 0,
<td>{transaction.from}</td> 'is-danger': transaction.kind === 'regular' && transaction.amount < 0,
<td>{transaction.to}</td> 'is-info': transaction.kind === 'transfer',
</tr> 'is-light': deselected.includes(index)
})}>
<h6 className="title is-6" title={transactionType(transaction)}>
{transactionEmoji(transaction)} {transaction.date}
</h6>
{transaction.id && (<><strong>ID:</strong> {transaction.id}<br /></>)}
<strong>From:</strong> {transaction.from}<br />
<strong>To:</strong> {transaction.to}<br />
<strong>Title:</strong> {transaction.title}<br />
<strong>Amount:</strong> <span className={styles.amount}>{transaction.amount}</span>
</div>
), [changeSelection]); ), [changeSelection]);
return ( return (
<div className="table-container"> <div className={styles.transactionsTable}>
<table className={`table is-hoverable ${!readonly ? styles.transactionTable : ""}`}> {reversedTransactions.map(renderRow)}
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Amount</th>
<th>Title</th>
<th>From</th>
<th>To</th>
</tr>
</thead>
<tbody>
{reversedTransactions.map(renderRow)}
</tbody>
</table>
</div> </div>
); );
} }