BOD-7 #comment Fixed up employee list + form screen to follow other screens and resolve antd breaking changes.

client/src/components/shop-employees/shop-employees-list.component.jsx

@@ -1,51 +1,98 @@
-import { Button, List } from "antd";
+import { Button, Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 export default function ShopEmployeesListComponent({
   loading,
   employees,
+  selectedEmployee,
   setSelectedEmployee,
   handleDelete
 }) {
   const { t } = useTranslation();
+
+  const handleOnRowClick = record => {
+    if (record) {
+      setSelectedEmployee(record);
+    } else setSelectedEmployee({});
+  };
+  const columns = [
+    {
+      title: t("employees.fields.employee_number"),
+      dataIndex: "employee_number",
+      key: "employee_number"
+    },
+    {
+      title: t("employees.fields.first_name"),
+      dataIndex: "first_name",
+      key: "first_name"
+    },
+    {
+      title: t("employees.fields.last_name"),
+      dataIndex: "last_name",
+      key: "last_name"
+    },
+    {
+      title: t("employees.fields.cost_center"),
+      dataIndex: "cost_center",
+      key: "cost_center"
+    },
+    {
+      title: t("employees.fields.base_rate"),
+      dataIndex: "base_rate",
+      key: "base_rate",
+      render: (text, record) => (
+        <CurrencyFormatter>{record.base_rate}</CurrencyFormatter>
+      )
+    },
+    {
+      title: t("employees.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <div>
+          <Button key="delete" onClick={() => handleDelete(record.id)}>
+            {t("general.actions.delete")}
+          </Button>
+        </div>
+      )
+    }
+  ];
   return (
     <div>
-      <Button
-        type="primary"
-        onClick={() => {
-          setSelectedEmployee({});
+      <Table
+        title={() => {
+          return (
+            <Button
+              type="primary"
+              onClick={() => {
+                setSelectedEmployee({});
+              }}
+            >
+              {t("employees.actions.new")}
+            </Button>
+          );
         }}
-      >
-        {t("employees.actions.new")}
-      </Button>
-      <List
         loading={loading}
-        itemLayout="horizontal"
+        size="small"
+        pagination={{ position: "top" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
         dataSource={employees}
-        renderItem={item => (
-          <List.Item
-            actions={[
-              <Button key="edit" onClick={() => setSelectedEmployee(item)}>
-                {t("general.actions.edit")}
-              </Button>,
-              <Button key="delete" onClick={() => handleDelete(item.id)}>
-                {t("general.actions.delete")}
-              </Button>
-            ]}
-          >
-            <List.Item.Meta
-              title={`${item.first_name || ""} ${item.last_name ||
-                ""} | ${item.employee_number || ""}`}
-              description={
-                <span>
-                  {item.cost_center} @{" "}
-                  <CurrencyFormatter>{item.base_rate}</CurrencyFormatter>
-                </span>
-              }
-            />
-          </List.Item>
-        )}
+        rowSelection={{
+          onSelect: props => {
+            setSelectedEmployee(props);
+          },
+          type: "radio",
+          selectedRowKeys: [(selectedEmployee && selectedEmployee.id) || null]
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: event => {
+              handleOnRowClick(record);
+            }
+          };
+        }}
       />
     </div>
   );