Merge pull request #1859 from prefeiturasp/feature/86461-membros-mand…

…ato-vigente-composicao-vigente

feat(86461): Dados da associação: Membros: Consultar Mandato vigente com composição vigente

src/assets/css/styles.scss

@@ -120,18 +120,18 @@ body {
 
   .p-paginator {
     background-color: #ffffff !important;
-    border: 0px;
-    padding: 2.5em !important;
+    border: 0;
+    padding: 2.5em;
   }
 
   .p-paginator-next {
-    height: 4em !important;
-    min-width: 4em !important;
+    height: 4em;
+    min-width: 4em;
   }
 
   .p-paginator-prev {
-    height: 4em !important;
-    min-width: 4em !important;
+    height: 4em;
+    min-width: 4em;
   }
 
   .p-paginator-page {

src/componentes/escolas/MembrosDaAssociacao/components/CargosDaComposicaoList.js

@@ -0,0 +1,91 @@
+import React from "react";
+import {useGetCargosDaComposicao} from "../hooks/useGetCargosDaComposicao";
+import {DataTable} from "primereact/datatable";
+import {Column} from "primereact/column";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faEdit} from "@fortawesome/free-solid-svg-icons";
+import ReactTooltip from "react-tooltip";
+
+export const CargosDaComposicaoList = () => {
+    const {isLoading, data} = useGetCargosDaComposicao()
+
+    const acoesTemplate = (rowData) => {
+        return (
+            <div>
+                <button className="btn-editar-membro">
+                    <span data-tip="Editar membro" data-html={true}>
+                        <FontAwesomeIcon
+                            style={{fontSize: '20px', marginRight: "0", color: "#00585E"}}
+                            icon={faEdit}
+                        />
+                        <ReactTooltip/>
+                    </span>
+                </button>
+            </div>
+        )
+    };
+
+    return(
+        <>
+            {!isLoading && data && data.diretoria_executiva &&
+                <div className="pt-0 pr-2 pl-2 pb-2">
+                    <p><strong>Diretoria executiva</strong></p>
+                    <DataTable
+                        value={data.diretoria_executiva}
+                        className='tabela-lista-usuarios'
+                    >
+                        <Column
+                            field="cargo_associacao_label"
+                            header="Cargo"
+                        />
+                        <Column
+                            field="ocupante_do_cargo.nome"
+                            header="Nome"
+                        />
+                        <Column
+                            field="ocupante_do_cargo.representacao_label"
+                            header="Nome"
+                        />
+                        <Column
+                            field="acao"
+                            header="Ação"
+                            style={{width:'100px'}}
+                            body={acoesTemplate}
+                        />
+                    </DataTable>
+                </div>
+            }
+
+            {data && data.conselho_fiscal &&
+
+                <div className="p-2 mt-3">
+                    <p><strong>Conselho Fiscal</strong></p>
+                    <DataTable
+                        value={data.conselho_fiscal}
+                        className='tabela-lista-usuarios'
+                    >
+                        <Column
+                            field="cargo_associacao_label"
+                            header="Cargo"
+                        />
+                        <Column
+                            field="ocupante_do_cargo.nome"
+                            header="Nome"
+                        />
+                        <Column
+                            field="ocupante_do_cargo.representacao_label"
+                            header="Nome"
+                        />
+                        <Column
+                            field="acao"
+                            header="Ação"
+                            style={{width:'100px'}}
+                            body={acoesTemplate}
+                        />
+                    </DataTable>
+                </div>
+            }
+
+        </>
+    )
+}

src/componentes/escolas/MembrosDaAssociacao/components/MandatoInfo.js

@@ -0,0 +1,23 @@
+import React from "react";
+import {useGetMandatoVigente} from "../hooks/useGetMandatoVigente";
+import useDataTemplate from "../../../../hooks/Globais/useDataTemplate";
+
+export const MandatoInfo = () => {
+    const {isLoading, data} = useGetMandatoVigente()
+    const dataTemplate = useDataTemplate()
+    return (
+        <>
+            {!isLoading && data && data.uuid &&
+                <div className="d-flex bd-highlight mt-2">
+                    <div className="p-2 pt-3 flex-grow bd-highlight">
+                        <p className='mb-0 fonte-16'><strong>Mandato</strong></p>
+                        <p className='mb-0'>
+                            <span><strong>Período atual: </strong></span>{dataTemplate(null, null, data.data_inicial)} até {dataTemplate(null, null, data.data_final)}
+                        </p>
+                    </div>
+                </div>
+            }
+
+        </>
+    )
+}

src/componentes/escolas/MembrosDaAssociacao/components/Paginacao.js

@@ -0,0 +1,31 @@
+import React, {useContext} from "react";
+import {useGetMandatoVigente} from "../hooks/useGetMandatoVigente";
+import {MembrosDaAssociacaoContext} from "../context/MembrosDaAssociacao";
+import {Paginator} from "primereact/paginator";
+
+export const Paginacao = () => {
+    const {isLoading, count} = useGetMandatoVigente()
+    const {setCurrentPage, firstPage, setFirstPage} = useContext(MembrosDaAssociacaoContext)
+
+    const onPageChange = (event) => {
+        setCurrentPage(event.page + 1)
+        setFirstPage(event.first)
+    };
+
+    return(
+        <>
+            {!isLoading &&
+                <Paginator
+                    first={firstPage}
+                    //rows={1}
+                    rows={10}
+                    totalRecords={count}
+                    template="PrevPageLink NextPageLink"
+                    onPageChange={onPageChange}
+                    className='paginacao-composicoes'
+                    style={{padding: "0 0 15px 15px"}}
+                />
+            }
+        </>
+    )
+}

src/componentes/escolas/MembrosDaAssociacao/context/MembrosDaAssociacao.js

@@ -0,0 +1,34 @@
+import React, { createContext, useMemo, useState } from 'react';
+export const MembrosDaAssociacaoContext = createContext({
+    composicaoUuid: '',
+    setComposicaoUuid: () => {},
+    currentPage: 1,
+    setCurrentPage: () => {},
+    firstPage: 0,
+    setFirstPage: () => {},
+})
+
+export const MembrosDaAssociacaoProvider = ({children}) => {
+
+    const [composicaoUuid, setComposicaoUuid] = useState('');
+    const [firstPage, setFirstPage] = useState(0);
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const contextValue = useMemo(() => {
+        return{
+            composicaoUuid,
+            setComposicaoUuid,
+            firstPage,
+            setFirstPage,
+            currentPage,
+            setCurrentPage,
+        }
+    }, [composicaoUuid, firstPage, currentPage])
+
+    return (
+        <MembrosDaAssociacaoContext.Provider value={contextValue}>
+            {children}
+        </MembrosDaAssociacaoContext.Provider>
+    )
+
+}

src/componentes/escolas/MembrosDaAssociacao/hooks/useGetCargosDaComposicao.js

@@ -0,0 +1,23 @@
+import {getCargosDaComposicao} from "../../../../services/Mandatos.service";
+import {useQuery} from "@tanstack/react-query";
+import {useContext} from "react";
+import {MembrosDaAssociacaoContext} from "../context/MembrosDaAssociacao";
+
+export const useGetCargosDaComposicao = () => {
+
+    const {composicaoUuid} = useContext(MembrosDaAssociacaoContext)
+
+    const { isLoading, isError, data, error, refetch } = useQuery(
+        ['cargos-da-composicao', composicaoUuid],
+        ()=> getCargosDaComposicao(composicaoUuid),
+        {
+            keepPreviousData: true,
+            staleTime: 5000, // 5 segundos
+            refetchOnWindowFocus: true, // Caso saia da aba e voltar ele refaz a requisição
+        }
+    );
+
+    return {isLoading, isError, data, error, refetch}
+
+
+}

src/componentes/escolas/MembrosDaAssociacao/hooks/useGetMandatoVigente.js

@@ -0,0 +1,24 @@
+import {getMandatoVigente} from "../../../../services/Mandatos.service";
+import {useQuery} from "@tanstack/react-query";
+import {useMemo} from "react";
+import {visoesService} from "../../../../services/visoes.service";
+
+export const useGetMandatoVigente = () => {
+
+    const associacao_uuid = visoesService.getItemUsuarioLogado('associacao_selecionada.uuid')
+
+    const { isLoading, isError, data = {uuid: null, composicoes: [] }, error } = useQuery(
+        ['mandato-vigente', associacao_uuid],
+        ()=> getMandatoVigente(associacao_uuid),
+        {
+            keepPreviousData: true,
+            staleTime: 5000, // 5 segundos
+            refetchOnWindowFocus: true, // Caso saia da aba e voltar ele refaz a requisição
+        }
+    );
+
+    const count = useMemo(() => data.composicoes.length, [data]);
+
+    return {isLoading, isError, data, error, count}
+
+}

src/componentes/escolas/MembrosDaAssociacao/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import {UrlsMenuInterno} from "../Associacao/UrlsMenuInterno";
+import {MenuInterno} from "../../Globais/MenuInterno";
+import {PaginaMandatoVigente} from "./pages/PaginaMandatoVigente";
+import {MandatosAnteriores} from "./pages/MandatosAnteriores";
+import {ExportaDadosDaAsssociacao} from "../Associacao/ExportaDadosAssociacao";
+import {MembrosDaAssociacaoProvider} from "./context/MembrosDaAssociacao";
+import "./membros-da-associacao.scss"
+
+export const MembrosDaAssociacao = () => {
+    return (
+        <MembrosDaAssociacaoProvider>
+            <MenuInterno
+                caminhos_menu_interno={UrlsMenuInterno}
+            />
+            <ExportaDadosDaAsssociacao/>
+            <nav>
+                <div className="nav nav-tabs" id="nav-tab" role="tablist">
+                    <button className="nav-link active" id="nav-mandato-vigente-tab" data-toggle="tab" data-target="#nav-mandato-vigente" type="button" role="tab" aria-controls="nav-mandato-vigente" aria-selected="true">Mandato vigente</button>
+                    <button className="nav-link" id="nav-mandatos-anteriores-tab" data-toggle="tab" data-target="#nav-mandatos-anteriores" type="button" role="tab" aria-controls="nav-mandatos-anteriores" aria-selected="false">Mandatos anteriores</button>
+                </div>
+            </nav>
+            <div className="tab-content" id="nav-tabContent">
+                <div className="tab-pane fade show active" id="nav-mandato-vigente" role="tabpanel" aria-labelledby="nav-mandato-vigente-tab">
+                    <PaginaMandatoVigente/>
+                </div>
+                <div className="tab-pane fade" id="nav-mandatos-anteriores" role="tabpanel" aria-labelledby="nav-mandatos-anteriores-tab">
+                    <MandatosAnteriores/>
+                </div>
+            </div>
+        </MembrosDaAssociacaoProvider>
+    )
+}

src/componentes/escolas/MembrosDaAssociacao/membros-da-associacao.scss

@@ -0,0 +1,14 @@
+.paginacao-composicoes{
+  text-align: right !important;
+  padding: 0 10px 0 0 !important;
+}
+
+.paginacao-composicoes .p-paginator-prev, .paginacao-composicoes .p-paginator-next{
+  height: 3em !important;
+  min-width: 3em !important;
+}
+
+.paginacao-composicoes .p-paginator-element{
+  margin: 5px !important;
+  background-color: #DADADA !important;
+}

src/componentes/escolas/MembrosDaAssociacao/pages/MandatosAnteriores.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const MandatosAnteriores = () => {
+    return (
+        <h2>Mandatos anteriores</h2>
+    )
+
+}

src/componentes/escolas/MembrosDaAssociacao/pages/PaginaMandatoVigente.js

@@ -0,0 +1,48 @@
+import React, {useContext, useEffect} from "react";
+import {useGetMandatoVigente} from "../hooks/useGetMandatoVigente";
+import {MandatoInfo} from "../components/MandatoInfo";
+import Loading from "../../../../utils/Loading";
+import {CargosDaComposicaoList} from "../components/CargosDaComposicaoList";
+import {MembrosDaAssociacaoContext} from "../context/MembrosDaAssociacao";
+import {Paginacao} from "../components/Paginacao";
+
+export const PaginaMandatoVigente = () => {
+
+    const {isLoading, data, isError} = useGetMandatoVigente()
+    const {setComposicaoUuid, composicaoUuid, currentPage} = useContext(MembrosDaAssociacaoContext)
+
+    useEffect(() => {
+        let indice = currentPage-1
+        if (data && data.composicoes && data.composicoes.length > 0) {
+            let composicao_uuid = data.composicoes[indice].uuid
+            setComposicaoUuid(composicao_uuid)
+        }
+    }, [data, setComposicaoUuid, currentPage]);
+
+    if (isLoading) {
+        return (
+            <Loading
+                corGrafico="black"
+                corFonte="dark"
+                marginTop="0"
+                marginBottom="0"
+            />
+        );
+    }
+
+    if ((data && !data.uuid) || isError){
+        return (
+            <p className='mt-3'><strong>Não existe mandato vigente</strong></p>
+        )
+    }
+
+    return (
+        <>
+            <MandatoInfo/>
+            <Paginacao/>
+            {composicaoUuid &&
+                <CargosDaComposicaoList/>
+            }
+        </>
+    )
+}