Conceptual reporting based changes.

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

@@ -25,6 +25,7 @@ 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 Test from "./test";
 const mapStateToProps = createStructuredSelector({
   reportCenterModal: selectReportCenter,
 });
@@ -67,6 +68,7 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
     });
 
   const handleFinish = async (values) => {
+    console.log("🚀 ~ handleFinish ~ values:", values);
     setLoading(true);
     const start = values.dates ? values.dates[0] : null;
     const end = values.dates ? values.dates[1] : null;
@@ -79,14 +81,14 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
           ...(start
             ? { start: dayjs(start).startOf("day").format("YYYY-MM-DD") }
             : {}),
-          ...(end
+          ...(end ? { end: dayjs(end).endOf("day").format("YYYY-MM-DD") } : {}),
-            ? { end: dayjs(end).endOf("day").format("YYYY-MM-DD") }
-            : {}),
           ...(start ? { starttz: dayjs(start).startOf("day") } : {}),
           ...(end ? { endtz: dayjs(end).endOf("day") } : {}),
 
           ...(id ? { id: id } : {}),
         },
+        filters: values.filters,
+        sorters: values.sorters,
       },
       {
         to: values.to,
@@ -189,6 +191,7 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
             );
           }}
         </Form.Item>
+        <Test form={form} />
         <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
           {() => {
             const key = form.getFieldValue("key");

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

@@ -0,0 +1,206 @@
+import { Button, Col, Form, Input, Row, Select } from "antd";
+import React, { useEffect, useState } from "react";
+import { fetchFilterData } from "../../utils/RenderTemplate";
+import { DeleteFilled } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+export default function Test({ form }) {
+  return (
+    <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
+      {() => {
+        const key = form.getFieldValue("key");
+        return <RenderFilters templateId={key} />;
+      }}
+    </Form.Item>
+  );
+}
+
+function RenderFilters({ templateId }) {
+  const [state, setState] = useState(null);
+  console.log("state", state);
+  const { t } = useTranslation();
+  useEffect(() => {
+    const fetch = async () => {
+      const data = await fetchFilterData({ name: templateId });
+      console.log("🚀 ~ fetch ~ data:", data);
+      setState(JSON.parse(data));
+    };
+
+    console.log("🚀 ~ useEffect ~ templateId:", templateId);
+    if (templateId) {
+      fetch();
+    }
+  }, [templateId]);
+
+  if (!templateId || !state) return null;
+  return (
+    <div>
+      <Form.List name={["filters"]}>
+        {(fields, { add, remove, move }) => {
+          return (
+            <div>
+              Filters
+              {fields.map((field, index) => (
+                <Form.Item key={field.key}>
+                  <Row gutter={[16, 16]}>
+                    <Col span={10}>
+                      <Form.Item
+                        key={`${index}field`}
+                        label="field"
+                        name={[field.name, "field"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Select
+                          options={
+                            state.filters
+                              ? state.filters.map((f) => ({
+                                  value: f.name,
+                                  label: t(f.translation),
+                                }))
+                              : []
+                          }
+                        />
+                      </Form.Item>
+                    </Col>
+                    <Col span={6}>
+                      <Form.Item
+                        key={`${index}operator`}
+                        label="operator"
+                        name={[field.name, "operator"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Select />
+                      </Form.Item>
+                    </Col>
+                    <Col span={6}>
+                      <Form.Item
+                        key={`${index}value`}
+                        label="value"
+                        name={[field.name, "value"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Input />
+                      </Form.Item>
+                    </Col>
+                    <Col span={2}>
+                      <DeleteFilled
+                        style={{ margin: "1rem" }}
+                        onClick={() => {
+                          remove(field.name);
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => {
+                    add();
+                  }}
+                  style={{ width: "100%" }}
+                >
+                  {t("general.actions.add")}
+                </Button>
+              </Form.Item>
+            </div>
+          );
+        }}
+      </Form.List>
+      <Form.List name={["sorters"]}>
+        {(fields, { add, remove, move }) => {
+          return (
+            <div>
+              Sorters
+              {fields.map((field, index) => (
+                <Form.Item key={field.key}>
+                  <Row gutter={[16, 16]}>
+                    <Col span={11}>
+                      <Form.Item
+                        key={`${index}field`}
+                        label="field"
+                        name={[field.name, "field"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Select
+                          options={
+                            state.sorters
+                              ? state.sorters.map((f) => ({
+                                  value: f.name,
+                                  label: t(f.name),
+                                }))
+                              : []
+                          }
+                        />
+                      </Form.Item>
+                    </Col>
+                    <Col span={11}>
+                      <Form.Item
+                        key={`${index}direction`}
+                        label="direction"
+                        name={[field.name, "direction"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Select
+                          options={[
+                            { value: "desc", label: "Descending" },
+                            { value: "asc", label: "Ascending" },
+                          ]}
+                        />
+                      </Form.Item>
+                    </Col>
+
+                    <Col span={2}>
+                      <DeleteFilled
+                        style={{ margin: "1rem" }}
+                        onClick={() => {
+                          remove(field.name);
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => {
+                    add();
+                  }}
+                  style={{ width: "100%" }}
+                >
+                  {t("general.actions.add")}
+                </Button>
+              </Form.Item>
+            </div>
+          );
+        }}
+      </Form.List>
+    </div>
+  );
+}

client/src/utils/RenderTemplate.js

@@ -305,6 +305,48 @@ export const GenerateDocuments = async (templates) => {
   await RenderTemplates(templates, bodyshop);
 };
 
+export const fetchFilterData = async ({ name }) => {
+  const bodyshop = store.getState().user.bodyshop;
+  const jsrAuth = (await axios.post("/utils/jsr")).data;
+  jsreport.headers["FirebaseAuthorization"] =
+    "Bearer " + (await auth.currentUser.getIdToken());
+
+  const folders = await cleanAxios.get(`${server}/odata/folders`, {
+    headers: { Authorization: jsrAuth },
+  });
+  const shopSpecificFolder = folders.data.value.find(
+    (f) => f.name === bodyshop.imexshopid
+  );
+
+  const jsReportFilters = await cleanAxios.get(
+    `${server}/odata/assets?$filter=name eq '${name}.filters'`,
+    { headers: { Authorization: jsrAuth } }
+  );
+  console.log("🚀 ~ fetchFilterData ~ jsReportFilters:", jsReportFilters);
+
+  let parsedFilterData;
+  let useShopSpecificTemplate = false;
+  // let shopSpecificTemplate;
+
+  if (shopSpecificFolder) {
+    let shopSpecificTemplate = jsReportFilters.data.value.find(
+      (f) => f?.folder?.shortid === shopSpecificFolder.shortid
+    );
+    if (shopSpecificTemplate) {
+      useShopSpecificTemplate = true;
+      parsedFilterData = atob(shopSpecificTemplate.content);
+    }
+  }
+
+  if (!parsedFilterData) {
+    const generalTemplate = jsReportFilters.data.value.find((f) => !f.folder);
+    useShopSpecificTemplate = false;
+    if (generalTemplate) parsedFilterData = atob(generalTemplate.content);
+  }
+
+  return parsedFilterData;
+};
+
 const fetchContextData = async (templateObject, jsrAuth) => {
   const bodyshop = store.getState().user.bodyshop;