Add info hover on transaction list

api/db/transaction.go

@@ -132,7 +132,7 @@ func (d *DB) AddPurchase(adminNum int, memberNum int, purchase []Purchase) (tran
 func (d *DB) transactionQuery() *gorm.DB {
 	return d.db.Preload("Purchase.Product").
 		Preload("Order.Products").
-		Preload("OrderPurchase.OrderProduct").
+		Preload("OrderPurchase.OrderProduct.Product").
 		Preload(clause.Associations)
 }
 

src/TransactionList.js

 import React, { useState } from "react";
-import { Redirect } from "react-router-dom";
-import BootstrapTable from "react-bootstrap-table-next";
+import { Table, OverlayTrigger, Popover } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
 import { FaShoppingBasket, FaMoneyBillAlt } from "react-icons/fa";
 import { GiPayMoney, GiReceiveMoney } from "react-icons/gi";
 import { HiClipboardCopy, HiClipboardList } from "react-icons/hi";
 import Fetcher from "./Fetcher";
 import { printMoney, printDate } from "./util";
 
-const columns = [
-  {
-    dataField: "type",
-    text: "",
-    align: "center",
-    formatter: (cell, row) => {
-      switch (cell) {
-        case "purchase":
-          return <FaShoppingBasket />;
-        case "topup":
-          if (row.total < 0) {
-            return <GiReceiveMoney />;
-          }
-          return <GiPayMoney />;
-        case "order":
-          return <HiClipboardList />;
-        case "refund":
-          return <HiClipboardCopy />;
-        default:
-          return <FaMoneyBillAlt />;
+function icon(transaction) {
+  switch (transaction.type) {
+    case "purchase":
+      return <FaShoppingBasket />;
+    case "topup":
+      if (transaction.total < 0) {
+        return <GiReceiveMoney />;
       }
-    },
-  },
-  { dataField: "date", text: "Fecha", formatter: printDate },
-  {
-    dataField: "total",
-    text: "Cantidad",
-    formatter: (cell) => printMoney(cell) + " €",
-  },
-];
+      return <GiPayMoney />;
+    case "order":
+      return <HiClipboardList />;
+    case "refund":
+      return <HiClipboardCopy />;
+    default:
+      return <FaMoneyBillAlt />;
+  }
+}
 
-function rowStyle(row) {
-  if (row.total < 0) {
-    return {
-      backgroundColor: "#fcbabf",
-    };
+function transactionOverlay(transaction) {
+  let title;
+  let content;
+  switch (transaction.type) {
+    case "purchase":
+      title = "compra";
+      content = transaction.purchase.map((p) => p.product.name).join(",") + ".";
+      break;
+    case "topup":
+      if (transaction.total < 0) {
+        title = "recarga";
+      } else {
+        title = "devolución";
+      }
+      content = transaction.topup.comment;
+      break;
+    case "order":
+      title = "pedido de " + transaction.order.name;
+      content = transaction.order_purchase.map((p) => {
+        return (
+          <div key={"O" + transaction.ID + "-" + p.order_product.ID}>
+            {p.order_product.product.name + ": " + p.amount}
+            <br />
+          </div>
+        );
+      });
+      break;
+    case "refund":
+      title = "devolución de " + transaction.refund.name;
+      break;
+    default:
+      title = "transacción";
   }
-  return {
-    backgroundColor: "#c4fcba",
-  };
+  return (
+    <Popover>
+      <Popover.Title>{title}</Popover.Title>
+      {content && <Popover.Content>{content}</Popover.Content>}
+    </Popover>
+  );
 }
 
 function TransactionList() {
   const [transactions, setTransactions] = useState([]);
-  const [clickID, setClicID] = useState(null);
-
-  if (clickID) {
-    return <Redirect to={"/transaction/" + clickID} push />;
-  }
 
   // TODO: useEffect to disable fetcher...
 
+  const entries = transactions.map((transaction) => {
+    const colorClass = transaction.total < 0 ? "table-danger" : "table-success";
+    return (
+      <OverlayTrigger
+        overlay={transactionOverlay(transaction)}
+        key={transaction.ID}
+      >
+        <LinkContainer to={"/transaction/" + transaction.ID}>
+          <tr className={colorClass}>
+            <td>{icon(transaction)}</td>
+            <td>{printDate(transaction.date)}</td>
+            <td>{printMoney(transaction.total) + " €"}</td>
+          </tr>
+        </LinkContainer>
+      </OverlayTrigger>
+    );
+  });
+
   return (
     <Fetcher url="/api/transaction/mine" onFetch={setTransactions}>
-      <BootstrapTable
-        keyField="ID"
-        data={transactions}
-        columns={columns}
-        rowEvents={{
-          onClick: (_, row) => setClicID(row.ID),
-        }}
-        rowStyle={rowStyle}
-        classes="stripped"
-        bordered={false}
-      />
+      <Table className="text-center">
+        <thead>
+          <tr>
+            <th></th>
+            <th>Fecha</th>
+            <th>Cantidad</th>
+          </tr>
+        </thead>
+        <tbody>{entries}</tbody>
+      </Table>
     </Fetcher>
   );
 }