diff --git a/src/views/administrador/pages/EditarTipoDeACC.tsx b/src/views/administrador/pages/EditarTipoDeACC.tsx new file mode 100644 index 0000000..8cedb5a --- /dev/null +++ b/src/views/administrador/pages/EditarTipoDeACC.tsx @@ -0,0 +1,244 @@ +import React, { FormEvent } from 'react'; +import { + Box, + Button, + Flex, + FormControl, + FormLabel, + GridItem, + Heading, + Input, + Select, + SimpleGrid, + Textarea, +} from '@chakra-ui/react'; +import { RouteComponentProps } from 'react-router-dom'; +import api from '../../../services/api'; +import { notifyError, notifySuccess } from '../../../components/Notifications'; + +interface IUnidadeDeMedida { + id: number; + nome: string; +} + +interface IState { + unidadesDeMedida: Array; + isCreating: boolean; + + nome: string; + idUnidadeDeMedida: number; + pontosPorUnidade: string; + limiteDePontos: string; + descricao: string; +} + +interface IMatchParams { + id: string; +} + +type IMatchProps = RouteComponentProps; + +class EditarTipoDeACC extends React.Component { + constructor(props: IMatchProps) { + super(props); + this.state = { + unidadesDeMedida: [], + isCreating: false, + + nome: '', + idUnidadeDeMedida: 0, + pontosPorUnidade: '', + limiteDePontos: '', + descricao: '', + }; + } + + async componentDidMount(): Promise { + try { + const responseUnidades = await api.get('unidades-de-medida'); + + this.setState({ + unidadesDeMedida: responseUnidades.data.unidadesDeMedida, + }); + + const { match } = this.props; + const { params } = match; + const { id } = params; + + const responseTiposDeACC = await api.get(`tipos-de-acc/${id}`); + + this.setState({ + nome: responseTiposDeACC.data.tipoDeACC.nome, + idUnidadeDeMedida: responseTiposDeACC.data.tipoDeACC.unidade_de_medida, + pontosPorUnidade: responseTiposDeACC.data.tipoDeACC.pontos_por_unidade, + descricao: responseTiposDeACC.data.tipoDeACC.sobre, + limiteDePontos: responseTiposDeACC.data.tipoDeACC.limite_de_pontos, + }); + } catch (err) { + notifyError('Não foi possível carregar os dados...'); + } + } + + handleForm = async (e: FormEvent): Promise => { + e.preventDefault(); + + const { + nome, + idUnidadeDeMedida, + pontosPorUnidade, + limiteDePontos, + descricao, + } = this.state; + + const { history, match } = this.props; + + const { params } = match; + const { id } = params; + + this.setState({ + isCreating: true, + }); + + try { + await api.put(`tipos-de-acc/${id}`, { + nome, + pontos_por_unidade: pontosPorUnidade, + limite_de_pontos: limiteDePontos, + sobre: descricao, + unidade_de_medida: idUnidadeDeMedida, + }); + notifySuccess('O Tipo de ACC foi atualizado!'); + history.push('/administrador/tipos-de-acc'); + } catch (err) { + notifyError('Não foi possível atualizar o Tipo de ACC...'); + } finally { + this.setState({ + isCreating: false, + }); + } + }; + + render(): JSX.Element { + const { + unidadesDeMedida, + isCreating, + nome, + idUnidadeDeMedida, + pontosPorUnidade, + limiteDePontos, + descricao, + } = this.state; + + return ( +
+ Editar Tipo de ACC + +
+ + + Nome da Atividade + this.setState({ nome: e.target.value })} + /> + + + + + + + + Unidade De Medida + + + + + + + + {`Pontos por ${ + unidadesDeMedida.find(u => u.id === idUnidadeDeMedida) + ?.nome || 'Hora' + }`} + + u.id === idUnidadeDeMedida) + ?.nome || 'Hora' + }`} + value={pontosPorUnidade} + onChange={e => { + this.setState({ + pontosPorUnidade: e.target.value, + }); + }} + /> + + + + + + Limite da Pontuação + { + this.setState({ + limiteDePontos: e.target.value, + }); + }} + /> + + + + + + + Descrição +