Skip to content

Commit bc91e86

Browse files
one-communityone-community
authored
Merge pull request #5161 from OneCommunityGlobal/Diya_WeeklySummaryReport_FilterUI
Diya 🔥 fix(filterUI): Fixed Filter UI on Weekly Summary Reports Page
2 parents 29af793 + 315f255 commit bc91e86

4 files changed

Lines changed: 129 additions & 138 deletions

File tree

‎src/components/WeeklySummariesReport/WeeklySummariesReport.jsx‎

Lines changed: 78 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1764,9 +1764,11 @@ const WeeklySummariesReport = props => {
17641764
<style>
17651765
{`
17661766
.custom-select__input-container {
1767-
display: inline-block !important;
1767+
display: inline-flex !important;
17681768
margin: 0 !important;
17691769
padding: 0 !important;
1770+
min-height: 0 !important;
1771+
height: 30px !important;
17701772
}
17711773
`}
17721774
</style>
@@ -2040,31 +2042,44 @@ const WeeklySummariesReport = props => {
20402042
))}
20412043
</div>
20422044
)}
2045+
<div className={styles.filterRow} style={{ marginTop: '12px' }}>
2046+
<WeeklySummariesToggleFilter
2047+
state={state}
2048+
setState={setState}
2049+
hasPermissionToFilter={hasPermissionToFilter}
2050+
editable={true}
2051+
formId="report"
2052+
hasPermission={props.hasPermission}
2053+
darkMode={darkMode}
2054+
/>
2055+
</div>
20432056
</Col>
20442057
<Col lg={{ size: 5 }} md={{ size: 6 }} xs={{ size: 12 }}>
20452058
<div>Select Color</div>
2046-
<Select
2047-
isMulti
2048-
isSearchable
2049-
closeMenuOnSelect={false}
2050-
hideSelectedOptions={false}
2051-
blurInputOnSelect={false}
2052-
options={state.colorOptions}
2053-
value={state.selectedColors}
2054-
onChange={handleSelectColorChange}
2055-
components={{
2056-
Option: CheckboxOption,
2057-
MenuList: CustomMenuList,
2058-
}}
2059-
placeholder="Select color filters..."
2060-
classNamePrefix="custom-select"
2061-
className={`${styles.multiSelectFilter} text-dark ${darkMode ? 'dark-mode' : ''}`}
2062-
styles={customStyles}
2063-
/>
2059+
<div style={{ marginTop: '8px' }}>
2060+
<Select
2061+
isMulti
2062+
isSearchable
2063+
closeMenuOnSelect={false}
2064+
hideSelectedOptions={false}
2065+
blurInputOnSelect={false}
2066+
options={state.colorOptions}
2067+
value={state.selectedColors}
2068+
onChange={handleSelectColorChange}
2069+
components={{
2070+
Option: CheckboxOption,
2071+
MenuList: CustomMenuList,
2072+
}}
2073+
placeholder="Select color filters..."
2074+
classNamePrefix="custom-select"
2075+
className={`${styles.multiSelectFilter} text-dark ${darkMode ? 'dark-mode' : ''}`}
2076+
styles={customStyles}
2077+
/>
2078+
</div>
20642079
<div className={styles.filtersPanel}>
20652080
{hasPermissionToFilter && (
20662081
<div className={styles.filterRow}>
2067-
<div className={styles.specialColorsRow}>
2082+
<div className={styles.specialColorsRow} style={{ marginTop: '12px' }}>
20682083
<span className={styles.filterGroupLabel}>Filter by Special Colors:</span>
20692084

20702085
{['purple', 'green', 'navy'].map(color => {
@@ -2118,59 +2133,57 @@ const WeeklySummariesReport = props => {
21182133
)}
21192134
</div>
21202135
)}
2121-
2122-
<div className={styles.filterRow}>
2123-
<WeeklySummariesToggleFilter
2124-
state={state}
2125-
setState={setState}
2126-
hasPermissionToFilter={hasPermissionToFilter}
2127-
editable={true}
2128-
formId="report"
2129-
hasPermission={props.hasPermission}
2130-
darkMode={darkMode}
2131-
/>
2132-
</div>
21332136
</div>
21342137
</Col>
21352138
</Row>
21362139
<Row className={styles['mx-max-sm-0']}>
2137-
<Col lg={{ size: 5, offset: 1 }} md={{ size: 6 }} xs={{ size: 12 }} className="mb-3">
2140+
<Col
2141+
lg={{ size: 5, offset: 1 }}
2142+
md={{ size: 6 }}
2143+
xs={{ size: 12 }}
2144+
className="mb-3"
2145+
style={{ marginTop: '12px' }}
2146+
>
21382147
<div>Select Extra Members</div>
2139-
<MultiSelect
2140-
className={`${styles['report-multi-select-filter']} ${styles.textDark}
2148+
<div style={{ marginTop: '8px' }}>
2149+
<MultiSelect
2150+
className={`${styles['report-multi-select-filter']} ${styles.textDark}
21412151
${darkMode ? 'dark-mode' : ''}`}
2142-
options={state.membersFromUnselectedTeam}
2143-
value={state.selectedExtraMembers}
2144-
onChange={handleSelectExtraMembersChange}
2145-
/>
2152+
options={state.membersFromUnselectedTeam}
2153+
value={state.selectedExtraMembers}
2154+
onChange={handleSelectExtraMembersChange}
2155+
/>
2156+
</div>
21462157
</Col>
2147-
<Col lg={{ size: 5 }} md={{ size: 6 }} xs={{ size: 12 }}>
2158+
<Col lg={{ size: 5 }} md={{ size: 6 }} xs={{ size: 12 }} style={{ marginTop: '12px' }}>
21482159
<div>Logged Hours Range</div>
2149-
<Select
2150-
isMulti
2151-
classNamePrefix="custom-select"
2152-
placeholder="Select range..."
2153-
components={{
2154-
Option: CheckboxOption,
2155-
MenuList: CustomMenuList,
2156-
}}
2157-
options={[
2158-
{ value: '0', label: '0' },
2159-
{ value: '0-10', label: '0-10' },
2160-
{ value: '10-20', label: '10-20' },
2161-
{ value: '20-40', label: '20-40' },
2162-
{ value: '>40', label: '>40' },
2163-
]}
2164-
hideSelectedOptions={false}
2165-
blurInputOnSelect={false}
2166-
closeMenuOnSelect={false}
2167-
className={`${styles.multiSelectFilter} text-dark ${darkMode ? 'dark-mode' : ''}`}
2168-
styles={customStyles}
2169-
value={state.selectedLoggedHoursRange}
2170-
onChange={selectedOption =>
2171-
setState({ ...state, selectedLoggedHoursRange: selectedOption })
2172-
}
2173-
/>
2160+
<div style={{ marginTop: '8px' }}>
2161+
<Select
2162+
isMulti
2163+
classNamePrefix="custom-select"
2164+
placeholder="Select range..."
2165+
components={{
2166+
Option: CheckboxOption,
2167+
MenuList: CustomMenuList,
2168+
}}
2169+
options={[
2170+
{ value: '0', label: '0' },
2171+
{ value: '0-10', label: '0-10' },
2172+
{ value: '10-20', label: '10-20' },
2173+
{ value: '20-40', label: '20-40' },
2174+
{ value: '>40', label: '>40' },
2175+
]}
2176+
hideSelectedOptions={false}
2177+
blurInputOnSelect={false}
2178+
closeMenuOnSelect={false}
2179+
className={`${styles.multiSelectFilter} text-dark ${darkMode ? 'dark-mode' : ''}`}
2180+
styles={customStyles}
2181+
value={state.selectedLoggedHoursRange}
2182+
onChange={selectedOption =>
2183+
setState({ ...state, selectedLoggedHoursRange: selectedOption })
2184+
}
2185+
/>
2186+
</div>
21742187
</Col>
21752188
</Row>
21762189

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -604,8 +604,8 @@
604604

605605
.filterRow {
606606
display: flex;
607-
flex-wrap: wrap;
608-
align-items: center;
607+
flex-direction: column;
608+
align-items: flex-start;
609609
gap: 20px;
610610
}
611611

@@ -686,4 +686,12 @@
686686
:global(.dark-mode) :global(.select-item.selected) {
687687
background-color: #4c566a !important;
688688
font-weight: bold;
689+
}
690+
691+
.report-multi-select-filter :global(.dropdown-container) {
692+
min-height: 35px !important;
693+
}
694+
695+
.report-multi-select-filter :global(.dropdown-heading) {
696+
height: 35px !important;
689697
}

‎src/components/WeeklySummariesReport/components/SlideToggle.module.scss‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
.default {
2-
--checked-bg-color: #2ba6ed;
3-
--slider-color: #007bff;
4-
--slider-checked-color: #FFFFFF;
2+
--checked-bg-color: #6c757d;
3+
--slider-color: #6c757d;
4+
--slider-checked-color: #FFF;
55
}
66

7-
// Following colors must match that in JS code filter in WeeklySummariesReport.jsx
7+
/* Following colors must match that in JS code filter in WeeklySummariesReport.jsx */
88
.purple {
99
--checked-bg-color: #df39e7;
1010
--slider-color: #800080;
11-
--slider-checked-color: #FFFFFF;
11+
--slider-checked-color: #FFF;
1212
}
1313

1414
.green {
1515
--checked-bg-color: #37df37;
1616
--slider-color: #008000;
17-
--slider-checked-color: #FFFFFF;
17+
--slider-checked-color: #FFF;
1818
}
1919

2020
.navy {
2121
--checked-bg-color: #5353df;
2222
--slider-color: #000080;
23-
--slider-checked-color: #FFFFFF;
23+
--slider-checked-color: #FFF;
2424
}
2525

2626
.switch {
2727
position: relative;
2828
display: inline-block;
29+
align-items: center;
2930
width: 2rem;
3031
height: 1rem;
3132

@@ -38,16 +39,13 @@
3839
.slider {
3940
position: absolute;
4041
cursor: pointer;
41-
top: 0;
42-
left: 0;
43-
right: 0;
44-
bottom: 0;
42+
inset: 0;
4543
transition: 0.4s;
4644
border-radius: 34px;
4745
border: 1px solid #bbb;
4846
}
4947

50-
.slider:before {
48+
.slider::before {
5149
position: absolute;
5250
content: "";
5351
height: 0.5rem;
@@ -61,16 +59,12 @@
6159
}
6260
}
6361

64-
// Slide color when checked (has some overhead)
65-
input:checked + .slider:before {
66-
background-color: var(--slider-checked-color, var(--slider-color));
67-
}
68-
69-
// Background color when checked
62+
/* Background color when checked */
7063
input:checked + .slider {
7164
background-color: var(--checked-bg-color);
7265
}
7366

74-
input:checked + .slider:before {
67+
/* Slide color when checked (has some overhead) */
68+
input:checked + .slider::before {
7569
transform: translate(1rem,-50%);
7670
}

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

Lines changed: 28 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Label } from 'reactstrap';
33
import styles from '../WeeklySummariesReport.module.css';
44
import ReactTooltip from 'react-tooltip';
55
import { toggleField } from '~/utils/stateHelper';
6+
import { SlideToggle } from '../components';
67

78
export default function WeeklySummariesToggleFilter({
89
state,
@@ -29,75 +30,50 @@ export default function WeeklySummariesToggleFilter({
2930
const textColorClass = darkMode ? `${styles.filterLabel} text-light` : styles.filterLabel;
3031

3132
return (
32-
<div className={`${styles.filterContainer}`}>
33+
<div className={styles.specialColorsRow}>
34+
<span className={styles.filterGroupLabel}>Filter by:</span>
35+
3336
{(hasPermissionToFilter || hasPermission?.('highlightEligibleBios')) && (
34-
<div
35-
className={`${styles.filterStyle} ${styles.marginRight}`}
36-
style={{ minWidth: 'max-content' }}
37-
>
38-
<span className={textColorClass}>Filter by Bio Status</span>
39-
<div className={styles.switchToggleControl}>
40-
<input
41-
type="checkbox"
42-
className={styles.switchToggle}
43-
id="bio-status-toggle"
44-
onChange={handleBioStatusToggleChange}
37+
<div className={styles.specialColorsItem}>
38+
<span className={textColorClass}>Bio Status</span>
39+
<div style={{ marginTop: '10px' }}>
40+
<SlideToggle
41+
color="default"
42+
onChange={() => toggleField(setState, 'selectedBioStatus')}
43+
style={{ marginTop: '20px' }}
4544
/>
46-
<Label className={styles.switchToggleLabel} htmlFor="bio-status-toggle">
47-
<span className={styles.switchToggleInner} />
48-
<span className={styles.switchToggleSwitch} />
49-
</Label>
5045
</div>
5146
</div>
5247
)}
48+
5349
{hasPermissionToFilter && (
54-
<div
55-
className={`${styles.filterStyle} ${styles.marginRight}`}
56-
style={{ minWidth: 'max-content' }}
57-
>
58-
<span className={textColorClass}>Filter by Trophies</span>
59-
<div className={`${styles.switchToggleControl}`}>
60-
<input
61-
type="checkbox"
62-
className={`${styles.switchToggle}`}
63-
id="trophy-toggle"
64-
onChange={handleTrophyToggleChange}
50+
<div className={styles.specialColorsItem}>
51+
<span className={textColorClass}>Trophies</span>
52+
<div style={{ marginTop: '10px' }}>
53+
<SlideToggle
54+
color="default"
55+
onChange={() => toggleField(setState, 'selectedTrophies')}
6556
/>
66-
<Label className={`${styles.switchToggleLabel}`} htmlFor="trophy-toggle">
67-
<span className={`${styles.switchToggleInner}`} />
68-
<span className={`${styles.switchToggleSwitch}`} />
69-
</Label>
7057
</div>
7158
</div>
7259
)}
60+
7361
{hasPermissionToFilter && (
74-
<div className={`${styles.filterStyle}`} style={{ minWidth: 'max-content' }}>
75-
<span className={textColorClass}>Filter by Over Hours</span>
76-
<div className={`${styles.switchToggleControl}`}>
77-
<input
78-
type="checkbox"
79-
className={`${styles.switchToggle}`}
80-
id="over-hours-toggle"
81-
onChange={handleOverHoursToggleChange}
62+
<div className={styles.specialColorsItem}>
63+
<span className={textColorClass}>Over Hours</span>
64+
<div style={{ marginTop: '10px' }}>
65+
<SlideToggle
66+
color="default"
67+
onChange={() => toggleField(setState, 'selectedOverTime')}
8268
/>
83-
<Label className={`${styles.switchToggleLabel}`} htmlFor="over-hours-toggle">
84-
<span className={`${styles.switchToggleInner}`} />
85-
<span className={`${styles.switchToggleSwitch}`} />
86-
</Label>
8769
</div>
88-
<ReactTooltip id="filterTooltip" place="top" effect="solid" className="custom-tooltip">
89-
<span
90-
style={{
91-
whiteSpace: 'normal',
92-
wordWrap: 'break-word',
93-
maxWidth: '200px',
94-
}}
95-
>
70+
<ReactTooltip id="filterTooltip" place="top" effect="solid">
71+
<span style={{ whiteSpace: 'normal', wordWrap: 'break-word', maxWidth: '200px' }}>
9672
Filter people who contributed more than 25% of their committed hours
9773
</span>
9874
</ReactTooltip>
9975
</div>
100-
)}{' '}
76+
)}
10177
</div>
10278
);
10379
}

0 commit comments

Comments
 (0)