Removed enter to submit detail page. Added filtering for jobs lines.

_reference/DeploymentChecklist.md

@@ -8,4 +8,7 @@ Bucket=
 
 __React Based__
 REACT_APP_GRAPHQL_ENDPOINT
-REACT_APP_GRAPHQL_ENDPOINT_WS
+REACT_APP_GRAPHQL_ENDPOINT_WS
+
+__MetaData__
+Region based OpCodes

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

@@ -1,15 +1,18 @@
-import { Button, Table, Form, Input, Alert } from "antd";
-import React, { useState, useContext } from "react";
+import { Input, Table } from "antd";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
 //import EditableCell from "./job-lines-cell.component";
 
-export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
-  const { getFieldDecorator, isFieldsTouched, resetFields } = form;
+export default function JobLinesComponent({
+  jobLines,
+  form,
+  handleSubmit,
+  setSearchText
+}) {
   const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" }
+    sortedInfo: {}
   });
 
   const { t } = useTranslation();
@@ -51,6 +54,7 @@ export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
         state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
       ellipsis: true,
       editable: true,
+      width: "20%",
       render: (text, record) => (
         <span>
           {record.oem_partno ? record.oem_partno : record.op_code_desc}
@@ -65,7 +69,8 @@ export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
       sortOrder:
         state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
       ellipsis: true,
-      editable: true
+      editable: true,
+      width: "10%"
     },
     {
       title: t("joblines.fields.db_price"),
@@ -75,6 +80,7 @@ export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
       sortOrder:
         state.sortedInfo.columnKey === "db_price" && state.sortedInfo.order,
       ellipsis: true,
+      width: "10%",
       render: (text, record) => (
         <CurrencyFormatter>{record.db_price}</CurrencyFormatter>
       )
@@ -87,6 +93,7 @@ export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
       sortOrder:
         state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
       ellipsis: true,
+      width: "10%",
       render: (text, record) => (
         <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
       )
@@ -113,31 +120,24 @@ export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
   };
 
   return (
-    <Form onSubmit={handleSubmit} {...formItemLayout}>
-      <div>Testing Place</div>
-
-      {isFieldsTouched() ? (
-        <Alert
-          message={
-            <div>
-              {t("general.messages.unsavedchanges")}
-              <Button onClick={() => resetFields()}>
-                {t("general.actions.reset")}
-              </Button>
-            </div>
-          }
-          closable
-        />
-      ) : null}
-
-      <Table
-        size="small"
-        pagination={{ position: "bottom", defaultPageSize: 50 }}
-        columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
-        dataSource={jobLines}
-        onChange={handleTableChange}
-      />
-    </Form>
+    <Table
+      title={() => {
+        return (
+          <Input.Search
+            placeholder="Search..."
+            onChange={e => {
+              e.preventDefault();
+              setSearchText(e.target.value);
+            }}
+          />
+        );
+      }}
+      size="small"
+      pagination={{ position: "bottom", defaultPageSize: 50 }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={jobLines}
+      onChange={handleTableChange}
+    />
   );
 }

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

@@ -1,52 +1,83 @@
-import React from "react";
-import JobLinesComponent from "./job-lines.component";
 import { useQuery } from "@apollo/react-hooks";
-import AlertComponent from "../alert/alert.component";
-import { Form, notification } from "antd";
-import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
+import { notification } from "antd";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
+import AlertComponent from "../alert/alert.component";
+import JobLinesComponent from "./job-lines.component";
 
-export default Form.create({ name: "JobsDetailJobLines" })(
-  function JobLinesContainer({ jobId, form }) {
-    const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
-      variables: { id: jobId },
-      fetchPolicy: "network-only"
+//export default Form.create({ name: "JobsDetailJobLines" })(
+
+export default function JobLinesContainer({ jobId, form }) {
+  const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only"
+  });
+
+  const [searchText, setSearchText] = useState("");
+  const { t } = useTranslation();
+
+  const handleSubmit = e => {
+    e.preventDefault();
+
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("jobs.errors.validationtitle"),
+          description: t("jobs.errors.validation")
+        });
+      }
+      if (!err) {
+        console.log("Save the est lines!", values);
+        // mutationUpdateJob({
+        //   variables: { jobId: data.jobs_by_pk.id, job: values }
+        // }).then(r => {
+        //   notification["success"]({
+        //     message: t("jobs.successes.savetitle")
+        //   });
+        //   //TODO: Better way to reset the field decorators?
+        //   refetch().then(r => form.resetFields());
+        // });
+      }
     });
-    const { t } = useTranslation();
-    const handleSubmit = e => {
-      e.preventDefault();
+  };
 
-      form.validateFieldsAndScroll((err, values) => {
-        if (err) {
-          notification["error"]({
-            message: t("jobs.errors.validationtitle"),
-            description: t("jobs.errors.validation")
-          });
-        }
-        if (!err) {
-          console.log("Save the est lines!", values);
-          // mutationUpdateJob({
-          //   variables: { jobId: data.jobs_by_pk.id, job: values }
-          // }).then(r => {
-          //   notification["success"]({
-          //     message: t("jobs.successes.savetitle")
-          //   });
-          //   //TODO: Better way to reset the field decorators?
-          //   refetch().then(r => form.resetFields());
-          // });
-        }
-      });
-    };
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
-    if (error) return <AlertComponent message={error.message} type="error" />;
-
-    return (
-      <JobLinesComponent
-        loading={loading}
-        jobLines={data && data.joblines ? data.joblines : null}
-        handleSubmit={handleSubmit}
-        form={form}
-      />
-    );
-  }
-);
+  return (
+    <JobLinesComponent
+      loading={loading}
+      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
+      }
+      handleSubmit={handleSubmit}
+      form={form}
+      setSearchText={setSearchText}
+    />
+  );
+}
+//);

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -18,7 +18,7 @@ export default function JobsDetailHeader({
   job,
   mutationConvertJob,
   refetch,
-  getFieldDecorator
+  handleSubmit
 }) {
   const { t } = useTranslation();
 
@@ -76,7 +76,12 @@ export default function JobsDetailHeader({
     >
       {t("jobs.actions.convert")}
     </Button>,
-    <Button type="primary" key="submit" htmlType="submit">
+    <Button
+      type="primary"
+      key="submit"
+      htmlType="button"
+      onClick={handleSubmit}
+    >
       {t("general.labels.save")}
     </Button>
   ];

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -41,11 +41,12 @@ export default function JobsDetailPage({
 
   return (
     <div>
-      <Form onSubmit={handleSubmit} {...formItemLayout}>
+      <Form onSubmit={handleSubmit} {...formItemLayout} autoComplete={"off"}>
         <JobsDetailHeader
           job={job}
           mutationConvertJob={mutationConvertJob}
           refetch={refetch}
+          handleSubmit={handleSubmit}
         />
 
         {isFieldsTouched() ? (