-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(29913): parametrizacao dos tipos de conta (#1813)
Co-authored-by: Matheus <matheus.diori@amcom.com.br>
- Loading branch information
Showing
11 changed files
with
623 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/BtnAddTipoConta.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import React from "react"; | ||
|
||
export const BtnAddTipoConta = ({FontAwesomeIcon, faPlus, setShowModalForm, initialStateFormModal, setStateFormModal}) =>{ | ||
return( | ||
<div className="d-flex justify-content-end pb-4 mt-2"> | ||
<button onClick={()=>{ | ||
setStateFormModal(initialStateFormModal); | ||
setShowModalForm(true); | ||
} | ||
} type="button" className="btn btn-base-verde mt-2"> | ||
<FontAwesomeIcon | ||
style={{marginRight: "5", color:"#fff"}} | ||
icon={faPlus} | ||
/> | ||
Adicionar tipo de conta | ||
</button> | ||
</div> | ||
); | ||
}; |
43 changes: 43 additions & 0 deletions
43
src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/Filtros.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import React from "react"; | ||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
import { faSearch } from "@fortawesome/free-solid-svg-icons"; | ||
import '../parametrizacoes-estrutura.scss' | ||
|
||
export const Filtros = ({ stateFiltros, handleChangeFiltros, handleSubmitFiltros }) => { | ||
const handleFormSubmit = (e) => { | ||
e.preventDefault(); | ||
handleSubmitFiltros(); | ||
}; | ||
|
||
return ( | ||
<> | ||
<form onSubmit={handleFormSubmit}> | ||
<div className="d-flex bd-highlight mt-2 mb-3"> | ||
<div className="p-2 pt-3 flex-grow bd-highlight"> | ||
<label htmlFor="filtro-nome">Pesquisar</label> | ||
</div> | ||
<div className="p-2 flex-grow-1 bd-highlight"> | ||
<input | ||
value={stateFiltros.nome} | ||
onChange={(e) => handleChangeFiltros(e.target.name, e.target.value)} | ||
name="nome" | ||
id="filtro-nome" | ||
type="text" | ||
className="form-control" | ||
placeholder="Busque por tipos de conta" | ||
style={{ display: 'inline-block' }} | ||
/> | ||
</div> | ||
<div className="p-2 bd-highlight"> | ||
<button className="btn-pesquisar-tipos-conta" type="submit"> | ||
<FontAwesomeIcon | ||
style={{ fontSize: '20px', marginTop: "8px", color: "#42474A" }} | ||
icon={faSearch} | ||
/> | ||
</button> | ||
</div> | ||
</div> | ||
</form> | ||
</> | ||
); | ||
}; |
183 changes: 183 additions & 0 deletions
183
src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalAddEditTipoConta.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,183 @@ | ||
import React, {memo} from "react"; | ||
import {ModalFormBodyText} from "../../../../Globais/ModalBootstrap"; | ||
import {Formik} from "formik"; | ||
import {YupSchemaTipoConta} from "./YupSchemaTipoConta"; | ||
|
||
const ModalAddEditTipoConta = ({show, stateFormModal, handleClose, handleSubmitModalFormTiposConta, setShowModalConfirmDeleteTipoConta}) => { | ||
|
||
const bodyTextarea = () => { | ||
return ( | ||
<> | ||
<Formik | ||
initialValues={stateFormModal} | ||
validationSchema={YupSchemaTipoConta} | ||
validateOnBlur={true} | ||
enableReinitialize={true} | ||
onSubmit={handleSubmitModalFormTiposConta} | ||
> | ||
{props => { | ||
const { | ||
values, | ||
} = props; | ||
return( | ||
<form onSubmit={props.handleSubmit}> | ||
<div className='row'> | ||
<div className='col'> | ||
<div className="form-group"> | ||
<label htmlFor="nome">Nome do tipo de conta *</label> | ||
<input | ||
type="text" | ||
value={props.values.nome} | ||
name="nome" | ||
id="nome" | ||
className="form-control" | ||
onChange={props.handleChange} | ||
/> | ||
{props.touched.nome && props.errors.nome && <span className="span_erro text-danger mt-1"> {props.errors.nome} </span>} | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div className='row'> | ||
<div className='col'> | ||
<div className="form-group"> | ||
<label htmlFor="banco_nome">Nome do banco</label> | ||
<input | ||
type="text" | ||
value={props.values.banco_nome} | ||
name="banco_nome" | ||
id="banco_nome" | ||
className="form-control" | ||
onChange={props.handleChange} | ||
/> | ||
{props.touched.banco_nome && props.errors.banco_nome && <span className="span_erro text-danger mt-1"> {props.errors.banco_nome} </span>} | ||
</div> | ||
</div> | ||
<div className='col'> | ||
<div className="form-group"> | ||
<label htmlFor="agencia">Nº da agência</label> | ||
<input | ||
type="text" | ||
value={props.values.agencia} | ||
name="agencia" | ||
id="agencia" | ||
className="form-control" | ||
onChange={props.handleChange} | ||
/> | ||
{props.touched.agencia && props.errors.agencia && <span className="span_erro text-danger mt-1"> {props.errors.agencia} </span>} | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div className='row'> | ||
<div className='col'> | ||
<div className="form-group"> | ||
<label htmlFor="numero_conta">Nº da conta</label> | ||
<input | ||
type="text" | ||
value={props.values.numero_conta} | ||
name="numero_conta" | ||
id="numero_conta" | ||
className="form-control" | ||
onChange={props.handleChange} | ||
/> | ||
{props.touched.numero_conta && props.errors.numero_conta && <span className="span_erro text-danger mt-1"> {props.errors.numero_conta} </span>} | ||
</div> | ||
</div> | ||
<div className='col'> | ||
<div className="form-group"> | ||
<label htmlFor="numero_cartao">Nº do cartão</label> | ||
<input | ||
type="text" | ||
value={props.values.numero_cartao} | ||
name="numero_cartao" | ||
id="numero_cartao" | ||
className="form-control" | ||
onChange={props.handleChange} | ||
/> | ||
{props.touched.numero_cartao && props.errors.numero_cartao && <span className="span_erro text-danger mt-1"> {props.errors.numero_cartao} </span>} | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div className='row'> | ||
<div className='col ml-4'> | ||
<div className="form-group"> | ||
<input | ||
checked={props.values.apenas_leitura} | ||
type="checkbox" | ||
name="apenas_leitura" | ||
id="apenas_leitura" | ||
className="form-check-input" | ||
onChange={props.handleChange} | ||
/> | ||
<label className="form-check-label marcar-como-lida" | ||
style={{ color: "#42474A" }} | ||
htmlFor="apenas_leitura">Exibir os dados da conta somente leitura</label> | ||
</div> | ||
</div> | ||
<div className='col ml-4'> | ||
<div className="form-group"> | ||
<input | ||
checked={props.values.permite_inativacao} | ||
type="checkbox" | ||
name="permite_inativacao" | ||
id="permite_inativacao" | ||
className="form-check-input" | ||
onChange={props.handleChange} | ||
/> | ||
<label className="form-check-label marcar-como-lida" | ||
style={{ color: "#42474A" }} | ||
htmlFor="permite_inativacao">Conta permite encerramento</label> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<hr /> | ||
|
||
<div className='row mt-3'> | ||
<div className='col'> | ||
<p className='mb-2'>Uuid</p> | ||
<p className='mb-2'>{values.uuid}</p> | ||
</div> | ||
<div className='col'> | ||
<p className='mb-2'>ID</p> | ||
<p className='mb-2'>{values.id}</p> | ||
</div> | ||
</div> | ||
<div className="d-flex bd-highlight mt-2"> | ||
<div className="p-Y flex-grow-1 bd-highlight"> | ||
{values.operacao === 'edit' ? ( | ||
<button onClick={()=>setShowModalConfirmDeleteTipoConta(true)} type="button" className="btn btn-base-vermelho mt-2 mr-2"> | ||
Apagar tipo de conta | ||
</button> | ||
): null} | ||
</div> | ||
<div className="p-Y bd-highlight"> | ||
<button onClick={()=>handleClose()} type="button" className={`btn btn-base-verde-outline mt-2 mr-2`}>Cancelar</button> | ||
</div> | ||
|
||
<div className="p-Y bd-highlight"> | ||
<button type="submit" className="btn btn-base-verde mt-2">Salvar</button> | ||
</div> | ||
</div> | ||
</form> | ||
); | ||
}} | ||
</Formik> | ||
</> | ||
) | ||
}; | ||
|
||
return ( | ||
<ModalFormBodyText | ||
show={show} | ||
titulo={stateFormModal && stateFormModal.uuid ? 'Editar tipo de conta' : 'Adicionar tipo de conta'} | ||
onHide={handleClose} | ||
size='lg' | ||
bodyText={bodyTextarea()} | ||
/> | ||
) | ||
}; | ||
|
||
export default memo(ModalAddEditTipoConta) |
19 changes: 19 additions & 0 deletions
19
src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalConfirmDeleteTipoConta.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import {ModalBootstrap} from "../../../../Globais/ModalBootstrap"; | ||
import React from "react"; | ||
|
||
export const ModalConfirmDeleteTipoConta = (props) => { | ||
return ( | ||
<ModalBootstrap | ||
show={props.show} | ||
onHide={props.handleClose} | ||
titulo={props.titulo} | ||
bodyText={props.texto} | ||
primeiroBotaoOnclick={props.handleClose} | ||
primeiroBotaoTexto={props.primeiroBotaoTexto} | ||
primeiroBotaoCss={props.primeiroBotaoCss} | ||
segundoBotaoOnclick={props.onDeleteTipoContaTrue} | ||
segundoBotaoCss={props.segundoBotaoCss} | ||
segundoBotaoTexto={props.segundoBotaoTexto} | ||
/> | ||
) | ||
}; |
24 changes: 24 additions & 0 deletions
24
src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/TabelaTiposConta.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React, {memo} from "react"; | ||
import { DataTable } from 'primereact/datatable'; | ||
import { Column } from 'primereact/column'; | ||
|
||
const TabelaTiposContas = ({rowsPerPage, listaDeTiposContas, acoesTemplate})=>{ | ||
return( | ||
<DataTable | ||
value={listaDeTiposContas} | ||
rows={rowsPerPage} | ||
paginator={listaDeTiposContas.length > rowsPerPage} | ||
paginatorTemplate="PrevPageLink PageLinks NextPageLink" | ||
> | ||
<Column field="nome" header="Tipo de conta" /> | ||
<Column | ||
field="acoes" | ||
header="Ações" | ||
body={acoesTemplate} | ||
style={{width:'100px'}} | ||
/> | ||
</DataTable> | ||
); | ||
}; | ||
export default memo(TabelaTiposContas) | ||
|
5 changes: 5 additions & 0 deletions
5
src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/YupSchemaTipoConta.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import * as yup from "yup"; | ||
|
||
export const YupSchemaTipoConta = yup.object().shape({ | ||
nome: yup.string().required("Nome é obrigatório"), | ||
}); |
Oops, something went wrong.