Skip to content

Commit d9a6add

Browse files
JuliaHa0902JuliaHa0902
committed
Refactor weekly toggle filer
1 parent 1131dc4 commit d9a6add

5 files changed

Lines changed: 159 additions & 324 deletions

File tree

‎src/components/WeeklySummariesReport/FilterEditForm.jsx‎

Lines changed: 10 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { useEffect } from 'react';
22
import { MultiSelect } from 'react-multi-select-component';
3-
import { Button, Label, Row, Col, FormGroup } from 'reactstrap';
3+
import { Button, Row, Col, FormGroup } from 'reactstrap';
44
import mainStyles from './WeeklySummariesReport.module.css';
5-
import { setField, toggleField, removeItemFromField, setChildField } from '~/utils/stateHelper';
5+
import WeeklySummariesToggleFilter from './WeeklySummariesToggleFilter.jsx';
6+
import { setField, removeItemFromField } from '~/utils/stateHelper';
67

78
export default function FilterEditForm({
89
state,
@@ -52,18 +53,6 @@ export default function FilterEditForm({
5253
}));
5354
}, [state.selectedCodes, summaries]);
5455

55-
const handleTrophyToggleChange = () => {
56-
toggleField(setState, 'selectedTrophies');
57-
};
58-
59-
const handleBioStatusToggleChange = () => {
60-
toggleField(setState, 'selectedBioStatus');
61-
};
62-
63-
const handleOverHoursToggleChange = () => {
64-
toggleField(setState, 'selectedOverTime');
65-
};
66-
6756
return (
6857
<FormGroup>
6958
<Row className="pt-4">
@@ -236,110 +225,13 @@ export default function FilterEditForm({
236225
)}
237226
</Col>
238227
</Row>
239-
<div className={`${mainStyles.filterContainer} pt-4`}>
240-
{hasPermissionToFilter && (
241-
<div className={`${mainStyles.filterStyle} ${mainStyles.marginRight}`}>
242-
<span>Filter by Special Colors</span>
243-
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '2px' }}>
244-
{['purple', 'green', 'navy'].map(color => (
245-
<div key={`${color}-toggle`} style={{ display: 'flex', alignItems: 'center' }}>
246-
<div className={`${mainStyles.switchToggleControl}`}>
247-
<input
248-
type="checkbox"
249-
className={`${mainStyles.switchToggle}`}
250-
id={`filter-modal-${color}-toggle`}
251-
checked={state.selectedSpecialColors[color]}
252-
onChange={e =>
253-
setChildField(setState, 'selectedSpecialColors', color, e.target.checked)
254-
}
255-
/>
256-
<Label
257-
className={`${mainStyles.switchToggleLabel}`}
258-
for={`filter-modal-${color}-toggle`}
259-
>
260-
<span className={`${mainStyles.switchToggleInner}`} />
261-
<span className={`${mainStyles.switchToggleSwitch}`} />
262-
</Label>
263-
</div>
264-
<span
265-
style={{
266-
marginLeft: '3px',
267-
fontSize: 'inherit',
268-
textTransform: 'capitalize',
269-
whiteSpace: 'nowrap',
270-
fontWeight: 'normal',
271-
}}
272-
>
273-
{color}
274-
</span>
275-
</div>
276-
))}
277-
</div>
278-
</div>
279-
)}
280-
</div>
281-
<div className={`${mainStyles.filterContainer} pt-4`}>
282-
{(hasPermissionToFilter || canSeeBioHighlight) && (
283-
<div className={`${mainStyles.filterStyle} ${mainStyles.marginRight}`}>
284-
<span>Filter by Bio Status</span>
285-
<div className={`${mainStyles.switchToggleControl}`}>
286-
<input
287-
type="checkbox"
288-
className={`${mainStyles.switchToggle}`}
289-
id="filter-modal-bio-status-toggle"
290-
checked={state.selectedBioStatus}
291-
onChange={handleBioStatusToggleChange}
292-
/>
293-
<Label
294-
className={`${mainStyles.switchToggleLabel}`}
295-
for="filter-modal-bio-status-toggle"
296-
>
297-
<span className={`${mainStyles.switchToggleInner}`} />
298-
<span className={`${mainStyles.switchToggleSwitch}`} />
299-
</Label>
300-
</div>
301-
</div>
302-
)}
303-
{hasPermissionToFilter && (
304-
<div className={`${mainStyles.filterStyle} ${mainStyles.marginRight}`}>
305-
<span>Filter by Trophies</span>
306-
<div className={`${mainStyles.switchToggleControl}`}>
307-
<input
308-
type="checkbox"
309-
className={`${mainStyles.switchToggle}`}
310-
checked={state.selectedTrophies}
311-
id="filter-modal-trophy-toggle"
312-
onChange={handleTrophyToggleChange}
313-
/>
314-
<Label className={`${mainStyles.switchToggleLabel}`} for="filter-modal-trophy-toggle">
315-
<span className={`${mainStyles.switchToggleInner}`} />
316-
<span className={`${mainStyles.switchToggleSwitch}`} />
317-
</Label>
318-
</div>
319-
</div>
320-
)}
321-
{hasPermissionToFilter && (
322-
<div className={`${mainStyles.filterStyle} ${mainStyles.marginRight}`}>
323-
<span>Filter by Over Hours</span>
324-
<div className={`${mainStyles.switchToggleControl}`}>
325-
<input
326-
type="checkbox"
327-
className={`${mainStyles.switchToggle}`}
328-
checked={state.selectedOverTime}
329-
id="filter-modal-over-hours-toggle"
330-
onChange={handleOverHoursToggleChange}
331-
/>
332-
<Label
333-
className={`${mainStyles.switchToggleLabel}`}
334-
for="filter-modal-over-hours-toggle"
335-
>
336-
<span className={`${mainStyles.switchToggleInner}`} />
337-
<span className={`${mainStyles.switchToggleSwitch}`} />
338-
</Label>
339-
</div>
340-
</div>
341-
)}
342-
</div>
228+
<WeeklySummariesToggleFilter
229+
state={state}
230+
setState={setState}
231+
hasPermissionToFilter={hasPermissionToFilter}
232+
editable={true}
233+
formId="filter-edit"
234+
/>
343235
</FormGroup>
344236
);
345237
}

‎src/components/WeeklySummariesReport/FilterPreviewForm.jsx‎

Lines changed: 8 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Label } from 'reactstrap';
21
import styles from './SelectFilterModal.module.scss';
32
import mainStyles from './WeeklySummariesReport.module.css';
3+
import WeeklySummariesToggleFilter from './WeeklySummariesToggleFilter.jsx';
4+
45
export default function FilterPreviewForm({ selectedFilter, darkMode, memberDict }) {
56
return (
67
<div>
@@ -39,105 +40,12 @@ export default function FilterPreviewForm({ selectedFilter, darkMode, memberDict
3940
</div>
4041
))}
4142
</div>
42-
<div className={`${styles.filterContainerStart} pt-4`}>
43-
<div className={`${mainStyles.filterStyle} ${mainStyles.marginRight}`}>
44-
<span>Filter by Special Colors</span>
45-
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '2px' }}>
46-
{['purple', 'green', 'navy'].map(color => (
47-
<div key={`${color}-toggle`} style={{ display: 'flex', alignItems: 'center' }}>
48-
<div className={`${mainStyles.switchToggleControl}`}>
49-
<input
50-
type="checkbox"
51-
className={`${mainStyles.switchToggle}`}
52-
id={`select-filter-${color}-toggle`}
53-
checked={selectedFilter.filterData.selectedSpecialColors[color]}
54-
disabled
55-
/>
56-
<Label
57-
className={`${mainStyles.switchToggleLabel}`}
58-
for={`select-filter-${color}-toggle`}
59-
>
60-
<span className={`${mainStyles.switchToggleInner}`} />
61-
<span className={`${mainStyles.switchToggleSwitch}`} />
62-
</Label>
63-
</div>
64-
<span
65-
style={{
66-
marginLeft: '3px',
67-
fontSize: 'inherit',
68-
textTransform: 'capitalize',
69-
whiteSpace: 'nowrap',
70-
fontWeight: 'normal',
71-
}}
72-
>
73-
{color}
74-
</span>
75-
</div>
76-
))}
77-
</div>
78-
</div>
79-
</div>
80-
<div className={`${styles.filterContainerStart} pt-4`}>
81-
<div className={`${mainStyles.filterStyle} ${mainStyles.marginRight}`}>
82-
<span>Filter by Bio Status</span>
83-
<div className={`${mainStyles.switchToggleControl}`}>
84-
<input
85-
type="checkbox"
86-
className={`${mainStyles.switchToggle}`}
87-
checked={selectedFilter.filterData.selectedBioStatus}
88-
id="select-filter-bio-status-toggle"
89-
disabled
90-
/>
91-
<Label
92-
className={`${mainStyles.switchToggleLabel}`}
93-
for="select-filter-bio-status-toggle"
94-
>
95-
<span className={`${mainStyles.switchToggleInner}`} />
96-
<span className={`${mainStyles.switchToggleSwitch}`} />
97-
</Label>
98-
</div>
99-
</div>
100-
101-
<div className={`${mainStyles.filterStyle} ${mainStyles.marginRight}`}>
102-
<span>Filter by Trophies</span>
103-
<div className={`${mainStyles.switchToggleControl}`}>
104-
<input
105-
type="checkbox"
106-
className={`${mainStyles.switchToggle}`}
107-
checked={selectedFilter.filterData.selectedTrophies}
108-
id="select-filter-trophy-toggle"
109-
disabled
110-
/>
111-
<Label
112-
className={`${mainStyles.switchToggleLabel}`}
113-
for="select-filter-trophy-toggle"
114-
>
115-
<span className={`${mainStyles.switchToggleInner}`} />
116-
<span className={`${mainStyles.switchToggleSwitch}`} />
117-
</Label>
118-
</div>
119-
</div>
120-
121-
<div className={`${mainStyles.filterStyle} ${mainStyles.marginRight}`}>
122-
<span>Filter by Over Hours</span>
123-
<div className={`${mainStyles.switchToggleControl}`}>
124-
<input
125-
type="checkbox"
126-
className={`${mainStyles.switchToggle}`}
127-
checked={selectedFilter.filterData.selectedOverTime}
128-
id="select-filter-over-hours-toggle"
129-
disabled
130-
/>
131-
<Label
132-
className={`${mainStyles.switchToggleLabel}`}
133-
for="select-filter-over-hours-toggle"
134-
>
135-
<span className={`${mainStyles.switchToggleInner}`} />
136-
<span className={`${mainStyles.switchToggleSwitch}`} />
137-
</Label>
138-
</div>
139-
</div>
140-
</div>
43+
<WeeklySummariesToggleFilter
44+
state={selectedFilter.filterData}
45+
hasPermissionToFilter={true}
46+
editable={false}
47+
formId="preview"
48+
/>
14149
</div>
14250
)}
14351
</div>

‎src/components/WeeklySummariesReport/SelectFilterModal.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import mainStyles from './WeeklySummariesReport.module.css';
66
import FilterPreviewForm from './FilterPreviewForm.jsx';
77

88
export default function SelectFilterModal({
9+
state,
10+
setState,
911
isOpen,
1012
toggle,
1113
filters,

0 commit comments

Comments
 (0)