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

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

@@ -1,19 +1,17 @@
-import { Table, Button } from "antd";
-import React, { useContext, useState } from "react";
+import { Button, Table, Form, Input, Alert } from "antd";
+import React, { useState, useContext } from "react";
 import { useTranslation } from "react-i18next";
-import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
-import EditableCell from "./job-lines-cell.component";
+//import EditableCell from "./job-lines-cell.component";
 
-export default function JobLinesComponent({ job }) {
-  //const form = useContext(JobDetailFormContext);
-  //const { getFieldDecorator } = form;
+export default function JobLinesComponent({ jobLines, form, handleSubmit }) {
+  const { getFieldDecorator, isFieldsTouched, resetFields } = form;
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
   });
-  const [editingKey, setEditingKey] = useState("");
+
   const { t } = useTranslation();
 
   const columns = [
@@ -70,16 +68,7 @@ export default function JobLinesComponent({ job }) {
         state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
       ellipsis: true,
       render: (text, record) => (
-        <div>
-          {" "}
-          <CurrencyFormatter>{record.act_price}</CurrencyFormatter>{" "}
-          <Button
-            onClick={() => {
-              setEditingKey(record.id);
-            }}>
-            EDIT
-          </Button>
-        </div>
+        <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
       )
     }
   ];
@@ -92,33 +81,43 @@ export default function JobLinesComponent({ job }) {
   //   const { value } = event.target;
   //   setState({ ...state, filterinfo: { text: [value] } });
   // };
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 12 },
+      sm: { span: 5 }
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 12 }
+    }
+  };
+
   return (
-    <Table
-      size='small'
-      pagination={{ position: "bottom" }}
-      columns={columns.map(col => {
-        if (!col.editable) {
-          return col;
-        }
-        return {
-          ...col,
-          onCell: record => ({
-            record,
-            inputType: col.dataIndex === "age" ? "number" : "text",
-            dataIndex: col.dataIndex,
-            title: col.title,
-            editing: editingKey === record.id
-          })
-        };
-      })}
-      components={{
-        body: {
-          cell: EditableCell
-        }
-      }}
-      rowKey='id'
-      dataSource={job.joblines}
-      onChange={handleTableChange}
-    />
+    <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" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
+        dataSource={jobLines}
+        onChange={handleTableChange}
+      />
+    </Form>
   );
 }

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}
+      />
+    );
+  }
+);