diff options
Diffstat (limited to 'packages/demobank-ui/src/components/Transactions/views.tsx')
| -rw-r--r-- | packages/demobank-ui/src/components/Transactions/views.tsx | 60 |
1 files changed, 42 insertions, 18 deletions
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index f3ffcd157..5f1b9b688 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -36,6 +36,11 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode prev[d].push(cur) return prev }, {} as Record<string, typeof transactions>) + /** + * FIXME: create an abstraction of a table with accessible feature + * multi column multi header and subheaders + * Also responsiveness + */ return ( <div class="px-4 mt-4"> <div class="sm:flex sm:items-center"> @@ -44,28 +49,41 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode </div> </div> <div class="-mx-4 mt-5 ring-1 ring-gray-300 sm:mx-0 rounded-lg min-w-fit bg-white"> - <table class="min-w-full divide-y divide-gray-300"> + <table class="min-w-full divide-y divide-gray-300" summary={i18n.str`List of all transfer received and sent related to this account sorted by date with the latest on top.`}> <thead> <tr> - <th scope="col" class="pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Date`}</th> - <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Amount`}</th> - <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Counterpart`}</th> - <th scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 ">{i18n.str`Subject`}</th> + <th id="transfer-date" scope="col" class="pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 "> + {i18n.str`Date`} + </th> + <th id="transfer-counterpart" scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 "> + {i18n.str`Counterpart`} + </th> + <th id="transfer-subject" scope="col" class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 "> + {i18n.str`Subject`} + </th> + <th id="transfer-amount" scope="col" class="hidden sm:table-cell px-2 py-3.5 text-left text-sm font-semibold text-gray-900 "> + {i18n.str`Amount`} + </th> </tr> </thead> <tbody> - {Object.entries(txByDate).map(([date, txs], idx) => { + {Object.entries(txByDate).map(([date, txs], idxGr) => { return <Fragment> <tr class="border-t border-gray-200"> - <th colSpan={4} scope="colgroup" class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3"> + <th colSpan={4} scope="colgroup" + class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3" + id={`transfer-date-${idxGr}`} + headers={`transfer-date`} + > {date} </th> </tr> - {txs.map(item => { + {txs.map((item, idxTx) => { const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss", { locale: dateLocale }) - return (<tr key={idx} class="border-b border-gray-200 last:border-none"> - <td class="relative py-2 pl-2 pr-2 text-sm "> - <div class="font-medium text-gray-900">{time}</div> + return (<tr key={idxTx} class="border-b border-gray-200 last:border-none"> + <td class="relative py-2 pl-2 pr-2 text-sm sm:bg-gray-50 w-28" + id={`transfer-time-${idxGr}-${idxTx}`} + headers={`transfer-date-${idxGr} transfer-date`}> <dl class="font-normal sm:hidden"> <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt> <dd class="mt-1 truncate text-gray-700"> @@ -90,19 +108,25 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode </dd> </dl> </td> + <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500" + headers={`transfer-date-${idxGr} transfer-time-${idxGr}-${idxTx} transfer-counterpart`} + > + <a href={`#/wire-transfer/${item.counterpart}`} class="text-indigo-600 hover:text-indigo-900"> + {item.counterpart} + </a> + </td> + <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all " + headers={`transfer-date-${idxGr} transfer-time-${idxGr}-${idxTx} transfer-subject`} + >{item.subject}</td> <td data-negative={item.negative ? "true" : "false"} - class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 "> + class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 min-w-md" + headers={`transfer-date-${idxGr} transfer-time-${idxGr}-${idxTx} transfer-amount`} + > {item.amount ? (<RenderAmount value={item.amount} negative={item.negative} withColor spec={config.currency_specification} /> ) : ( <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> )} </td> - <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500"> - <a href={`#/wire-transfer/${item.counterpart}`} class="text-indigo-600 hover:text-indigo-900"> - {item.counterpart} - </a> - </td> - <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td> </tr>) })} </Fragment> |