From d635ae0cbfed58668d9c9d0900fdfe4ef8fb5e2c Mon Sep 17 00:00:00 2001
From: projectmoon <projectmoon@agnos.is>
Date: Wed, 22 Mar 2023 16:48:07 +0100
Subject: [PATCH] Fancy looking accout selection table

---
 src/content-scripts/statement-page.tsx | 102 ++++++++++++++++++-------
 1 file changed, 74 insertions(+), 28 deletions(-)

diff --git a/src/content-scripts/statement-page.tsx b/src/content-scripts/statement-page.tsx
index 198f782..cb865cd 100644
--- a/src/content-scripts/statement-page.tsx
+++ b/src/content-scripts/statement-page.tsx
@@ -1,5 +1,4 @@
 import React from 'jsx-dom'; // necessary for react to work
-import { Actions, GetAccountsReply } from '../background/messages';
 import { Event, ClientEvents } from './events';
 import * as background from './background';
 import { Account } from '../landsbankinn/models';
@@ -9,32 +8,90 @@ 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 =>
-        <li>
-            <input id="export-{acct.acountNumber}" type="checkbox" />
-            &nbsp;
-            <label htmlFor="export-{acct.acountNumber}">
-                {acct.accountNumber} - {acct.name}
-            </label>
-        </li>
+        <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">
-            <ul>
-                <li>
-                    <input id="check-all" type="checkbox" onClick={selectAllHandler} />
-                    &nbsp;
-                    <label htmlFor="check-all">Select All</label>
-                </li>
-                {accountList}
-            </ul>
+            <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>
     );
 }
@@ -44,18 +101,7 @@ window.addEventListener('DOMContentLoaded', async () => {
         const response = await background.getAccounts();
 
         if (response.error == null) {
-            const exportDiv = (
-                <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>
-
-                    <AccountList accounts={response.accounts} />
-                </div>
-            );
-
+            const exportDiv = <ExportDiv accounts={response.accounts} />;
             const contentDiv = document.querySelector(
                 'div[class="table-data content-box fill shadow"]'
             );