From 2444a34e3b7617f2180eb7f189a9d95376d75a4f Mon Sep 17 00:00:00 2001 From: Guilherme Valerio <33501800+guivalerioS@users.noreply.github.com> Date: Wed, 18 Sep 2019 20:27:25 -0300 Subject: [PATCH] Add files via upload --- .../src/screens/ConfirmacaoFeirante/index.js | 709 ++++++++++-------- 1 file changed, 378 insertions(+), 331 deletions(-) diff --git a/frontend/src/screens/ConfirmacaoFeirante/index.js b/frontend/src/screens/ConfirmacaoFeirante/index.js index a07f827..55fd09c 100644 --- a/frontend/src/screens/ConfirmacaoFeirante/index.js +++ b/frontend/src/screens/ConfirmacaoFeirante/index.js @@ -1,331 +1,378 @@ -import React, { PureComponent } from "react"; - -import { Row, Form, Steps, Modal, Button, Select, Alert } from "antd"; -import moment from "moment-timezone"; -import * as feiraAPI from "../../api/feira"; -import classNames from "classnames"; - -import ContentComponent from "../../components/ContentComponent"; - -import * as avisoAPI from "../../api/aviso"; -import * as participaAPI from "../../api/participa"; -import styles from "./ConfirmacaoFeirante.module.scss"; -import AvisoComponent from "../../components/AvisoComponent"; - -import { SVGMap } from "react-svg-map"; -import Map from "../Mapeamento/Mapa"; - -const { Step } = Steps; -const Option = Select.Option; - -class ConfirmacaoFeirante extends PureComponent { - state = { - avisos: [], - feiraAtual: {}, - loading: true, - visible: false, - current: 0, - selectedPeriodo: null, - participacao: {}, - - customMap: { - ...Map - } - }; - - componentDidMount() { - this.props.form.validateFields(); - this._loadValues(); - } - - _loadValues = async () => { - try { - this.setState({ loading: true }); - const avisos = await avisoAPI.getAvisosProximaFeira(); - const feiraAtual = await feiraAPI.feiraAtual(); - this.setState({ avisos, feiraAtual: feiraAtual }); - await this._getUltimaFeira(); - this.setState({ loading: false }); - } catch (ex) { - console.warn(ex); - this.setState({ loading: false }); - } - }; - - _getUltimaFeira = async () => { - const { feiraAtual } = this.state; - const participacao = await participaAPI.getParticipacaoUltimaFeira(); - if (participacao.length) { - let current = 0; - const ultimaFeira = participacao[0]; - - if (moment(feiraAtual.data).isSame(moment(ultimaFeira.data_feira))) { - if (ultimaFeira.periodo && !ultimaFeira.celula_id) { - current = 1; - } else if (ultimaFeira.periodo && ultimaFeira.celula_id) { - current = 2; - } - } - - this.setState({ participacao: participacao[0], current }); - } - }; - - _showModal = () => { - this.setState({ visible: true }); - }; - - _onChangePeriodo = value => { - this.setState({ selectedPeriodo: value }); - }; - - _hideModal = () => { - this.setState({ visible: false }); - }; - - _confirmaFeirante = () => { - const { selectedPeriodo } = this.state; - return participaAPI - .setPeriodo(selectedPeriodo) - .then(response => { - this.setState({ current: 1, selectedPeriodo: null }); - }) - .catch(ex => { - console.error(ex); - }); - }; - - _renderCelulaColor = (celulaDoMapa, index) => { - const { participacao } = this.state; - - if (celulaDoMapa.id !== participacao.celula_id) return "celulaMapa livre"; - return "celulaMapa diaTodo"; - }; - - _cancelaParticipacao = () => { - return participaAPI - .cancelaParticipacao() - .then(() => { - this.setState({ current: 0 }); - }) - .catch(ex => { - console.error(ex); - }); - }; - - _loadCelulas = () => { - const { confirmados, customMap, selectedCelula } = this.state; - const newMap = { - ...customMap, - locations: customMap.locations.map((location, index) => { - const feirantes = confirmados.feirantes - ? confirmados.feirantes.filter( - feirante => feirante.celulaId === index - ) - : []; - const newLocation = { - ...location, - id: index, - key: index, - name: `Celula ${index}`, - feirantes - }; - - return newLocation; - }) - }; - - this.setState({ customMap: newMap }); - - if (selectedCelula) { - this._refreshCelula(); - } - }; - - _findCelula = id => { - const { customMap } = this.state; - return customMap.locations.find(location => location.id === id); - }; - - _renderCurrentStep = () => { - const { current, feiraAtual = {}, selectedPeriodo, customMap } = this.state; - - function onBlur() { - console.log("blur"); - } - - function onFocus() { - console.log("focus"); - } - - if (current === 0) { - return ( - <> -

- Você tem até o dia{" "} - {moment(feiraAtual.data_limite).format("DD/MM/YYYY [às] HH:mm")}{" "} - para confirmar presença -

-
- - - -
- - ); - } - - if (current === 1) { - return ( - <> -

- Aguardando alocação e confirmação. -

-
- -
- - ); - } - - if (current === 2) { - return ( - <> -
- - -

- Você tem até o dia{" "} - {moment(feiraAtual.data_limite).format("DD/MM/YYYY [às] HH:mm")}{" "} - para cancelar presença -

- -
- - ); - } - }; - - _renderAvisos = () => { - const { avisos } = this.state; - - return ( -
-

Avisos

- {avisos.length ? ( - - {avisos.map(aviso => { - return ; - })} - - ) : ( -

Sem avisos para a próxima feira

- )} -
- ); - }; - - _renderFotoEventoFeira = () => { - const { feiraAtual } = this.state; - - const feiraEventoImagem = feiraAtual.evento_image_url; - if (!feiraEventoImagem) return null; - return ( -
- ); - }; - - render() { - const { loading, feiraAtual, current, visible } = this.state; - - if (loading) return null; - if (feiraAtual.data === undefined) { - return ( - - - - ); - } - - return ( - - {this._renderFotoEventoFeira()} - {this._renderAvisos()} - - - - - - - - {this._renderCurrentStep()} - - - evento - - - ); - } -} - -const WrappedHorizontalConfirmacaoFeiranteForm = Form.create({ - name: "feiras_form" -})(ConfirmacaoFeirante); - -export default WrappedHorizontalConfirmacaoFeiranteForm; +import React, { PureComponent } from "react"; + +import { Row, Form, Steps, Modal, Button, Select, Alert } from "antd"; +import moment from "moment-timezone"; +import * as feiraAPI from "../../api/feira"; +import classNames from "classnames"; + +import ContentComponent from "../../components/ContentComponent"; + +import * as avisoAPI from "../../api/aviso"; +import * as participaAPI from "../../api/participa"; +import styles from "./ConfirmacaoFeirante.module.scss"; +import AvisoComponent from "../../components/AvisoComponent"; + +import { SVGMap } from "react-svg-map"; +import Map from "../Mapeamento/Mapa"; + +const { Step } = Steps; +const Option = Select.Option; + +class ConfirmacaoFeirante extends PureComponent { + state = { + avisos: [], + feiraAtual: {}, + loading: true, + visible: false, + current: 0, + selectedPeriodo: null, + participacao: {}, + + customMap: { + ...Map + } + }; + + componentDidMount() { + this.props.form.validateFields(); + this._loadValues(); + } + + _loadValues = async () => { + try { + this.setState({ loading: true }); + const avisos = await avisoAPI.getAvisosProximaFeira(); + const feiraAtual = await feiraAPI.feiraAtual(); + this.setState({ avisos, feiraAtual: feiraAtual }); + await this._getUltimaFeira(); + this.setState({ loading: false }); + } catch (ex) { + console.warn(ex); + this.setState({ loading: false }); + } + }; + + _getUltimaFeira = async () => { + const { feiraAtual } = this.state; + const participacao = await participaAPI.getParticipacaoUltimaFeira(); + if (participacao.length) { + let current = 0; + const ultimaFeira = participacao[0]; + + if (moment(feiraAtual.data).isSame(moment(ultimaFeira.data_feira))) { + if (ultimaFeira.periodo && !ultimaFeira.celula_id) { + current = 1; + } else if (ultimaFeira.periodo && ultimaFeira.celula_id) { + current = 2; + } + } + + this.setState({ participacao: participacao[0], current }); + } + }; + + _showModal = () => { + this.setState({ visible: true }); + }; + + _onChangePeriodo = value => { + this.setState({ selectedPeriodo: value }); + }; + + _hideModal = () => { + this.setState({ visible: false }); + }; + + _confirmaFeirante = () => { + const { selectedPeriodo } = this.state; + return participaAPI + .setPeriodo(selectedPeriodo) + .then(response => { + this.setState({ current: 1, selectedPeriodo: null }); + }) + .catch(ex => { + console.error(ex); + }); + }; + + _renderCelulaColor = (celulaDoMapa, index) => { + const { participacao } = this.state; + + if (celulaDoMapa.id !== participacao.celula_id) return "celulaMapa livre"; + return "celulaMapa diaTodo"; + }; + + _cancelaParticipacao = () => { + return participaAPI + .cancelaParticipacao() + .then(() => { + this.setState({ current: 0 }); + }) + .catch(ex => { + console.error(ex); + }); + }; + + _loadCelulas = () => { + const { confirmados, customMap, selectedCelula } = this.state; + const newMap = { + ...customMap, + locations: customMap.locations.map((location, index) => { + const feirantes = confirmados.feirantes + ? confirmados.feirantes.filter( + feirante => feirante.celulaId === index + ) + : []; + const newLocation = { + ...location, + id: index, + key: index, + name: `Celula ${index}`, + feirantes + }; + + return newLocation; + }) + }; + + this.setState({ customMap: newMap }); + + if (selectedCelula) { + this._refreshCelula(); + } + }; + + _findCelula = id => { + const { customMap } = this.state; + return customMap.locations.find(location => location.id === id); + }; + + _renderCurrentStep = () => { + const { current, feiraAtual = {}, selectedPeriodo, customMap } = this.state; + + function onBlur() { + console.log("blur"); + } + + function onFocus() { + console.log("focus"); + } + + if (current === 0) { + return ( + <> +

+ Você tem até o dia{" "} + {moment(feiraAtual.data_limite).format("DD/MM/YYYY [às] HH:mm")}{" "} + para confirmar presença +

+
+ + + +
+ + ); + } + + if (current === 1) { + return ( + <> +

+ Aguardando alocação e confirmação. +

+
+ +
+ + ); + } + + if (current === 2) { + return ( + <> +
+ + +

+ Você tem até o dia{" "} + {moment(feiraAtual.data_limite).format("DD/MM/YYYY [às] HH:mm")}{" "} + para cancelar presença +

+ +
+ + ); + } + }; + + _renderAvisos = () => { + const { avisos } = this.state; + + return ( +
+

Avisos

+ {avisos.length ? ( + + {avisos.map(aviso => { + return ; + })} + + ) : ( +

Sem avisos para a próxima feira

+ )} +
+ ); + }; + + _renderFotoEventoFeira = () => { + const { feiraAtual } = this.state; + + const feiraEventoImagem = feiraAtual.evento_image_url; + if (!feiraEventoImagem) return null; + return ( +
+ ); + }; + + _renderSteps = () => { + const { current = 0 } = this.state; + return ( + <> + + + + + + + {this._renderCurrentStep()} + + ) + + } + + _renderAlert = () => { + const { history } = this.props; + return ( + + +

É necessário lançar o faturamento da última feira para prosseguir

+ +
+ } + type="info" + showIcon + /> + + ); + + } + + _renderContent = () => { + const { feiraAtual, visible, participacao } = this.state; + return ( + <> + {this._renderFotoEventoFeira()} + {this._renderAvisos()} + + { + !participacao.faturamento && !moment(feiraAtual.data, 'yyyy-mm-dd').isSame(moment(participacao.data_feira)) + ? this._renderAlert() + : this._renderSteps() + } + + + evento + + + ) + } + + render() { + const { loading, feiraAtual } = this.state; + + return ( + + { + !loading && !feiraAtual.data + ? ( + + ) : this._renderContent() + + } + + ); + } +} + +const WrappedHorizontalConfirmacaoFeiranteForm = Form.create({ + name: "feiras_form" +})(ConfirmacaoFeirante); + +export default WrappedHorizontalConfirmacaoFeiranteForm;