· 6 years ago · Feb 14, 2020, 01:16 PM
1/* eslint-disable no-underscore-dangle */
2/* eslint-disable class-methods-use-this */
3import React, { Component } from “react”;
4import { StyleSheet, View, TouchableNativeFeedback } from “react-native”;
5import { Text, Container, Content, Button } from “native-base”;
6import { connect } from “react-redux”;
7import _ from “lodash”;
8// import * as authActions from ‘../../actions/authActions’;
9import { store } from “../../../store”;
10import api from “../../../api”;
11import Header from “../../../components/Header”;
12import Loading from “../../../components/Loading”;
13
14const { theme } = store.getState();
15
16const styles = StyleSheet.create({
17 headerText: {
18 fontFamily: “Open_Sans”,
19 fontSize: 18,
20 color: “#5b5a5a”
21 },
22 orText: {
23 fontFamily: “Open_Sans”,
24 fontSize: 14,
25 color: “#5B5A5A”
26 },
27 headerQuotasText: {
28 marginTop: 20
29 },
30 center: {
31 justifyContent: “center”,
32 alignItems: “center”
33 },
34 or: {
35 marginTop: 10,
36 marginBottom: 10
37 },
38 listGroups: {
39 flexDirection: “row”,
40 flexWrap: “wrap”
41 },
42 listQuotas: {
43 flexDirection: “row”,
44 flexWrap: “wrap”
45 },
46 buttonsBlock: {
47 marginTop: 25
48 },
49 item: {
50 width: 72,
51 height: 32,
52 alignItems: “center”,
53 justifyContent: “center”,
54 borderRadius: 4,
55 marginRight: 10,
56 marginTop: 10
57 },
58 activeItem: {
59 backgroundColor: theme.colors.primary
60 },
61 itemText: {
62 color: “#5b5a5a”
63 },
64 activeItemText: {
65 color: theme.colors.secondary
66 },
67 button: {
68 backgroundColor: theme.colors.primary
69 },
70 buttonSecondary: {
71 borderColor: theme.colors.primary,
72 backgroundColor: “white”,
73 borderWidth: 1,
74 elevation: 0
75 },
76 textPrimary: {
77 color: theme.colors.primary
78 },
79 textSecondary: {
80 color: theme.colors.secondary,
81 textAlign: “center”
82 }
83});
84
85class Home extends Component {
86 constructor(props) {
87 super(props);
88
89 this.state = {
90 data: [],
91 activeGroup: null,
92 activeQuota: null
93 };
94 }
95
96 async componentDidMount() {
97 const { auth } = this.props;
98
99 this.setState({
100 loading: true
101 });
102
103 try {
104 const res = await api.get(
105 `/vendedor/reserva?codvend=${auth.user.usuarioRevendaUsuario}`
106 );
107
108 if (res.data.status === 200) {
109 this.setState({
110 data: res.data.response
111 });
112 }
113 } catch (err) {
114 alert(“Erro ao buscar informações”);
115 }
116
117 this.setState({
118 loading: false
119 });
120 }
121
122 render() {
123 const { data, activeGroup, activeQuota, loading } = this.state;
124
125 return (
126 <Container>
127 <Header title={“Cadastrar Venda”} />
128 <Content padder>
129 {loading ? (
130 <Loading />
131 ) : (
132 <View style={styles.container}>
133 <Text style={styles.headerText}>
134 Selecione o Grupo
135 </Text>
136 <View style={styles.listGroups}>
137 {_.uniqBy(data, “grupo”)
138 .filter(d => !!d.grupo)
139 .map((g, key) => {
140 return (
141 <TouchableNativeFeedback
142 key={key}
143 onPress={() => {
144 this.setState({
145 activeGroup: g.grupo,
146 activeQuota: null
147 });
148 }}
149 >
150 <View
151 style={[
152 styles.item,
153 activeGroup === g.grupo
154 ? styles.activeItem
155 : {}
156 ]}
157 >
158 <Text
159 style={[
160 styles.itemText,
161 activeGroup ===
162 g.grupo
163 ? styles.activeItemText
164 : {}
165 ]}
166 >
167 {g.grupo}
168 </Text>
169 </View>
170 </TouchableNativeFeedback>
171 );
172 })}
173 </View>
174 {activeGroup && (
175 <>
176 <Text
177 style={[
178 styles.headerText,
179 styles.headerQuotasText
180 ]}
181 >
182 Selecione uma ou mais cotas:
183 </Text>
184 <View style={styles.listQuotas}>
185 {data
186 .filter(
187 d =>
188 d.grupo === activeGroup &&
189 d.grupo
190 )
191 .map((q, key) => (
192 <TouchableNativeFeedback
193 key={key}
194 onPress={() => {
195 this.setState({
196 activeQuota: q.quota
197 });
198 }}
199 >
200 <View
201 style={[
202 styles.item,
203 activeQuota ===
204 q.quota
205 ? styles.activeItem
206 : {}
207 ]}
208 >
209 <Text
210 style={[
211 styles.itemText,
212 activeQuota ===
213 q.quota
214 ? styles.activeItemText
215 : {}
216 ]}
217 >
218 {q.quota}
219 </Text>
220 </View>
221 </TouchableNativeFeedback>
222 ))}
223 </View>
224 </>
225 )}
226 <View style={styles.buttonsBlock}>
227 <Button
228 rounded
229 block
230 style={activeQuota ? styles.button : {}}
231 disabled={!activeQuota}
232 onPress={() => {
233 const { navigation } = this.props;
234
235 navigation.navigate(“VendaAddress”);
236 }}
237 >
238 <Text style={styles.textSecondary}>
239 Cadastrar Venda
240 </Text>
241 </Button>
242 </View>
243 </View>
244 )}
245 </Content>
246 </Container>
247 );
248 }
249}
250
251export default connect(
252 state => ({
253 auth: state.auth
254 }),
255 dispatch => ({
256 // login: (params) => dispatch(authActions.login(params)),
257 })
258)(Home);/* eslint-disable no-underscore-dangle */
259/* eslint-disable class-methods-use-this */
260import React, { Component } from “react”;
261import { StyleSheet, View, TouchableNativeFeedback } from “react-native”;
262import { Text, Container, Content, Button } from “native-base”;
263import { connect } from “react-redux”;
264import _ from “lodash”;
265// import * as authActions from ‘../../actions/authActions’;
266import { store } from “../../../store”;
267import api from “../../../api”;
268import Header from “../../../components/Header”;
269import Loading from “../../../components/Loading”;
270
271const { theme } = store.getState();
272
273const styles = StyleSheet.create({
274 headerText: {
275 fontFamily: “Open_Sans”,
276 fontSize: 18,
277 color: “#5b5a5a”
278 },
279 orText: {
280 fontFamily: “Open_Sans”,
281 fontSize: 14,
282 color: “#5B5A5A”
283 },
284 headerQuotasText: {
285 marginTop: 20
286 },
287 center: {
288 justifyContent: “center”,
289 alignItems: “center”
290 },
291 or: {
292 marginTop: 10,
293 marginBottom: 10
294 },
295 listGroups: {
296 flexDirection: “row”,
297 flexWrap: “wrap”
298 },
299 listQuotas: {
300 flexDirection: “row”,
301 flexWrap: “wrap”
302 },
303 buttonsBlock: {
304 marginTop: 25
305 },
306 item: {
307 width: 72,
308 height: 32,
309 alignItems: “center”,
310 justifyContent: “center”,
311 borderRadius: 4,
312 marginRight: 10,
313 marginTop: 10
314 },
315 activeItem: {
316 backgroundColor: theme.colors.primary
317 },
318 itemText: {
319 color: “#5b5a5a”
320 },
321 activeItemText: {
322 color: theme.colors.secondary
323 },
324 button: {
325 backgroundColor: theme.colors.primary
326 },
327 buttonSecondary: {
328 borderColor: theme.colors.primary,
329 backgroundColor: “white”,
330 borderWidth: 1,
331 elevation: 0
332 },
333 textPrimary: {
334 color: theme.colors.primary
335 },
336 textSecondary: {
337 color: theme.colors.secondary,
338 textAlign: “center”
339 }
340});
341
342class Home extends Component {
343 constructor(props) {
344 super(props);
345
346 this.state = {
347 data: [],
348 activeGroup: null,
349 activeQuota: null
350 };
351 }
352
353 async componentDidMount() {
354 const { auth } = this.props;
355
356 this.setState({
357 loading: true
358 });
359
360 try {
361 const res = await api.get(
362 `/vendedor/reserva?codvend=${auth.user.usuarioRevendaUsuario}`
363 );
364
365 if (res.data.status === 200) {
366 this.setState({
367 data: res.data.response
368 });
369 }
370 } catch (err) {
371 alert(“Erro ao buscar informações”);
372 }
373
374 this.setState({
375 loading: false
376 });
377 }
378
379 render() {
380 const { data, activeGroup, activeQuota, loading } = this.state;
381
382 return (
383 <Container>
384 <Header title={“Cadastrar Venda”} />
385 <Content padder>
386 {loading ? (
387 <Loading />
388 ) : (
389 <View style={styles.container}>
390 <Text style={styles.headerText}>
391 Selecione o Grupo
392 </Text>
393 <View style={styles.listGroups}>
394 {_.uniqBy(data, “grupo”)
395 .filter(d => !!d.grupo)
396 .map((g, key) => {
397 return (
398 <TouchableNativeFeedback
399 key={key}
400 onPress={() => {
401 this.setState({
402 activeGroup: g.grupo,
403 activeQuota: null
404 });
405 }}
406 >
407 <View
408 style={[
409 styles.item,
410 activeGroup === g.grupo
411 ? styles.activeItem
412 : {}
413 ]}
414 >
415 <Text
416 style={[
417 styles.itemText,
418 activeGroup ===
419 g.grupo
420 ? styles.activeItemText
421 : {}
422 ]}
423 >
424 {g.grupo}
425 </Text>
426 </View>
427 </TouchableNativeFeedback>
428 );
429 })}
430 </View>
431 {activeGroup && (
432 <>
433 <Text
434 style={[
435 styles.headerText,
436 styles.headerQuotasText
437 ]}
438 >
439 Selecione uma ou mais cotas:
440 </Text>
441 <View style={styles.listQuotas}>
442 {data
443 .filter(
444 d =>
445 d.grupo === activeGroup &&
446 d.grupo
447 )
448 .map((q, key) => (
449 <TouchableNativeFeedback
450 key={key}
451 onPress={() => {
452 this.setState({
453 activeQuota: q.quota
454 });
455 }}
456 >
457 <View
458 style={[
459 styles.item,
460 activeQuota ===
461 q.quota
462 ? styles.activeItem
463 : {}
464 ]}
465 >
466 <Text
467 style={[
468 styles.itemText,
469 activeQuota ===
470 q.quota
471 ? styles.activeItemText
472 : {}
473 ]}
474 >
475 {q.quota}
476 </Text>
477 </View>
478 </TouchableNativeFeedback>
479 ))}
480 </View>
481 </>
482 )}
483 <View style={styles.buttonsBlock}>
484 <Button
485 rounded
486 block
487 style={activeQuota ? styles.button : {}}
488 disabled={!activeQuota}
489 onPress={() => {
490 const { navigation } = this.props;
491
492 navigation.navigate(“VendaAddress”);
493 }}
494 >
495 <Text style={styles.textSecondary}>
496 Cadastrar Venda
497 </Text>
498 </Button>
499 </View>
500 </View>
501 )}
502 </Content>
503 </Container>
504 );
505 }
506}
507
508export default connect(
509 state => ({
510 auth: state.auth
511 }),
512 dispatch => ({
513 // login: (params) => dispatch(authActions.login(params)),
514 })
515)(Home);