IO-747 CCC Scroll to Job in Table on create

client/src/components/contract-cars/contract-cars.component.jsx

@@ -117,6 +117,13 @@ export default function ContractsCarsComponent({
         type: "radio",
         selectedRowKeys: [selectedCar],
       }}
+      onRow={(record, rowIndex) => {
+        return {
+          onClick: (event) => {
+            handleSelect(record);
+          },
+        };
+      }}
     />
   );
 }

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

@@ -1,7 +1,8 @@
-import { Table, Input } from "antd";
-import React, { useState } from "react";
+import { Input, Table } from "antd";
+import React, { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 
 export default function ContractsJobsComponent({
   loading,
@@ -158,6 +159,15 @@ export default function ContractsJobsComponent({
               .includes(state.search.toLowerCase())
         );
 
+  const defaultCurrent = useMemo(() => {
+    return (
+      Math.round(
+        ((filteredData.findIndex((v) => v.id === selectedJob) || 0) + 1) / 10
+      ) + 1
+    );
+  }, [filteredData, selectedJob]);
+
+  if (loading) return <LoadingSkeleton />;
   return (
     <Table
       loading={loading}
@@ -169,8 +179,11 @@ export default function ContractsJobsComponent({
         />
       )}
       size="small"
-      pagination={{ position: "top" }}
-      columns={columns.map((item) => ({ ...item }))}
+      pagination={{
+        position: "top",
+        defaultCurrent: defaultCurrent,
+      }}
+      columns={columns}
       rowKey="id"
       dataSource={filteredData}
       onChange={handleTableChange}
@@ -179,6 +192,13 @@ export default function ContractsJobsComponent({
         type: "radio",
         selectedRowKeys: [selectedJob],
       }}
+      onRow={(record, rowIndex) => {
+        return {
+          onClick: (event) => {
+            handleSelect(record);
+          },
+        };
+      }}
     />
   );
 }