Fixed up job details lines table + jobs totals page.

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -10,8 +10,11 @@ import AllocationsAssignmentContainer from "../allocations-assignment/allocation
 import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
 import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
+import { onlyUnique } from "../../utils/arrayHelper";
 
 const mapDispatchToProps = (dispatch) => ({
+  setJobLineEditContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
   setPartsOrderContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "partsOrder" })),
 });
@@ -34,30 +37,20 @@ export function JobLinesComponent({
 
   const columns = [
     {
-      title: t("joblines.fields.line_no"),
+      title: "#",
       dataIndex: "line_no",
       key: "line_no",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => a.line_no - b.line_no,
       sortOrder:
         state.sortedInfo.columnKey === "line_no" && state.sortedInfo.order,
-      //ellipsis: true,
-      editable: true,
-      width: 75,
     },
     {
-      title: t("joblines.fields.unq_seq"),
-      dataIndex: "unq_seq",
-      key: "unq_seq",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
-      sorter: (a, b) => a.unq_seq - b.unq_seq,
+      title: t("joblines.fields.line_ind"),
+      dataIndex: "line_ind",
+      key: "line_ind",
+      sorter: (a, b) => alphaSort(a.line_ind, b.line_ind),
       sortOrder:
-        state.sortedInfo.columnKey === "unq_seq" && state.sortedInfo.order,
-      //ellipsis: true,
-      editable: true,
-      width: 75,
+        state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
     },
     {
       title: t("joblines.fields.line_desc"),
@@ -67,7 +60,6 @@ export function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
       ellipsis: true,
-      editable: true,
     },
     {
       title: t("joblines.fields.oem_partno"),
@@ -81,8 +73,6 @@ export function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
       ellipsis: true,
-      editable: true,
-
       render: (text, record) => (
         <span>
           {record.oem_partno ? record.oem_partno : record.op_code_desc}
@@ -99,24 +89,28 @@ export function JobLinesComponent({
       filters: [
         {
           text: t("jobs.labels.partsfilter"),
-          value: "parts",
+          value: ["PAN", "PAL", "PAA", "PAS", "PASL"],
+        },
+        {
+          text: "PAN",
+          value: ["PAN"],
+        },
+        {
+          text: "PAL",
+          value: ["PAL"],
+        },
+        {
+          text: "PAA",
+          value: ["PAA"],
+        },
+        {
+          text: "PAS/PASL",
+          value: ["PAS", "PASL"],
         },
       ],
-      // specify the condition of filtering result
-      // here is that finding the name started with `value`
-      onFilter: (value, record) =>
-        ["PAN", "PAL", "PAA", "PAS", "PASL"].includes(record.part_type),
-      ellipsis: true,
-      editable: true,
-    },
-    {
-      title: t("joblines.fields.line_ind"),
-      dataIndex: "line_ind",
-      key: "line_ind",
-      sorter: (a, b) => alphaSort(a.line_ind, b.line_ind),
-      sortOrder:
-        state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
+      onFilter: (value, record) => value.includes(record.part_type),
     },
+
     {
       title: t("joblines.fields.act_price"),
       dataIndex: "act_price",
@@ -125,7 +119,6 @@ export function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
       ellipsis: true,
-
       render: (text, record) => (
         <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
       ),
@@ -134,7 +127,6 @@ export function JobLinesComponent({
       title: t("joblines.fields.part_qty"),
       dataIndex: "part_qty",
       key: "part_qty",
-      ellipsis: true,
     },
     {
       title: t("joblines.fields.total"),
@@ -144,7 +136,6 @@ export function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
       ellipsis: true,
-
       render: (text, record) => (
         <CurrencyFormatter>
           {record.act_price * record.part_qty}
@@ -155,6 +146,7 @@ export function JobLinesComponent({
       title: t("joblines.fields.mod_lb_hrs"),
       dataIndex: "mod_lb_hrs",
       key: "mod_lb_hrs",
+      responsive: ["lg"],
       sorter: (a, b) => a.mod_lb_hrs - b.mod_lb_hrs,
       sortOrder:
         state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order,
@@ -166,12 +158,24 @@ export function JobLinesComponent({
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters:
+        (jobLines &&
+          jobLines
+            .map((l) => l.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Status*",
+                value: [s],
+              };
+            })) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
     },
     {
       title: t("allocations.fields.employee"),
       dataIndex: "employee",
       key: "employee",
-
       sorter: (a, b) =>
         alphaSort(
           a.allocations[0] &&
@@ -194,12 +198,6 @@ export function JobLinesComponent({
                 />
               ))
             : null}
-          <AllocationsAssignmentContainer
-            key={record.id}
-            refetch={refetch}
-            jobLineId={record.id}
-            hours={record.mod_lb_hrs}
-          />
         </span>
       ),
     },
@@ -208,7 +206,7 @@ export function JobLinesComponent({
       dataIndex: "actions",
       key: "actions",
       render: (text, record) => (
-        <span>
+        <div>
           <Button
             onClick={() => {
               setJobLineEditContext({
@@ -218,7 +216,13 @@ export function JobLinesComponent({
             }}>
             {t("general.actions.edit")}
           </Button>
-        </span>
+          <AllocationsAssignmentContainer
+            key={record.id}
+            refetch={refetch}
+            jobLineId={record.id}
+            hours={record.mod_lb_hrs}
+          />
+        </div>
       ),
     },
   ];
@@ -243,16 +247,17 @@ export function JobLinesComponent({
     <div>
       <PartsOrderModalContainer />
       <Table
+        columns={columns}
+        rowKey='id'
+        loading={loading}
+        size='small'
+        pagination={{ position: "top", defaultPageSize: 50 }}
+        dataSource={jobLines}
+        onChange={handleTableChange}
+        scroll={{ x: true, y: "40rem" }}
         title={() => {
           return (
-            <div>
-              <Input.Search
-                placeholder={t("general.labels.search")}
-                onChange={(e) => {
-                  e.preventDefault();
-                  setSearchText(e.target.value);
-                }}
-              />
+            <div className='imex-table-header'>
               <Button
                 disabled={selectedLines.length > 0 ? false : true}
                 onClick={() => {
@@ -282,11 +287,18 @@ export function JobLinesComponent({
                 }}>
                 {t("joblines.actions.new")}
               </Button>
+              <div className='imex-table-header__search'>
+                <Input.Search
+                  placeholder={t("general.labels.search")}
+                  onChange={(e) => {
+                    e.preventDefault();
+                    setSearchText(e.target.value);
+                  }}
+                />
+              </div>
             </div>
           );
         }}
-        loading={loading}
-        size='small'
         expandedRowRender={(record) => (
           <div style={{ margin: 0 }}>
             <strong>{t("parts_orders.labels.orderhistory")}</strong>
@@ -301,7 +313,6 @@ export function JobLinesComponent({
             ))}
           </div>
         )}
-        pagination={{ position: "top", defaultPageSize: 25 }}
         rowSelection={{
           selectedRowKeys: selectedLines.map((item) => item.id),
           onSelectAll: (selected, selectedRows, changeRows) => {
@@ -310,10 +321,6 @@ export function JobLinesComponent({
           onSelect: (record, selected, selectedRows, nativeEvent) =>
             setSelectedLines(selectedRows),
         }}
-        columns={columns}
-        rowKey='id'
-        dataSource={jobLines}
-        onChange={handleTableChange}
       />
     </div>
   );