Skip to content

Commit 6f1e680

Browse files
rachelekmrachelekm
committed
WIP Add filters flyout
1 parent 3a3354b commit 6f1e680

3 files changed

Lines changed: 190 additions & 104 deletions

File tree

‎demo/app/src/components/Sidebar/RefinePane.js‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import styles from './Sidebar.module.scss'
2+
import { useAppContext } from 'src/context/appContext';
3+
import Button from '@components/Button';
4+
import {
5+
ArrowRightLine
6+
} from '@vectopus/atlas-icons-react';
7+
8+
import { ALL_PROVIDERS as providers } from 'src/utils/constants';
9+
10+
export default function RefinePane() {
11+
const {
12+
userParams,
13+
setUserParams,
14+
setOpenFilters,
15+
products,
16+
} = useAppContext();
17+
18+
function providerSelectHandler(e) {
19+
setUserParams({
20+
...userParams,
21+
provider: e.target.value,
22+
product: 'all'
23+
})
24+
}
25+
26+
function productSelectHandler(e) {
27+
setUserParams({
28+
...userParams,
29+
product: e.target.value
30+
})
31+
}
32+
33+
function constraintsSelectHandler(key, e){
34+
setUserParams({
35+
...userParams,
36+
constraints: {
37+
...userParams.constraints,
38+
[key]: e.target.value
39+
}
40+
})
41+
}
42+
43+
function isProviderSelected(provider) {
44+
return provider === userParams.provider;
45+
}
46+
47+
function isProductSelected(product) {
48+
return product === userParams.product;
49+
}
50+
51+
function isConstraintSelected(constraint, key) {
52+
return userParams.constraints && constraint === userParams.constraints[key];
53+
}
54+
55+
function getProductOptions(products){
56+
return products && products.filter(product => product).map(({ title, id }) => {
57+
return (
58+
<option
59+
key={id}
60+
value={id}
61+
selected={isProductSelected(id)}
62+
>
63+
{title}
64+
</option>
65+
);
66+
});
67+
}
68+
69+
function displayProducts() {
70+
return userParams.provider !== 'all' ?
71+
getProductOptions(products[userParams.provider])
72+
: getProductOptions(Object.values(products).flat())
73+
}
74+
75+
// //object of reduced constraints per provider
76+
// function getConstraints(p){
77+
// }
78+
79+
// function displayProviderConstraints(){
80+
// return userParams.provider !== 'all' ? (
81+
// Object.entries(getConstraints(userParams.provider) ?? {}).map(([label, value]) => {
82+
// return (
83+
// <div>
84+
// <span className={styles.constraintLabel}>{label}: </span>
85+
// <select onChange={e => constraintsSelectHandler(label, e)} className={styles.refineSelection}>
86+
// <option
87+
// value=''
88+
// key='default'
89+
// selected
90+
// >
91+
// </option>
92+
// {value.map((v) => (
93+
// <option
94+
// value={v}
95+
// key={v}
96+
// selected={isConstraintSelected(v, label)}
97+
// >
98+
// {v}
99+
// </option>
100+
// ))}
101+
// </select>
102+
// </div>
103+
// )
104+
// })
105+
// ) : null;
106+
// }
107+
108+
return (
109+
<div className={styles.filtersFlyout}>
110+
<div className={styles.filtersTopBar}>
111+
<h4>Refine</h4>
112+
<Button
113+
className={styles.closeButton}
114+
onClick={() => setOpenFilters(false)}
115+
>
116+
<ArrowRightLine size={12} />
117+
</Button>
118+
</div>
119+
<div className={styles.filtersBody}>
120+
<div>
121+
<span className={styles.refineLabel}>Providers: </span>
122+
<select onChange={providerSelectHandler} className={styles.refineSelection}>
123+
<option
124+
value='all'
125+
key='all'
126+
selected
127+
>
128+
All
129+
</option>
130+
{providers.map((provider) => (
131+
<option
132+
value={provider.id}
133+
key={provider.id}
134+
selected={isProviderSelected(provider.id)}
135+
>
136+
{provider.name}
137+
</option>
138+
))}
139+
</select>
140+
</div>
141+
<div>
142+
<div className={styles.refineLabel}>Products: </div>
143+
<select onChange={productSelectHandler} className={styles.refineSelection}>
144+
<option
145+
value='all'
146+
key='all'
147+
selected
148+
>
149+
All
150+
</option>
151+
{displayProducts()}
152+
</select>
153+
</div>
154+
{userParams.provider !== 'all' && <div>
155+
<div className={styles.refineLabel}>Constraints: </div>
156+
{/* {displayProviderConstraints()} */}
157+
</div>}
158+
</div>
159+
</div>
160+
);
161+
}

‎demo/app/src/components/Sidebar/Sidebar.js‎

Lines changed: 4 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -2,72 +2,24 @@ import RingLoader from 'react-spinners/RingLoader';
22
import Button from '@components/Button';
33
import {
44
HorizontalSlidersLines,
5-
AlignJustifyDown,
6-
ArrowRightLine
5+
AlignJustifyDown
76
} from '@vectopus/atlas-icons-react';
87
import styles from "./Sidebar.module.scss";
98

109
import { useAppContext } from 'src/context/appContext';
1110
import OpportunityList from './OpportunityList';
12-
import { useEffect, useState } from 'react';
13-
import { ALL_PROVIDERS as providers } from 'src/utils/constants';
1411
import OpportunityDetail from './OpportunityDetail';
12+
import RefinePane from './RefinePane';
1513

1614
export default function Sidebar(props) {
1715
const {
1816
selectedOpportunity,
1917
isLoadingOpps,
2018
errorOpps,
2119
openFilters,
22-
setOpenFilters,
23-
products,
24-
userParams,
25-
setUserParams
20+
setOpenFilters
2621
} = useAppContext();
2722

28-
function providerSelectHandler(e) {
29-
setUserParams({
30-
...userParams,
31-
provider: e.target.value,
32-
product: 'all'
33-
})
34-
}
35-
36-
function productSelectHandler(e) {
37-
setUserParams({
38-
...userParams,
39-
product: e.target.value
40-
})
41-
}
42-
43-
function isProviderSelected(provider) {
44-
return provider === userParams.provider;
45-
}
46-
47-
function isProductSelected(product) {
48-
return product === userParams.product;
49-
}
50-
51-
function getProductOptions(products){
52-
return products && products.filter(product => product).map(({ title, id }) => {
53-
return (
54-
<option
55-
key={id}
56-
value={id}
57-
selected={isProductSelected(id)}
58-
>
59-
{title}
60-
</option>
61-
);
62-
});
63-
}
64-
65-
function displayProducts() {
66-
return userParams.provider !== 'all' ?
67-
getProductOptions(products[userParams.provider])
68-
: getProductOptions(Object.values(products).flat())
69-
}
70-
7123
const filterButtonClass = openFilters
7224
? styles.filterButtonOpen
7325
: styles.filterButtonClosed
@@ -94,55 +46,7 @@ export default function Sidebar(props) {
9446

9547
{!!errorOpps && <div>There was error</div>}
9648

97-
{!!openFilters && (
98-
<div className={styles.filtersFlyout}>
99-
<div className={styles.filtersTopBar}>
100-
<h4>Filters</h4>
101-
<Button
102-
className={styles.closeButton}
103-
onClick={() => setOpenFilters(false)}
104-
>
105-
<ArrowRightLine size={12} />
106-
</Button>
107-
</div>
108-
<div className={styles.filtersBody}>
109-
<div>
110-
<span>Providers: </span>
111-
<select onChange={providerSelectHandler}>
112-
<option
113-
value='all'
114-
key='all'
115-
selected
116-
>
117-
All
118-
</option>
119-
{providers.map((provider) => (
120-
<option
121-
value={provider.id}
122-
key={provider.id}
123-
selected={isProviderSelected(provider.id)}
124-
>
125-
{provider.name}
126-
</option>
127-
))}
128-
</select>
129-
</div>
130-
<div>
131-
<div className={styles.blockLabel}>Products: </div>
132-
<select onChange={productSelectHandler}>
133-
<option
134-
value='all'
135-
key='all'
136-
selected
137-
>
138-
All
139-
</option>
140-
{displayProducts()}
141-
</select>
142-
</div>
143-
</div>
144-
</div>
145-
)}
49+
{!!openFilters && <RefinePane />}
14650
</>
14751
)}
14852
{!!isLoadingOpps && !errorOpps && (

‎demo/app/src/components/Sidebar/Sidebar.module.scss‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
left: 0;
88
width: 350px;
99
height: 100%;
10-
z-index: 1000;
10+
z-index: 1001;
1111
background-color: white;
1212
}
1313

@@ -129,14 +129,35 @@
129129
}
130130

131131
.filtersBody {
132-
padding-left: 5px;
133132
text-align: left;
134133

135134
.blockLabel {
136135
display: block;
137-
text-align: left;
138136
padding: 0;
139137
}
138+
139+
.refineLabel {
140+
margin-top: 10px;
141+
padding: 5px;
142+
display: block;
143+
background-color: lightgrey;
144+
width: 100%;
145+
text-align: left;
146+
}
147+
148+
.constraintLabel {
149+
background-color: none;
150+
padding-left: 10px;
151+
}
152+
153+
.refineSelection {
154+
display: block;
155+
color: grey;
156+
width: 80%;
157+
margin-top: 10px;
158+
margin-left: auto;
159+
margin-right: auto;
160+
}
140161
}
141162
}
142163

@@ -158,7 +179,7 @@
158179
border: 3px solid #1C5F78;
159180
border-right: none;
160181
box-shadow: 5px 0 0 0 white;
161-
z-index: 1001;
182+
z-index: 1002;
162183
}
163184

164185
.opportunityPreview > h1 {

0 commit comments

Comments
 (0)