Skip to content

Commit e2aebc6

Browse files
author
JasmeetLuthra
committed
List view For buy links
1 parent 0e1095c commit e2aebc6

File tree

6 files changed

+655
-6
lines changed

6 files changed

+655
-6
lines changed

‎components/BuyLinksView/BuyLinkFilterForm.js‎

Lines changed: 375 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,375 @@
1+
import React from 'react'
2+
import { Autocomplete } from '@material-ui/lab';
3+
import TextField from '@material-ui/core/TextField';
4+
import Button from '@material-ui/core/Button';
5+
import CircularProgress from '@material-ui/core/CircularProgress';
6+
import Checkbox from "@material-ui/core/Checkbox";
7+
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
8+
import CheckBoxIcon from '@material-ui/icons/CheckBox';
9+
import FormControlLabel from '@material-ui/core/FormControlLabel';
10+
import Grid from "@material-ui/core/Grid";
11+
import Switch from '@material-ui/core/Switch';
12+
import * as controller from '../../controllers/buyLink'
13+
import * as couponController from '../../controllers/v2/couponsV2'
14+
import * as productsController from '../../controllers/products'
15+
import * as userController from '../../controllers/users'
16+
import FormControl from "@material-ui/core/FormControl";
17+
import InputLabel from "@material-ui/core/InputLabel";
18+
import Select from "@material-ui/core/Select";
19+
import MenuItem from "@material-ui/core/MenuItem";
20+
import Swal from "sweetalert2";
21+
import ErrorHandler from "../../helpers/ErrorHandler";
22+
23+
24+
class BuyLinkFilterForm extends React.Component {
25+
26+
constructor(props) {
27+
super()
28+
this.state = {
29+
productSearchInput: '',
30+
userSearchInput: '',
31+
productSearchResults: [],
32+
userSearchResults: [],
33+
selectUserOpen: false,
34+
selectProductOpen: false,
35+
organizations: [],
36+
addressStates: [],
37+
filterParams: {
38+
active: true,
39+
use_credits: false,
40+
}
41+
}
42+
}
43+
44+
componentDidMount = () => {
45+
controller.getFilterFormData().then(([organizations, states]) => {
46+
this.setState({
47+
organizations: organizations.data,
48+
addressStates: states.data
49+
})
50+
}).catch(error => {
51+
ErrorHandler.handle(error)
52+
Swal.fire({
53+
type: "error",
54+
title: "Error fetching resources!",
55+
text: error
56+
});
57+
});
58+
}
59+
60+
61+
onAutoCompleteOpen = (param) => {
62+
if (param === 'user')
63+
this.setState({selectUserOpen: true})
64+
65+
if (param === 'product')
66+
this.setState({selectProductOpen: true})
67+
}
68+
69+
onAutoCompleteClose = (param) => {
70+
if (param === 'user')
71+
this.setState({selectUserOpen: false})
72+
73+
if (param === 'product')
74+
this.setState({selectProductOpen: false})
75+
}
76+
77+
onUserSearchInputChange = (event) => {
78+
this.setState({
79+
userSearchInput: event.target.value
80+
}, () => {
81+
this.handleUserSearch()
82+
})
83+
}
84+
85+
handleUserSearch = () => {
86+
if (this.state.userSearchInput.length > 3) {
87+
userController.handleGetUserByEmailOrPhone('email', this.state.userSearchInput)
88+
.then((response) => {
89+
this.setState({
90+
userSearchResults: response.data
91+
})
92+
}).catch((error => {
93+
this.setState({
94+
userSearchResults: []
95+
})
96+
ErrorHandler.handle(error)
97+
}))
98+
}
99+
}
100+
101+
onProductSearchInputChange = (event) => {
102+
this.setState({
103+
productSearchInput: event.target.value
104+
}, () => {
105+
this.handleProductSearch()
106+
})
107+
}
108+
109+
handleProductSearch = () => {
110+
if (this.state.productSearchInput.length > 3) {
111+
productsController.searchProducts({
112+
organization_id: this.state.filterParams.organization_id,
113+
description: this.state.productSearchInput
114+
}).then((response) => {
115+
this.setState({
116+
productSearchResults: response.data,
117+
})
118+
}).catch((err) => {
119+
this.setState({
120+
productSearchResults: []
121+
})
122+
ErrorHandler.handle(err)
123+
})
124+
}
125+
}
126+
127+
handleProductChange = async (event, value) => {
128+
let newFilterParams = this.state.filterParams;
129+
newFilterParams['product_id'] = value.id
130+
this.setState(prevState => ({
131+
filterParams: newFilterParams
132+
}));
133+
}
134+
135+
handleUserChange = async (event, value) => {
136+
let newFilterParams = this.state.filterParams;
137+
newFilterParams['user_id'] = value.id
138+
this.setState(prevState => ({
139+
filterParams: newFilterParams
140+
}));
141+
}
142+
143+
onFormInputChange = (event) => {
144+
145+
let newFilterParams = this.state.filterParams;
146+
newFilterParams[event.target.name] = (event.target.name === 'use_credits' ? !JSON.parse(event.target.value) : event.target.value)
147+
this.setState(prevState => ({
148+
filterParams: newFilterParams
149+
}));
150+
}
151+
152+
onSearchBtnClick = () => {
153+
this.props.onSearchBtnClick(this.state.filterParams)
154+
}
155+
156+
render() {
157+
158+
return (
159+
160+
<div className={"d-flex col-md-11 offset-1 mt-5"}>
161+
162+
<div className={"border-card coupon-card"}>
163+
164+
<div className={"d-flex justify-content-center mt-1 mb-3 pb-3"}>
165+
<h2 className={"title"}>
166+
Search links
167+
</h2>
168+
</div>
169+
170+
<div>
171+
<form noValidate autoComplete="off">
172+
173+
<FormControl variant="outlined" size={"medium"}
174+
fullWidth={true} className={"mb-4"}>
175+
176+
<Autocomplete
177+
autoComplete={true}
178+
fullWidth={true}
179+
open={this.state.selectUserOpen}
180+
onOpen={() => { this.onAutoCompleteOpen('user') }}
181+
onClose={() => { this.onAutoCompleteClose('user') }}
182+
loading={this.state.selectUserOpen && !this.state.userSearchResults.length}
183+
value={this.state.filterParams.user}
184+
onChange={this.handleUserChange}
185+
getOptionLabel={(option) => {
186+
return option.email
187+
}}
188+
getOptionSelected={(option, value) => {
189+
return option.id === value.id
190+
}}
191+
options={this.state.userSearchResults}
192+
renderOption={(option, {selected}) => (
193+
<React.Fragment>
194+
<Checkbox
195+
icon={<CheckBoxOutlineBlankIcon fontSize="small"/>}
196+
checkedIcon={<CheckBoxIcon fontSize="small"/>}
197+
style={{marginRight: 8}}
198+
checked={selected}
199+
/>
200+
{option.email}
201+
</React.Fragment>
202+
)}
203+
renderInput={(params) => (
204+
<TextField
205+
{...params}
206+
name="user"
207+
label="User"
208+
onChange={this.onUserSearchInputChange}
209+
variant="outlined"
210+
placeholder="Start typing to see suggestions..."
211+
InputProps={{
212+
...params.InputProps,
213+
endAdornment: (
214+
<React.Fragment>
215+
{(this.state.selectUserOpen && !this.state.userSearchResults.length) ? <CircularProgress color="inherit" size={20} /> : null}
216+
{params.InputProps.endAdornment}
217+
</React.Fragment>
218+
),
219+
}}
220+
/>
221+
)}
222+
223+
/>
224+
225+
</FormControl>
226+
227+
<FormControl variant="outlined" size={"medium"}
228+
fullWidth={true} className={"mb-4"}>
229+
<InputLabel id="organization">Organization</InputLabel>
230+
231+
<Select
232+
value={this.state.filterParams.organization_id}
233+
name={"organization_id"}
234+
onChange={this.onFormInputChange}
235+
label="Organization">
236+
<MenuItem value="">
237+
<em>Select</em>
238+
</MenuItem>
239+
{
240+
this.state.organizations.map((organization) => {
241+
return (
242+
<MenuItem
243+
key={organization.id}
244+
value={organization.id}>{
245+
organization.name
246+
}</MenuItem>
247+
)
248+
})
249+
}
250+
251+
</Select>
252+
</FormControl>
253+
254+
255+
256+
<FormControl variant="outlined" size={"medium"}
257+
fullWidth={true} className={"mb-4"}>
258+
259+
<Autocomplete
260+
autoComplete={true}
261+
fullWidth={true}
262+
open={this.state.selectProductOpen}
263+
onOpen={() => { this.onAutoCompleteOpen('product') }}
264+
onClose={() => { this.onAutoCompleteClose('product') }}
265+
loading={this.state.selectProductOpen && !this.state.productSearchResults.length}
266+
onChange={this.handleProductChange}
267+
value={this.state.filterParams.product}
268+
getOptionLabel={(option) => {
269+
return option.description
270+
}}
271+
getOptionSelected={(option, value) => {
272+
return option.id === value.id
273+
}}
274+
options={this.state.productSearchResults}
275+
disabled={ this.state.filterParams.organization_id ? false : true }
276+
renderOption={(option, {selected}) => (
277+
<React.Fragment>
278+
<Checkbox
279+
icon={<CheckBoxOutlineBlankIcon fontSize="small"/>}
280+
checkedIcon={<CheckBoxIcon fontSize="small"/>}
281+
style={{marginRight: 8}}
282+
checked={selected}
283+
/>
284+
{option.description}
285+
</React.Fragment>
286+
)}
287+
renderInput={(params) => (
288+
<TextField
289+
{...params}
290+
name="product"
291+
label="Product"
292+
onChange={this.onProductSearchInputChange}
293+
variant="outlined"
294+
placeholder="Start typing to see suggestions..."
295+
InputProps={{
296+
...params.InputProps,
297+
endAdornment: (
298+
<React.Fragment>
299+
{(this.state.selectProductOpen && !this.state.productSearchResults.length) ? <CircularProgress color="inherit" size={20} /> : null}
300+
{params.InputProps.endAdornment}
301+
</React.Fragment>
302+
),
303+
}}
304+
/>
305+
)}
306+
/>
307+
308+
</FormControl>
309+
310+
<TextField
311+
className={"mb-4"} id="outlined-basic" label="Coupon Code" type={"string"}
312+
fullWidth={true} name={"coupon_code"} value={this.state.filterParams.coupon_code}
313+
onChange={this.onFormInputChange} variant="outlined"/>
314+
315+
316+
<FormControl variant="outlined" size={"medium"}
317+
fullWidth={true} className={"mb-4"}>
318+
<InputLabel id="state">State</InputLabel>
319+
320+
<Select
321+
value={this.state.filterParams.state}
322+
name={"state_id"}
323+
onChange={this.onFormInputChange}
324+
label="State">
325+
326+
<MenuItem value="">
327+
<em>Select</em>
328+
</MenuItem>
329+
{
330+
this.state.addressStates.map((state) => {
331+
return (
332+
<MenuItem
333+
key={state.id}
334+
value={state.id}>{
335+
state.name
336+
}</MenuItem>
337+
)
338+
})
339+
}
340+
341+
</Select>
342+
</FormControl>
343+
344+
<FormControlLabel
345+
className={"mb-4"}
346+
control={
347+
<Switch checked={this.state.filterParams.use_credits}
348+
onChange={this.onFormInputChange}
349+
value={this.state.filterParams.use_credits}
350+
name="use_credits"
351+
/>}
352+
label="Credits Applicable?"
353+
/>
354+
355+
<Grid container justify="center">
356+
<Button
357+
id="search" size="medium" variant="outlined" className="btn-solid"
358+
style={{background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)" , color: 'white', border: 0,
359+
borderRadius: 3, boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)'}} onClick={this.onSearchBtnClick}>
360+
Search
361+
</Button>
362+
</Grid>
363+
364+
</form>
365+
</div>
366+
367+
</div>
368+
</div>
369+
370+
)
371+
}
372+
}
373+
374+
375+
export default BuyLinkFilterForm

0 commit comments

Comments
 (0)