Merge pull request #12 from ipti/new/registration

report classroom
ipti · May 25, 2024 · 71c8ad1 · 71c8ad1
2 parents b7c6a8c + 1dc2331
commit 71c8ad1
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 100 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
-# REACT_APP_API_PATH=http://localhost:3000/
-REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
+REACT_APP_API_PATH=http://localhost:3000/
+# REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
diff --git a/src/Assets/images/report-svgrepo-com.svg b/src/Assets/images/report-svgrepo-com.svg
diff --git a/src/Assets/images/report.svg b/src/Assets/images/report.svg
diff --git a/src/Pages/Classroom/ClassroomOne/Report/index.tsx b/src/Pages/Classroom/ClassroomOne/Report/index.tsx
@@ -1,100 +1,108 @@
-import { Tooltip } from "primereact/tooltip"
-import { Container } from "../../../../Styles/styles"
-import { DataTable } from "primereact/datatable"
-import { Column } from "primereact/column"
-import { Button } from "primereact/button"
-import { useRef } from "react"
-import data from "./../../../../Data/students.json"
-
-
-interface ColumnMeta {
-    field: string;
-    header: string;
-}
+import { Tooltip } from "primereact/tooltip";
+import { Container } from "../../../../Styles/styles";
+import { DataTable } from "primereact/datatable";
+import { Column } from "primereact/column";
+import { Button } from "primereact/button";
+import { useRef } from "react";
+import Present from "../../../../Assets/images/status-approved.svg";
+import NotPresent from "../../../../Assets/images/status-desapproved.svg";
+import { useFetchRequestClassroomReport } from "../../../../Services/Classroom/query";
+import { useParams } from "react-router-dom";
+
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
 
 const Report = () => {
-    return (
-        <ReportPage />
-    )
-}
+  return <ReportPage />;
+};
 
 const ReportPage = () => {
+  const { id } = useParams();
 
-    const dt = useRef<any>(null);
+  const contentRef = useRef(null);
 
-    const cols: ColumnMeta[] = [
-        { field: 'category', header: 'Category' },
-        { field: 'quantity', header: 'Quantity' }
-    ];
+  const generatePDF = () => {
+    if (!contentRef.current) return;
 
-    // const exportColumns = cols.map((col) => ({ title: col.header, dataKey: col.field }));
+    const elementToCapture = contentRef.current;
 
+    html2canvas(elementToCapture).then((canvas) => {
+      const pdf = new jsPDF("p", "mm", "a4");
 
-    // const exportCSV = (selectionOnly: any) => {
-    //     dt.current.exportCSV({ selectionOnly });
-    // };
+      const imgData = canvas.toDataURL("image/png");
+      const imgWidth = 210;
+      const imgHeight = (canvas.height * imgWidth) / canvas.width;
+      pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
 
-    const exportPdf = () => {
-        import('jspdf').then((jsPDF) => {
-            import('jspdf-autotable').then(() => {
-                // const doc = new jsPDF.default(0, 0);
+      pdf.save(`Relatorio_turma.pdf`);
+    });
+  };
 
-                // doc.autoTable(exportColumns, products);
-                // doc.save('products.pdf');
-            });
-        });
-    };
+  const { data } = useFetchRequestClassroomReport(parseInt(id!));
 
-    const exportExcel = () => {
-        import('xlsx').then((xlsx) => {
-            const worksheet = xlsx.utils.json_to_sheet(data);
-            const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
-            const excelBuffer = xlsx.write(workbook, {
-                bookType: 'xlsx',
-                type: 'array'
-            });
-
-            saveAsExcelFile(excelBuffer, 'products');
-        });
+  const bodyMeeting = (rowData: any, options: any) => {
+    const verifyFouls = () => {
+      const verify = data?.meeting[
+        parseInt(options?.column.props.columnKey)
+      ]?.fouls?.find(
+        (props: any) => props.registration_fk === rowData.registration_fk
+      );
+      return verify;
     };
-
-    const saveAsExcelFile = (buffer: any, fileName: any) => {
-        import('file-saver').then((module) => {
-            if (module && module.default) {
-                let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
-                let EXCEL_EXTENSION = '.xlsx';
-                const data = new Blob([buffer], {
-                    type: EXCEL_TYPE
-                });
-
-                module.default.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
-            }
-        });
-    }
-
-    const header = (
-        <div className="flex align-items-center justify-content-end gap-2">
-            {/* <Button type="button" icon="pi pi-file" rounded onClick={() => exportCSV(false)} data-pr-tooltip="CSV" /> */}
-            <Button type="button" icon="pi pi-file-excel" severity="success" rounded onClick={exportExcel} data-pr-tooltip="XLS" />
-            <Button type="button" icon="pi pi-file-pdf" severity="warning" rounded onClick={exportPdf} data-pr-tooltip="PDF" />
-        </div>
-    );
-    return (
-        <Container>
-            <div className="card">
-                <Tooltip target=".export-buttons>button" position="bottom" />
-                <DataTable ref={dt} value={data} header={header} tableStyle={{ minWidth: '50rem' }}>
-                    <Column field={"name"} header={"Nome"} />
-                    {cols.map((col, index) => (
-                        <>
-                            <Column key={index} field={col.field} header={col.header} />
-                        </>
-                    ))}
-                    <Column field={"name"} header={"Total"}  />
-                </DataTable>
-            </div>
-        </Container>
-    )
-}
-
-export default Report
+    return <img alt="" src={!verifyFouls() ? Present : NotPresent} />;
+  };
+
+  const bodyTotal = (rowData: any) => {
+    const verifyFouls = () => {
+      var count = 0;
+      for (const meeting of data?.meeting) {
+        const verify = meeting?.fouls?.find(
+          (props: any) => props.registration_fk === rowData.registration_fk
+        );
+
+        if (verify) {
+          count++;
+        }
+      }
+
+      return (count !== 0 ? count / data.meeting.length : 1) * 100;
+    };
+    return <h3>{verifyFouls()}%</h3>;
+  };
+
+  const header = (
+    <div className="flex align-items-center justify-content-end gap-2">
+      <Button
+        type="button"
+        icon="pi pi-file-pdf"
+        severity="danger"
+        rounded
+        onClick={generatePDF}
+        data-pr-tooltip="PDF"
+      />
+    </div>
+  );
+  return (
+    <Container ref={contentRef}>
+      <DataTable
+        value={data?.register_classroom}
+        header={header}
+        tableStyle={{ minWidth: "50rem" }}
+      >
+        <Column field={"registration.name"}  header={"Beneficiário"} />
+        {data?.meeting?.map((item: any, index: number) => (
+          <Column
+            align={"center"}
+            key={index}
+            columnKey={index.toString()}
+            body={bodyMeeting}
+            header={item.name}
+          />
+        ))}
+        <Column body={bodyTotal} header={"Total"} />
+      </DataTable>
+    </Container>
+  );
+};
+
+export default Report;
diff --git a/src/Pages/Classroom/ClassroomOne/index.tsx b/src/Pages/Classroom/ClassroomOne/index.tsx
@@ -3,6 +3,8 @@ import { Button } from "primereact/button";
 import { useContext, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import pessoas from "../../../Assets/images/pessoasgray.svg";
+
+import report from "../../../Assets/images/report-svgrepo-com.svg";
 import meeting from "../../../Assets/images/school_teacher.svg";
 import TextInput from "../../../Components/TextInput";
 
@@ -33,15 +35,14 @@ const ClassroomOnePage = () => {
   const props = useContext(ClassroomContext) as ClassroomTypes;
   const { data: classroom } = useFetchRequestClassroomOne(parseInt(id!));
   const [edit, setEdit] = useState(false);
-  const [visible, setVisible] = useState(false)
+  const [visible, setVisible] = useState(false);
 
   const propsAplication = useContext(
     AplicationContext
   ) as PropsAplicationContext;
 
   if (props.isLoading) return <Loading />;
 
-
   return (
     <Container>
       {edit ? (
@@ -87,12 +88,24 @@ const ClassroomOnePage = () => {
                 <h2>{classroom?.name}</h2>
               </Column>
               <Padding />
-              {propsAplication.user?.role === (ROLE.ADMIN || ROLE.COORDINATORS) && (
-                <Button text label="Editar" icon="pi pi-pencil" onClick={() => setEdit(true)} />
+              {propsAplication.user?.role ===
+                (ROLE.ADMIN || ROLE.COORDINATORS) && (
+                <Button
+                  text
+                  label="Editar"
+                  icon="pi pi-pencil"
+                  onClick={() => setEdit(true)}
+                />
               )}
             </Row>
-            {propsAplication.user?.role === (ROLE.ADMIN || ROLE.COORDINATORS) && (
-              <Button text label="Tranferir turma" icon="pi pi-sync" onClick={() => setVisible(true)} />
+            {propsAplication.user?.role ===
+              (ROLE.ADMIN || ROLE.COORDINATORS) && (
+              <Button
+                text
+                label="Tranferir turma"
+                icon="pi pi-sync"
+                onClick={() => setVisible(true)}
+              />
             )}
           </Row>
         </Column>
@@ -124,10 +137,20 @@ const ClassroomOnePage = () => {
         {/* <div className="col-12 md:col-6" onClick={() => history(`/turma/${id}/relatorio`)}>
                     <CardItensClassrooom title="Tabela" description="Relatório entre Alunos e Encontros" icon="pi pi-table" />
                 </div> */}
-        <ModalChange
-          visible={visible}
-          onHide={() => setVisible(false)}
-        />
+        <ModalChange visible={visible} onHide={() => setVisible(false)} />
+      </div>
+      <div className="grid">
+        <div
+          className="col-12 md:col-6"
+          onClick={() => history(`/turma/${id}/relatorio`)}
+        >
+          <CardItensClassrooom
+            title="Relatório"
+            description="Acesse o relatório da turma"
+            icon={report}
+            // count={classroom?.register_classroom?.length}
+          />
+        </div>
       </div>
     </Container>
   );

diff --git a/src/Services/Classroom/query.tsx b/src/Services/Classroom/query.tsx
@@ -1,10 +1,14 @@
 import { useQuery } from "react-query";
-import { requestClassroom, requestClassroomOne } from "./request";
+import { requestClassroom, requestClassroomOne, requestClassroomReport } from "./request";
 
 export const useFetchRequestClassroomOne = (id: number) => {
   return useQuery(["useRequestsClassroomOne", id], () => requestClassroomOne(id));
 };
 
+export const useFetchRequestClassroomReport = (id: number) => {
+  return useQuery(["useRequestsClassroomReport", id], () => requestClassroomReport(id));
+};
+
 
 
 export const useFetchRequestClassroom = (idProject: number) => {

diff --git a/src/Services/Classroom/request.tsx b/src/Services/Classroom/request.tsx
@@ -51,6 +51,20 @@ export const requestClassroomOne = (id: number) => {
     });
 };
 
+export const requestClassroomReport = (id: number) => {
+  let path = "/classroom-bff/report";
+  return http
+    .get(path, { params: { idClassroom: id } })
+    .then((response) => response.data)
+    .catch((err) => {
+      if (err.response.status === 401) {
+        logout();
+        window.location.reload();
+      }
+      throw err;
+    });
+};
+
 export const requestUpdateClassroom = (id: number, data: { name: string }) => {
   let path = "/classroom/";
   return http