Fully fleshed out download client-side experience for downloading txns. Now we can actually implement the downloading part
This commit is contained in:
parent
d635ae0cbf
commit
3f884f0923
|
|
@ -1,111 +0,0 @@
|
|||
import React from 'jsx-dom'; // necessary for react to work
|
||||
import { Event, ClientEvents } from './events';
|
||||
import * as background from './background';
|
||||
import { Account } from '../landsbankinn/models';
|
||||
import $ from 'cash-dom';
|
||||
|
||||
interface AccountListProps {
|
||||
accounts: Array<Account>;
|
||||
}
|
||||
|
||||
const formatAccountNumber = (accountNumber: string) => accountNumber.substring(0, 4) + '-' + accountNumber.substring(4, 6) + '-' + accountNumber.substring(6, 12);
|
||||
|
||||
function AccountList(props: AccountListProps) {
|
||||
const boxStyle = { display: 'inline-block', width: "100%", cursor: 'pointer' };
|
||||
|
||||
const selectAllHandler = () => {
|
||||
$(`#check-all`).prop('checked', !$('#check-all').prop('checked'));
|
||||
const checked = $('#check-all').prop('checked');
|
||||
$('#account-export-list input[type="checkbox"]').prop('checked', checked);
|
||||
};
|
||||
|
||||
const selectAccountHandler = (accountNumber: string) => () =>
|
||||
$(`#export-${accountNumber}`)
|
||||
.prop('checked', !$(`#export-${accountNumber}`).prop('checked'));
|
||||
|
||||
const accountList = props.accounts.map(acct =>
|
||||
<tr>
|
||||
<td>
|
||||
<input id={`export-${acct.accountNumber}`} type="checkbox" />
|
||||
</td>
|
||||
<td onClick={selectAccountHandler(acct.accountNumber)}>
|
||||
<span style={boxStyle}>
|
||||
{formatAccountNumber(acct.accountNumber)}
|
||||
</span>
|
||||
</td>
|
||||
<td onClick={selectAccountHandler(acct.accountNumber)}>
|
||||
<span style={boxStyle}>
|
||||
{acct.name}
|
||||
</span>
|
||||
</td>
|
||||
</tr >
|
||||
);
|
||||
|
||||
return (
|
||||
<div id="account-export-list">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="colgroup">Select</th>
|
||||
<th scope="colgroup">Account Number</th>
|
||||
<th scope="colgroup">Account Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input id="check-all" type="checkbox" onClick={selectAllHandler} />
|
||||
</td>
|
||||
<td onClick={selectAllHandler}>
|
||||
<span style={boxStyle}>Select All</span>
|
||||
</td>
|
||||
<td onClick={selectAllHandler}>
|
||||
<span style={boxStyle}>
|
||||
N/A (Selects all accounts below)
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{accountList}
|
||||
</tbody>
|
||||
</table>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
function ExportDiv(props: AccountListProps) {
|
||||
return (
|
||||
<div id="account-export" class="content-box fill shadow ui-form" >
|
||||
<h2>Download Transaction Statements</h2>
|
||||
<p>
|
||||
Here, you can export statements from one or more of your accounts
|
||||
over a specified date range.
|
||||
</p>
|
||||
|
||||
<label htmlFor="export-date-from">Date From</label>
|
||||
<input id="export-date-from" type="date" />
|
||||
|
||||
<label htmlFor="export-date-to">Date From</label>
|
||||
<input id="export-date-to" type="date" />
|
||||
|
||||
<div class="row-column">
|
||||
<div class="column-span2 column-span2--base">
|
||||
<AccountList accounts={props.accounts} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', async () => {
|
||||
ClientEvents.on(Event.StatePopulated, async () => {
|
||||
const response = await background.getAccounts();
|
||||
|
||||
if (response.error == null) {
|
||||
const exportDiv = <ExportDiv accounts={response.accounts} />;
|
||||
const contentDiv = document.querySelector(
|
||||
'div[class="table-data content-box fill shadow"]'
|
||||
);
|
||||
contentDiv?.prepend(exportDiv);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
import React, { FormEventHandler } from 'jsx-dom'; // necessary for react to work
|
||||
import { Account } from '../../landsbankinn/models';
|
||||
import $ from 'cash-dom';
|
||||
|
||||
interface AccountListProps {
|
||||
accounts: Array<Account>;
|
||||
}
|
||||
|
||||
const formatAccountNumber = (accountNumber: string) =>
|
||||
accountNumber.substring(0, 4) + '-' +
|
||||
accountNumber.substring(4, 6) + '-' +
|
||||
accountNumber.substring(6, 12);
|
||||
|
||||
//getValues extracts the account numbers and date range for
|
||||
//transactions to download. Basically the "submit button."
|
||||
//TODO why not use an actual form...
|
||||
const getValues = (exportDiv: HTMLElement): Array<string> =>
|
||||
//@ts-expect-error
|
||||
$(`#${exportDiv.id} input[type="checkbox"]`)
|
||||
.filter('[data-checkbox-type="account"]:checked')
|
||||
//@ts-expect-error
|
||||
.map((_, el) => (el as HTMLInputElement).name).get();
|
||||
|
||||
const SelectAllRow = () => {
|
||||
const boxStyle = { display: 'inline-block', width: "100%", cursor: 'pointer' };
|
||||
|
||||
const selectAllHandler = (e: MouseEvent) => {
|
||||
const currentlyChecked = $('#check-all').prop('checked');
|
||||
|
||||
//@ts-expect-error
|
||||
if ($(e.currentTarget).is($('#check-all')) == false) {
|
||||
//The checkbox can toggle itself, by itself. Only toggle
|
||||
//from other clicks
|
||||
$(`#check-all`).prop('checked', !currentlyChecked);
|
||||
}
|
||||
|
||||
const checked = $('#check-all').prop('checked');
|
||||
$('#account-export-list input[type="checkbox"]').prop('checked', checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td>
|
||||
<input id="check-all" type="checkbox" data-checkbox-type="select-all"
|
||||
onClick={selectAllHandler} />
|
||||
</td>
|
||||
<td onClick={selectAllHandler}>
|
||||
<span style={boxStyle}>Select All</span>
|
||||
</td>
|
||||
<td onClick={selectAllHandler}>
|
||||
<span style={boxStyle}>
|
||||
N/A (Selects all accounts below)
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
const AccountRow = (props: { accountNumber: string; name: string; }) => {
|
||||
const boxStyle = { display: 'inline-block', width: "100%", cursor: 'pointer' };
|
||||
|
||||
const selectAccountHandler = (accountNumber: string) => () =>
|
||||
$(`#export-${accountNumber}`)
|
||||
.prop('checked', !$(`#export-${accountNumber}`).prop('checked'));
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td>
|
||||
<input id={`export-${props.accountNumber}`}
|
||||
data-checkbox-type="account"
|
||||
type="checkbox" name={props.accountNumber} />
|
||||
</td>
|
||||
<td onClick={selectAccountHandler(props.accountNumber)}>
|
||||
<span style={boxStyle}>
|
||||
{formatAccountNumber(props.accountNumber)}
|
||||
</span>
|
||||
</td>
|
||||
<td onClick={selectAccountHandler(props.accountNumber)}>
|
||||
<span style={boxStyle}>
|
||||
{props.name}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
const AccountList = (props: AccountListProps) => {
|
||||
const accountList = props.accounts.map(acct =>
|
||||
<AccountRow accountNumber={acct.accountNumber} name={acct.name} />
|
||||
);
|
||||
|
||||
return (
|
||||
<div id="account-export-list">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="colgroup">Select</th>
|
||||
<th scope="colgroup">Account Number</th>
|
||||
<th scope="colgroup">Account Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<SelectAllRow />
|
||||
{accountList}
|
||||
</tbody>
|
||||
</table>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
const datePickerID = (label: string) => `export-date-${label}`;
|
||||
|
||||
const DatePicker = (props: { label: string; }) => (
|
||||
<div style={{ display: 'inline-block' }}>
|
||||
<label htmlFor={datePickerID(props.label)}>{props.label}</label>
|
||||
<input id={datePickerID(props.label)} type="date" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const DownloadButton = () => {
|
||||
return (
|
||||
<div style={{ display: 'inline-block' }}>
|
||||
<button>Download Transactions</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ExportDivProps {
|
||||
fromLabel: string;
|
||||
toLabel: string;
|
||||
accounts: Account[];
|
||||
onDownload: (accountNumbers: string[]) => void;
|
||||
}
|
||||
|
||||
export const ExportDiv = (props: ExportDivProps) => {
|
||||
const submitHandler = (e: Event) => {
|
||||
e.preventDefault();
|
||||
const accountNumbers = getValues($('#account-export').get(0)!);
|
||||
props.onDownload(accountNumbers);
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="account-export" class="content-box fill shadow ui-form" >
|
||||
<h2>Download Transaction Statements</h2>
|
||||
<p>
|
||||
Here, you can export statements from one or more of your accounts
|
||||
over a specified date range.
|
||||
</p>
|
||||
|
||||
<form id="export-transaction-form" onSubmit={submitHandler}>
|
||||
<div id="export-date-pickers">
|
||||
<DatePicker label={props.fromLabel} />
|
||||
<DatePicker label={props.toLabel} />
|
||||
<DownloadButton />
|
||||
</div>
|
||||
|
||||
<div class="row-column">
|
||||
<div class="column-span2 column-span2--base">
|
||||
<AccountList accounts={props.accounts} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'jsx-dom'; // necessary for react to work
|
||||
import { Event, ClientEvents } from '../events';
|
||||
import * as background from '../background';
|
||||
import { ExportDiv } from './components';
|
||||
|
||||
window.addEventListener('DOMContentLoaded', async () => {
|
||||
ClientEvents.on(Event.StatePopulated, async () => {
|
||||
const response = await background.getAccounts();
|
||||
|
||||
const downloadHandler = (accountNumbers: string[]) => {
|
||||
console.log('downloading txns for', accountNumbers);
|
||||
};
|
||||
|
||||
if (response.error == null) {
|
||||
const exportDiv = (
|
||||
<ExportDiv accounts={response.accounts}
|
||||
fromLabel="From" toLabel="To" onDownload={downloadHandler} />
|
||||
);
|
||||
|
||||
const contentDiv = document.querySelector(
|
||||
'div[class="table-data content-box fill shadow"]'
|
||||
);
|
||||
|
||||
contentDiv?.prepend(exportDiv);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
},
|
||||
{
|
||||
"matches": ["https://netbanki.landsbankinn.is/Ebli/Statements/ClientSummary.aspx"],
|
||||
"js": ["content-scripts/statement-page.tsx"],
|
||||
"js": ["content-scripts/statement-page/index.tsx"],
|
||||
"run_at": "document_start"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue