- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,330 +1,323 @@
-import { useLazyQuery } from "@apollo/client";
-import { useTreatments } from "@splitsoftware/splitio-react";
-import {
-  Button,
-  Card,
-  Col,
-  DatePicker,
-  Form,
-  Input,
-  Radio,
-  Row,
-  Typography,
-} from "antd";
+import {useLazyQuery} from "@apollo/client";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
+import {Button, Card, Col, DatePicker, Form, Input, Radio, Row, Typography,} from "antd";
 import _ from "lodash";
-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 { selectBodyshop } from "../../redux/user/user.selectors";
+import dayjs from "../../utils/day";
+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 {selectBodyshop} from "../../redux/user/user.selectors";
 import DatePIckerRanges from "../../utils/DatePickerRanges";
-import { GenerateDocument } from "../../utils/RenderTemplate";
-import { TemplateList } from "../../utils/TemplateConstants";
+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,
-  bodyshop: selectBodyshop,
+    reportCenterModal: selectReportCenter,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(ReportCenterModalComponent);
 
-export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
-  const [form] = Form.useForm();
-  const [search, setSearch] = useState("");
-  const { Enhanced_Payroll } = useTreatments(
-    ["Enhanced_Payroll"],
-    {},
-    bodyshop.imexshopid
-  );
-
-  const [loading, setLoading] = useState(false);
-  const { t } = useTranslation();
-  const Templates = TemplateList("report_center");
-  const ReportsList =
-    Enhanced_Payroll.treatment === "on"
-      ? Object.keys(Templates)
-          .map((key) => {
-            return Templates[key];
-          })
-          .filter(
-            (temp) =>
-              temp.enhanced_payroll === undefined ||
-              temp.enhanced_payroll === true
-          )
-      : Object.keys(Templates)
-          .map((key) => {
-            return Templates[key];
-          })
-          .filter(
-            (temp) =>
-              temp.enhanced_payroll === undefined ||
-              temp.enhanced_payroll === false
-          );
-  const { visible } = reportCenterModal;
-
-  const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
-    useLazyQuery(QUERY_ALL_VENDORS, {
-      skip: !(
-        visible &&
-        Templates[form.getFieldValue("key")] &&
-        Templates[form.getFieldValue("key")].idtype
-      ),
+export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
+    const [form] = Form.useForm();
+    const [search, setSearch] = useState("");
+    const {treatments: {Enhanced_Payroll}} = useSplitTreatments({
+        attributes: {},
+        names: ["Enhanced_Payroll"],
+        splitKey: bodyshop.imexshopid,
     });
 
-  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;
+    const [loading, setLoading] = useState(false);
+    const {t} = useTranslation();
+    const Templates = TemplateList("report_center");
+    const ReportsList =
+        Enhanced_Payroll.treatment === "on"
+            ? Object.keys(Templates)
+                .map((key) => {
+                    return Templates[key];
+                })
+                .filter(
+                    (temp) =>
+                        temp.enhanced_payroll === undefined ||
+                        temp.enhanced_payroll === true
+                )
+            : Object.keys(Templates)
+                .map((key) => {
+                    return Templates[key];
+                })
+                .filter(
+                    (temp) =>
+                        temp.enhanced_payroll === undefined ||
+                        temp.enhanced_payroll === false
+                );
 
-    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") }
-            : {}),
-          ...(start ? { starttz: moment(start).startOf("day") } : {}),
-          ...(end ? { endtz: moment(end).endOf("day") } : {}),
+    const {open} = reportCenterModal;
 
-          ...(id ? { id: id } : {}),
-        },
-      },
-      {
-        to: values.to,
-        subject: Templates[values.key]?.subject,
-      },
-      values.sendbyexcel === "excel"
-        ? "x"
-        : values.sendby === "email"
-        ? "e"
-        : "p",
-      id
-    );
-    setLoading(false);
-  };
+    const [callVendorQuery, {data: vendorData, called: vendorCalled}] =
+        useLazyQuery(QUERY_ALL_VENDORS, {
+            skip: !(
+                open &&
+                Templates[form.getFieldValue("key")] &&
+                Templates[form.getFieldValue("key")].idtype
+            ),
+        });
 
-  const FilteredReportsList =
-    search !== ""
-      ? ReportsList.filter((r) =>
-          r.title.toLowerCase().includes(search.toLowerCase())
-        )
-      : ReportsList;
+    const [callEmployeeQuery, {data: employeeData, called: employeeCalled}] =
+        useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
+            skip: !(
+                open &&
+                Templates[form.getFieldValue("key")] &&
+                Templates[form.getFieldValue("key")].idtype
+            ),
+        });
 
-  //Group it, create cards, and then filter out.
+    const handleFinish = async (values) => {
+        setLoading(true);
+        const start = values.dates[0];
+        const end = values.dates[1];
+        const {id} = values;
 
-  const grouped = _.groupBy(FilteredReportsList, "group");
-
-  return (
-    <div>
-      <Form
-        onFinish={handleFinish}
-        autoComplete={"off"}
-        layout="vertical"
-        form={form}
-      >
-        <Input.Search
-          onChange={(e) => setSearch(e.target.value)}
-          value={search}
-        />
-        <Form.Item
-          name="key"
-          label={t("reportcenter.labels.key")}
-          //  className="radio-group-columns"
-          rules={[
+        await GenerateDocument(
             {
-              required: true,
-              //message: t("general.validation.required"),
+                name: values.key,
+                variables: {
+                    ...(start
+                        ? {start: dayjs(start).startOf("day").format("YYYY-MM-DD")}
+                        : {}),
+                    ...(end
+                        ? {end: dayjs(end).endOf("day").format("YYYY-MM-DD")}
+                        : {}),
+                    ...(start ? {starttz: dayjs(start).startOf("day")} : {}),
+                    ...(end ? {endtz: dayjs(end).endOf("day")} : {}),
+
+                    ...(id ? {id: id} : {}),
+                },
             },
-          ]}
-        >
-          <Radio.Group>
-            {/* {Object.keys(Templates).map((key) => (
+            {
+                to: values.to,
+                subject: Templates[values.key]?.subject,
+            },
+            values.sendbyexcel === "excel"
+                ? "x"
+                : values.sendby === "email"
+                    ? "e"
+                    : "p",
+            id
+        );
+        setLoading(false);
+    };
+
+    const FilteredReportsList =
+        search !== ""
+            ? ReportsList.filter((r) =>
+                r.title.toLowerCase().includes(search.toLowerCase())
+            )
+            : ReportsList;
+
+    //Group it, create cards, and then filter out.
+
+    const grouped = _.groupBy(FilteredReportsList, "group");
+
+    return (
+        <div>
+            <Form
+                onFinish={handleFinish}
+                autoComplete={"off"}
+                layout="vertical"
+                form={form}
+            >
+                <Input.Search
+                    onChange={(e) => setSearch(e.target.value)}
+                    value={search}
+                />
+                <Form.Item
+                    name="key"
+                    label={t("reportcenter.labels.key")}
+                    //  className="radio-group-columns"
+                    rules={[
+                        {
+                            required: true,
+                            //message: t("general.validation.required"),
+                        },
+                    ]}
+                >
+                    <Radio.Group>
+                        {/* {Object.keys(Templates).map((key) => (
                 <Radio key={key} value={key}>
                   {Templates[key].title}
                 </Radio>
               ))} */}
 
-            <Row gutter={[16, 16]}>
-              {Object.keys(grouped).map((key) => (
-                <Col md={8} sm={12} key={key}>
-                  <Card.Grid
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      maxHeight: "33vh",
-                      overflowY: "scroll",
+                        <Row gutter={[16, 16]}>
+                            {Object.keys(grouped).map((key) => (
+                                <Col md={8} sm={12} key={key}>
+                                    <Card.Grid
+                                        style={{
+                                            width: "100%",
+                                            height: "100%",
+                                            maxHeight: "33vh",
+                                            overflowY: "scroll",
+                                        }}
+                                    >
+                                        <Typography.Title level={4}>
+                                            {t(`reportcenter.labels.groups.${key}`)}
+                                        </Typography.Title>
+                                        <ul style={{columns: "2 auto"}}>
+                                            {grouped[key].map((item) => (
+                                                <li key={item.key}>
+                                                    <Radio key={item.key} value={item.key}>
+                                                        {item.title}
+                                                    </Radio>
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </Card.Grid>
+                                </Col>
+                            ))}
+                        </Row>
+                    </Radio.Group>
+                </Form.Item>
+                <Form.Item style={{margin: 0, padding: 0}} 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>
+                        );
                     }}
-                  >
-                    <Typography.Title level={4}>
-                      {t(`reportcenter.labels.groups.${key}`)}
-                    </Typography.Title>
-                    <ul style={{ columns: "2 auto" }}>
-                      {grouped[key].map((item) => (
-                        <li key={item.key}>
-                          <Radio key={item.key} value={item.key}>
-                            {item.title}
-                          </Radio>
-                        </li>
-                      ))}
-                    </ul>
-                  </Card.Grid>
-                </Col>
-              ))}
-            </Row>
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item style={{ margin: 0, padding: 0 }} 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 style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
-          {() => {
-            const key = form.getFieldValue("key");
-            const currentId = form.getFieldValue("id");
-            if (!key) return null;
-            //Kind of Id
-            const idtype = Templates[key] && Templates[key].idtype;
-            if (!idtype && currentId) {
-              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 style={{margin: 0, padding: 0}} dependencies={["key"]}>
+                    {() => {
+                        const key = form.getFieldValue("key");
+                        const currentId = form.getFieldValue("id");
+                        if (!key) return null;
+                        //Kind of Id
+                        const idtype = Templates[key] && Templates[key].idtype;
+                        if (!idtype && currentId) {
+                            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>
-              );
-            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="MM/DD/YYYY"
-            ranges={DatePIckerRanges}
-          />
-        </Form.Item>
-        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
-          {() => {
-            const key = form.getFieldValue("key");
-            //Kind of Id
-            const reporttype = Templates[key] && Templates[key].reporttype;
+                <Form.Item
+                    name="dates"
+                    label={t("reportcenter.labels.dates")}
+                    rules={[
+                        {
+                            required: true,
+                            //message: t("general.validation.required"),
+                        },
+                    ]}
+                >
+                    <DatePicker.RangePicker
+                        format="MM/DD/YYYY"
+                        presets={DatePIckerRanges}
+                    />
+                </Form.Item>
+                <Form.Item style={{margin: 0, padding: 0}} dependencies={["key"]}>
+                    {() => {
+                        const key = form.getFieldValue("key");
+                        //Kind of Id
+                        const reporttype = Templates[key] && Templates[key].reporttype;
 
-            if (reporttype === "excel")
-              return (
-                <Form.Item
-                  label={t("general.labels.sendby")}
-                  name="sendbyexcel"
-                  initialValue="excel"
-                >
-                  <Radio.Group>
-                    <Radio value="excel">{t("general.labels.excel")}</Radio>
-                  </Radio.Group>
+                        if (reporttype === "excel")
+                            return (
+                                <Form.Item
+                                    label={t("general.labels.sendby")}
+                                    name="sendbyexcel"
+                                    initialValue="excel"
+                                >
+                                    <Radio.Group>
+                                        <Radio value="excel">{t("general.labels.excel")}</Radio>
+                                    </Radio.Group>
+                                </Form.Item>
+                            );
+                        if (reporttype !== "excel")
+                            return (
+                                <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>
+                            );
+                    }}
                 </Form.Item>
-              );
-            if (reporttype !== "excel")
-              return (
-                <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>
-              );
-          }}
-        </Form.Item>
 
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            marginTop: "1rem",
-          }}
-        >
-          <Button onClick={() => form.submit()} style={{}} loading={loading}>
-            {t("reportcenter.actions.generate")}
-          </Button>
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "center",
+                        marginTop: "1rem",
+                    }}
+                >
+                    <Button onClick={() => form.submit()} style={{}} loading={loading}>
+                        {t("reportcenter.actions.generate")}
+                    </Button>
+                </div>
+            </Form>
         </div>
-      </Form>
-    </div>
-  );
+    );
 }

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

@@ -1,47 +1,47 @@
-import { Modal } from "antd";
+import {Modal} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { toggleModalVisible } from "../../redux/modals/modals.actions";
-import { selectReportCenter } from "../../redux/modals/modals.selectors";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {toggleModalVisible} from "../../redux/modals/modals.actions";
+import {selectReportCenter} from "../../redux/modals/modals.selectors";
 import RbacWrapperComponent from "../rbac-wrapper/rbac-wrapper.component";
 import ReportCenterModalComponent from "./report-center-modal.component";
 
 const mapStateToProps = createStructuredSelector({
-  reportCenterModal: selectReportCenter,
+    reportCenterModal: selectReportCenter,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  toggleModalVisible: () => dispatch(toggleModalVisible("reportCenter")),
+    toggleModalVisible: () => dispatch(toggleModalVisible("reportCenter")),
 });
 
 export function ReportCenterModalContainer({
-  reportCenterModal,
-  toggleModalVisible,
-}) {
-  const { t } = useTranslation();
+                                               reportCenterModal,
+                                               toggleModalVisible,
+                                           }) {
+    const {t} = useTranslation();
 
-  const { visible } = reportCenterModal;
+    const {open} = reportCenterModal;
 
-  return (
-    <Modal
-      visible={visible}
-      title={t("printcenter.labels.reportcentermodal")}
-      onOk={() => toggleModalVisible()}
-      onCancel={() => toggleModalVisible()}
-      cancelButtonProps={{ style: { display: "none" } }}
-      destroyOnClose
-      width="80%"
-    >
-      <RbacWrapperComponent action="shop:reportcenter">
-        <ReportCenterModalComponent />
-      </RbacWrapperComponent>
-    </Modal>
-  );
+    return (
+        <Modal
+            open={open}
+            title={t("printcenter.labels.reportcentermodal")}
+            onOk={() => toggleModalVisible()}
+            onCancel={() => toggleModalVisible()}
+            cancelButtonProps={{style: {display: "none"}}}
+            destroyOnClose
+            width="80%"
+        >
+            <RbacWrapperComponent action="shop:reportcenter">
+                <ReportCenterModalComponent/>
+            </RbacWrapperComponent>
+        </Modal>
+    );
 }
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(ReportCenterModalContainer);

client/src/components/report-center-modal/report-center-modal.styles.scss

@@ -2,8 +2,10 @@
   .ant-radio-group {
     // display: block;
   }
+
   .ant-radio-wrapper {
     display: block;
+
     span {
       word-wrap: break-word;
     }