Merge branch 'feature/IO-1828-Front-End-Package-Updates' into master-AIO

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

@@ -11,12 +11,13 @@ 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 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";
+import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
 
 const mapStateToProps = createStructuredSelector({
     reportCenterModal: selectReportCenter,
@@ -89,7 +90,7 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
         const end = values.dates ? values.dates[1] : null;
         const {id} = values;
 
-        await GenerateDocument(
+        const templateConfig =
             {
                 name: values.key,
                 variables: {
@@ -104,7 +105,16 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
 
                     ...(id ? {id: id} : {}),
                 },
-            },
+                filters: values.filters,
+                sorters: values.sorters,
+            };
+
+        if (_.isString(values.defaultSorters) && !_.isEmpty(values.defaultSorters)) {
+            templateConfig.defaultSorters = JSON.parse(values.defaultSorters);
+        }
+
+        await GenerateDocument(
+            templateConfig,
             {
                 to: values.to,
                 subject: Templates[values.key]?.subject,
@@ -142,6 +152,7 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
                     onChange={(e) => setSearch(e.target.value)}
                     value={search}
                 />
+                <Form.Item name="defaultSorters" hidden/>
                 <Form.Item
                     name="key"
                     label={t("reportcenter.labels.key")}
@@ -174,7 +185,7 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
                                         <Typography.Title level={4}>
                                             {t(`reportcenter.labels.groups.${key}`)}
                                         </Typography.Title>
-                                        <ul style={{columns: "2 auto"}}>
+                                        <ul style={{listStyleType: 'none', columns: "2 auto"}}>
                                             {grouped[key].map((item) => (
                                                 <li key={item.key}>
                                                     <Radio key={item.key} value={item.key}>
@@ -206,6 +217,7 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
                         );
                     }}
                 </Form.Item>
+                <ReportCenterModalFiltersSortersComponent form={form} bodyshop={bodyshop}/>
                 <Form.Item style={{margin: 0, padding: 0}} dependencies={["key"]}>
                     {() => {
                         const key = form.getFieldValue("key");
@@ -274,7 +286,7 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
                                 >
                                     <DatePicker.RangePicker
                                         format="MM/DD/YYYY"
-                                        presets={DatePIckerRanges}
+                                        presets={DatePickerRanges}
                                     />
                                 </Form.Item>
                             );
@@ -330,3 +342,4 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
         </div>
     );
 }
+