1
- import React , { useEffect , useState } from 'react' ;
1
+ import React , { useMemo , useState } from 'react' ;
2
2
import styled from 'styled-components' ;
3
+ import { FilterSelect } from '@src/app/entityV2/shared/FilterSelect' ;
3
4
import { GroupBySelect } from '@src/app/entityV2/shared/GroupBySelect' ;
4
5
import { InlineListSearch } from '@src/app/entityV2/shared/components/search/InlineListSearch' ;
5
6
import { AcrylAssertionRecommendedFilters } from './AcrylAssertionRecommendedFilters' ;
6
7
import { AssertionListFilter , AssertionTable } from './types' ;
7
- import { AcrylAssertionFilters } from './AcrylAssertionFilters' ;
8
- import { ASSERTION_GROUP_BY_FILTER_OPTIONS , ASSERTION_DEFAULT_FILTERS } from './constant' ;
8
+ import { ASSERTION_GROUP_BY_FILTER_OPTIONS , ASSERTION_DEFAULT_FILTERS , ASSERTION_FILTER_TYPES } from './constant' ;
9
9
import { useSetFilterFromURLParams } from './hooks' ;
10
10
11
11
interface FilterItem {
@@ -18,9 +18,10 @@ interface FilterItem {
18
18
interface AcrylAssertionListFiltersProps {
19
19
filterOptions : any ;
20
20
originalFilterOptions : any ;
21
- setFilters : React . Dispatch < React . SetStateAction < AssertionListFilter > > ;
22
- filter : AssertionListFilter ;
21
+ setSelectedFilters : React . Dispatch < React . SetStateAction < AssertionListFilter > > ;
23
22
filteredAssertions : AssertionTable ;
23
+ selectedFilters : any ;
24
+ handleFilterChange : ( filter : any ) => void ;
24
25
}
25
26
26
27
const SearchFilterContainer = styled . div `
@@ -50,27 +51,26 @@ const StyledFilterContainer = styled.div`
50
51
export const AcrylAssertionListFilters : React . FC < AcrylAssertionListFiltersProps > = ( {
51
52
filterOptions,
52
53
originalFilterOptions,
53
- setFilters,
54
- filter,
55
54
filteredAssertions,
55
+ handleFilterChange,
56
+ selectedFilters,
57
+ setSelectedFilters,
56
58
} ) => {
57
- const [ appliedFilters , setAppliedFilters ] = useState < FilterItem [ ] > ( [ ] ) ;
58
- const [ selectedGroupBy , setSelectedGroupBy ] = useState < string | undefined > ( filter . groupBy || undefined ) ;
59
+ const [ appliedRecommendedFilters , setAppliedRecommendedFilters ] = useState ( [ ] ) ;
59
60
60
61
const handleSearchTextChange = ( event : React . ChangeEvent < HTMLInputElement > ) => {
61
62
const searchText = event . target . value ;
62
- setFilters ( ( prev ) => ( {
63
- ...prev ,
64
- filterCriteria : { ...prev . filterCriteria , searchText } ,
65
- } ) ) ;
63
+ handleFilterChange ( {
64
+ ...selectedFilters ,
65
+ filterCriteria : { ...selectedFilters . filterCriteria , searchText } ,
66
+ } ) ;
66
67
} ;
67
68
68
69
const handleAssertionTypeChange = ( value : string ) => {
69
- setSelectedGroupBy ( value ) ;
70
- setFilters ( ( prev ) => ( { ...prev , groupBy : value } ) ) ;
70
+ handleFilterChange ( { ...selectedFilters , groupBy : value } ) ;
71
71
} ;
72
72
73
- const handleFilterChange = ( updatedFilters : FilterItem [ ] ) => {
73
+ const handleFilterOptionChange = ( updatedFilters : FilterItem [ ] ) => {
74
74
/** Set Recommended Filters when there is value in type,status or source if not then set it as empty to clear the filter */
75
75
const selectedRecommendedFilters = updatedFilters . reduce < Record < string , string [ ] > > (
76
76
( acc , selectedfilter ) => {
@@ -81,41 +81,45 @@ export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps>
81
81
{ type : [ ] , status : [ ] , source : [ ] , column : [ ] } ,
82
82
) ;
83
83
84
- setFilters ( ( prev ) => ( {
85
- ...prev ,
86
- filterCriteria : { ...prev . filterCriteria , ...selectedRecommendedFilters } ,
87
- } ) ) ;
88
- setAppliedFilters ( updatedFilters ) ;
84
+ handleFilterChange ( {
85
+ ...selectedFilters ,
86
+ filterCriteria : { ...selectedFilters . filterCriteria , ...selectedRecommendedFilters } ,
87
+ } ) ;
89
88
} ;
90
89
91
90
/**
92
91
* This hook is for setting applied filter when we are getting it from selected Filter state
93
92
*/
94
- useEffect ( ( ) => {
95
- const { status, type, source, column } = filter . filterCriteria || ASSERTION_DEFAULT_FILTERS . filterCriteria ;
93
+ const initialSelectedOptions = useMemo ( ( ) => {
94
+ const { status, type, source, column } =
95
+ selectedFilters . filterCriteria || ASSERTION_DEFAULT_FILTERS . filterCriteria ;
96
96
const recommendedFilters = originalFilterOptions ?. recommendedFilters || [ ] ;
97
97
// just set recommended filters for status, type & Others as of right now
98
- const appliedRecommendedFilters = recommendedFilters . filter (
98
+ const selectedRecommendedFilters = recommendedFilters . filter (
99
99
( item ) =>
100
100
status . includes ( item . name ) ||
101
101
type . includes ( item . name ) ||
102
102
source . includes ( item . name ) ||
103
103
column . includes ( item . name ) ,
104
104
) ;
105
- setAppliedFilters ( appliedRecommendedFilters ) ;
106
- setSelectedGroupBy ( filter . groupBy ) ;
105
+ setAppliedRecommendedFilters ( selectedRecommendedFilters ) ;
106
+ return selectedRecommendedFilters ?. map ( ( filter ) => ( {
107
+ value : filter . name ,
108
+ label : filter . displayName ,
109
+ parentValue : filter . category ,
110
+ } ) ) ;
107
111
// eslint-disable-next-line react-hooks/exhaustive-deps
108
- } , [ filter , filterOptions ] ) ;
112
+ } , [ selectedFilters ] ) ;
109
113
110
114
// set the filter if there is any url filter object presents
111
- useSetFilterFromURLParams ( filter , setFilters ) ;
115
+ useSetFilterFromURLParams ( selectedFilters , setSelectedFilters ) ;
112
116
113
117
return (
114
118
< >
115
119
< SearchFilterContainer >
116
120
{ /* ************Render Search Component ************************* */ }
117
121
< InlineListSearch
118
- searchText = { filter . filterCriteria . searchText }
122
+ searchText = { selectedFilters . filterCriteria ? .searchText }
119
123
debouncedSetFilterText = { handleSearchTextChange }
120
124
matchResultCount = { filteredAssertions . searchMatchesCount || 0 }
121
125
numRows = { filteredAssertions . totalCount || 0 }
@@ -125,17 +129,18 @@ export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps>
125
129
{ /* ************Render Filter Component ************************* */ }
126
130
< FiltersContainer >
127
131
< StyledFilterContainer >
128
- < AcrylAssertionFilters
132
+ < FilterSelect
129
133
filterOptions = { originalFilterOptions ?. filterGroupOptions || [ ] }
130
- selectedFilters = { appliedFilters }
131
- onFilterChange = { handleFilterChange }
134
+ onFilterChange = { handleFilterOptionChange }
135
+ excludedCategories = { [ ASSERTION_FILTER_TYPES . TAG ] }
136
+ initialSelectedOptions = { initialSelectedOptions }
132
137
/>
133
138
</ StyledFilterContainer >
134
139
{ /* ************Render Group By Component ************************* */ }
135
140
< div >
136
141
< GroupBySelect
137
142
options = { ASSERTION_GROUP_BY_FILTER_OPTIONS }
138
- selectedValue = { selectedGroupBy }
143
+ selectedValue = { selectedFilters . groupBy }
139
144
onSelect = { handleAssertionTypeChange }
140
145
width = { 50 }
141
146
/>
@@ -146,8 +151,8 @@ export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps>
146
151
{ /* ************Render Recommended Filter Component ************************* */ }
147
152
< AcrylAssertionRecommendedFilters
148
153
filters = { filterOptions ?. recommendedFilters || [ ] }
149
- appliedFilters = { appliedFilters }
150
- onFilterChange = { handleFilterChange }
154
+ appliedFilters = { appliedRecommendedFilters }
155
+ onFilterChange = { handleFilterOptionChange }
151
156
/>
152
157
</ div >
153
158
</ >
0 commit comments