Skip to content

Commit

Permalink
feat(29913): parametrizacao dos tipos de conta (#1814)
Browse files Browse the repository at this point in the history 
Co-authored-by: Lucas Santos Rocha <67693972+Lucas-Santos-Rocha-dev@users.noreply.github.com>
Co-authored-by: Matheus <matheus.diori@amcom.com.br>
  • Loading branch information
@mdiori @Lucas-Santos-Rocha-dev
3 people authored Jul 12, 2023
1 parent e77d096 commit 2150e52
Show file tree
Hide file tree
Showing 11 changed files with 623 additions and 0 deletions.
66 changes: 66 additions & 0 deletions src/assets/css/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,37 @@ body {
border: none !important;
}

.btn-base-vermelho {
color: #ffffff !important;
transition: 0s background-color;
background-color: $corBtnErrorPrimaria !important;

.icon-btn-base-vermelho {
color: #ffffff;
margin-right: 7px;
font-size: 14px;
transition: 0s color;
}

.text-btn-base-vermelho {
font-size: 14px;
}

&:hover {
background-color: $corBtnErrorSecundaria !important;
}

&:disabled {
border-color: $corBtnDisabled !important;
color: $corBtnDisabled !important;
cursor: default;

.icon-btn-base-vermelho {
color: $corBtnDisabled;
}
}
}

.btn-base-vermelho-outline {
border-color: $corBtnErrorPrimaria;
color: $corBtnErrorPrimaria;
Expand Down Expand Up @@ -234,6 +265,41 @@ body {
}
}

.btn-base-verde {
color: #ffffff !important;
transition: 0s background-color;
background-color: $mainColor !important;

.icon-btn-base-verde {
color: #ffffff;
margin-right: 7px;
font-size: 14px;
transition: 0s color;
}

.text-btn-base-verde {
font-size: 14px;
}

&:hover {
background-color: $hoverBackgroundColor !important;

.icon-btn-base-verde {
color: $hoverBackgroundColor;
}
}

&:disabled {
border-color: $corBtnDisabled !important;
color: $corBtnDisabled !important;
cursor: default;

.icon-btn-base-verde {
color: $corBtnDisabled;
}
}
}

.btn-base-verde-outline {
border-color: $mainColor;
color: $mainColor;
Expand Down
19 changes: 19 additions & 0 deletions src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/BtnAddTipoConta.js
View file
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 src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/Filtros.js
View file
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 src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalAddEditTipoConta.js
View file
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 src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalConfirmDeleteTipoConta.js
View file
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 src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/TabelaTiposConta.js
View file
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 src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/YupSchemaTipoConta.js
View file
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"),
});
Loading

0 comments on commit 2150e52

Please sign in to comment.