bodyshop/client/src/components/job-tombstone/job-tombstone.component.jsx

import React, { useState } from "react";
import { Link } from "react-router-dom";
import AlertComponent from "../alert/alert.component";
import {
  Form,
  Input,
  Row,
  Col,
  Button,
  Typography,
  PageHeader,
  Descriptions,
  Tag,
  notification,
  Avatar,
  Layout
} from "antd";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
import { useMutation } from "@apollo/react-hooks";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import { useTranslation } from "react-i18next";
import CarImage from "../../assets/car.svg";

const { Content } = Layout;
const formItemLayout = {
  // labelCol: {
  //   xs: { span: 12 },
  //   sm: { span: 5 }
  // },
  // wrapperCol: {
  //   xs: { span: 24 },
  //   sm: { span: 12 }
  // }
};

function JobTombstone({ job, ...otherProps }) {
  const [jobContext, setJobContext] = useState(job);
  const [mutationUpdateJob] = useMutation(UPDATE_JOB);
  const { t } = useTranslation();

  if (!job) {
    return <AlertComponent message={t("jobs.errors.noaccess")} type='error' />;
  }

  const handleSubmit = e => {
    e.preventDefault();

    otherProps.form.validateFieldsAndScroll((err, values) => {
      if (err) {
        notification["error"]({
          message: t("jobs.errors.validationtitle"),
          description: t("jobs.errors.validation")
        });
      }
      if (!err) {
        mutationUpdateJob({
          variables: { jobId: jobContext.id, job: values }
        }).then(r =>
          notification["success"]({
            message: t("jobs.successes.savetitle")
          })
        );
      }
    });
  };

  const handleChange = event => {
    const { name, value } = event.target ? event.target : event;
    setJobContext({ ...jobContext, [name]: value });
  };

  const { getFieldDecorator } = otherProps.form;

  const tombstoneTitle = (
    <div>
      <Avatar size='large' alt='Vehicle Image' src={CarImage} />
      {t("jobs.fields.ro_number") + " " + jobContext.ro_number ?? "0"}
    </div>
  );

  return (
    <Content>
      <Form onSubmit={handleSubmit} {...formItemLayout}>
        <PageHeader
          style={{
            border: "1px solid rgb(235, 237, 240)"
          }}
          title={tombstoneTitle}
          subTitle={
            jobContext.owner
              ? (jobContext.owner?.first_name ?? "") +
                " " +
                (jobContext.owner?.last_name ?? "")
              : t("jobs.labels.no_owner")
          }
          tags={<Tag color='blue'>{jobContext?.job_status?.name}</Tag>}
          extra={[
            <Form.Item key='1'>
              <Button type='primary' htmlType='submit'>
                {t("general.labels.save")}
              </Button>
            </Form.Item>
          ]}>
          <Descriptions size='small' column={5}>
            <Descriptions.Item label={t("jobs.labels.vehicle_info")}>
              <Link to={`/manage/vehicles/${jobContext.vehicle?.id}`}>
                {jobContext.vehicle?.v_model_yr ?? t("general.labels.na")}{" "}
                {jobContext.vehicle?.v_make_desc ?? t("general.labels.na")}{" "}
                {jobContext.vehicle?.v_model_desc ?? t("general.labels.na")} |{" "}
                {jobContext.vehicle?.plate_no ?? t("general.labels.na")}
              </Link>
            </Descriptions.Item>

            <Descriptions.Item label={t("jobs.fields.est_number")}>
              {jobContext.est_number}
            </Descriptions.Item>

            <Descriptions.Item label={t("jobs.fields.claim_total")}>
              $ {jobContext.claim_total?.toFixed(2)}
            </Descriptions.Item>

            <Descriptions.Item label={t("jobs.fields.deductible")}>
              $ {jobContext.deductible?.toFixed(2)}
            </Descriptions.Item>
          </Descriptions>
        </PageHeader>

        <Row>
          <Typography.Title level={4}>Information</Typography.Title>
          {
            // <Form.Item label='Estimate #'>
            //         {getFieldDecorator("est_number", {
            //           initialValue: jobContext.est_number
            //         })(<Input name='est_number' readOnly onChange={handleChange} />)}
            //       </Form.Item>
          }
        </Row>

        <Row>
          <Typography.Title level={4}>Insurance Information</Typography.Title>
          <Form.Item label='Insurance Company'>
            {getFieldDecorator("est_co_nm", {
              initialValue: jobContext.est_co_nm
            })(<Input name='est_co_nm' onChange={handleChange} />)}
          </Form.Item>
          <Col span={8}>
            <Form.Item label='Estimator Last Name'>
              {getFieldDecorator("est_ct_ln", {
                initialValue: jobContext.est_ct_ln
              })(<Input name='est_ct_ln' onChange={handleChange} />)}
            </Form.Item>
            <Form.Item label='Estimator First Name'>
              {getFieldDecorator("est_ct_fn", {
                initialValue: jobContext.est_ct_fn
              })(<Input name='est_ct_fn' onChange={handleChange} />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label='Estimator Phone #'>
              {getFieldDecorator("est_ph1", {
                initialValue: jobContext.est_ph1
              })(
                <FormItemPhone
                  customInput={Input}
                  name='est_ph1'
                  onValueChange={handleChange}
                />
              )}
            </Form.Item>
            <Form.Item label='Estimator Email'>
              {getFieldDecorator("est_ea", {
                initialValue: jobContext.est_ea,
                rules: [
                  {
                    type: "email",
                    message: "This is not a valid email address."
                  }
                ]
              })(<Input name='est_ea' onChange={handleChange} />)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Content>
  );
}

export default Form.create({ name: "JobTombstone" })(JobTombstone);