UI fixes for manual job creation + owners pages + vehicles pages + all jobs BOD-155

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx

@@ -7,12 +7,12 @@ import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 
 export default function JobsCreateVehicleInfoSearchComponent({
   loading,
-  vehicles
+  vehicles,
 }) {
   const [state, setState] = useContext(JobCreateContext);
   const [tableState, setTableState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
   });
 
   const { t } = useTranslation();
@@ -28,7 +28,7 @@ export default function JobsCreateVehicleInfoSearchComponent({
         tableState.sortedInfo.order,
       render: (text, record) => (
         <Link to={"/manage/vehicles/" + record.id}>{record.v_vin}</Link>
-      )
+      ),
     },
     {
       title: t("vehicles.fields.description"),
@@ -38,7 +38,7 @@ export default function JobsCreateVehicleInfoSearchComponent({
         return (
           <span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>
         );
-      }
+      },
     },
     {
       title: t("vehicles.fields.plate_no"),
@@ -46,56 +46,59 @@ export default function JobsCreateVehicleInfoSearchComponent({
       key: "plate",
       render: (text, record) => {
         return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
-      }
-    }
+      },
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
     setTableState({ ...tableState, filteredInfo: filters, sortedInfo: sorter });
   };
-  //TODO Implement searching & pagination
 
   return (
     <Table
       loading={loading}
       title={() => {
         return (
-          <Input.Search
-            placeholder="Search..."
-            onSearch={value => {
-              setState({
-                ...state,
-                vehicle: { ...state.vehicle, search: value }
-              });
-            }}
-            enterButton
-          />
+          <div className='imex-table-header'>
+            <Input.Search
+              className='imex-table-header__search'
+              placeholder={t("general.labels.search")}
+              onSearch={(value) => {
+                setState({
+                  ...state,
+                  vehicle: { ...state.vehicle, search: value },
+                });
+              }}
+              enterButton
+            />
+          </div>
         );
       }}
-      size="small"
+      size='small'
+      scroll={{ x: true }}
       pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
-      rowKey="id"
+      columns={columns}
+      rowKey='id'
       dataSource={vehicles}
       onChange={handleTableChange}
       rowSelection={{
-        onSelect: props => {
+        onSelect: (props) => {
           setState({
             ...state,
             vehicle: {
               ...state.vehicle,
               new: false,
               selectedid: props.id,
-              vehicleObj: props
-            }
+              vehicleObj: props,
+            },
           });
         },
         type: "radio",
-        selectedRowKeys: [state.vehicle.selectedid]
+        selectedRowKeys: [state.vehicle.selectedid],
       }}
       onRow={(record, rowIndex) => {
         return {
-          onClick: event => {
+          onClick: (event) => {
             if (record) {
               if (record.id) {
                 setState({
@@ -104,8 +107,8 @@ export default function JobsCreateVehicleInfoSearchComponent({
                     ...state.vehicle,
                     new: false,
                     selectedid: record.id,
-                    vehicleObj: record
-                  }
+                    vehicleObj: record,
+                  },
                 });
 
                 return;
@@ -113,9 +116,9 @@ export default function JobsCreateVehicleInfoSearchComponent({
             }
             setState({
               ...state,
-              vehicle: { ...state.vehicle, selectedid: null, vehicleObj: null }
+              vehicle: { ...state.vehicle, selectedid: null, vehicleObj: null },
             });
-          }
+          },
         };
       }}
     />