diff options
author | Sebastian <sebasjm@gmail.com> | 2023-09-21 14:25:12 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-09-25 14:50:42 -0300 |
commit | 4faa037c20ca4c282d22d8e93bfa2b308b595d2a (patch) | |
tree | f89b996067bff49b45ce851209c2edd69afb81c5 /packages/demobank-ui/src/components/Transactions/views.tsx | |
parent | af623f5096138631383719bf737f5ff21660e052 (diff) | |
download | wallet-core-4faa037c20ca4c282d22d8e93bfa2b308b595d2a.tar.xz |
tx group by date
Diffstat (limited to 'packages/demobank-ui/src/components/Transactions/views.tsx')
-rw-r--r-- | packages/demobank-ui/src/components/Transactions/views.tsx | 59 |
1 files changed, 39 insertions, 20 deletions
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index 6303037a1..b11888320 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -14,10 +14,10 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { h, VNode } from "preact"; +import { Fragment, h, VNode } from "preact"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { State } from "./index.js"; -import { format } from "date-fns"; +import { format, isToday } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { @@ -32,6 +32,16 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { export function ReadyView({ transactions }: State.Ready): VNode { const { i18n } = useTranslationContext(); + const txByDate = transactions.reduce((prev, cur) => { + const d = cur.when.t_ms === "never" + ? "" + : format(cur.when.t_ms, "dd/MM/yyyy") + if (!prev[d]) { + prev[d] = [] + } + prev[d].push(cur) + return prev + }, {} as Record<string, typeof transactions>) return ( <div class="px-4 mt-4"> <div class="sm:flex sm:items-center"> @@ -50,25 +60,34 @@ export function ReadyView({ transactions }: State.Ready): VNode { </tr> </thead> <tbody> - {transactions.map((item, idx) => { - return ( - <tr key={idx}> - <td class="relative py-2 pl-2 pr-2 text-sm "> - <div class="font-medium text-gray-900">{item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")}</div> - </td> - <td class="px-3 py-3.5 text-sm text-gray-500">{item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${item.amount.currency - }` - ) : ( - <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> - )}</td> - <td class="px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td> - <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td> + {Object.entries(txByDate).map(([date, txs], idx) => { + 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"> + {date} + </th> </tr> - ); + {txs.map(item => { + return (<tr key={idx}> + <td class="relative py-2 pl-2 pr-2 text-sm "> + <div class="font-medium text-gray-900">{item.when.t_ms === "never" + ? "" + : format(item.when.t_ms, "HH:mm:ss")}</div> + </td> + <td data-negative={item.negative ? "true" : "false"} + class="px-3 py-3.5 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600"> + {item.negative ? "-" : ""} + {item.amount ? ( + `${Amounts.stringifyValue(item.amount)} ${item.amount.currency + }` + ) : ( + <span style={{ color: "grey" }}><{i18n.str`invalid value`}></span> + )}</td> + <td class="px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td> + <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td> + </tr>) + })} + </Fragment> })} </tbody> </table> |