Further UI Updates

client/src/components/labor-allocations-table/labor-allocations-table.component.jsx

@@ -1,10 +1,11 @@
 import { EditFilled } from "@ant-design/icons";
-import { Typography } from "antd";
+import { Card, Space, Table } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { alphaSort } from "../../utils/sorters";
 import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component";
 import "./labor-allocations-table.styles.scss";
 import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
@@ -22,6 +23,15 @@ export function LaborAllocationsTable({
 }) {
   const { t } = useTranslation();
   const [totals, setTotals] = useState([]);
+  const [state, setState] = useState({
+    sortedInfo: {
+      columnKey: "cost_center",
+      field: "cost_center",
+      order: "ascend",
+    },
+    filteredInfo: {},
+  });
+
   useEffect(() => {
     if (!!joblines && !!timetickets && !!bodyshop);
     setTotals(
@@ -35,65 +45,92 @@ export function LaborAllocationsTable({
     if (!jobId) setTotals([]);
   }, [joblines, timetickets, bodyshop, adjustments, jobId]);
 
+  const columns = [
+    {
+      title: t("timetickets.fields.cost_center"),
+      dataIndex: "cost_center",
+      key: "cost_center",
+      defaultSortOrder: "cost_center",
+      sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
+      sortOrder:
+        state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
+    },
+    {
+      title: t("jobs.labels.hrs_total"),
+      dataIndex: "total",
+      key: "total",
+      sorter: (a, b) => a.total - b.total,
+      sortOrder:
+        state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+      render: (text, record) => record.total.toFixed(1),
+    },
+    {
+      title: t("jobs.labels.hrs_claimed"),
+      dataIndex: "hrs_claimed",
+      key: "hrs_claimed",
+      sorter: (a, b) => a.claimed - b.claimed,
+      sortOrder:
+        state.sortedInfo.columnKey === "claimed" && state.sortedInfo.order,
+      render: (text, record) => record.claimed && record.claimed.toFixed(1),
+    },
+    {
+      title: t("jobs.labels.adjustments"),
+      dataIndex: "adjustments",
+      key: "adjustments",
+      sorter: (a, b) => a.adjustments - b.adjustments,
+      sortOrder:
+        state.sortedInfo.columnKey === "adjustments" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Space wrap>
+          {record.adjustments.toFixed(1)}
+          <LaborAllocationsAdjustmentEdit
+            jobId={jobId}
+            adjustments={adjustments}
+            mod_lbr_ty={record.opcode}
+          >
+            <EditFilled />
+          </LaborAllocationsAdjustmentEdit>
+        </Space>
+      ),
+    },
+    {
+      title: t("jobs.labels.difference"),
+      dataIndex: "difference",
+
+      key: "difference",
+      sorter: (a, b) => a.difference - b.difference,
+      sortOrder:
+        state.sortedInfo.columnKey === "difference" && state.sortedInfo.order,
+      render: (text, record) => (
+        <strong
+          style={{
+            color: record.difference > 0 ? "green" : "red",
+          }}
+        >
+          {record.difference}
+        </strong>
+      ),
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  console.log("totals :>> ", totals);
   return (
-    <div>
-      <div className="imex-flex-row" style={{ margin: ".5rem" }}>
-        <Typography.Title level={3}>
-          {t("jobs.labels.laborallocations")}
-        </Typography.Title>
-        <div className="labor-allocations-table">
-          <table>
-            <thead>
-              <tr>
-                <th>
-                  <strong>{t("timetickets.fields.cost_center")}</strong>
-                </th>
-                <th>
-                  <strong>{t("jobs.labels.hrs_total")}</strong>
-                </th>
-                <th>
-                  <strong>{t("jobs.labels.hrs_claimed")}</strong>
-                </th>
-                <th>
-                  <strong>{t("jobs.labels.adjustments")}</strong>
-                </th>
-                <th>
-                  <strong>{t("jobs.labels.difference")}</strong>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {totals.map((t, idx) => (
-                <tr key={idx}>
-                  <td>{t.cost_center}</td>
-                  <td>{t.total.toFixed(1)}</td>
-                  <td>{t.claimed.toFixed(1)}</td>
-                  <td>
-                    {t.adjustments.toFixed(1)}
-                    <LaborAllocationsAdjustmentEdit
-                      jobId={jobId}
-                      adjustments={adjustments}
-                      mod_lbr_ty={t.opcode}
-                    >
-                      <EditFilled style={{ marginLeft: ".2rem" }} />
-                    </LaborAllocationsAdjustmentEdit>
-                  </td>
-                  <td>
-                    <strong
-                      style={{
-                        color: t.difference > 0 ? "green" : "red",
-                      }}
-                    >
-                      {t.difference}
-                    </strong>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
+    <Card title={t("jobs.labels.laborallocations")}>
+      <Table
+        columns={columns}
+        rowKey="cost_center"
+        pagination={false}
+        onChange={handleTableChange}
+        dataSource={totals}
+        scroll={{
+          x: true,
+        }}
+      />
+    </Card>
   );
 }
 export default connect(mapStateToProps, null)(LaborAllocationsTable);