From 9cc0d6175e59c497292ad8077f0a37619442097e Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Thu, 15 Feb 2024 21:01:43 -0500 Subject: [PATCH 01/12] - Progress commit Signed-off-by: Dave Richer --- ...center-modal-filters-sorters-component.jsx | 24 ++++++++++++++----- client/src/utils/graphQLmodifier.js | 17 +++++++++++++ 2 files changed, 35 insertions(+), 6 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 62efefac0..4e3d0aa5d 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 @@ -5,8 +5,20 @@ import {DeleteFilled} from "@ant-design/icons"; import {useTranslation} from "react-i18next"; import {getOperatorsByType} from "../../utils/graphQLmodifier"; import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component"; +import {setModalContext} from "../../redux/modals/modals.actions"; +import {connect} from "react-redux"; +import {createStructuredSelector} from "reselect"; +import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors"; -export default function ReportCenterModalFiltersSortersComponent({form}) { +const mapDispatchToProps = (dispatch) => ({}); +const mapStateToProps = createStructuredSelector({ + bodyshop: selectBodyshop, + currentUser: selectCurrentUser +}); + +export function ReportCenterModalFiltersSortersComponent({form, bodyshop, currentUser}) { + console.dir(bodyshop, {depth: null}) + console.dir(currentUser, {depth: null}) return ( {() => { @@ -17,6 +29,9 @@ export default function ReportCenterModalFiltersSortersComponent({form}) { ); } +export default connect(mapStateToProps, mapDispatchToProps)(ReportCenterModalFiltersSortersComponent); + + function RenderFilters({templateId, form}) { const [state, setState] = useState(null); const [visible, setVisible] = useState(false); @@ -210,7 +225,7 @@ function RenderFilters({templateId, form}) { state.sorters ? state.sorters.map((f) => ({ value: f.name, - label: t(f.translation), + label: f?.translation ? (t(f.translation) === f.translation ? f.label : t(f.translation)) : f.label, })) : [] } @@ -230,10 +245,7 @@ function RenderFilters({templateId, form}) { ]} > + { - form.setFieldsValue({[field.name]: {value: value.toString()}}); - }} - /> - } + } } @@ -245,7 +220,7 @@ function RenderFilters({templateId, form}) { ]} > + } + } + + // Number Input + if (type === "number") { + return {form.setFieldsValue({[field.name]: {value: parseInt(value)}}); + }} + /> + } + + // Default to String Input + return { + form.setFieldsValue({[field.name]: {value: value.toString()}}); + }} + /> +} + +export default connect(mapStateToProps, mapDispatchToProps)(ReportCenterModalValueSelectorComponent); \ No newline at end of file diff --git a/client/src/utils/RenderTemplate.js b/client/src/utils/RenderTemplate.js index 33121f6b0..0a6b16a38 100644 --- a/client/src/utils/RenderTemplate.js +++ b/client/src/utils/RenderTemplate.js @@ -9,7 +9,7 @@ import {store} from "../redux/store"; import client from "../utils/GraphQLClient"; import cleanAxios from "./CleanAxios"; import {TemplateList} from "./TemplateConstants"; -import {applyFilters, applySorters, parseQuery, printQuery, wrapFiltersInAnd} from "./graphQLmodifier"; +import {generateTemplate} from "./graphQLmodifier"; const server = process.env.REACT_APP_REPORTS_SERVER_URL; @@ -278,7 +278,9 @@ export const GenerateDocument = async ( sendType, jobid ) => { + const bodyshop = store.getState().user.bodyshop; + if (sendType === "e") { store.dispatch( setEmailOptions({ @@ -404,7 +406,7 @@ const fetchContextData = async (templateObject, jsrAuth) => { // We have no template filters or sorters, so we can just execute the query and return the data - if ((!templateObject?.filters && !templateObject?.filters?.length && !templateObject?.sorters && !templateObject?.sorters?.length)) { + if (!(templateObject?.filters?.length || templateObject?.sorters?.length)) { let contextData = {}; if (templateQueryToExecute) { const {data} = await client.query({ @@ -417,36 +419,11 @@ const fetchContextData = async (templateObject, jsrAuth) => { return {contextData, useShopSpecificTemplate}; } - // Parse the query and apply the filters and sorters - const ast = parseQuery(templateQueryToExecute); - - let filterFields = []; - - if (templateObject?.filters && templateObject?.filters?.length) { - applyFilters(ast, templateObject.filters, filterFields); - wrapFiltersInAnd(ast, filterFields); - } - - if (templateObject?.sorters && templateObject?.sorters?.length) { - applySorters(ast, templateObject.sorters); - } - - const finalQuery = printQuery(ast); - - // commented out for future revision debugging - // console.log('Modified Query'); - // console.log(finalQuery); - - let contextData = {}; - if (templateQueryToExecute) { - const {data} = await client.query({ - query: gql(finalQuery), - variables: {...templateObject.variables}, - }); - contextData = data; - } - - return {contextData, useShopSpecificTemplate}; + return await generateTemplate( + templateQueryToExecute, + templateObject, + useShopSpecificTemplate + ); }; //export const displayTemplateInWindow = (html) => { diff --git a/client/src/utils/graphQLmodifier.js b/client/src/utils/graphQLmodifier.js index c9a93542e..a269edd31 100644 --- a/client/src/utils/graphQLmodifier.js +++ b/client/src/utils/graphQLmodifier.js @@ -1,4 +1,6 @@ import {Kind, parse, print, visit} from "graphql"; +import client from "./GraphQLClient"; +import {gql} from "@apollo/client"; const STRING_OPERATORS = [ {value: "_eq", label: "equals"}, @@ -25,16 +27,23 @@ const ORDER_BY_OPERATORS = [ * Get the available operators for filtering * @returns {[{label: string, value: string},{label: string, value: string}]} */ -export function getOrderByOperators() { +export function getOrderOperatorsByType() { return ORDER_BY_OPERATORS; } +export function generateReflections(reflector) { + // const type = reflector?.type; + // const name = reflector?.name; + + return []; +} + /** * Get the available operators for filtering * @param type * @returns {[{label: string, value: string},{label: string, value: string},{label: string, value: string},{label: string, value: string},{label: string, value: string},null]} */ -export function getOperatorsByType(type = 'string') { +export function getWhereOperatorsByType(type = 'string') { const operators = { string: STRING_OPERATORS, number: NUMBER_OPERATORS @@ -61,6 +70,50 @@ export function parseQuery(query) { export function printQuery(query) { return print(query); } + +/** + * Generate a template based on the query and object + * @param templateQueryToExecute + * @param templateObject + * @param useShopSpecificTemplate + * @returns {Promise<{contextData: {}, useShopSpecificTemplate}>} + */ +export async function generateTemplate(templateQueryToExecute, templateObject, useShopSpecificTemplate) { + // Advanced Filtering and Sorting modifications start here + + // Parse the query and apply the filters and sorters + const ast = parseQuery(templateQueryToExecute); + + let filterFields = []; + + if (templateObject?.filters && templateObject?.filters?.length) { + applyFilters(ast, templateObject.filters, filterFields); + wrapFiltersInAnd(ast, filterFields); + } + + if (templateObject?.sorters && templateObject?.sorters?.length) { + applySorters(ast, templateObject.sorters); + } + + const finalQuery = printQuery(ast); + + // commented out for future revision debugging + // console.log('Modified Query'); + // console.log(finalQuery); + + let contextData = {}; + if (templateQueryToExecute) { + const {data} = await client.query({ + query: gql(finalQuery), + variables: {...templateObject.variables}, + }); + contextData = data; + } + + return {contextData, useShopSpecificTemplate}; +} + + /** * Apply sorters to the AST * @param ast @@ -278,8 +331,6 @@ export function applyFilters(ast, filters) { }); } - - /** * Get the GraphQL kind for a value * @param value From 3b8e83d88a88a73be11b1d54d470c39331de0bd0 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Fri, 16 Feb 2024 12:32:40 -0500 Subject: [PATCH 03/12] - clear stage Signed-off-by: Dave Richer --- ...-center-modal-value-selector.component.jsx | 22 ++++++++++++++++--- client/src/utils/graphQLmodifier.js | 6 ----- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/client/src/components/report-center-modal/report-center-modal-value-selector.component.jsx b/client/src/components/report-center-modal/report-center-modal-value-selector.component.jsx index a8db289aa..7e94badcc 100644 --- a/client/src/components/report-center-modal/report-center-modal-value-selector.component.jsx +++ b/client/src/components/report-center-modal/report-center-modal-value-selector.component.jsx @@ -1,4 +1,3 @@ -import {generateReflections} from "../../utils/graphQLmodifier"; import {Input, InputNumber, Select} from "antd"; import React from "react"; import {createStructuredSelector} from "reselect"; @@ -11,7 +10,10 @@ const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser }); + export function ReportCenterModalValueSelectorComponent ({type, reflector, form, field, bodyshop, currentUser}) { + + // TODO: Remove - used for debugging / development console.log(`Entering ReportCenterModalValueSelectorComponent`); console.log('Type') console.log(type) @@ -22,8 +24,17 @@ export function ReportCenterModalValueSelectorComponent ({type, reflector, for console.log('CurrentUser') console.dir(currentUser, {depth: null}) + function generateReflections(reflector) { + // const type = reflector?.type; + // const name = reflector?.name; + + return []; + } + + // We have a reflector, so we can generate a list of options if (reflector) { const reflections = generateReflections(reflector); + // We have options to display, so return a pre-populated select box if (reflections.length > 0) { return { - form.setFieldsValue({[field.name]: {value: value.toString()}}); + form.setFieldsValue({ + [field.name]: {value: value.toString()} + }); }} /> } diff --git a/client/src/utils/graphQLmodifier.js b/client/src/utils/graphQLmodifier.js index a269edd31..3d7e976f0 100644 --- a/client/src/utils/graphQLmodifier.js +++ b/client/src/utils/graphQLmodifier.js @@ -31,12 +31,6 @@ export function getOrderOperatorsByType() { return ORDER_BY_OPERATORS; } -export function generateReflections(reflector) { - // const type = reflector?.type; - // const name = reflector?.name; - - return []; -} /** * Get the available operators for filtering From 6b7b34ae798aa98e3edd71ce75a6cfd1ef120294 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Tue, 20 Feb 2024 16:00:59 -0500 Subject: [PATCH 04/12] - Progress Commit, this fills agreed upon functionality Signed-off-by: Dave Richer --- _reference/reportFiltersAndSorters.md | 34 +- ...center-modal-filters-sorters-component.jsx | 521 +++++++++++------- .../report-center-modal-utils.js | 123 +++++ ...-center-modal-value-selector.component.jsx | 64 --- .../report-center-modal.component.jsx | 8 +- client/src/utils/RenderTemplate.js | 2 + 6 files changed, 469 insertions(+), 283 deletions(-) create mode 100644 client/src/components/report-center-modal/report-center-modal-utils.js delete mode 100644 client/src/components/report-center-modal/report-center-modal-value-selector.component.jsx diff --git a/_reference/reportFiltersAndSorters.md b/_reference/reportFiltersAndSorters.md index bcaa08ade..b83491dbe 100644 --- a/_reference/reportFiltersAndSorters.md +++ b/_reference/reportFiltersAndSorters.md @@ -3,6 +3,9 @@ This documentation details the schema required for `.filters` files on the report server. It is used to dynamically modify the graphQL query and provide the user more power over their reports. +# Special Notes +- When passing the data to the template server, the property filters and sorters is added to the data object and will reflect the filters and sorters the user has selected + ## High level Schema Overview ```javascript @@ -36,6 +39,35 @@ const schema = { Filters effect the where clause of the graphQL query. They are used to filter the data returned from the server. A note on special notation used in the `name` field. +## Reflection +Filters can make use of reflection to pre-fill select boxes, the following is an example of that in the filters file. + +``` + { + "name": "jobs.status", + "translation": "jobs.fields.status", + "label": "Status", + "type": "string", + "reflector": { + "type": "internal", + "name": "special.job_statuses" + } + }, +``` + +in this example, a reflector with the type 'internal' (all types at the moment require this, and it is used for future functionality), with a name of `special.job_statuses` + +The following cases are available + +- `special.job_statuses` - This will reflect the statuses of the jobs table `bodyshop.md_ro_statuses.statuses'` +- `special.cost_centers` - This will reflect the cost centers `bodyshop.md_responsibility_centers.costs` +- `special.categories` - This will reflect the categories `bodyshop.md_categories` +- `special.insurance_companies` - This will reflect the insurance companies `bodyshop.md_ins_cos`' +- `special.employee_teams` - This will reflect the employee teams `bodyshop.employee_teams` +- `special.employees` - This will reflect the employees `bodyshop.employees` +- `special.first_names` - This will reflect the first names `bodyshop.employees` +- `special.last_names` - This will reflect the last names `bodyshop.employees` +- ### Path without brackets, multi level `"name": "jobs.joblines.mod_lb_hrs",` @@ -71,7 +103,6 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz! } ``` - ### Path with brackets,top level `"name": "[jobs].joblines.mod_lb_hrs",` This will produce a where clause at the `jobs` level of the graphQL query. @@ -114,7 +145,6 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz! - Do not add the ability to filter things that are already filtered as part of the original query, this would be redundant and could cause issues. - Do not add the ability to filter on things like FK constraints, must like the above example. - ## Sorters - Sorters follow the same schema as filters, however, they do not do square bracket wrapping to indicate level hoisting, a filter added on `job.md_status` would be added at the top level, and a filter added on `jobs.joblines.mod_lb_hrs` would be added at the `joblines` level. - Most of the reports currently do sorting on a template level, this will need to change to actually see the results using the sorters. 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 8882e82af..6d09b2fab 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,52 +1,336 @@ -import {Button, Card, Checkbox, Col, Form, Row, Select} from "antd"; -import React, {useEffect, useState} from "react"; +import {Button, Card, Checkbox, Col, Form, Input, InputNumber, Row, Select} from "antd"; +import React, {useCallback, useEffect, useMemo, useState} from "react"; import {fetchFilterData} from "../../utils/RenderTemplate"; import {DeleteFilled} from "@ant-design/icons"; import {useTranslation} from "react-i18next"; import {getOrderOperatorsByType, getWhereOperatorsByType} from "../../utils/graphQLmodifier"; import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component"; +import {generateInternalReflections} from "./report-center-modal-utils"; -export default function ReportCenterModalFiltersSortersComponent({form}) { + +export default function ReportCenterModalFiltersSortersComponent({form, bodyshop}) { return ( {() => { const key = form.getFieldValue("key"); - return ; + return ; }} ); } -function RenderFilters({templateId, form}) { +/** + * Filters Section + * @param filters + * @param form + * @param bodyshop + * @returns {JSX.Element} + * @constructor + */ +function FiltersSection({filters, form, bodyshop}) { + const {t} = useTranslation(); + + return ( + + + {(fields, {add, remove, move}) => { + return ( +
+ {fields.map((field, index) => ( + + + + + + + } + } + + + + + { + () => { + const name = form.getFieldValue(['filters', field.name, "field"]); + const type = filters.find(f => f.name === name)?.type; + const reflector = filters.find(f => f.name === name)?.reflector; + + return + { + (() => { + const generateReflections = (reflector) => { + if (!reflector) return []; + + const {name} = reflector; + const path = name?.split('.'); + const upperPath = path?.[0]; + const finalPath = path?.slice(1).join('.'); + + return generateInternalReflections({ + bodyshop, + upperPath, + finalPath + }); + }; + + const reflections = reflector ? generateReflections(reflector) : []; + + const fieldPath = [[field.name, "value"]]; + + if (reflections.length > 0) { + return ( + form.setFieldsValue(fieldPath, e.target.value)}/> + ); + })() + } + + } + } + + + + + { + remove(field.name); + }} + /> + + + + ))} + + + +
+ ); + }} + + + ); +} + +/** + * Sorters Section + * @param sorters + * @param form + * @returns {JSX.Element} + * @constructor + */ +function SortersSection({sorters, form}) { + const {t} = useTranslation(); + return ( + + + {(fields, {add, remove, move}) => { + return ( +
+ Sorters + {fields.map((field, index) => ( + + + + + trigger.parentNode} + /> + + + + + { + remove(field.name); + }} + /> + + + + ))} + + + +
+ ); + }} + + + ); +} + +/** + * Render Filters + * @param templateId + * @param form + * @param bodyshop + * @returns {JSX.Element|null} + * @constructor + */ +function RenderFilters({templateId, form, bodyshop}) { const [state, setState] = useState(null); const [visible, setVisible] = useState(false); const [isLoading, setIsLoading] = useState(false); const {t} = useTranslation(); - useEffect(() => { - const fetch = async () => { - setIsLoading(true); - const data = await fetchFilterData({name: templateId}); - if (data?.success) { - setState(data.data); - } else { - setState(null); - } - setIsLoading(false); - }; + const fetch = useCallback(async () => { + // Reset all the filters and Sorters. + form.resetFields(['filters']); + form.resetFields(['sorters']); + setIsLoading(true); + + const data = await fetchFilterData({name: templateId}); + + if (data?.success) { + setState(data.data); + } else { + setState(null); + } + setIsLoading(false); + }, [templateId, form]); + + useEffect(() => { if (templateId) { fetch(); + } - }, [templateId]); + }, [templateId, fetch]); + const filters = useMemo(() => state?.filters || [], [state]); + const sorters = useMemo(() => state?.sorters || [], [state]); - // Conditional display of filters and sorters if (!templateId) return null; if (isLoading) return ; if (!state) return null; - // Filters and Sorters data available return (
{visible && (
- {state.filters && state.filters.length > 0 && ( - - - {(fields, {add, remove, move}) => { - return ( -
- {fields.map((field, index) => ( - - - - - - - } - } - - - - - - { - () => { - const name = form.getFieldValue(['filters', field.name, "field"]); - const type = state.filters.find(f => f.name === name)?.type; - const reflector = state.filters.find(f => f.name === name)?.reflector; - - return - - - } - } - - - - - { - remove(field.name); - }} - /> - - - - ))} - - - -
- ); - }} - - - + {filters.length > 0 && ( + )} - {state.sorters && state.sorters.length > 0 && ( - - - {(fields, {add, remove, move}) => { - return ( -
- Sorters - {fields.map((field, index) => ( - - - - - - - - - - { - remove(field.name); - }} - /> - - - - ))} - - - -
- ); - }} - - + {sorters.length > 0 && ( + )}
)} diff --git a/client/src/components/report-center-modal/report-center-modal-utils.js b/client/src/components/report-center-modal/report-center-modal-utils.js new file mode 100644 index 000000000..3d94d9e8e --- /dev/null +++ b/client/src/components/report-center-modal/report-center-modal-utils.js @@ -0,0 +1,123 @@ +import {uniqBy} from "lodash"; + +/** + * Get value from path + * @param obj + * @param path + * @returns {*} + */ +const getValueFromPath = (obj, path) => path.split('.').reduce((prev, curr) => prev?.[curr], obj); + +/** + * Valid internal reflections + * Note: This is intended for future functionality + * @type {{special: string[], bodyshop: [{name: string, type: string}]}} + */ +const VALID_INTERNAL_REFLECTIONS = { + bodyshop: [ + { + name: 'md_ro_statuses.statuses', + type: 'kv-to-v' + } + ], +}; + +/** + * Generate options + * @param bodyshop + * @param path + * @param labelPath + * @param valuePath + * @returns {{label: *, value: *}[]} + */ +const generateOptionsFromObject = (bodyshop, path, labelPath, valuePath) => { + const options = getValueFromPath(bodyshop, path); + return uniqBy(Object.values(options).map((value) => ({ + label: value[labelPath], + value: value[valuePath], + })), 'value'); +} + +/** + * Generate special reflections + * @param bodyshop + * @param finalPath + * @returns {{label: *, value: *}[]|{label: *, value: *}[]|{label: string, value: *}[]|*[]} + */ +const generateSpecialReflections = (bodyshop, finalPath) => { + switch (finalPath) { + case 'cost_centers': + return generateOptionsFromObject(bodyshop, 'md_responsibility_centers.costs', 'name', 'name'); + // Special case because Categories is an Array, not an Object. + case 'categories': + const catOptions = getValueFromPath(bodyshop, 'md_categories'); + return uniqBy(catOptions.map((value) => ({ + label: value, + value: value, + })), 'value'); + case 'insurance_companies': + return generateOptionsFromObject(bodyshop, 'md_ins_cos', 'name', 'name'); + case 'employee_teams': + return generateOptionsFromObject(bodyshop, 'employee_teams', 'name', 'id'); + // Special case because Employees uses a concatenation of first_name and last_name + case 'employees': + const employeesOptions = getValueFromPath(bodyshop, 'employees'); + return uniqBy(Object.values(employeesOptions).map((value) => ({ + label: `${value.first_name} ${value.last_name}`, + value: value.id, + })), 'value'); + case 'last_names': + return generateOptionsFromObject(bodyshop, 'employees', 'last_name', 'last_name'); + case 'first_names': + return generateOptionsFromObject(bodyshop, 'employees', 'first_name', 'first_name'); + case 'job_statuses': + const statusOptions = getValueFromPath(bodyshop, 'md_ro_statuses.statuses'); + return Object.values(statusOptions).map((value) => ({ + label: value, + value + })); + default: + console.error('Invalid Special reflection provided by Report Filters'); + return []; + } +} + +/** + * Generate bodyshop reflections + * @param bodyshop + * @param finalPath + * @returns {{label: *, value: *}[]|*[]} + */ +const generateBodyshopReflections = (bodyshop, finalPath) => { + const options = getValueFromPath(bodyshop, finalPath); + const reflectionRenderer = VALID_INTERNAL_REFLECTIONS.bodyshop.find(reflection => reflection.name === finalPath); + if (reflectionRenderer?.type === 'kv-to-v') { + return Object.values(options).map((value) => ({ + label: value, + value + })); + } + return []; +} + +/** + * Generate internal reflections based on the path and bodyshop + * @param bodyshop + * @param upperPath + * @param finalPath + * @returns {{label: *, value: *}[]|[]|{label: *, value: *}[]|{label: string, value: *}[]|{label: *, value: *}[]|*[]} + */ +const generateInternalReflections = ({bodyshop, upperPath, finalPath}) => { + switch (upperPath) { + case 'special': + return generateSpecialReflections(bodyshop, finalPath); + case 'bodyshop': + return generateBodyshopReflections(bodyshop, finalPath); + default: + return []; + } +}; + +export { + generateInternalReflections, +} \ No newline at end of file diff --git a/client/src/components/report-center-modal/report-center-modal-value-selector.component.jsx b/client/src/components/report-center-modal/report-center-modal-value-selector.component.jsx deleted file mode 100644 index 7e94badcc..000000000 --- a/client/src/components/report-center-modal/report-center-modal-value-selector.component.jsx +++ /dev/null @@ -1,64 +0,0 @@ -import {Input, InputNumber, Select} from "antd"; -import React from "react"; -import {createStructuredSelector} from "reselect"; -import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors"; -import {connect} from "react-redux"; - -const mapDispatchToProps = (dispatch) => ({}); -const mapStateToProps = createStructuredSelector({ - bodyshop: selectBodyshop, - currentUser: selectCurrentUser -}); - - -export function ReportCenterModalValueSelectorComponent ({type, reflector, form, field, bodyshop, currentUser}) { - - // TODO: Remove - used for debugging / development - console.log(`Entering ReportCenterModalValueSelectorComponent`); - console.log('Type') - console.log(type) - console.log('Reflector') - console.dir(reflector, {depth: null}) - console.log('Bodyshop') - console.dir(bodyshop, {depth: null}) - console.log('CurrentUser') - console.dir(currentUser, {depth: null}) - - function generateReflections(reflector) { - // const type = reflector?.type; - // const name = reflector?.name; - - return []; - } - - // We have a reflector, so we can generate a list of options - if (reflector) { - const reflections = generateReflections(reflector); - // We have options to display, so return a pre-populated select box - if (reflections.length > 0) { - return { - form.setFieldsValue({ - [field.name]: {value: value.toString()} - }); - }} - /> -} - -export default connect(mapStateToProps, mapDispatchToProps)(ReportCenterModalValueSelectorComponent); \ No newline at end of file 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 af4ce7ef4..7fad5ddcf 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 @@ -16,9 +16,11 @@ import EmployeeSearchSelect from "../employee-search-select/employee-search-sele 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"; +import {selectBodyshop } from "../../redux/user/user.selectors"; const mapStateToProps = createStructuredSelector({ - reportCenterModal: selectReportCenter, + reportCenterModal: selectReportCenter, + bodyshop: selectBodyshop, }); const mapDispatchToProps = (dispatch) => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) @@ -28,7 +30,7 @@ export default connect( mapDispatchToProps )(ReportCenterModalComponent); -export function ReportCenterModalComponent({reportCenterModal}) { +export function ReportCenterModalComponent({reportCenterModal, bodyshop}) { const [form] = Form.useForm(); const [search, setSearch] = useState(""); @@ -181,7 +183,7 @@ export function ReportCenterModalComponent({reportCenterModal}) { ); }} - + {() => { const key = form.getFieldValue("key"); diff --git a/client/src/utils/RenderTemplate.js b/client/src/utils/RenderTemplate.js index 0a6b16a38..b13228024 100644 --- a/client/src/utils/RenderTemplate.js +++ b/client/src/utils/RenderTemplate.js @@ -75,6 +75,8 @@ export default async function RenderTemplate( headerpath: `/${bodyshop.imexshopid}/header.html`, footerpath: `/${bodyshop.imexshopid}/footer.html`, bodyshop: bodyshop, + filters: templateObject?.filters, + sorters: templateObject?.sorters, offset: bodyshop.timezone, //dayjs().utcOffset(), }, }; From 37708a0b591f0e13e8e144f5eefe05cbab44b23c Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Tue, 20 Feb 2024 19:07:23 -0500 Subject: [PATCH 05/12] - Default sorts! Signed-off-by: Dave Richer --- _reference/reportFiltersAndSorters.md | 17 ++++++++++ ...center-modal-filters-sorters-component.jsx | 17 +++++++++- .../report-center-modal.component.jsx | 31 ++++++++++++------- client/src/utils/RenderTemplate.js | 5 ++- client/src/utils/graphQLmodifier.js | 2 ++ 5 files changed, 58 insertions(+), 14 deletions(-) diff --git a/_reference/reportFiltersAndSorters.md b/_reference/reportFiltersAndSorters.md index b83491dbe..1bd950794 100644 --- a/_reference/reportFiltersAndSorters.md +++ b/_reference/reportFiltersAndSorters.md @@ -148,3 +148,20 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz! ## Sorters - Sorters follow the same schema as filters, however, they do not do square bracket wrapping to indicate level hoisting, a filter added on `job.md_status` would be added at the top level, and a filter added on `jobs.joblines.mod_lb_hrs` would be added at the `joblines` level. - Most of the reports currently do sorting on a template level, this will need to change to actually see the results using the sorters. + +### Default Sorters +- A sorter can be given a default object containing a `order` and `direction` key value. This will be used to sort the report if the user does not select any of the sorters themselves. +- The `order` key is the order in which the sorters are applied, and the `direction` key is the direction of the sort, either `asc` or `desc`. + +```json +{ + "name": "jobs.joblines.mod_lb_hrs", + "translation": "jobs.joblines.mod_lb_hrs_1", + "label": "mod_lb_hrs_1", + "type": "number", + "default": { + "order": 1, + "direction": "asc" + } +} +``` \ No newline at end of file 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 6d09b2fab..76ce5bb76 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 @@ -304,14 +304,29 @@ function RenderFilters({templateId, form, bodyshop}) { // Reset all the filters and Sorters. form.resetFields(['filters']); form.resetFields(['sorters']); + form.resetFields(['defaultSorters']); setIsLoading(true); const data = await fetchFilterData({name: templateId}); + // We have Success if (data?.success) { + if (data?.data?.sorters && data?.data?.sorters.length > 0) { + const defaultSorters = data?.data?.sorters.filter((sorter) => sorter.hasOwnProperty('default')).map((sorter) => { + return { + field: sorter.name, + direction: sorter.default.direction + }; + }).sort((a, b) => a.default.order - b.default.order); + + form.setFieldValue('defaultSorters', JSON.stringify(defaultSorters)); + } + // Set the state setState(data.data); - } else { + } + // Something went wrong fetching filter data + else { setState(null); } setIsLoading(false); 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 7fad5ddcf..1dcf81481 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 @@ -16,7 +16,7 @@ import EmployeeSearchSelect from "../employee-search-select/employee-search-sele 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"; -import {selectBodyshop } from "../../redux/user/user.selectors"; +import {selectBodyshop} from "../../redux/user/user.selectors"; const mapStateToProps = createStructuredSelector({ reportCenterModal: selectReportCenter, @@ -66,22 +66,28 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) { const end = values.dates ? values.dates[1] : null; const { id } = values; - await GenerateDocument( - { + const templateConfig = { 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") } : {}), + ...(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")} : {}), - ...(id ? { id: id } : {}), + ...(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, @@ -119,7 +125,8 @@ export function ReportCenterModalComponent({reportCenterModal, bodyshop}) { onChange={(e) => setSearch(e.target.value)} value={search} /> -