IO-777 Added employee select to report center.

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

@@ -1,7 +1,7 @@
 import { useLazyQuery } from "@apollo/client";
 import { Button, DatePicker, Form, Select, Switch } from "antd";
 import moment from "moment";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -11,6 +11,8 @@ 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";
 
 const mapStateToProps = createStructuredSelector({
   reportCenterModal: selectReportCenter,
@@ -25,11 +27,15 @@ export default connect(
 
 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, called }] = useLazyQuery(QUERY_ALL_VENDORS, {
+  const [
+    callVendorQuery,
+    { data: vendorData, called: vendorCalled },
+  ] = useLazyQuery(QUERY_ALL_VENDORS, {
     skip: !(
       visible &&
       Templates[form.getFieldValue("key")] &&
@@ -37,12 +43,24 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
     ),
   });
 
-  const handleFinish = (values) => {
+  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);
-    GenerateDocument(
+    await GenerateDocument(
       {
         name: values.key,
         variables: {
@@ -56,6 +74,7 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
       },
       values.email ? "e" : "p"
     );
+    setLoading(false);
   };
 
   return (
@@ -89,7 +108,8 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
             //Kind of Id
             const idtype = Templates[key] && Templates[key].idtype;
             if (!idtype) return null;
-            if (!called && idtype === "vendor") callVendorQuery();
+            if (!vendorCalled && idtype === "vendor") callVendorQuery();
+            if (!employeeCalled && idtype === "employee") callEmployeeQuery();
             if (idtype === "vendor")
               return (
                 <Form.Item
@@ -102,7 +122,26 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
                     },
                   ]}
                 >
-                  <VendorSearchSelect options={data ? data.vendors : []} />
+                  <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;
@@ -138,7 +177,7 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
             marginTop: "1rem",
           }}
         >
-          <Button onClick={() => form.submit()} style={{}}>
+          <Button onClick={() => form.submit()} style={{}} loading={loading}>
             {t("reportcenter.actions.generate")}
           </Button>
         </div>