Begin job details cards.

client/src/components/jobs-list/jobs-list.component.jsx

@@ -4,37 +4,43 @@ import { Table, Icon, Input, Dropdown, Menu } from "antd";
 import { alphaSort } from "../../utils/sorters";
 import { useTranslation } from "react-i18next";
 
-export default function JobsPage({ loading, jobs }) {
+export default function JobsPage({
+  loading,
+  jobs,
+  selectedJob,
+  setSelectedJob
+}) {
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
   });
+
   const { t } = useTranslation();
 
   const actionMenu = (
     <Menu>
-      <Menu.Item key="images">
-        <Icon type="file-image" />
+      <Menu.Item key='images'>
+        <Icon type='file-image' />
         {t("jobs.actions.viewJobImages")}
       </Menu.Item>
-      <Menu.Item key="printing">
-        <Icon type="printer" />
+      <Menu.Item key='printing'>
+        <Icon type='printer' />
         {t("jobs.actions.printCenter")}
       </Menu.Item>
-      <Menu.Item key="notes">
-        <Icon type="edit" />
+      <Menu.Item key='notes'>
+        <Icon type='edit' />
         {t("jobs.actions.notes")}
       </Menu.Item>
-      <Menu.Item key="postinvoices">
-        <Icon type="shopping-cart" />
+      <Menu.Item key='postinvoices'>
+        <Icon type='shopping-cart' />
         {t("jobs.actions.postInvoices")}
       </Menu.Item>
-      <Menu.Item key="receiveparts">
-        <Icon type="inbox" />
+      <Menu.Item key='receiveparts'>
+        <Icon type='inbox' />
         {t("jobs.actions.receiveParts")}
       </Menu.Item>
-      <Menu.Item key="partstatus">
-        <Icon type="tool" />
+      <Menu.Item key='partstatus'>
+        <Icon type='tool' />
         {t("jobs.actions.partStatus")}
       </Menu.Item>
     </Menu>
@@ -108,7 +114,7 @@ export default function JobsPage({ loading, jobs }) {
       key: "action",
       render: (text, record) => (
         <Dropdown overlay={actionMenu} trigger={["click"]}>
-          <Icon type="ellipsis" />
+          <Icon type='ellipsis' />
         </Dropdown>
       )
     }
@@ -123,16 +129,37 @@ export default function JobsPage({ loading, jobs }) {
     setState({ ...state, filterinfo: { text: [value] } });
   };
 
+  const handleOnRowClick = record => {
+    if (record) {
+      if (record.id) {
+        setSelectedJob(record.id);
+        return;
+      }
+    }
+    setSelectedJob(null);
+  };
+
   return (
     <div>
-      <Input name="searchCriteria" onChange={handleChange} />
+      <Input name='searchCriteria' onChange={handleChange} />
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
+        rowKey='id'
         dataSource={jobs}
         onChange={handleTableChange}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: event => {
+              handleOnRowClick(record);
+            }, // click row
+            onDoubleClick: event => {}, // double click row
+            onContextMenu: event => {}, // right button click row
+            onMouseEnter: event => {}, // mouse enter row
+            onMouseLeave: event => {} // mouse leave row
+          };
+        }}
       />
     </div>
   );