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 { 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,31 +120,24 @@ export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
   };
 
   return (
-    <Form onSubmit={handleSubmit} {...formItemLayout}>
+    <Table
-      <div>Testing Place</div>
+      title={() => {
-
+        return (
-      {isFieldsTouched() ? (
+          <Input.Search
-        <Alert
+            placeholder="Search..."
-          message={
+            onChange={e => {
-            <div>
+              e.preventDefault();
-              {t("general.messages.unsavedchanges")}
+              setSearchText(e.target.value);
-              <Button onClick={() => resetFields()}>
+            }}
-                {t("general.actions.reset")}
+          />
-              </Button>
+        );
-            </div>
+      }}
-          }
+      size="small"
-          closable
+      pagination={{ position: "bottom", defaultPageSize: 50 }}
-        />
+      columns={columns.map(item => ({ ...item }))}
-      ) : null}
+      rowKey="id"
-
+      dataSource={jobLines}
-      <Table
+      onChange={handleTableChange}
-        size="small"
+    />
-        pagination={{ position: "bottom", defaultPageSize: 50 }}
-        columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
-        dataSource={jobLines}
-        onChange={handleTableChange}
-      />
-    </Form>
   );
 }

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 { 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 }) {
+
-    const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
+export default function JobLinesContainer({ jobId, form }) {
-      variables: { id: jobId },
+  const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
-      fetchPolicy: "network-only"
+    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 (error) return <AlertComponent message={error.message} type="error" />;
-        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" />;
+  return (
-
+    <JobLinesComponent
-    return (
+      loading={loading}
-      <JobLinesComponent
+      jobLines={
-        loading={loading}
+        data && data.joblines
-        jobLines={data && data.joblines ? data.joblines : null}
+          ? searchText
-        handleSubmit={handleSubmit}
+            ? data.joblines.filter(
-        form={form}
+                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() ? (