Further UI Improvements

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

@@ -1,6 +1,6 @@
 import { DeleteFilled, FilterFilled, SyncOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Dropdown, Input, Menu, Space, Table } from "antd";
+import { Button, Dropdown, Input, Menu, PageHeader, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -39,35 +39,13 @@ export function JobLinesComponent({
   refetch,
   jobLines,
   setSearchText,
-  selectedLines,
-  setSelectedLines,
   job,
   setJobLineEditContext,
   form,
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
 
-  // const {
-  //   loading: billLinesLoading,
-  //   error: billLinesError,
-  //   data: billLinesData,
-  // } = useQuery(QUERY_BILLS_BY_JOB_REF, {
-  //   variables: { jobId: job && job.id },
-  //   skip: loading || !job,
-  // });
-
-  // const billLinesDataObj = useMemo(() => {
-  //   if (!billLinesData) return {};
-  //   const ret = {};
-  //   billLinesData.billlines.map((b) => {
-  //     if (b.joblineid) {
-  //       ret[b.joblineid] = { ...b, total: b.actual_price * b.quantity };
-  //     }
-  //     return null;
-  //   });
-  //   return ret;
-  // }, [billLinesData]);
-
+  const [selectedLines, setSelectedLines] = useState([]);
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: {},
@@ -80,6 +58,7 @@ export function JobLinesComponent({
       dataIndex: "line_no",
       key: "line_no",
       sorter: (a, b) => a.line_no - b.line_no,
+      fixed: "left",
       sortOrder:
         state.sortedInfo.columnKey === "line_no" && state.sortedInfo.order,
     },
@@ -87,13 +66,16 @@ export function JobLinesComponent({
       title: t("joblines.fields.line_ind"),
       dataIndex: "line_ind",
       key: "line_ind",
+      fixed: "left",
       sorter: (a, b) => alphaSort(a.line_ind, b.line_ind),
       sortOrder:
         state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
+      responsive: ["md"],
     },
     {
       title: t("joblines.fields.line_desc"),
       dataIndex: "line_desc",
+      fixed: "left",
       key: "line_desc",
       sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
       sortOrder:
@@ -231,6 +213,7 @@ export function JobLinesComponent({
       dataIndex: "billref",
       key: "billref",
       render: (text, record) => <JobLinesBillRefernece jobline={record} />,
+      responsive: ["md"],
     },
     {
       title: t("joblines.fields.status"),
@@ -258,35 +241,6 @@ export function JobLinesComponent({
         <JobLineStatusPopup jobline={record} disabled={jobRO} />
       ),
     },
-    // {
-    //   title: t("allocations.fields.employee"),
-    //   dataIndex: "employee",
-    //   key: "employee",
-    //   sorter: (a, b) =>
-    //     alphaSort(
-    //       a.allocations[0] &&
-    //         a.allocations[0].employee.first_name +
-    //           a.allocations[0].employee.last_name,
-    //       b.allocations[0] &&
-    //         b.allocations[0].employee.first_name +
-    //           b.allocations[0].employee.last_name
-    //     ),
-    //   sortOrder:
-    //     state.sortedInfo.columnKey === "employee" && state.sortedInfo.order,
-    //   render: (text, record) => (
-    //     <span>
-    //       {record.allocations && record.allocations.length > 0
-    //         ? record.allocations.map((item) => (
-    //             <AllocationsEmployeeLabelContainer
-    //               key={item.id}
-    //               refetch={refetch}
-    //               allocation={item}
-    //             />
-    //           ))
-    //         : null}
-    //     </span>
-    //   ),
-    // },
     {
       title: t("general.labels.actions"),
       dataIndex: "actions",
@@ -330,14 +284,6 @@ export function JobLinesComponent({
               </Button>
             </Space>
           )}
-          {
-            //   <AllocationsAssignmentContainer
-            //   key={record.id}
-            //   refetch={refetch}
-            //   jobLineId={record.id}
-            //   hours={record.mod_lb_hrs}
-            // />
-          }
         </div>
       ),
     },
@@ -366,109 +312,82 @@ export function JobLinesComponent({
   return (
     <div>
       <PartsOrderModalContainer />
+      <PageHeader
+        title={t("jobs.labels.estimatelines")}
+        extra={
+          <Space wrap>
+            <Button onClick={() => refetch()}>
+              <SyncOutlined />
+            </Button>
+            <Button
+              disabled={
+                (job && !job.converted) ||
+                (selectedLines.length > 0 ? false : true) ||
+                jobRO
+              }
+              onClick={() => {
+                setPartsOrderContext({
+                  actions: { refetch: refetch },
+                  context: {
+                    jobId: job.id,
+                    linesToOrder: selectedLines,
+                  },
+                });
+
+                //Clear out the selected lines. IO-785
+                setSelectedLines([]);
+              }}
+            >
+              {t("parts.actions.order")}
+            </Button>
+            <Button
+              onClick={() => {
+                setState({
+                  ...state,
+                  filteredInfo: {
+                    part_type: ["PAN,PAL,PAA,PAS,PASL"],
+                  },
+                });
+              }}
+            >
+              <FilterFilled /> {t("jobs.actions.filterpartsonly")}
+            </Button>
+            <Dropdown overlay={markMenu} trigger={["click"]}>
+              <Button>{t("jobs.actions.mark")}</Button>
+            </Dropdown>
+
+            <Button
+              disabled={jobRO}
+              onClick={() => {
+                setJobLineEditContext({
+                  actions: { refetch: refetch },
+                  context: { jobid: job.id },
+                });
+              }}
+            >
+              {t("joblines.actions.new")}
+            </Button>
+
+            <Input.Search
+              placeholder={t("general.labels.search")}
+              onChange={(e) => {
+                e.preventDefault();
+                setSearchText(e.target.value);
+              }}
+            />
+          </Space>
+        }
+      />
       <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 className="imex-table-header">
-              <Button onClick={() => refetch()}>
-                <SyncOutlined />
-              </Button>
-              <Button
-                disabled={
-                  (job && !job.converted) ||
-                  (selectedLines.length > 0 ? false : true) ||
-                  jobRO
-                }
-                onClick={() => {
-                  setPartsOrderContext({
-                    actions: { refetch: refetch },
-                    context: {
-                      jobId: job.id,
-                      linesToOrder: selectedLines,
-                    },
-                  });
-
-                  //Clear out the selected lines. IO-785
-                  setSelectedLines([]);
-                }}
-              >
-                {t("parts.actions.order")}
-              </Button>
-              <Button
-                onClick={() => {
-                  setState({
-                    ...state,
-                    filteredInfo: {
-                      part_type: ["PAN,PAL,PAA,PAS,PASL"],
-                    },
-                  });
-                }}
-              >
-                <FilterFilled /> {t("jobs.actions.filterpartsonly")}
-              </Button>
-              <Dropdown overlay={markMenu} trigger={["click"]}>
-                <Button>{t("jobs.actions.mark")}</Button>
-              </Dropdown>
-              {
-                // <AllocationsBulkAssignmentContainer
-                //     jobLines={selectedLines}
-                //     refetch={refetch}
-                //   />
-              }
-              <Button
-                disabled={jobRO}
-                onClick={() => {
-                  setJobLineEditContext({
-                    actions: { refetch: refetch },
-                    context: { jobid: job.id },
-                  });
-                }}
-              >
-                {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>
-          );
-        }}
-        // expandedRowRender={(record) => (
-        //   <div>
-        //     <strong>{t("parts_orders.labels.orderhistory")}</strong>
-        //     {record.parts_order_lines.map((item) => (
-        //       <div key={item.id}>
-        //         <Link
-        //           to={`/manage/jobs/${job.id}?tab=partssublet&partsorderid=${item.parts_order.id}`}
-        //         >
-        //           {item.parts_order.order_number || ""}
-        //         </Link>
-        //         -
-        //         <Link to={`/manage/shop/vendors/${item.parts_order.vendor.id}`}>
-        //           {item.parts_order.vendor.name || ""}
-        //         </Link>
-        //         {` on ${item.parts_order.order_date || ""}`}
-        //       </div>
-        //     ))}
-        //   </div>
-        // )}
-        rowClassName="table-small-margin"
         rowSelection={{
           selectedRowKeys: selectedLines.map((item) => item.id),
           onSelectAll: (selected, selectedRows, changeRows) => {

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

@@ -1,43 +1,43 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import JobLinesComponent from "./job-lines.component";
-
-function JobLinesContainer({ job, joblines, refetch, form }) {
+function JobLinesContainer({ job, joblines, refetch, form, ...rest }) {
   const [searchText, setSearchText] = useState("");
-  const [selectedLines, setSelectedLines] = useState([]);
 
-  const jobLines = joblines
-    ? searchText
-      ? joblines.filter(
-          (jl) =>
-            (jl.unq_seq || "")
-              .toString()
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (jl.line_desc || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (jl.part_type || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (jl.oem_partno || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (jl.op_code_desc || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (jl.db_price || "").toString().includes(searchText.toLowerCase()) ||
-            (jl.act_price || "").toString().includes(searchText.toLowerCase())
-        )
-      : joblines
-    : null;
+  const jobLines = useMemo(() => {
+    return joblines
+      ? searchText
+        ? joblines.filter(
+            (jl) =>
+              (jl.unq_seq || "")
+                .toString()
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.line_desc || "")
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.part_type || "")
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.oem_partno || "")
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.op_code_desc || "")
+                .toLowerCase()
+                .includes(searchText.toLowerCase()) ||
+              (jl.db_price || "")
+                .toString()
+                .includes(searchText.toLowerCase()) ||
+              (jl.act_price || "").toString().includes(searchText.toLowerCase())
+          )
+        : joblines
+      : [];
+  }, [joblines, searchText]);
 
   return (
     <JobLinesComponent
       refetch={refetch}
       jobLines={jobLines}
       setSearchText={setSearchText}
-      selectedLines={selectedLines}
-      setSelectedLines={setSelectedLines}
       job={job}
       form={form}
     />