Pad 0s to transaction ids

src/transaction/ShowTransaction.js

@@ -3,7 +3,7 @@ import { useParams, Redirect } from "react-router-dom";
 import { Row, Col } from "react-bootstrap";
 import Fetcher from "../Fetcher";
 import ShowPurchase from "../purchase/ShowPurchase";
-import { printMoney, printDate } from "../util";
+import { printMoney, printDate, printTransactionID } from "../util";
 
 function ShowTransaction() {
   const { id } = useParams();
@@ -35,7 +35,7 @@ function ShowTransaction() {
         </Col>
         <Col>
           <p className="text-right">
-            {printDate(transaction.date)} {"T-" + transaction.ID}
+            {printDate(transaction.date)} {printTransactionID(transaction)}
             {transaction.proxy && (
               <span>
                 <br />

src/transaction/TransactionList.js

@@ -4,7 +4,13 @@ import icon from "./icon";
 import TransactionTr from "./TransactionTr";
 import MemberPicker from "../member/MemberPicker";
 import Fetcher from "../Fetcher";
-import { printMoney, printDate, daysAfterNow, date2string } from "../util";
+import {
+  printMoney,
+  printDate,
+  printTransactionID,
+  daysAfterNow,
+  date2string,
+} from "../util";
 
 const engType = {
   compra: "purchase",
@@ -39,7 +45,7 @@ function TransactionList() {
     return (
       <TransactionTr transaction={transaction}>
         <td>{icon(transaction)}</td>
-        <td>{"T-" + transaction.ID}</td>
+        <td>{printTransactionID(transaction)}</td>
         <td>{printDate(transaction.date)}</td>
         <td>{transaction.member.name}</td>
         <td>{transaction.proxy ? transaction.proxy.name : ""}</td>

src/util.js

@@ -17,6 +17,10 @@ function printRole(role) {
   }
 }
 
+function printTransactionID(transaction) {
+  return "T-" + transaction.ID.toString().padStart(5, "0");
+}
+
 function url(path) {
   let api = process.env.REACT_APP_API;
   if (!api) {
@@ -35,4 +39,12 @@ function date2string(date) {
   return date.toISOString().split("T")[0];
 }
 
-export { printMoney, printDate, printRole, url, daysAfterNow, date2string };
+export {
+  printMoney,
+  printDate,
+  printRole,
+  url,
+  daysAfterNow,
+  date2string,
+  printTransactionID,
+};