Skip to content

Commit b5aeb1f

Browse files
one-communityone-community
authored
Merge pull request #4789 from OneCommunityGlobal/taariq_fixing_angads_filter_branch_frontend
Taariq - 🔥 Fixing weekly summaries report's special filters and also the specific team filters.
2 parents a385e3c + 7bed414 commit b5aeb1f

8 files changed

Lines changed: 747 additions & 1383 deletions

‎src/components/WeeklySummariesReport/WeeklySummariesReport.jsx‎

Lines changed: 525 additions & 738 deletions
Large diffs are not rendered by default.

‎src/components/WeeklySummariesReport/WeeklySummariesReport.module.css‎

Lines changed: 41 additions & 445 deletions
Large diffs are not rendered by default.

‎src/components/WeeklySummariesReport/components/CreateFilterModal.jsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
} from '../../../actions/weeklySummariesFilterAction';
2525
import { normalizeFilter } from '~/utils/weeklySummariesFilterHelper';
2626
import { da } from 'date-fns/locale';
27+
import { getCustomStyles } from '~/utils/reactSelectStyles'; // Import Styles
2728

2829
const defaultState = {
2930
filterName: '',
@@ -123,6 +124,8 @@ function CreateFilterModal({
123124
setSelectedFilter(currentAppliedFilter);
124125
}, [currentAppliedFilter]);
125126

127+
const customStyles = getCustomStyles(darkMode);
128+
126129
const handleSubmit = async e => {
127130
e.preventDefault();
128131
const validName = state.filterName.trim().length > 0 && state.filterName.trim().length <= 7;
@@ -196,12 +199,14 @@ function CreateFilterModal({
196199
</Label>
197200

198201
<Select
199-
menuPortalTarget={document.body}
200-
classNamePrefix="rs"
201-
styles={{
202-
...darkSelectStyles,
203-
menuPortal: base => ({ ...base, zIndex: 9999 }),
204-
}}
202+
id="filterOverride"
203+
options={filters}
204+
value={selectedFilter}
205+
onChange={setSelectedFilter}
206+
styles={customStyles}
207+
className={`${mainStyles.textDark} ${
208+
selectedFilter ? '' : `${mainStyles.errorSelect}`
209+
}`}
205210
/>
206211
{!selectedFilter && (
207212
<div className={`${darkMode ? mainStyles.errorTextDark : mainStyles.errorText}`}>

‎src/components/WeeklySummariesReport/components/SelectFilterModal.jsx‎

Lines changed: 6 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { useState, useEffect } from 'react';
22
import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, Label } from 'reactstrap';
33
import Select from 'react-select';
4-
// import styles from './SelectFilterModal.module.scss';
5-
import mainStyles from '../WeeklySummariesReport.module.css';
64
import FilterPreviewForm from './FilterPreviewForm.jsx';
5+
import { getCustomStyles } from '~/utils/reactSelectStyles'; // Import Styles
76

87
export default function SelectFilterModal({
98
state,
@@ -17,92 +16,14 @@ export default function SelectFilterModal({
1716
}) {
1817
const [selectedFilter, setSelectedFilter] = useState(null);
1918

20-
const darkSelectStyles = {
21-
control: base => ({
22-
...base,
23-
backgroundColor: '#1b2a41', // Solid background for the bar
24-
border: '1px solid #3a506b',
25-
boxShadow: 'none',
26-
}),
27-
// FIX STARTS HERE
28-
valueContainer: base => ({
29-
...base,
30-
paddingLeft: '12px', // This pushes the 'S' away from the edge
31-
}),
32-
indicatorsContainer: base => ({
33-
...base,
34-
paddingRight: '8px', // This prevents the arrow from touching the edge
35-
}),
36-
menuPortal: base => ({ ...base, zIndex: 9999 }),
37-
input: base => ({
38-
...base,
39-
color: '#ffffff', // Force white text while typing
40-
}),
41-
singleValue: base => ({
42-
...base,
43-
color: '#ffffff',
44-
}),
45-
option: (base, state) => ({
46-
...base,
47-
backgroundColor: state.isSelected ? '#334155' : state.isFocused ? '#243b55' : '#0f172a',
48-
color: '#ffffff',
49-
cursor: 'pointer',
50-
}),
51-
};
52-
53-
// Keep lightSelectStyles as is, but ensure backgroundColor is 'transparent'
54-
// if you want the CSS variables to take over.
55-
56-
const lightSelectStyles = {
57-
control: (base, state) => ({
58-
...base,
59-
backgroundColor: '#ffffff',
60-
borderColor: state.isFocused ? '#2684ff' : '#ced4da',
61-
boxShadow: state.isFocused ? '0 0 0 0.2rem rgba(38,132,255,.25)' : 'none',
62-
color: '#212529',
63-
}),
64-
valueContainer: base => ({
65-
...base,
66-
paddingLeft: '12px',
67-
}),
68-
indicatorsContainer: base => ({
69-
...base,
70-
paddingRight: '8px',
71-
}),
72-
input: base => ({
73-
...base,
74-
color: '#212529',
75-
caretColor: '#212529',
76-
}),
77-
placeholder: base => ({
78-
...base,
79-
color: '#6c757d',
80-
}),
81-
singleValue: base => ({
82-
...base,
83-
color: '#212529',
84-
}),
85-
menu: base => ({
86-
...base,
87-
backgroundColor: '#ffffff',
88-
}),
89-
option: (base, state) => ({
90-
...base,
91-
backgroundColor: state.isSelected ? '#e9ecef' : state.isFocused ? '#f8f9fa' : '#ffffff',
92-
color: '#212529',
93-
}),
94-
menuPortal: base => ({
95-
...base,
96-
zIndex: 1060,
97-
}),
98-
};
99-
10019
useEffect(() => {
10120
if (isOpen) {
10221
setSelectedFilter(null);
10322
}
10423
}, [isOpen]);
10524

25+
const customStyles = getCustomStyles(darkMode);
26+
10627
const handleSelectedFilter = () => {
10728
applyFilter(selectedFilter);
10829
setSelectedFilter(null);
@@ -115,15 +36,13 @@ export default function SelectFilterModal({
11536

11637
<ModalBody>
11738
<Form>
118-
<div className={darkMode ? mainStyles.textWhite : ''}>Please select a filter:</div>
119-
39+
<div className={darkMode ? 'text-light' : ''}>Please select a filter:</div>
12040
<Select
12141
options={filters}
12242
value={selectedFilter}
12343
onChange={setSelectedFilter}
124-
classNamePrefix="rs" // This is the key!
125-
menuPortalTarget={document.body}
126-
styles={darkMode ? darkSelectStyles : lightSelectStyles}
44+
required
45+
styles={customStyles}
12746
/>
12847

12948
<FilterPreviewForm

‎src/components/WeeklySummariesReport/components/UpdateFilterModal.jsx‎

Lines changed: 28 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import {
2626
useUpdateWeeklySummariesFilterMutation,
2727
} from '../../../actions/weeklySummariesFilterAction';
2828
import { normalizeFilter } from '~/utils/weeklySummariesFilterHelper';
29+
import { getCustomStyles } from '~/utils/reactSelectStyles'; // Import Styles
30+
import { mapFilterToState } from '~/utils/weeklySummariesFilterUtils'; // Import logic
2931

3032
const defaultState = {
3133
filterName: '',
@@ -140,6 +142,8 @@ export default function UpdateFilterModal({
140142
}
141143
}, [isOpen]);
142144

145+
const customStyles = getCustomStyles(darkMode);
146+
143147
const handleFilterNameChange = value => {
144148
setField(setState, 'filterName', value);
145149
};
@@ -148,73 +152,21 @@ export default function UpdateFilterModal({
148152
const filterChoice = e;
149153
setSelectedFilter(filterChoice);
150154
setUpdate(false);
151-
const filter = filterChoice.filterData;
152-
const selectedCodesChoice = teamCodes
153-
.filter(code => filter.selectedCodes.has(code.value))
154-
.map(item => {
155-
const [code, count] = item.label.split(' (');
156-
return {
157-
...item,
158-
label: `${code.padEnd(10, ' ')} (${count}`,
159-
};
160-
});
161-
const selectedCodesSet = new Set(selectedCodesChoice.map(item => item.value));
162-
163-
const selectedCodesInvalidChoice = [...filter.selectedCodes]
164-
.filter(item => !selectedCodesSet.has(item))
165-
.map(item => {
166-
return {
167-
label: `${item.padEnd(10, ' ')} (0)`,
168-
value: item,
169-
_ids: [],
170-
};
171-
});
172155

173-
const selectedColorsChoice = colorOptions.filter(color =>
174-
filter.selectedColors.has(color.value),
156+
const newState = mapFilterToState(
157+
filterChoice.filterData,
158+
teamCodes,
159+
colorOptions,
160+
summaries,
161+
memberDict,
175162
);
176-
const selectedColorsSet = new Set(selectedColorsChoice.map(item => item.value));
177-
const selectedColorsInvalidChoice = [...filter.selectedColors]
178-
.filter(item => !selectedColorsSet.has(item))
179-
.map(item => {
180-
return {
181-
label: item,
182-
value: item,
183-
};
184-
});
185-
186-
const selectedExtraMembersChoice = summaries
187-
.filter(summary => filter.selectedExtraMembers.has(summary._id))
188-
.map(summary => ({
189-
label: `${summary.firstName} ${summary.lastName}`,
190-
value: summary._id,
191-
role: summary.role,
192-
}));
193-
194-
const selectedExtraMembersSet = new Set(selectedExtraMembersChoice.map(item => item.value));
195-
const selectedExtraMembersInvalidChoice = [...filter.selectedExtraMembers]
196-
.filter(item => !selectedExtraMembersSet.has(item))
197-
.map(item => {
198-
return {
199-
label: item in memberDict ? memberDict[item] : 'N/A',
200-
value: item,
201-
role: '',
202-
};
203-
});
163+
164+
// If you need the label specifically from the choice object:
165+
newState.filterName = filterChoice.label;
204166

205167
setState(prevState => ({
206168
...prevState,
207-
filterName: filterChoice.label,
208-
selectedCodes: selectedCodesChoice,
209-
selectedColors: selectedColorsChoice,
210-
selectedExtraMembers: selectedExtraMembersChoice,
211-
selectedTrophies: filter.selectedTrophies,
212-
selectedSpecialColors: filter.selectedSpecialColors,
213-
selectedBioStatus: filter.selectedBioStatus,
214-
selectedOverTime: filter.selectedOverTime,
215-
selectedCodesInvalid: selectedCodesInvalidChoice,
216-
selectedColorsInvalid: selectedColorsInvalidChoice,
217-
selectedExtraMembersInvalid: selectedExtraMembersInvalidChoice,
169+
...newState,
218170
}));
219171
};
220172

@@ -287,50 +239,20 @@ export default function UpdateFilterModal({
287239

288240
const rollBackUpdate = () => {
289241
setUpdate(false);
290-
const filter = selectedFilter.filterData;
291-
const selectedCodesChoice = teamCodes
292-
.filter(code => filter.selectedCodes.has(code.value))
293-
.map(item => {
294-
const [code, count] = item.label.split(' (');
295-
return {
296-
...item,
297-
label: `${code.padEnd(10, ' ')} (${count}`,
298-
};
299-
});
300-
301-
const selectedCodesSet = new Set(selectedCodesChoice.map(item => item.value));
302242

303-
const selectedCodesInvalidChoice = [...filter.selectedCodes]
304-
.filter(item => !selectedCodesSet.has(item))
305-
.map(item => {
306-
return {
307-
label: `${item.padEnd(10, ' ')} (0)`,
308-
value: item,
309-
_ids: [],
310-
};
311-
});
312-
const selectedColorsChoice = colorOptions.filter(color =>
313-
filter.selectedColors.has(color.value),
243+
const newState = mapFilterToState(
244+
selectedFilter.filterData,
245+
teamCodes,
246+
colorOptions,
247+
summaries,
248+
memberDict,
314249
);
315-
const selectedExtraMembersChoice = summaries
316-
.filter(summary => filter.selectedExtraMembers.has(summary._id))
317-
.map(summary => ({
318-
label: `${summary.firstName} ${summary.lastName}`,
319-
value: summary._id,
320-
role: summary.role,
321-
}));
250+
251+
newState.filterName = selectedFilter.label;
322252

323253
setState(prevState => ({
324254
...prevState,
325-
filterName: selectedFilter.label,
326-
selectedCodes: selectedCodesChoice,
327-
selectedColors: selectedColorsChoice,
328-
selectedExtraMembers: selectedExtraMembersChoice,
329-
selectedTrophies: filter.selectedTrophies,
330-
selectedSpecialColors: filter.selectedSpecialColors,
331-
selectedBioStatus: filter.selectedBioStatus,
332-
selectedOverTime: filter.selectedOverTime,
333-
selectedCodesInvalid: selectedCodesInvalidChoice,
255+
...newState,
334256
}));
335257
};
336258

@@ -352,9 +274,11 @@ export default function UpdateFilterModal({
352274
id="filterOverride"
353275
options={filters}
354276
value={selectedFilter}
355-
onChange={handleSelectedFilter}
356-
classNamePrefix="custom-select"
357-
styles={darkMode ? modalDarkSelectStyles : undefined}
277+
onChange={e => handleSelectedFilter(e)}
278+
styles={customStyles}
279+
className={`top-select ${mainStyles.textDark} ${
280+
selectedFilter ? '' : `${mainStyles.errorSelect}`
281+
}`}
358282
/>
359283

360284
{selectedFilter && (

‎src/components/WeeklySummariesReport/components/WeeklySummariesToggleFilter.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default function WeeklySummariesToggleFilter({
1212
formId,
1313
hasPermission,
1414
canSeeBioHighlight,
15+
darkMode,
1516
}) {
1617
const handleTrophyToggleChange = () => {
1718
toggleField(setState, 'selectedTrophies');
@@ -25,14 +26,16 @@ export default function WeeklySummariesToggleFilter({
2526
toggleField(setState, 'selectedOverTime');
2627
};
2728

29+
const textColorClass = darkMode ? 'text-light' : '';
30+
2831
return (
2932
<div className={`${styles.filterContainer}`}>
3033
{(hasPermissionToFilter || props.hasPermission('highlightEligibleBios')) && (
3134
<div
3235
className={`${styles.filterStyle} ${styles.marginRight}`}
3336
style={{ minWidth: 'max-content' }}
3437
>
35-
<span>Filter by Bio Status</span>
38+
<span className={textColorClass}>Filter by Bio Status</span>
3639
<div className={styles.switchToggleControl}>
3740
<input
3841
type="checkbox"
@@ -52,7 +55,7 @@ export default function WeeklySummariesToggleFilter({
5255
className={`${styles.filterStyle} ${styles.marginRight}`}
5356
style={{ minWidth: 'max-content' }}
5457
>
55-
<span>Filter by Trophies</span>
58+
<span className={textColorClass}>Filter by Trophies</span>
5659
<div className={`${styles.switchToggleControl}`}>
5760
<input
5861
type="checkbox"
@@ -69,7 +72,7 @@ export default function WeeklySummariesToggleFilter({
6972
)}
7073
{hasPermissionToFilter && (
7174
<div className={`${styles.filterStyle}`} style={{ minWidth: 'max-content' }}>
72-
<span>Filter by Over Hours</span>
75+
<span className={textColorClass}>Filter by Over Hours</span>
7376
<div className={`${styles.switchToggleControl}`}>
7477
<input
7578
type="checkbox"
@@ -107,4 +110,5 @@ WeeklySummariesToggleFilter.propTypes = {
107110
formId: PropTypes.string.isRequired,
108111
hasPermission: PropTypes.func,
109112
canSeeBioHighlight: PropTypes.bool,
113+
darkMode: PropTypes.bool,
110114
};

0 commit comments

Comments
 (0)