Index: components/Filters/AttributeValueFilter/AttributeValueFilter.component.tsx =================================================================== diff -u -r8e20f1bf91b35839cdd1a955e2df9488342c8621 -r9e949a194e357be24fe6a1cf983e5ecc08a236e6 --- components/Filters/AttributeValueFilter/AttributeValueFilter.component.tsx (.../AttributeValueFilter.component.tsx) (revision 8e20f1bf91b35839cdd1a955e2df9488342c8621) +++ components/Filters/AttributeValueFilter/AttributeValueFilter.component.tsx (.../AttributeValueFilter.component.tsx) (revision 9e949a194e357be24fe6a1cf983e5ecc08a236e6) @@ -49,6 +49,7 @@ return; } + // Create the update object with the correct structure const updateObj = { [id]: { attribute: { @@ -57,6 +58,8 @@ } } }; + + // Pass the entire update object to the updater updater(updateObj); // Update URL with attribute parameters @@ -169,18 +172,135 @@ // Convert to a higher-order component that returns a function component export const AttributeValueFilter = (props: AttributeValueFilterProps): FilterGenerator => { - // Create a filter generator function that handles search button clicks - const filterGenerator = (generatorProps: IFilterGeneratorProps): JSX.Element => { + // Create a filter generator function + const filterGenerator: FilterGenerator = (generatorProps: IFilterGeneratorProps): JSX.Element => { // Get URL parameters const urlParams = parseQueryParams(); const [selectedAttribute, setSelectedAttribute] = useState(undefined); - const [breadcrumbKey, setBreadcrumbKey] = useState(0); + const [breadcrumbKey, setBreadcrumbKey] = useState('initial'); + // Add a script to intercept search button clicks + useEffect(() => { + // Function to add click listeners to search buttons + const addSearchButtonListeners = () => { + // Find all buttons with the search icon + const searchButtons = document.querySelectorAll('.ant-drawer-body button span.anticon-search'); + + if (searchButtons.length > 0) { + console.log('Found search buttons:', searchButtons.length); + + // Add click event listeners to the parent buttons + searchButtons.forEach(icon => { + const button = icon.closest('button'); + if (button) { + // Store original click handler + const originalClickHandler = button.onclick; + + // Replace with our custom handler + button.onclick = (event) => { + console.log('Search button clicked, executing original handler...'); + + // Call original handler if it exists + if (originalClickHandler) { + originalClickHandler.call(button, event); + } + + // Refresh the page after a delay + console.log('Will refresh page shortly...'); + setTimeout(() => { + console.log('Refreshing page now...'); + window.location.reload(); + }, 1000); + + // Prevent default to ensure our code runs + event.preventDefault(); + }; + } + }); + } + }; + + // Add the listeners after a delay to ensure the buttons are rendered + setTimeout(addSearchButtonListeners, 1000); + + // Re-add listeners when the component updates + const interval = setInterval(addSearchButtonListeners, 5000); + + // Clean up + return () => { + clearInterval(interval); + }; + }, []); + + // Handle search button clicks via triggerSearch + useEffect(() => { + // If triggerSearch is provided, set up a handler for it + if (generatorProps.triggerSearch) { + // Create a handler for the search button click + const handleSearch = () => { + try { + // Only update URL if we have a selected attribute + if (selectedAttribute?.attributeNameId) { + // Update URL with attribute parameters + updateUrlParams({ + 'attributeNameId': selectedAttribute.attributeNameId.toString(), + 'attributeValueId': selectedAttribute.attributeValueId ? + selectedAttribute.attributeValueId.toString() : '' + }); + + // Update the filter values to ensure breadcrumb is updated + if (generatorProps.update) { + generatorProps.update({ + [props.id]: { + attribute: { + attributeNameId: selectedAttribute.attributeNameId, + attributeValueId: selectedAttribute.attributeValueId + } + } + }); + } + } + } catch (error) { + console.error('Error in handleSearch:', error); + // Continue execution even if there's an error + } + }; + + // Store the original triggerSearch function + const originalTriggerSearch = generatorProps.triggerSearch; + + // Replace triggerSearch with our custom handler that calls the original afterward + generatorProps.triggerSearch = () => { + handleSearch(); + try { + // Call the original triggerSearch function + originalTriggerSearch(); + + // Force a page refresh to ensure breadcrumb updates correctly + console.log('Forcing page refresh after search...'); + + // Use a more direct approach with a longer delay + setTimeout(() => { + console.log('Refreshing page now...'); + // Force a hard refresh by changing the URL + const currentUrl = window.location.href; + const refreshUrl = currentUrl.includes('?') + ? currentUrl + '&refresh=' + new Date().getTime() + : currentUrl + '?refresh=' + new Date().getTime(); + window.location.href = refreshUrl; + }, 1500); + } catch (error) { + console.error('Error in original triggerSearch:', error); + } + }; + } + }, [generatorProps, selectedAttribute, props.id]); + // Effect to update the breadcrumb when selectedAttribute changes useEffect(() => { if (selectedAttribute) { - // Force re-render of the breadcrumb by updating the key - setBreadcrumbKey(prev => prev + 1); + console.log('Selected attribute changed, updating breadcrumb key'); + setBreadcrumbKey(prev => prev + '-updated'); } }, [selectedAttribute]); @@ -237,55 +357,6 @@ } }, [props.values, selectedAttribute]); - // Handle search button clicks via triggerSearch - useEffect(() => { - // If triggerSearch is provided, set up a handler for it - if (generatorProps.triggerSearch) { - // Create a handler for the search button click - const handleSearch = () => { - try { - // Only update URL if we have a selected attribute - if (selectedAttribute?.attributeNameId) { - // Update URL with attribute parameters - updateUrlParams({ - 'attributeNameId': selectedAttribute.attributeNameId.toString(), - 'attributeValueId': selectedAttribute.attributeValueId ? - selectedAttribute.attributeValueId.toString() : '' - }); - - // Update the filter values to ensure breadcrumb is updated - if (generatorProps.update) { - generatorProps.update({ - [props.id]: { - attribute: { - attributeNameId: selectedAttribute.attributeNameId, - attributeValueId: selectedAttribute.attributeValueId - } - } - }); - } - } - } catch (error) { - console.error('Error in handleSearch:', error); - // Continue execution even if there's an error - } - }; - - // Store the original triggerSearch function - const originalTriggerSearch = generatorProps.triggerSearch; - - // Replace triggerSearch with our custom handler that calls the original afterward - generatorProps.triggerSearch = () => { - handleSearch(); - try { - originalTriggerSearch(); - } catch (error) { - console.error('Error in original triggerSearch:', error); - } - }; - } - }, [generatorProps, selectedAttribute, props.id]); - // Create a modified generatorProps object that includes URL parameters if needed const modifiedGeneratorProps = { ...generatorProps }; @@ -313,12 +384,13 @@ } breadcrumbCustomFetch={(value) => { // This function should return a function that returns a Promise - - const currentValues = modifiedGeneratorProps.values[props.id]; + return () => { + const currentValues = modifiedGeneratorProps.values[props.id]; + console.log('Current filter values for breadcrumb:', currentValues); - // Fetch the breadcrumb data using the current values - return fetchBreadcrumbData(currentValues?.attributeNameId ? currentValues : value); - + // Fetch the breadcrumb data using the current values + return fetchBreadcrumbData(currentValues || value)(); + }; }} breadcrumbField="text" breadcrumbLabel={'Attribute'} Index: components/Filters/AttributeValueFilter/AttributeValueFilterElement/AttributeValueFilterElement.component.tsx =================================================================== diff -u -r8e20f1bf91b35839cdd1a955e2df9488342c8621 -r9e949a194e357be24fe6a1cf983e5ecc08a236e6 --- components/Filters/AttributeValueFilter/AttributeValueFilterElement/AttributeValueFilterElement.component.tsx (.../AttributeValueFilterElement.component.tsx) (revision 8e20f1bf91b35839cdd1a955e2df9488342c8621) +++ components/Filters/AttributeValueFilter/AttributeValueFilterElement/AttributeValueFilterElement.component.tsx (.../AttributeValueFilterElement.component.tsx) (revision 9e949a194e357be24fe6a1cf983e5ecc08a236e6) @@ -1,110 +1,110 @@ -import { AttributeNameAutocomplete } from 'lemans-dashboard-digital-services/components/Autocompletes/AttributeNameAutocomplete'; -import { AttributeValueAutocomplete } from 'lemans-dashboard-digital-services/components/Autocompletes/AttributeValueAutocomplete'; -import React from 'react'; -import './AttributeValueFilterElement.styles.less'; -import { IAttributeValueFilterElementProps, IAttributeValueFilterElementState } from './AttributeValueFilterElement.types'; - -export const AttributeValueFilterElement = (props:IAttributeValueFilterElementProps) => { - // Initialize state from props - const startingState: IAttributeValueFilterElementState = { - attributeNameId: props.selected ? props.selected.attributeNameId : undefined, - attributeValueId: props.selected ? props.selected.attributeValueId : undefined, - }; - - const [state, setState] = React.useState(startingState); - - // Update local state when props change - React.useEffect(() => { - if (props.selected) { - setState(prevState => { - // Only update if values have actually changed - if (prevState.attributeNameId !== props.selected?.attributeNameId || - prevState.attributeValueId !== props.selected?.attributeValueId) { - return { - attributeNameId: props.selected?.attributeNameId, - attributeValueId: props.selected?.attributeValueId - }; - } - return prevState; - }); - } else { - setState(prevState => { - // Only update if values have actually changed - if (prevState.attributeNameId !== undefined || prevState.attributeValueId !== undefined) { - return { - attributeNameId: undefined, - attributeValueId: undefined - }; - } - return prevState; - }); - } - }, [ - props.selected?.attributeNameId, - props.selected?.attributeValueId - ]); - - // Handle attribute name selection - const onSelectName = (value:string | string[]) => { - const parsedValue = parseInputValue(value); - - // Only update if the value has changed - if (parsedValue !== state.attributeNameId) { - // Update local state immediately - setState(_prevState => ({ - attributeNameId: parsedValue, - attributeValueId: undefined // Reset value when name changes - })); - - // Notify parent component - if (parsedValue) { - props.onSelect({ - attributeNameId: parsedValue, - attributeValueId: undefined - }); - } else { - props.onSelect(undefined); - } - } - } - - // Handle attribute value selection - const onSelectValue = (value:string | string[]) => { - const parsedValue = parseInputValue(value); - - // Only update if the value has changed - if (parsedValue !== state.attributeValueId) { - // Update local state immediately - setState(prevState => ({ - attributeNameId: prevState.attributeNameId, - attributeValueId: parsedValue - })); - - // Notify parent component only if we have both name and value - if (state.attributeNameId) { - props.onSelect({ - attributeNameId: state.attributeNameId, - attributeValueId: parsedValue - }); - } - } - } - - const parseInputValue = (value:any) => Array.isArray(value) ? undefined : value; - const inputIsEmpty = (value:string|string[]|undefined) => Array.isArray(value) || value === undefined; - - return ( -
- - -
- ); +import { AttributeNameAutocomplete } from 'lemans-dashboard-digital-services/components/Autocompletes/AttributeNameAutocomplete'; +import { AttributeValueAutocomplete } from 'lemans-dashboard-digital-services/components/Autocompletes/AttributeValueAutocomplete'; +import React from 'react'; +import './AttributeValueFilterElement.styles.less'; +import { IAttributeValueFilterElementProps, IAttributeValueFilterElementState } from './AttributeValueFilterElement.types'; + +export const AttributeValueFilterElement = (props:IAttributeValueFilterElementProps) => { + // Initialize state from props + const startingState: IAttributeValueFilterElementState = { + attributeNameId: props.selected ? props.selected.attributeNameId : undefined, + attributeValueId: props.selected ? props.selected.attributeValueId : undefined, + }; + + const [state, setState] = React.useState(startingState); + + // Update local state when props change + React.useEffect(() => { + if (props.selected) { + setState(prevState => { + // Only update if values have actually changed + if (prevState.attributeNameId !== props.selected?.attributeNameId || + prevState.attributeValueId !== props.selected?.attributeValueId) { + return { + attributeNameId: props.selected?.attributeNameId, + attributeValueId: props.selected?.attributeValueId + }; + } + return prevState; + }); + } else { + setState(prevState => { + // Only update if values have actually changed + if (prevState.attributeNameId !== undefined || prevState.attributeValueId !== undefined) { + return { + attributeNameId: undefined, + attributeValueId: undefined + }; + } + return prevState; + }); + } + }, [ + props.selected?.attributeNameId, + props.selected?.attributeValueId + ]); + + // Handle attribute name selection + const onSelectName = (value:string | string[]) => { + const parsedValue = parseInputValue(value); + + // Only update if the value has changed + if (parsedValue !== state.attributeNameId) { + // Update local state immediately + setState(_prevState => ({ + attributeNameId: parsedValue, + attributeValueId: undefined // Reset value when name changes + })); + + // Notify parent component + if (parsedValue) { + props.onSelect({ + attributeNameId: parsedValue, + attributeValueId: undefined + }); + } else { + props.onSelect(undefined); + } + } + } + + // Handle attribute value selection + const onSelectValue = (value:string | string[]) => { + const parsedValue = parseInputValue(value); + + // Only update if the value has changed + if (parsedValue !== state.attributeValueId) { + // Update local state immediately + setState(prevState => ({ + attributeNameId: prevState.attributeNameId, + attributeValueId: parsedValue + })); + + // Notify parent component only if we have both name and value + if (state.attributeNameId) { + props.onSelect({ + attributeNameId: state.attributeNameId, + attributeValueId: parsedValue + }); + } + } + } + + const parseInputValue = (value:any) => Array.isArray(value) ? undefined : value; + const inputIsEmpty = (value:string|string[]|undefined) => Array.isArray(value) || value === undefined; + + return ( +
+ + +
+ ); } \ No newline at end of file