Skip to content

Commit 0139fc2

Browse files
ShahanaFarooquiShahanaFarooqui
committed
Multi Select Dropdown
1 parent 81bd20e commit 0139fc2

5 files changed

Lines changed: 902 additions & 5 deletions

File tree

‎apps/frontend/src/components/shared/DataFilterOptions/DataFilterOptions.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@ import moment from 'moment';
22
import './DataFilterOptions.scss';
33
import { useCallback, useEffect, useState, ChangeEvent } from 'react';
44
import { Row, Col, Dropdown, InputGroup, Form } from 'react-bootstrap';
5-
import { getTimestampWithGranularity, TimeGranularity } from '../../../utilities/constants';
5+
import { FilterMode, getTimestampWithGranularity, TimeGranularity } from '../../../utilities/constants';
66
import CLNDatePicker from '../DatepickerInput/DatepickerInput';
7-
import { ChevronDown } from '../../../svgs/ChevronDown';
87
import { BookkeeperService } from '../../../services/http.service';
98
import logger from '../../../services/logger.service';
109
import { setAccountEvents, setSatsFlow } from '../../../store/bkprSlice';
1110
import { useDispatch, useSelector } from 'react-redux';
1211
import { appStore } from '../../../store/appStore';
1312
import { selectIsAuthenticated } from '../../../store/rootSelectors';
1413
import { AppState } from '../../../store/store.type';
14+
import { ChevronSVG } from '../../../svgs/Chevron';
15+
import MultiSelectDropdown from '../MultiSelectDropdown/MultiSelectDropdown';
16+
import { titleCase } from '../../../utilities/data-formatters';
1517

16-
const DataFilterOptions = (props: {filter: string, onShowZeroActivityChange: (show: boolean) => void}) => {
18+
const DataFilterOptions = (props: {filter: string, onShowZeroActivityChange: (show: boolean) => void, multiSelectValues?: { dataKey: string, name: string }[], multiSelectPlaceholder?: string, multiSelectChangeHandler?: (selectedOptions: string[], filterMode: FilterMode) => void}) => {
1719
const dispatch = useDispatch();
1820
const isAuthenticated = useSelector(selectIsAuthenticated);
1921
const currentDate = new Date();
@@ -84,7 +86,7 @@ const DataFilterOptions = (props: {filter: string, onShowZeroActivityChange: (sh
8486
<InputGroup.Text
8587
className='form-control-addon form-control-addon-right'
8688
>
87-
<ChevronDown width={12} height={7} />
89+
<ChevronSVG open={false} width={'12'} height={'12'} />
8890
</InputGroup.Text>
8991
</Dropdown.Toggle>
9092
<Dropdown.Menu data-testid='time-granularity-menu'>
@@ -115,6 +117,15 @@ const DataFilterOptions = (props: {filter: string, onShowZeroActivityChange: (sh
115117
onChangeDate={date => setRangeEnd(date)}
116118
/>
117119
</Col>
120+
{props.multiSelectValues && props.multiSelectValues.length > 0 &&
121+
<Col xs="auto" className='px-2'>
122+
<MultiSelectDropdown
123+
options={props.multiSelectValues?.map(entry => ({ value: entry.dataKey, label: titleCase(entry.name.replace(/_/g, ' ')) })) || []}
124+
placeholder={props.multiSelectPlaceholder}
125+
onChange={props.multiSelectChangeHandler}
126+
/>
127+
</Col>
128+
}
118129
<Col xs="auto" className='px-2'>
119130
<Form.Check
120131
tabIndex={4}

‎apps/frontend/src/components/shared/MultiSelectDropdown/MultiSelectDropdown.scss‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
@use '../../../styles/constants' as *;
2+
3+
.msd-wrapper {
4+
min-width: 12rem;
5+
max-width: 12rem;
6+
7+
.svg-chevron {
8+
:hover {
9+
stroke: $primary;
10+
}
11+
}
12+
13+
.form-control.msd-trigger {
14+
display: flex;
15+
align-items: center;
16+
border-radius: $dropdown-border-radius !important;
17+
cursor: pointer;
18+
overflow: hidden;
19+
padding: 0.675rem;
20+
}
21+
22+
.msd-badges {
23+
display: flex;
24+
align-items: center;
25+
flex: 1;
26+
gap: 4px;
27+
overflow: hidden;
28+
flex-wrap: nowrap;
29+
min-width: 0;
30+
31+
.msd-badge {
32+
flex-shrink: 0;
33+
max-width: 6rem;
34+
display: flex;
35+
align-items: center;
36+
justify-content: start;
37+
padding: 0.125rem 0.675rem;
38+
background-color: $body-bg !important;
39+
color: $dark;
40+
border: 0.5px solid $gray-300;
41+
font-weight: $font-weight-base;
42+
43+
.msd-badge-label {
44+
font-size: $font-size-base;
45+
display: inline-block;
46+
max-width: 4rem;
47+
overflow: hidden;
48+
text-overflow: ellipsis;
49+
white-space: nowrap;
50+
vertical-align: bottom;
51+
margin-right: 0.125rem;
52+
}
53+
54+
.msd-badge-remove {
55+
display: inline-flex;
56+
align-items: center;
57+
line-height: 1;
58+
font-size: 0;
59+
vertical-align: middle;
60+
border: none;
61+
height: auto;
62+
}
63+
64+
}
65+
66+
.msd-badge-overflow {
67+
font-size: $font-size-base;
68+
}
69+
}
70+
71+
.btn.btn-link.msd-btn-remove, .msd-btn-chevron {
72+
display: inline-flex;
73+
align-items: center;
74+
line-height: 1;
75+
font-size: 0;
76+
vertical-align: middle;
77+
border: none;
78+
height: auto;
79+
padding: 0;
80+
}
81+
82+
.msd-dropdown {
83+
position: absolute;
84+
background-color: $body-bg;
85+
top: calc(100% + 4px);
86+
left: 0;
87+
right: 0;
88+
z-index: 1050;
89+
border-radius: $dropdown-border-radius !important;
90+
border: 1px solid $gray-300;
91+
}
92+
93+
.msd-search-input {
94+
width: 90%;
95+
margin: auto;
96+
margin-top: 0.25rem;
97+
border-radius: $dropdown-border-radius !important;
98+
}
99+
100+
.msd-mode-radio {
101+
font-size: $font-size-base;
102+
font-weight: $font-weight-base;
103+
.form-check-label {
104+
cursor: pointer;
105+
}
106+
}
107+
108+
.msd-scroll-container {
109+
max-height: 12rem;
110+
position: relative;
111+
display: flex;
112+
flex-direction: column;
113+
}
114+
115+
.msd-list {
116+
list-style: none;
117+
margin: 0;
118+
padding: 0.5rem 1rem;
119+
max-height: 10rem;
120+
.form-check .form-check-label {
121+
margin: 1px 0 0 0.5rem;
122+
}
123+
}
124+
125+
.msd-option {
126+
cursor: pointer;
127+
128+
.msd-option-check {
129+
overflow: hidden;
130+
text-overflow: ellipsis;
131+
white-space: nowrap;
132+
font-size: $font-size-base;
133+
font-weight: $font-weight-base;
134+
}
135+
}
136+
137+
.msd-empty {
138+
padding: 10px 12px;
139+
font-size: $font-size-base;
140+
text-align: center;
141+
}
142+
143+
.msd-footer {
144+
padding: 0.5rem 1rem;
145+
font-size: $font-size-base * 0.9;
146+
display: flex;
147+
justify-content: space-between;
148+
align-items: center;
149+
position: sticky;
150+
bottom: 0;
151+
border-top: 1px solid $gray-300;
152+
max-height: 2rem;
153+
}
154+
155+
.msd-footer-clear {
156+
padding: 0;
157+
font-size: $font-size-base * 0.9;
158+
font-weight: 700;
159+
color: $primary !important;
160+
}
161+
162+
}
163+
164+
165+
@include color-mode(dark) {
166+
.msd-wrapper {
167+
.msd-badges {
168+
.msd-badge {
169+
color: $white;
170+
background-color: $card-bg-dark !important;
171+
border-color: $border-color-dark;
172+
}
173+
}
174+
.msd-dropdown {
175+
color: $white;
176+
background-color: $card-bg-dark;
177+
border-color: $border-color-dark;
178+
}
179+
}
180+
}

0 commit comments

Comments
 (0)