Removed whiteboard from front page. Added dates fields. Added rates fields. Started refactoring lines page.

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

@@ -2,18 +2,51 @@ 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 { useTranslation } from "react-i18next";
 
-export default function JobLinesContainer({ jobId }) {
+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"
+    });
+    const { t } = useTranslation();
+    const handleSubmit = e => {
+      e.preventDefault();
 
-  const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
-    variables: { id: jobId },
-    fetchPolicy: "network-only"
-  });
-  if (error) return <AlertComponent message={error.message} type="error" />;
-  return (
-    <JobLinesComponent loading={loading} joblines={data ? data.joblines : null} />
-  );
-}
- 
+      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" />;
+
+    return (
+      <JobLinesComponent
+        loading={loading}
+        jobLines={data && data.joblines ? data.joblines : null}
+        handleSubmit={handleSubmit}
+        form={form}
+      />
+    );
+  }
+);