IO-970 Report Center ID Fix

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

@@ -1,18 +1,18 @@
 import { useLazyQuery } from "@apollo/client";
-import { Button, DatePicker, Form, Select, Switch } from "antd";
+import { Button, DatePicker, Form, Radio, Select, Switch } 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 VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
-import DatePIckerRanges from "../../utils/DatePickerRanges";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
-import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
+import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 
 const mapStateToProps = createStructuredSelector({
   reportCenterModal: selectReportCenter,
@@ -73,7 +73,7 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
         to: values.to,
         subject: Templates[values.key]?.subject,
       },
-      values.email ? "e" : "p"
+      values.sendby === "email" ? "e" : "p"
     );
     setLoading(false);
   };
@@ -119,13 +119,27 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
             );
           }}
         </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) return null;
+            if (!idtype) {
+              form.setFieldsValue({ id: null });
+              return null;
+            }
             if (!vendorCalled && idtype === "vendor") callVendorQuery();
             if (!employeeCalled && idtype === "employee") callEmployeeQuery();
             if (idtype === "vendor")
@@ -180,14 +194,17 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
             ranges={DatePIckerRanges}
           />
         </Form.Item>
-
         <Form.Item
-          name="email"
+          label={t("general.labels.sendby")}
-          label={t("reportcenter.labels.generateasemail")}
+          name="sendby"
-          valuePropName="checked"
+          initialValue="print"
         >
-          <Switch />
+          <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",