Merge pull request #2465 from prefeiturasp/feature/125037-conferencia…

…-documentos-modal feat(125037): Modifica tamanho do modal e adiciona tooltip
prefeiturasp · Jan 17, 2025 · 9fd1cc6 · 9fd1cc6
2 parents 62234b6 + 29a0696
commit 9fd1cc6
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 73 deletions.
diff --git a/src/componentes/Globais/ModalBootstrap/index.js b/src/componentes/Globais/ModalBootstrap/index.js
@@ -650,49 +650,6 @@ export const ModalFormBodyText = (props) => {
     )
 };
 
-export const ModalFormBodyPdf = ({
-    children,
-    ...props
-}) => {
-    return (
-        <Fragment>
-            <Modal show={
-                    props.show
-                }
-                onHide={
-                    props.onHide
-                }
-                size={
-                    props.size
-            }>
-                <Modal.Header>
-                    <Modal.Title>{
-                        props.titulo
-                    }</Modal.Title>
-                    <button 
-                        onClick={
-                            props.onHide
-                        }
-                        style={{
-                            border: 'none',
-                            background: 'transparent'
-                        }}
-                    >
-                        <FontAwesomeIcon style={
-                                {
-                                    color: "black",
-                                    fontSize: '20px',
-                                }
-                            }
-                            icon={faTimes}/>
-                    </button>
-                </Modal.Header>
-                <Modal.Body> {children} </Modal.Body>
-            </Modal>
-        </Fragment>
-    )
-};
-
 export const ModalFormBodyTextCloseButtonCabecalho = (props) => {
     return (
         <Fragment>

diff --git a/...oConsolidadoSMEDetalhe/ConferenciaDeDocumentos/TabelaConferenciaDeDocumentosRelatorios.js b/...oConsolidadoSMEDetalhe/ConferenciaDeDocumentos/TabelaConferenciaDeDocumentosRelatorios.js
@@ -16,11 +16,12 @@ import {
     ModalCheckNaoPermitidoConfererenciaDeDocumentos
 } from "../../../../dres/PrestacaoDeContas/DetalhePrestacaoDeContas/ConferenciaDeDocumentos/ModalCheckNaoPermitidoConfererenciaDeDocumentos";
 import {toastCustom} from "../../../../Globais/ToastCustom";
-import {ModalFormBodyPdf} from "../../../../Globais/ModalBootstrap"
+import {ModalFormBodyTextCloseButtonCabecalho} from "../../../../Globais/ModalBootstrap"
 import Dropdown from "react-bootstrap/Dropdown";
 import Loading from "../../../../../utils/Loading";
 import {AxiosError} from "axios";
 import "./conferencia-de-documentos.scss"
+import ReactTooltip from "react-tooltip";
 
 const TabelaConferenciaDeDocumentosRelatorios = ({
                                                      relatorioConsolidado,
@@ -501,37 +502,40 @@ const TabelaConferenciaDeDocumentosRelatorios = ({
         if (rowData.tipo_documento !== "DOCUMENTO_ADICIONAL") {
             return (
                 <>
-                    <button disabled={
-                        !editavel
-                    }
-                            title="Visualizar"
-                            className="btn btn-link fonte-14"
-                            type="button"
-                            onClick={() => handleShowPdf(rowData)}>
-                        <FontAwesomeIcon style={
-                            {
-                                fontSize: '18px',
-                                marginRight: "5px",
-                                color: "#00585E"
+                    <button 
+                        disabled={!editavel}
+                        className="btn btn-link fonte-14"
+                        type="button"
+                        onClick={() => handleShowPdf(rowData)}
+                    >
+                        <span data-html={true} data-tip="Visualização">
+                            <FontAwesomeIcon style={
+                                {
+                                    fontSize: '18px',
+                                    marginRight: "5px",
+                                    color: "#00585E"
+                                }
                             }
-                        }
-                                         icon={faEye}/>
+                            icon={faEye}/>
+                        </span>
+                        <ReactTooltip html={true}/>
                     </button>
                     <button disabled={
                         !editavel
                     }
-                            title="Download"
                             onClick={() => getDownloadDocumentoRelatorio(rowData)}
                             className="btn btn-link fonte-14"
                             type="button">
-                        <FontAwesomeIcon style={
-                            {
-                                fontSize: '18px',
-                                marginRight: "5px",
-                                color: "#00585E"
-                            }
-                        }
-                                         icon={faDownload}/>
+                        <span data-html={true} data-tip="Download">
+                            <FontAwesomeIcon style={
+                                {
+                                    fontSize: '18px',
+                                    marginRight: "5px",
+                                    color: "#00585E"
+                                }
+                            }icon={faDownload}/>
+                        </span>
+                        <ReactTooltip html={true}/>
                     </button>
                 </>
             )
@@ -598,6 +602,20 @@ const TabelaConferenciaDeDocumentosRelatorios = ({
         carregaListaDeDocumentosRelatorio();
     }
 
+    const bodyTextarea = () => {
+        const height = `${window.innerHeight * 0.85}px`;
+
+        return (
+            <object
+                style={{ height: height, width: '100%' }}
+                type="application/pdf"
+                data={pdfVisualizacao}
+            >
+                Este navegador não suporta a visualização de PDFs diretamente. Por favor, faça o download do arquivo.
+            </object>
+        );
+    };
+
     return (
         <> {
             loadingDocumentosRelatorio ? (
@@ -692,14 +710,13 @@ const TabelaConferenciaDeDocumentosRelatorios = ({
                 />
             </section>
             <section>
-                <ModalFormBodyPdf
+                <ModalFormBodyTextCloseButtonCabecalho
+                    onClose={() => setShowModalPdfDownload(false)}
                     show={showModalPdfDownload}
-                    size="lg"
-                    titulo={'Visualização do documento.'}
                     onHide={() => setShowModalPdfDownload(false)}
-                >
-                    <embed src={pdfVisualizacao} frameBorder="0" width="100%" height="700px"></embed>
-                </ModalFormBodyPdf>
+                    size='xl'
+                    bodyText={bodyTextarea()}
+                />
             </section>
         </>
     )