From afdcff62ea3cd91078e1c5e272763f1ea2266252 Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Tue, 13 Feb 2024 19:23:08 -0500
Subject: [PATCH] - Progress update

Signed-off-by: Dave Richer <dave@imexsystems.ca>
---
 ...center-modal-filters-sorters-component.jsx | 110 ++++++++++--------
 .../report-center-modal.component.jsx         |   4 +-
 client/src/utils/graphQLmodifier.js           |  50 ++++----
 3 files changed, 84 insertions(+), 80 deletions(-)

diff --git a/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx b/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
index 765dd14b9..f4d2ee721 100644
--- a/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
@@ -1,8 +1,9 @@
-import {Button, Col, Form, Input, Row, Select} from "antd";
+import {Button, Col, Form, Input, InputNumber, 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";
+import {getOperatorsByType} from "../../utils/graphQLmodifier";
 
 export default function ReportCenterModalFiltersSortersComponent({form}) {
     return (
@@ -15,7 +16,7 @@ export default function ReportCenterModalFiltersSortersComponent({form}) {
     );
 }
 
-function RenderFilters({templateId}) {
+function RenderFilters({templateId, form}) {
     const [state, setState] = useState(null);
 
     console.log("state", state);
@@ -36,6 +37,7 @@ function RenderFilters({templateId}) {
         }
     }, [templateId]);
 
+
     if (!templateId || !state) return null;
     return (
         <div>
@@ -63,8 +65,6 @@ function RenderFilters({templateId}) {
                                                     options={
                                                         state.filters
                                                             ? state.filters.map((f) => {
-                                                                console.log('filter added');
-                                                                console.dir(f);
                                                                 return {
                                                                     value: f.name,
                                                                     label: f?.translation ? t(f.translation) : f.label,
@@ -76,59 +76,67 @@ function RenderFilters({templateId}) {
                                             </Form.Item>
                                         </Col>
                                         <Col span={6}>
-                                        <Form.Item dependencies={[['filters', field.name, "field"]]}>
-                                        {
-                                            () => {
-                                                console.log('Dependencies fired')
-                                                return     <Form.Item
-                                                key={`${index}operator`}
-                                                label="operator"
-                                                name={[field.name, "operator"]}
-                                                dependencies={[]}
-                                                rules={[
-                                                    {
-                                                        required: true,
-                                                        //message: t("general.validation.required"),
-                                                    },
-                                                ]}
-                                            >
-
-                                                             <Select
-                                                                options={[
-                                                                    {value: "_eq", label: "Equals"},
-                                                                    {value: "_ne", label: "Not Equals"},
-                                                                    {value: "_gt", label: "Greater Than"},
-                                                                    {value: "_lt", label: "Less Than"},
-                                                                    {value: "_gte", label: "Greater Than or Equal To"},
-                                                                    {value: "_lte", label: "Less Than or Equal To"},
-                                                                    {value: "_in", label: "In"},
-                                                                    {value: "_nin", label: "Not In"},
-                                                                    {value: "_contains", label: "Contains"},
-                                                                    {value: "_ncontains", label: "Does Not Contain"},
-                                                                ]}
-                                                            />
-
+                                            <Form.Item dependencies={[['filters', field.name, "field"]]}>
+                                                {
+                                                    () => {
+                                                        const name = form.getFieldValue(['filters', field.name, "field"]);
+                                                        const type = state.filters.find(f => f.name === name)?.type;
 
+                                                        return <Form.Item
+                                                            key={`${index}operator`}
+                                                            label="operator"
+                                                            name={[field.name, "operator"]}
+                                                            dependencies={[]}
+                                                            rules={[
+                                                                {
+                                                                    required: true,
+                                                                    //message: t("general.validation.required"),
+                                                                },
+                                                            ]}
+                                                        >
+                                                            <Select options={getOperatorsByType(type)}/>
+                                                        </Form.Item>
+                                                    }
+                                                }
                                             </Form.Item>
-                                            }
-                                        }
-                                        </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 dependencies={[['filters', field.name, "field"]]}>
+                                                {
+                                                    () => {
+                                                        const name = form.getFieldValue(['filters', field.name, "field"]);
+                                                        const type = state.filters.find(f => f.name === name)?.type;
+
+                                                        return <Form.Item
+                                                            key={`${index}value`}
+                                                            label="value"
+                                                            name={[field.name, "value"]}
+                                                            rules={[
+                                                                {
+                                                                    required: true,
+                                                                    //message: t("general.validation.required"),
+                                                                },
+                                                            ]}
+                                                        >
+                                                            {type === 'number' ?
+                                                                <InputNumber
+                                                                    onChange={(value) => {
+                                                                        form.setFieldsValue({[field.name]: {value: parseInt(value)}});
+                                                                    }}
+                                                                />
+                                                                :
+                                                                <Input
+                                                                    onChange={(value) => {
+                                                                        form.setFieldsValue({[field.name]: {value: value.toString()}});
+                                                                    }}
+                                                                />
+                                                            }
+                                                        </Form.Item>
+                                                    }
+                                                }
                                             </Form.Item>
+
                                         </Col>
                                         <Col span={2}>
                                             <DeleteFilled
diff --git a/client/src/components/report-center-modal/report-center-modal.component.jsx b/client/src/components/report-center-modal/report-center-modal.component.jsx
index bf2025dca..7c8a0e324 100644
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -9,7 +9,7 @@ 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 DatePickerRanges from "../../utils/DatePickerRanges";
 import {GenerateDocument} from "../../utils/RenderTemplate";
 import {TemplateList} from "../../utils/TemplateConstants";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
@@ -251,7 +251,7 @@ export function ReportCenterModalComponent({reportCenterModal}) {
                                 >
                                     <DatePicker.RangePicker
                                         format="MM/DD/YYYY"
-                                        presets={DatePIckerRanges}
+                                        presets={DatePickerRanges}
                                     />
                                 </Form.Item>
                             );
diff --git a/client/src/utils/graphQLmodifier.js b/client/src/utils/graphQLmodifier.js
index 55a59302d..3ff134a8a 100644
--- a/client/src/utils/graphQLmodifier.js
+++ b/client/src/utils/graphQLmodifier.js
@@ -1,33 +1,29 @@
-import {Kind, visit, parse, print} from "graphql";
+import {Kind, parse, print, visit} from "graphql";
 
-export const numberOperators = [
-    {value: "_eq", label: "Equals"},
-    {value: "_ne", label: "Not Equals"},
-    {value: "_gt", label: "Greater Than"},
-    {value: "_lt", label: "Less Than"},
-    {value: "_gte", label: "Greater Than or Equal To"},
-    {value: "_lte", label: "Less Than or Equal To"},
-];
-
-export const stringOperators = [
-    {value: "_eq", label: "Equals", type: 'string'},
-    {value: "_ne", label: "Not Equals", type: 'string'},
-    {value: "_in", label: "In", type: 'string'},
-    {value: "_nin", label: "Not In", type: 'string'},
-    {value: "_contains", label: "Contains", type: 'string'},
-    {value: "_ncontains", label: "Does Not Contain", type: 'string'},
-];
-
-export const numberSorters = [
-    {value: "asc", label: "Ascending"},
-    {value: "desc", label: "Descending"},
-];
-
-export const stringSorters = [
-    {value: "asc", label: "Alphabetically Ascending"},
-    {value: "desc", label: "Alphabetically Descending"},
+const STRING_OPERATORS = [
+    {value: "_eq", label: "equals"},
+    {value: "_neq", label: "does not equal"},
+    {value: "_like", label: "contains"},
+    {value: "_nlike", label: "does not contain"},
+    {value: "_ilike", label: "contains case-insensitive"},
+    {value: "_nilike", label: "does not contain case-insensitive"}
+];
+const NUMBER_OPERATORS = [
+    {value: "_eq", label: "equals"},
+    {value: "_neq", label: "does not equal"},
+    {value: "_gt", label: "greater than"},
+    {value: "_lt", label: "less than"},
+    {value: "_gte", label: "greater than or equal"},
+    {value: "_lte", label: "less than or equal"}
 ];
 
+export function getOperatorsByType(type = 'string') {
+    const operators = {
+        string: STRING_OPERATORS,
+        number: NUMBER_OPERATORS
+    };
+    return operators[type];
+}
 
 /* eslint-disable no-loop-func */