Fixed up job details lines table + jobs totals page.

2020-06-11 14:09:12 -07:00
parent 886c7e9cb9
commit 4e5c305f95
20 changed files with 562 additions and 517 deletions
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/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>
  );
--- a/client/src/components/job-detail-lines/job-lines.container.jsx
+++ b/client/src/components/job-detail-lines/job-lines.container.jsx
@@ -1,70 +1,59 @@
 import { useQuery } from "@apollo/react-hooks";
 import React, { useState } from "react";
-
 import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
 import AlertComponent from "../alert/alert.component";
 import JobLinesComponent from "./job-lines.component";

-import { connect } from "react-redux";
-import { setModalContext } from "../../redux/modals/modals.actions";
-const mapDispatchToProps = dispatch => ({
-  setJobLineEditContext: context =>
-    dispatch(setModalContext({ context: context, modal: "jobLineEdit" }))
-});
-
-export function JobLinesContainer({ jobId, setJobLineEditContext }) {
+function JobLinesContainer({ jobId }) {
  const { loading, error, data, refetch } = useQuery(GET_JOB_LINES_BY_PK, {
    variables: { id: jobId },
-    fetchPolicy: "network-only"
  });

  const [searchText, setSearchText] = useState("");
  const [selectedLines, setSelectedLines] = useState([]);

-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  const jobLines =
+    data && data.joblines
+      ? searchText
+        ? data.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())
+          )
+        : data.joblines
+      : null;

  return (
    <JobLinesComponent
      loading={loading}
      refetch={refetch}
-      jobLines={
-        data && data.joblines
-          ? searchText
-            ? data.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())
-              )
-            : data.joblines
-          : null
-      }
+      jobLines={jobLines}
      setSearchText={setSearchText}
      selectedLines={selectedLines}
      setSelectedLines={setSelectedLines}
      jobId={jobId}
-      setJobLineEditContext={setJobLineEditContext}
    />
  );
 }

-export default connect(null, mapDispatchToProps)(JobLinesContainer);
+export default JobLinesContainer;