Skip to content

Commit

Permalink
add: loading
Browse files Browse the repository at this point in the history 
aproveitei para estilizar o relatório de consultas
  • Loading branch information
@joannestephany
joannestephany committed Nov 27, 2024
1 parent f7314be commit adcf3a8
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 82 deletions.
128 changes: 78 additions & 50 deletions src/Pdf/PdfForConsultation/relatorioEncaminhadosConsulta.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { SaveAlt } from "@material-ui/icons";
// import html2canvas from "html2canvas";
// import jsPDF from "jspdf";
import React, { useEffect, useRef, useState } from "react";
import logo from "../../assets/images/logo.svg";

Expand All @@ -10,10 +8,11 @@ import { Table, TableData, TableHeader, TableWrapper } from "../style";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import api from "../../services/api";
import { Pagination, Typography } from "@mui/material";
import { Pagination, Typography } from "@mui/material";

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = pdfFonts.pdfMake.vfs;

const MyDocument = () => {
Expand All @@ -22,65 +21,84 @@ const MyDocument = () => {
const [report, setReport] = useState([]);
const [isFetching, setIsFetching] = useState(true);
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10; // Quantidade de itens por página
const itemsPerPage = 10;

const generatePDF = () => {
// Cabeçalho da tabela
const tableHeaders = [
"Nº",
"Nome da escola",
"Turma",
"Nome do Estudante",
"Data de Nascimento",
"Prioridade",
{ text: "Nº", style: "tableHeader" },
{ text: "Nome da escola", style: "tableHeader" },
{ text: "Turma", style: "tableHeader" },
{ text: "Nome do Estudante", style: "tableHeader" },
{ text: "Data de Nascimento", style: "tableHeader" },
{ text: "Prioridade", style: "tableHeader" },
];

// Dados da tabela

const tableBody = report.map((item, index) => [
index + 1,
item.school,
item.classroom,
item.student_name,
item.birthday,
item.points < 5
? "Prioridade mínima"
: item.points < 9
? "Prioridade média"
: "Prioridade máxima",
{ text: index + 1, style: "tableRow" },
{ text: item.school, style: "tableRow" },
{ text: item.classroom, style: "tableRow" },
{ text: item.student_name, style: "tableRow" },
{ text: item.birthday, style: "tableRow" },
{
text: item.points < 5 ? "Mínima" : item.points < 9 ? "Média" : "Máxima",
style: "tableRow",
},
]);

// Document Definition do PDF

const documentDefinition = {
content: [
{ text: "Relatório de Estudantes para Consulta - Lupa", style: "header" },
{
text: "Relatório de Estudantes para Consulta - Lupa",
style: "header",
},
{
table: {
headerRows: 1, // Define que a primeira linha é o cabeçalho
widths: ["auto", "*", "auto", "*", "auto", "auto"], // Larguras das colunas
body: [tableHeaders, ...tableBody], // Corpo da tabela
headerRows: 1,
widths: ["auto", "*", "auto", "*", "auto", "auto"],
body: [tableHeaders, ...tableBody],
},
layout: {
fillColor: (rowIndex) =>
rowIndex === 0 ? null : rowIndex % 2 === 0 ? "#F0F0F0" : null,
hLineWidth: () => 0.5,
vLineWidth: () => 0.5,
hLineColor: () => "#CCCCCC",
vLineColor: () => "#CCCCCC",
},
layout: "lightHorizontalLines", // Estilo da tabela
},
],
styles: {
header: {
fontSize: 18,
bold: true,
marginBottom: 10,
marginBottom: 20,
alignment: "center",
},
tableHeader: {
bold: true,
fontSize: 12,
color: "white",
fillColor: "#0077B6",
alignment: "center",
margin: 5,
},
tableRow: {
color: "black",
fontSize: 10,
},
},
footer: (currentPage, pageCount) => ({
text: `Página ${currentPage} de ${pageCount}`,
alignment: "center",
fontSize: 10,
margin: [0, 10, 0, 0],
}),
};

// Gera o PDF com base no documentDefinition
pdfMake.createPdf(documentDefinition).download("RelatorioEncaminhadosParaConsulta-Lupa.pdf");

pdfMake
.createPdf(documentDefinition)
.download("RelatorioEncaminhadosParaConsulta-Lupa.pdf");
};


useEffect(() => {
const callFunction = async () => {
Expand All @@ -96,10 +114,8 @@ const MyDocument = () => {
callFunction();
}, []);


const totalPages = Math.ceil(report.length / itemsPerPage);

// Itens exibidos na página atual
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = report.slice(indexOfFirstItem, indexOfLastItem);
Expand Down Expand Up @@ -153,7 +169,6 @@ const MyDocument = () => {
<h1 style={{ padding: "0px" }}>
Relatório Estudantes Encaminhados para Consulta - Lupa{" "}
</h1>

</Row>
</Column>
<div>
Expand Down Expand Up @@ -184,12 +199,24 @@ const MyDocument = () => {
<tbody>
{isFetching ? (
<tr>
<TableData><Skeleton height={20} /></TableData>
<TableData><Skeleton height={20} /></TableData>
<TableData><Skeleton height={20} /></TableData>
<TableData><Skeleton height={20} /></TableData>
<TableData><Skeleton height={20} /></TableData>
<TableData><Skeleton height={20} /></TableData>
<TableData>
<Skeleton height={20} />
</TableData>
<TableData>
<Skeleton height={20} />
</TableData>
<TableData>
<Skeleton height={20} />
</TableData>
<TableData>
<Skeleton height={20} />
</TableData>
<TableData>
<Skeleton height={20} />
</TableData>
<TableData>
<Skeleton height={20} />
</TableData>
</tr>
) : (
currentItems.map((item, index) => (
Expand All @@ -213,10 +240,10 @@ const MyDocument = () => {
{item.points < 5
? "Prioridade minima"
: item.points >= 5 && item.points < 9
? "Prioridade média"
: item.points >= 10
? "Prioridade máxima"
: ""}
? "Prioridade média"
: item.points >= 10
? "Prioridade máxima"
: ""}
</TableData>
</tr>
))
Expand All @@ -234,15 +261,16 @@ const MyDocument = () => {
justifyContent: "center",
}}
>
<Typography style={{ marginBottom: "8px" }}>Página: {currentPage}</Typography>
<Typography style={{ marginBottom: "8px" }}>
Página: {currentPage}
</Typography>
<Pagination
count={totalPages}
shape="rounded"
page={currentPage}
onChange={handleChangePage}
/>
</Row>

</div>
</Padding>
</div>
Expand Down
80 changes: 48 additions & 32 deletions src/screens/Consultation/Consultation.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Grid from "@material-ui/core/Grid";
import Alert from "@material-ui/lab/Alert";
import CircularProgress from "@material-ui/core/CircularProgress";
import React, { useEffect, useState } from "react";

import { Container, useMediaQuery } from "@material-ui/core";
Expand All @@ -15,19 +16,18 @@ const Consultation = ({ setIdSchool, idSchool }) => {
const [consultation, setConsultation] = useState([]);
const [schoolOptions, setSchoolOptions] = useState([]);
const [filteredConsultation, setFilteredConsultation] = useState([]);
const [loading, setLoading] = useState(true); // Estado para o loading

const matches = useMediaQuery("(max-width:600px)");

// Fetch consultations data
useEffect(() => {
const callFunction = async () => {
try {
const result = await api.get(
"/fowardedForConsultation"
);
const result = await api.get("/fowardedForConsultation");
setConsultation(result.data);
setFilteredConsultation(result.data); // Default: show all consultations
setFilteredConsultation(result.data);

// Extract unique schools for the Select options
const uniqueSchools = Array.from(
new Map(
result.data.map((item) => [item.school_id, { id: item.school_id, name: item.school }])
Expand All @@ -36,12 +36,13 @@ const Consultation = ({ setIdSchool, idSchool }) => {
setSchoolOptions(uniqueSchools);
} catch (error) {
console.error("Error calling function:", error);
} finally {
setTimeout(() => setLoading(false), 2000);
}
};
callFunction();
}, []);

// Handle school selection for filtering
const handleSchoolChange = (selectedOption) => {
setIdSchool(selectedOption.id);
const filtered = consultation.filter(
Expand All @@ -50,7 +51,6 @@ const Consultation = ({ setIdSchool, idSchool }) => {
setFilteredConsultation(filtered);
};

// Render cards based on filtered consultations
const renderCard = () => {
return filteredConsultation.map((item, index) => (
<BoxConsultation
Expand All @@ -70,32 +70,48 @@ const Consultation = ({ setIdSchool, idSchool }) => {
return (
<Container style={{ padding: "8px", cursor: "pointer" }}>
<h1>Consultas</h1>
<div style={{ width: matches ? "80%" : "50%" }}>
<label>Escolha uma escola</label>
<Padding padding="10px"/>
<Select
className="basic-single"
classNamePrefix="select"
placeholder="Digite uma escola"
options={schoolOptions}
value={schoolOptions.find((s) => s.id === idSchool)}
onChange={handleSchoolChange}
getOptionValue={(opt) => opt.id}
getOptionLabel={(opt) => opt.name}
/>
</div>
<Padding padding="10px" />
<Grid container direction="row" spacing={3}>
{filteredConsultation.length > 0 ? (
<List items={renderCard()} />
) : (
<Grid item xs={12}>
<Alert variant="outlined" severity="warning">
Nenhum aluno encaminhado
</Alert>
{loading ? (
<Grid
container
direction="column"
justifyContent="center"
alignItems="center"
style={{ minHeight: "50vh" }}
>
<CircularProgress />
<Padding padding="10px" />
<span>Carregando...</span>
</Grid>
) : (
<>
<div style={{ width: matches ? "80%" : "50%" }}>
<label>Escolha uma escola</label>
<Padding padding="10px" />
<Select
className="basic-single"
classNamePrefix="select"
placeholder="Digite uma escola"
options={schoolOptions}
value={schoolOptions.find((s) => s.id === idSchool)}
onChange={handleSchoolChange}
getOptionValue={(opt) => opt.id}
getOptionLabel={(opt) => opt.name}
/>
</div>
<Padding padding="10px" />
<Grid container direction="row" spacing={3}>
{filteredConsultation.length > 0 ? (
<List items={renderCard()} />
) : (
<Grid item xs={12}>
<Alert variant="outlined" severity="warning">
Nenhum aluno encaminhado
</Alert>
</Grid>
)}
</Grid>
)}
</Grid>
</>
)}
</Container>
);
};
Expand Down

0 comments on commit adcf3a8

Please sign in to comment.