diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss index 61481c59d..3d03bfb4d 100644 --- a/src/assets/css/styles.scss +++ b/src/assets/css/styles.scss @@ -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; @@ -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; diff --git a/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/BtnAddTipoConta.js b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/BtnAddTipoConta.js new file mode 100644 index 000000000..39d853777 --- /dev/null +++ b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/BtnAddTipoConta.js @@ -0,0 +1,19 @@ +import React from "react"; + +export const BtnAddTipoConta = ({FontAwesomeIcon, faPlus, setShowModalForm, initialStateFormModal, setStateFormModal}) =>{ + return( +
+ +
+ ); +}; \ No newline at end of file diff --git a/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/Filtros.js b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/Filtros.js new file mode 100644 index 000000000..ad182f656 --- /dev/null +++ b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/Filtros.js @@ -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 ( + <> +
+
+
+ +
+
+ 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' }} + /> +
+
+ +
+
+
+ + ); +}; diff --git a/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalAddEditTipoConta.js b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalAddEditTipoConta.js new file mode 100644 index 000000000..b8f2e042c --- /dev/null +++ b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalAddEditTipoConta.js @@ -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 ( + <> + + {props => { + const { + values, + } = props; + return( +
+
+
+
+ + + {props.touched.nome && props.errors.nome && {props.errors.nome} } +
+
+
+ +
+
+
+ + + {props.touched.banco_nome && props.errors.banco_nome && {props.errors.banco_nome} } +
+
+
+
+ + + {props.touched.agencia && props.errors.agencia && {props.errors.agencia} } +
+
+
+ +
+
+
+ + + {props.touched.numero_conta && props.errors.numero_conta && {props.errors.numero_conta} } +
+
+
+
+ + + {props.touched.numero_cartao && props.errors.numero_cartao && {props.errors.numero_cartao} } +
+
+
+ +
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+ +
+
+

Uuid

+

{values.uuid}

+
+
+

ID

+

{values.id}

+
+
+
+
+ {values.operacao === 'edit' ? ( + + ): null} +
+
+ +
+ +
+ +
+
+
+ ); + }} + + + ) + }; + + return ( + + ) +}; + +export default memo(ModalAddEditTipoConta) \ No newline at end of file diff --git a/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalConfirmDeleteTipoConta.js b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalConfirmDeleteTipoConta.js new file mode 100644 index 000000000..41208d388 --- /dev/null +++ b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/ModalConfirmDeleteTipoConta.js @@ -0,0 +1,19 @@ +import {ModalBootstrap} from "../../../../Globais/ModalBootstrap"; +import React from "react"; + +export const ModalConfirmDeleteTipoConta = (props) => { + return ( + + ) +}; \ No newline at end of file diff --git a/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/TabelaTiposConta.js b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/TabelaTiposConta.js new file mode 100644 index 000000000..6a8b1ffc4 --- /dev/null +++ b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/TabelaTiposConta.js @@ -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( + rowsPerPage} + paginatorTemplate="PrevPageLink PageLinks NextPageLink" + > + + + + ); +}; +export default memo(TabelaTiposContas) + diff --git a/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/YupSchemaTipoConta.js b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/YupSchemaTipoConta.js new file mode 100644 index 000000000..0b976fa85 --- /dev/null +++ b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/YupSchemaTipoConta.js @@ -0,0 +1,5 @@ +import * as yup from "yup"; + +export const YupSchemaTipoConta = yup.object().shape({ + nome: yup.string().required("Nome é obrigatório"), +}); \ No newline at end of file diff --git a/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/index.js b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/index.js new file mode 100644 index 000000000..763efc40a --- /dev/null +++ b/src/componentes/sme/Parametrizacoes/Estrutura/TiposConta/index.js @@ -0,0 +1,233 @@ +import React, {useCallback, useEffect, useMemo, useState} from "react"; +import {PaginasContainer} from "../../../../../paginas/PaginasContainer"; +import { + deleteTipoConta, + getFiltroTiposContas, + getTiposContas, + patchTipoConta, + postTipoConta, +} from "../../../../../services/sme/Parametrizacoes.service"; +import Loading from "../../../../../utils/Loading"; +import TabelaTiposConta from "./TabelaTiposConta"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faEdit, faPlus} from "@fortawesome/free-solid-svg-icons"; +import {BtnAddTipoConta} from "./BtnAddTipoConta"; +import {Filtros} from "./Filtros"; +import ModalAddEditTipoConta from "./ModalAddEditTipoConta"; +import { ModalConfirmDeleteTipoConta } from "./ModalConfirmDeleteTipoConta"; +import {toastCustom} from "../../../../Globais/ToastCustom"; + +export const TiposConta = () => { + + const rowsPerPage = 20; + const [listaDeTiposContas, setListaDeTiposContas] = useState([]); + const [loading, setLoading] = useState(true); + + const carregaTiposConta = useCallback(async ()=>{ + setLoading(true); + let tiposContas = await getTiposContas(); + setListaDeTiposContas(tiposContas); + setLoading(false); + }, []); + + useEffect(() => { + carregaTiposConta(); + }, [carregaTiposConta]) + + const totalTiposDeConta = useMemo(() => listaDeTiposContas.length, [listaDeTiposContas]); + + // Filtros + const initialStateFiltros = { + filtrar_por_referencia: "", + }; + const [stateFiltros, setStateFiltros] = useState(initialStateFiltros); + + const handleChangeFiltros = useCallback((name, value) => { + setStateFiltros({ + ...stateFiltros, + [name]: value + }); + }, [stateFiltros]); + + const handleSubmitFiltros = async () => { + setLoading(true); + let tipos_contas_filtradas = await getFiltroTiposContas(stateFiltros.nome); + setListaDeTiposContas(tipos_contas_filtradas); + setLoading(false); + }; + + // Modal + const initialStateFormModal = { + nome: "", + banco_nome: "", + agencia: "", + numero_conta: "", + numero_cartao: "", + apenas_leitura: false, + permite_inativacao: false, + uuid: "", + id: "", + operacao: 'create', + }; + + const [showModalForm, setShowModalForm] = useState(false); + const [stateFormModal, setStateFormModal] = useState(initialStateFormModal); + const [showModalConfirmDeleteTipoConta, setShowModalConfirmDeleteTipoConta] = useState(false); + + const handleEditFormModalTiposConta = useCallback( async (rowData) =>{ + setStateFormModal({ + ...stateFormModal, + nome: rowData.nome, + banco_nome: rowData.banco_nome, + agencia: rowData.agencia, + numero_conta: rowData.numero_conta, + numero_cartao: rowData.numero_cartao, + apenas_leitura: rowData.apenas_leitura, + permite_inativacao: rowData.permite_inativacao, + uuid: rowData.uuid, + id: rowData.id, + operacao: 'edit', + }); + setShowModalForm(true) + }, [stateFormModal]); + + const acoesTemplate = useCallback((rowData) =>{ + return ( +
+ +
+ ) + }, [handleEditFormModalTiposConta]); + + const handleSubmitModalFormTiposConta = useCallback(async (values)=>{ + let payload = { + nome: values.nome, + banco_nome: values.banco_nome, + agencia: values.agencia, + numero_conta: values.numero_conta, + numero_cartao: values.numero_cartao, + apenas_leitura: values.apenas_leitura, + permite_inativacao: values.permite_inativacao + }; + + if (values.operacao === 'create'){ + try{ + await postTipoConta(payload); + toastCustom.ToastCustomSuccess('Inclusão do tipo de conta realizada com sucesso.', 'O tipo de conta foi adicionado ao sistema com sucesso.') + setShowModalForm(false); + await carregaTiposConta(); + }catch (e) { + if (e.response.data && e.response.data.non_field_errors) { + toastCustom.ToastCustomError('Erro ao criar tipo de conta.', 'Já existe um tipo de conta com esse nome.') + } else { + toastCustom.ToastCustomError('Erro ao criar tipo de conta.', 'Houve um erro ao tentar criar o tipo de conta.') + } + } + + }else { + try { + await patchTipoConta(values.uuid, payload); + toastCustom.ToastCustomSuccess('Edição do tipo de conta realizada com sucesso.', 'O tipo de conta foi editado no sistema com sucesso.') + setShowModalForm(false); + await carregaTiposConta(); + }catch (e) { + if (e.response.data && e.response.data.non_field_errors) { + toastCustom.ToastCustomError('Erro ao editar tipo de conta.', 'Já existe um tipo de conta com esse nome.') + } else { + toastCustom.ToastCustomError('Erro ao editar tipo de conta.', 'Houve um erro ao tentar editar o tipo de conta.') + } + } + setLoading(false); + } + }, [carregaTiposConta]); + + const onDeleteTipoContaTrue = useCallback(async ()=>{ + setLoading(true); + try { + await deleteTipoConta(stateFormModal.uuid); + toastCustom.ToastCustomSuccess('Remoção do tipo de conta efetuada com sucesso.', 'O tipo de conta foi removido do sistema com sucesso.') + setShowModalConfirmDeleteTipoConta(false); + setShowModalForm(false); + await carregaTiposConta(); + }catch (err) { + setShowModalConfirmDeleteTipoConta(false); + toastCustom.ToastCustomError('Erro na remoção do tipo de conta.', err.response.data.erro ? err.response.data.erro : 'O tipo de conta não foi removido do sistema.') + } + setLoading(false); + }, [stateFormModal]); + + const handleCloseFormModal = useCallback(()=>{ + setStateFormModal(initialStateFormModal); + setShowModalForm(false) + }, [initialStateFormModal]); + + const handleCloseConfirmDeleteTipoConta = useCallback(()=>{ + setShowModalConfirmDeleteTipoConta(false) + }, []); + + return( + +

Tipos de conta

+ {loading ? ( +
+ +
+ ) : + <> +
+ + +

Exibindo {totalTiposDeConta} tipos de conta

+ +
+
+ +
+
+ +
+ + } + + ) +}; \ No newline at end of file diff --git a/src/componentes/sme/Parametrizacoes/Estrutura/parametrizacoes-estrutura.scss b/src/componentes/sme/Parametrizacoes/Estrutura/parametrizacoes-estrutura.scss index 814352cab..72a4da943 100644 --- a/src/componentes/sme/Parametrizacoes/Estrutura/parametrizacoes-estrutura.scss +++ b/src/componentes/sme/Parametrizacoes/Estrutura/parametrizacoes-estrutura.scss @@ -9,4 +9,10 @@ span.total-acoes{ border-radius: .25rem; border-right: none; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; +} + +.btn-pesquisar-tipos-conta,.btn-pesquisar-tipos-conta:focus { + border: none; + background-color: transparent; + outline: none; } \ No newline at end of file diff --git a/src/rotas/index.js b/src/rotas/index.js index a80e3ac22..fe44f37df 100644 --- a/src/rotas/index.js +++ b/src/rotas/index.js @@ -66,6 +66,7 @@ import {VinculaAssociacoesAAcao} from "../componentes/sme/Parametrizacoes/Estrut import {Periodos} from "../componentes/sme/Parametrizacoes/Estrutura/Periodos"; import {Associacoes} from "../componentes/sme/Parametrizacoes/Estrutura/Associacoes"; import {Tags} from "../componentes/sme/Parametrizacoes/Estrutura/Tags"; +import {TiposConta} from "../componentes/sme/Parametrizacoes/Estrutura/TiposConta"; import {FiqueDeOlho} from "../componentes/sme/Parametrizacoes/EdicaoDeTextos/FiqueDeOlho"; import ArquivosDeCarga from "../componentes/Globais/ArquivosDeCarga"; import {TiposDeCusteio} from "../componentes/sme/Parametrizacoes/Despesas/TiposDeCusteio" @@ -423,6 +424,12 @@ const routesConfig = [ component: Tags, permissoes: ['access_painel_parametrizacoes'], }, + { + exact: true, + path: "/parametro-tipos-conta", + component: TiposConta, + permissoes: ['access_painel_parametrizacoes'], + }, { exact: true, path: "/acompanhamento-pcs-sme", diff --git a/src/services/sme/Parametrizacoes.service.js b/src/services/sme/Parametrizacoes.service.js index b6d480a28..e0731e538 100644 --- a/src/services/sme/Parametrizacoes.service.js +++ b/src/services/sme/Parametrizacoes.service.js @@ -94,6 +94,24 @@ export const patchAlterarFiqueDeOlhoRelatoriosConsolidadosDre = async (payload) }; // ***** Estrutura ***** + +// Tipos de conta +export const getTiposContas = async () => { + return (await api.get(`/api/tipos-conta`, authHeader)).data; +}; +export const getFiltroTiposContas = async (nome) => { + return (await api.get(`/api/tipos-conta/?nome=${nome}`, authHeader)).data; +}; +export const postTipoConta = async (payload) => { + return (await api.post(`/api/tipos-conta/`, payload, authHeader)).data +}; +export const patchTipoConta = async (tipo_conta_uuid, payload) => { + return (await api.patch(`/api/tipos-conta/${tipo_conta_uuid}/`, payload, authHeader)).data +}; +export const deleteTipoConta = async (tipo_conta_uuid) => { + return (await api.delete(`/api/tipos-conta/${tipo_conta_uuid}/`, authHeader)) +}; + // Tags export const getTodasTags = async () => { return (await api.get(`/api/tags/`, authHeader)).data