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

_reference/DeploymentChecklist.md

@@ -9,3 +9,6 @@ Bucket=
 __React Based__
 REACT_APP_GRAPHQL_ENDPOINT
 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 { Input, Table } from "antd";
-import React, { useState, useContext } from "react";
+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 }) {
+export default function JobLinesComponent({
-  const { getFieldDecorator, isFieldsTouched, resetFields } = form;
+  jobLines,
+  form,
+  handleSubmit,
+  setSearchText
+}) {
   const [state, setState] = useState({
-    sortedInfo: {},
+    sortedInfo: {}
-    filteredInfo: { text: "" }
   });
 
   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,24 +120,18 @@ 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
+      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 }))}
@@ -138,6 +139,5 @@ export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
       dataSource={jobLines}
       onChange={handleTableChange}
     />
-    </Form>
   );
 }

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

@@ -1,18 +1,22 @@
-import React from "react";
-import JobLinesComponent from "./job-lines.component";
 import { useQuery } from "@apollo/react-hooks";
-import AlertComponent from "../alert/alert.component";
+import { notification } from "antd";
-import { Form, notification } from "antd";
+import React, { useState } from "react";
-import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
 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" })(
+//export default Form.create({ name: "JobsDetailJobLines" })(
-  function JobLinesContainer({ jobId, form }) {
+
+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();
 
@@ -43,10 +47,37 @@ export default Form.create({ name: "JobsDetailJobLines" })(
   return (
     <JobLinesComponent
       loading={loading}
-        jobLines={data && data.joblines ? data.joblines : null}
+      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() ? (