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

client/src/components/job-detail-cards/job-detail-cards.dates.component.jsx

@@ -1,8 +1,8 @@
+import { Timeline } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { DateFormatter } from "../../utils/DateFormatter";
 import CardTemplate from "./job-detail-cards.template.component";
-import Moment from "react-moment";
-import { Timeline } from "antd";
 
 export default function JobDetailCardsDatesComponent({ loading, data }) {
   const { t } = useTranslation();
@@ -31,90 +31,84 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
           {data.actual_in ? (
             <Timeline.Item>
               {t("jobs.fields.actual_in")}
-              <Moment format='MM/DD/YYYY'>{data.actual_in || ""}</Moment>
+              <DateFormatter>{data.actual_in}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.scheduled_completion ? (
             <Timeline.Item>
-            {t("jobs.fields.scheduled_completion")}
-              <Moment format='MM/DD/YYYY'>
-                {data.scheduled_completion || ""}
-              </Moment>
+              {t("jobs.fields.scheduled_completion")}
+              <DateFormatter>{data.scheduled_completion}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.scheduled_in ? (
             <Timeline.Item>
               {t("jobs.fields.scheduled_in")}
-              <Moment format='MM/DD/YYYY'>{data.scheduled_in || ""}</Moment>
+              <DateFormatter>{data.scheduled_in}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.actual_completion ? (
             <Timeline.Item>
               {t("jobs.fields.actual_completion")}
-              <Moment format='MM/DD/YYYY'>
-                {data.actual_completion || ""}
-              </Moment>
+              <DateFormatter>{data.actual_completion}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.scheduled_delivery ? (
             <Timeline.Item>
               {t("jobs.fields.scheduled_delivery")}
-              <Moment format='MM/DD/YYYY'>
-                {data.scheduled_delivery || ""}
-              </Moment>
+              <DateFormatter>{data.scheduled_delivery}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.actual_delivery ? (
             <Timeline.Item>
               {t("jobs.fields.actual_delivery")}
-              <Moment format='MM/DD/YYYY'>{data.actual_delivery || ""}</Moment>
+              <DateFormatter>{data.actual_delivery}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.date_estimated ? (
             <Timeline.Item>
               {t("jobs.fields.date_estimated")}
-              <Moment format='MM/DD/YYYY'>{data.date_estimated || ""}</Moment>
+              <DateFormatter>{data.date_estimated}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.date_open ? (
             <Timeline.Item>
               {t("jobs.fields.date_open")}
-              <Moment format='MM/DD/YYYY'>{data.date_open || ""}</Moment>
+              <DateFormatter>{data.date_open}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.date_scheduled ? (
             <Timeline.Item>
               {t("jobs.fields.date_scheduled")}
-              <Moment format='MM/DD/YYYY'>{data.date_scheduled || ""}</Moment>
+              <DateFormatter>{data.date_scheduled}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.date_invoiced ? (
             <Timeline.Item>
               {t("jobs.fields.date_invoiced")}
-              <Moment format='MM/DD/YYYY'>{data.date_invoiced || ""}</Moment>
+              <DateFormatter>{data.date_invoiced}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.date_closed ? (
             <Timeline.Item>
               {t("jobs.fields.date_closed")}
-              <Moment format='MM/DD/YYYY'>{data.date_closed || ""}</Moment>
+              <DateFormatter>{data.date_closed}</DateFormatter>
             </Timeline.Item>
           ) : null}
 
           {data.date_exported ? (
             <Timeline.Item>
               {t("jobs.fields.date_exported")}
-              <Moment format='MM/DD/YYYY'>{data.date_exported || ""}</Moment>
+              <DateFormatter>{data.date_exported}</DateFormatter>
             </Timeline.Item>
           ) : null}
         </Timeline>

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

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

@@ -0,0 +1,90 @@
+import { DatePicker, Form } from "antd";
+import moment from "moment";
+import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
+
+export default function JobsDetailDatesComponent({ job }) {
+  const form = useContext(JobDetailFormContext);
+  const { getFieldDecorator } = form;
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Form.Item label={t("jobs.fields.loss_date")}>
+        {getFieldDecorator("loss_date", {
+          initialValue: job.loss_date ? moment(job.loss_date) : null
+        })(<DatePicker name="loss_date" />)}
+      </Form.Item>
+      DAMAGE {JSON.stringify(job.area_of_damage)}
+      CAA # seems not correct based on field mapping Class seems not correct
+      based on field mapping
+      <Form.Item label={t("jobs.fields.date_estimated")}>
+        {getFieldDecorator("date_estimated", {
+          initialValue: job.date_estimated ? moment(job.date_estimated) : null
+        })(<DatePicker name="date_estimated" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.date_open")}>
+        {getFieldDecorator("date_open", {
+          initialValue: job.date_open ? moment(job.date_open) : null
+        })(<DatePicker name="date_open" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.date_scheduled")}>
+        {getFieldDecorator("date_scheduled", {
+          initialValue: job.date_scheduled ? moment(job.date_scheduled) : null
+        })(<DatePicker name="date_scheduled" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.scheduled_in")}>
+        {getFieldDecorator("scheduled_in", {
+          initialValue: job.scheduled_in ? moment(job.scheduled_in) : null
+        })(<DatePicker name="scheduled_in" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.actual_in")}>
+        {getFieldDecorator("actual_in", {
+          initialValue: job.actual_in ? moment(job.actual_in) : null
+        })(<DatePicker name="actual_in" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.scheduled_completion")}>
+        {getFieldDecorator("scheduled_completion", {
+          initialValue: job.scheduled_completion
+            ? moment(job.scheduled_completion)
+            : null
+        })(<DatePicker name="scheduled_completion" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.actual_completion")}>
+        {getFieldDecorator("actual_completion", {
+          initialValue: job.actual_completion
+            ? moment(job.actual_completion)
+            : null
+        })(<DatePicker name="actual_completion" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.scheduled_delivery")}>
+        {getFieldDecorator("scheduled_delivery", {
+          initialValue: job.scheduled_delivery
+            ? moment(job.scheduled_delivery)
+            : null
+        })(<DatePicker name="scheduled_delivery" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.actual_delivery")}>
+        {getFieldDecorator("actual_delivery", {
+          initialValue: job.actual_delivery ? moment(job.actual_delivery) : null
+        })(<DatePicker name="actual_delivery" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.date_invoiced")}>
+        {getFieldDecorator("date_invoiced", {
+          initialValue: job.date_invoiced ? moment(job.date_invoiced) : null
+        })(<DatePicker name="date_invoiced" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.date_closed")}>
+        {getFieldDecorator("date_closed", {
+          initialValue: job.date_closed ? moment(job.date_closed) : null
+        })(<DatePicker name="date_closed" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.date_exported")}>
+        {getFieldDecorator("date_exported", {
+          initialValue: job.date_exported ? moment(job.date_exported) : null
+        })(<DatePicker name="date_exported" />)}
+      </Form.Item>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { Form, Input, InputNumber } from "antd";
+import { Form, Input, InputNumber, Divider } from "antd";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
@@ -52,6 +52,126 @@ export default function JobsDetailFinancials({ job }) {
           initialValue: job.adjustment_bottom_line
         })(<InputNumber name="adjustment_bottom_line" />)}
       </Form.Item>
+      <Divider />
+      Totals Table
+      <Form.Item label={t("jobs.fields.labor_rate_desc")}>
+        {getFieldDecorator("labor_rate_desc", {
+          initialValue: job.labor_rate_desc
+        })(<Input name="labor_rate_desc" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_lab")}>
+        {getFieldDecorator("rate_lab", {
+          initialValue: job.rate_lab
+        })(<InputNumber name="rate_lab" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_lad")}>
+        {getFieldDecorator("rate_lad", {
+          initialValue: job.rate_lad
+        })(<InputNumber name="rate_lad" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_lae")}>
+        {getFieldDecorator("rate_lae", {
+          initialValue: job.rate_lae
+        })(<InputNumber name="rate_lae" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_lar")}>
+        {getFieldDecorator("rate_lar", {
+          initialValue: job.rate_lar
+        })(<InputNumber name="rate_lar" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_las")}>
+        {getFieldDecorator("rate_las", {
+          initialValue: job.rate_las
+        })(<InputNumber name="rate_las" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_laf")}>
+        {getFieldDecorator("rate_laf", {
+          initialValue: job.rate_laf
+        })(<InputNumber name="rate_laf" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_lam")}>
+        {getFieldDecorator("rate_lam", {
+          initialValue: job.rate_lam
+        })(<InputNumber name="rate_lam" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_lag")}>
+        {getFieldDecorator("rate_lag", {
+          initialValue: job.rate_lag
+        })(<InputNumber name="rate_lag" />)}
+      </Form.Item>
+      Note //TODO: Remove ATP rate?
+      <Form.Item label={t("jobs.fields.rate_atp")}>
+        {getFieldDecorator("rate_atp", {
+          initialValue: job.rate_atp
+        })(<InputNumber name="rate_atp" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_lau")}>
+        {getFieldDecorator("rate_lau", {
+          initialValue: job.rate_lau
+        })(<InputNumber name="rate_lau" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_la1")}>
+        {getFieldDecorator("rate_la1", {
+          initialValue: job.rate_la1
+        })(<InputNumber name="rate_la1" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_la2")}>
+        {getFieldDecorator("rate_la2", {
+          initialValue: job.rate_la2
+        })(<InputNumber name="rate_la2" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_la3")}>
+        {getFieldDecorator("rate_la3", {
+          initialValue: job.rate_la3
+        })(<InputNumber name="rate_la3" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_la4")}>
+        {getFieldDecorator("rate_la4", {
+          initialValue: job.rate_la4
+        })(<InputNumber name="rate_la4" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_mapa")}>
+        {getFieldDecorator("rate_mapa", {
+          initialValue: job.rate_mapa
+        })(<InputNumber name="rate_mapa" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_mash")}>
+        {getFieldDecorator("rate_mash", {
+          initialValue: job.rate_mash
+        })(<InputNumber name="rate_mash" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_mahw")}>
+        {getFieldDecorator("rate_mahw", {
+          initialValue: job.rate_mahw
+        })(<InputNumber name="rate_mahw" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_ma2s")}>
+        {getFieldDecorator("rate_ma2s", {
+          initialValue: job.rate_ma2s
+        })(<InputNumber name="rate_ma2s" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_ma3s")}>
+        {getFieldDecorator("rate_ma3s", {
+          initialValue: job.rate_ma3s
+        })(<InputNumber name="rate_ma3s" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_mabl")}>
+        {getFieldDecorator("rate_mabl", {
+          initialValue: job.rate_mabl
+        })(<InputNumber name="rate_mabl" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_macs")}>
+        {getFieldDecorator("rate_macs", {
+          initialValue: job.rate_macs
+        })(<InputNumber name="rate_macs" />)}
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_matd")}>
+        {getFieldDecorator("rate_matd", {
+          initialValue: job.rate_matd
+        })(<InputNumber name="rate_matd" />)}
+      </Form.Item>
+
+
     </div>
   );
 }

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

@@ -11,8 +11,6 @@ export default function JobsDetailInsurance({ job }) {
   const { getFieldDecorator, getFieldValue } = form;
   const { t } = useTranslation();
 
-  console.log("job.loss_date", job.loss_date);
-
   return (
     <div>
       <Form.Item label={t("jobs.fields.ins_co_id")}>