bodyshop/client/src/components/report-center-modal/report-center-modal.component.jsx

import { useLazyQuery } from "@apollo/client";
import { Button, DatePicker, Form, Radio, Space } from "antd";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
import { selectReportCenter } from "../../redux/modals/modals.selectors";
import DatePIckerRanges from "../../utils/DatePickerRanges";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import "./report-center-modal.styles.scss";

const mapStateToProps = createStructuredSelector({
  reportCenterModal: selectReportCenter,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ReportCenterModalComponent);

export function ReportCenterModalComponent({ reportCenterModal }) {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const Templates = TemplateList("report_center");
  const { visible } = reportCenterModal;

  const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
    useLazyQuery(QUERY_ALL_VENDORS, {
      skip: !(
        visible &&
        Templates[form.getFieldValue("key")] &&
        Templates[form.getFieldValue("key")].idtype
      ),
    });

  const [callEmployeeQuery, { data: employeeData, called: employeeCalled }] =
    useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
      skip: !(
        visible &&
        Templates[form.getFieldValue("key")] &&
        Templates[form.getFieldValue("key")].idtype
      ),
    });

  const handleFinish = async (values) => {
    setLoading(true);
    const start = values.dates[0];
    const end = values.dates[1];
    const { id } = values;
    console.log("values", values);
    await GenerateDocument(
      {
        name: values.key,
        variables: {
          ...(start
            ? { start: moment(start).startOf("day").format("YYYY-MM-DD") }
            : {}),
          ...(end
            ? { end: moment(end).endOf("day").format("YYYY-MM-DD") }
            : {}),
          ...(id ? { id: id } : {}),
        },
      },
      {
        to: values.to,
        subject: Templates[values.key]?.subject,
      },
      values.sendby === "email" ? "e" : "p",
      id
    );
    setLoading(false);
  };

  return (
    <div>
      <Form
        onFinish={handleFinish}
        autoComplete={"off"}
        layout="vertical"
        form={form}
      >
        <Form.Item
          name="key"
          label={t("reportcenter.labels.key")}
          //  className="radio-group-columns"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Radio.Group>
            <Space
              direction="vertical"
              wrap
              size="small"
              style={{
                maxHeight: "50vh",
              }}
            >
              {Object.keys(Templates).map((key) => (
                <Radio key={key} value={key}>
                  {Templates[key].title}
                </Radio>
              ))}
            </Space>
          </Radio.Group>
        </Form.Item>
        <Form.Item dependencies={["key"]}>
          {() => {
            const key = form.getFieldValue("key");
            if (!key) return null;
            //Kind of Id
            const rangeFilter = Templates[key] && Templates[key].rangeFilter;
            if (!rangeFilter) return null;
            return (
              <div>
                {t("reportcenter.labels.filterson", {
                  object: rangeFilter.object,
                  field: rangeFilter.field,
                })}
              </div>
            );
          }}
        </Form.Item>
        <Form.Item
          shouldUpdate={(prev, cur) =>
            Templates[prev.key]?.idtype !== Templates[cur.key]?.idtype
          }
          style={{ display: "none" }}
        >
          {() => {
            form.setFieldsValue({ id: null });
            return null;
          }}
        </Form.Item>
        <Form.Item dependencies={["key"]}>
          {() => {
            const key = form.getFieldValue("key");
            if (!key) return null;
            //Kind of Id
            const idtype = Templates[key] && Templates[key].idtype;
            if (!idtype) {
              form.setFieldsValue({ id: null });
              return null;
            }
            if (!vendorCalled && idtype === "vendor") callVendorQuery();
            if (!employeeCalled && idtype === "employee") callEmployeeQuery();
            if (idtype === "vendor")
              return (
                <Form.Item
                  name="id"
                  label={t("reportcenter.labels.vendor")}
                  rules={[
                    {
                      required: true,
                      //message: t("general.validation.required"),
                    },
                  ]}
                >
                  <VendorSearchSelect
                    options={vendorData ? vendorData.vendors : []}
                  />
                </Form.Item>
              );
            if (idtype === "employee")
              return (
                <Form.Item
                  name="id"
                  label={t("reportcenter.labels.employee")}
                  rules={[
                    {
                      required: true,
                      //message: t("general.validation.required"),
                    },
                  ]}
                >
                  <EmployeeSearchSelect
                    options={employeeData ? employeeData.employees : []}
                  />
                </Form.Item>
              );
            else return null;
          }}
        </Form.Item>
        <Form.Item
          name="dates"
          label={t("reportcenter.labels.dates")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <DatePicker.RangePicker
            format="YYYY-MM-DD"
            ranges={DatePIckerRanges}
          />
        </Form.Item>
        <Form.Item
          label={t("general.labels.sendby")}
          name="sendby"
          initialValue="print"
        >
          <Radio.Group>
            <Radio value="email">{t("general.labels.email")}</Radio>
            <Radio value="print">{t("general.labels.print")}</Radio>
          </Radio.Group>
        </Form.Item>

        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: "1rem",
          }}
        >
          <Button onClick={() => form.submit()} style={{}} loading={loading}>
            {t("reportcenter.actions.generate")}
          </Button>
        </div>
      </Form>
    </div>
  );
}