bodyshop/client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx

import { useMutation } from "@apollo/client";
import {
  Button,
  Card,
  Form,
  InputNumber,
  notification,
  Popover,
  Select,
} from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_JOB } from "../../graphql/jobs.queries";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { insertAuditTrail } from "../../redux/application/application.actions";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  insertAuditTrail: ({ jobid, operation }) =>
    dispatch(insertAuditTrail({ jobid, operation })),
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LaborAllocationsAdjustmentEdit);

export function LaborAllocationsAdjustmentEdit({
  insertAuditTrail,
  jobId,
  mod_lbr_ty,
  adjustments,
  children,
  refetchQueryNames,
}) {
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const [updateAdjustments] = useMutation(UPDATE_JOB);
  const [form] = Form.useForm();

  const { t } = useTranslation();

  const handleFinish = async (values) => {
    setLoading(true);
    const result = await updateAdjustments({
      variables: {
        jobId: jobId,
        job: {
          lbr_adjustments: {
            ...adjustments,
            [values.mod_lbr_ty]: values.hours,
          },
        },
      },
      ...(refetchQueryNames ? { refetchQueries: refetchQueryNames } : {}),
    });

    if (!!result.errors) {
      notification["error"]({
        message: t("jobs.errors.saving", {
          message: JSON.stringify(result.errors),
        }),
      });
    } else {
      notification["success"]({
        message: t("jobs.successes.save"),
      });
      insertAuditTrail({
        jobid: jobId,
        operation: AuditTrailMapping.jobmodifylbradj({
          mod_lbr_ty: values.mod_lbr_ty,
          hours:
            values.hours -
            ((adjustments && adjustments[mod_lbr_ty]) || 0).toFixed(1),
        }),
      });
    }
    setLoading(false);
    setOpen(false);
  };

  const overlay = (
    <Card>
      <div>
        <Form
          form={form}
          layout="vertical"
          onFinish={handleFinish}
          initialValues={{
            mod_lbr_ty: mod_lbr_ty,
            hours: adjustments && adjustments[mod_lbr_ty],
          }}
        >
          <Form.Item
            name="mod_lbr_ty"
            label={t("joblines.fields.mod_lbr_ty")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <Select allowClear disabled={!!mod_lbr_ty}>
              <Select.Option value="LAA">
                {t("joblines.fields.lbr_types.LAA")}
              </Select.Option>
              <Select.Option value="LAB">
                {t("joblines.fields.lbr_types.LAB")}
              </Select.Option>
              <Select.Option value="LAD">
                {t("joblines.fields.lbr_types.LAD")}
              </Select.Option>
              <Select.Option value="LAE">
                {t("joblines.fields.lbr_types.LAE")}
              </Select.Option>
              <Select.Option value="LAF">
                {t("joblines.fields.lbr_types.LAF")}
              </Select.Option>
              <Select.Option value="LAG">
                {t("joblines.fields.lbr_types.LAG")}
              </Select.Option>
              <Select.Option value="LAM">
                {t("joblines.fields.lbr_types.LAM")}
              </Select.Option>
              <Select.Option value="LAR">
                {t("joblines.fields.lbr_types.LAR")}
              </Select.Option>
              <Select.Option value="LAS">
                {t("joblines.fields.lbr_types.LAS")}
              </Select.Option>
              <Select.Option value="LAU">
                {t("joblines.fields.lbr_types.LAU")}
              </Select.Option>
              <Select.Option value="LA1">
                {t("joblines.fields.lbr_types.LA1")}
              </Select.Option>
              <Select.Option value="LA2">
                {t("joblines.fields.lbr_types.LA2")}
              </Select.Option>
              <Select.Option value="LA3">
                {t("joblines.fields.lbr_types.LA3")}
              </Select.Option>
              <Select.Option value="LA4">
                {t("joblines.fields.lbr_types.LA4")}
              </Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label={t("jobs.fields.adjustmenthours")}
            name="hours"
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <InputNumber precision={1} />
          </Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            {t("general.actions.save")}
          </Button>
        </Form>
      </div>
    </Card>
  );

  return (
    <Popover
      open={open}
      onOpenChange={(vis) => setOpen(vis)}
      content={overlay}
      trigger="click"
    >
      {children}
    </Popover>
  );
}