Dave Richer
@@ -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
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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 */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user