Merge pull request #21 from ipti/new/registration

New/registration

src/Context/Classroom/Meeting/MeetingListRegistration/type.tsx

@@ -27,8 +27,19 @@ export interface Meeting {
 export interface Classroom {
   name: string
   register_classroom: RegisterClassroom[]
+  project: Project
 }
 
+export interface Project {
+  project: Project
+}
+
+export interface Project {
+  name: string
+  id: number
+}
+
+
 export interface RegisterClassroom {
   id: number
   registration_fk: number

src/Pages/Classroom/ClassroomOne/MeetingList/Meeting/Beneficiarios/index.tsx

@@ -1,17 +1,29 @@
+import pdfMake from "pdfmake/build/pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import { TDocumentDefinitions } from "pdfmake/interfaces";
 import { Button } from "primereact/button";
 import { Column } from "primereact/column";
 import { DataTable } from "primereact/datatable";
-import { useContext, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
+// import imgRegua from "../../../../../../Assets/images/logoleftpdf.png";
+
+import imgLateral from "../../../../../../Assets/images/logoleftpdf.png";
+import img from "../../../../../../Assets/images/logothp.png";
 import Present from "../../../../../../Assets/images/status-approved.svg";
 import NotPresent from "../../../../../../Assets/images/status-desapproved.svg";
 import { MeetingListRegistrationContext } from "../../../../../../Context/Classroom/Meeting/MeetingListRegistration/context";
-import { MeetingListRegisterTypes, RegisterClassroom } from "../../../../../../Context/Classroom/Meeting/MeetingListRegistration/type";
+import {
+  MeetingListRegisterTypes,
+  RegisterClassroom,
+} from "../../../../../../Context/Classroom/Meeting/MeetingListRegistration/type";
+import {
+  Status,
+  loadImageFileAsBase64,
+} from "../../../../../../Controller/controllerGlobal";
 import styles from "../../../../../../Styles";
 import { Padding, Row } from "../../../../../../Styles/styles";
-import { Status } from "../../../../../../Controller/controllerGlobal";
-
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
 
 const StyleComponent = styled.div`
   .p-datatable .p-datatable-tbody > tr > td {
@@ -24,18 +36,47 @@ const Beneficiarios = () => {
   const props = useContext(
     MeetingListRegistrationContext
   ) as MeetingListRegisterTypes;
+
+  const [logoBase64, setLogoBase64] = useState<string | null>(null);
+  const [logoBaseLeft64, setLogoBaseLeft64] = useState<string | null>(null);
+
   const FilterRegistration = (fouls: any) => {
     const array = [];
     for (const foul of fouls) {
       array.push(foul.registration);
     }
     return array;
   };
+
   const [selectedProducts, setSelectedProducts] = useState<any>(
     FilterRegistration(props.meeting?.fouls)
   );
   const [rowClick] = useState(true);
-  const history = useNavigate();
+  useEffect(() => {
+    const loadLogo = async () => {
+      try {
+        const base64 = await loadImageFileAsBase64(img);
+        setLogoBase64(base64);
+      } catch (error) {
+        console.error("Error loading logo image:", error);
+      }
+    };
+
+    loadLogo();
+  }, []);
+
+  useEffect(() => {
+    const loadLogo = async () => {
+      try {
+        const base64 = await loadImageFileAsBase64(imgLateral);
+        setLogoBaseLeft64(base64);
+      } catch (error) {
+        console.error("Error loading logo image:", error);
+      }
+    };
+
+    loadLogo();
+  }, []);
 
   const FilterId = (fouls: any) => {
     const array = [];
@@ -48,25 +89,184 @@ const Beneficiarios = () => {
   const bodyRegisterFouls = (dataRow: RegisterClassroom) => {
     return (
       <Row id="center">
-        {!selectedProducts.find((props: any) => props.id === dataRow.registration.id) ? <img alt="" style={{ cursor: "pointer" }} src={Present} onClick={() => {
-          setSelectedProducts((prevArray: any) =>
-            prevArray.concat(dataRow.registration)
-          );
-        }} /> : <img alt="" style={{ cursor: "pointer" }} src={NotPresent} onClick={() => {
-          const novoArray = selectedProducts.filter(
-            (obj: any) => obj.id !== dataRow.registration.id
-          );
-          setSelectedProducts(novoArray);
-        }} />}
-
+        {!selectedProducts.find(
+          (props: any) => props.id === dataRow.registration.id
+        ) ? (
+          <img
+            alt=""
+            style={{ cursor: "pointer" }}
+            src={Present}
+            onClick={() => {
+              setSelectedProducts((prevArray: any) =>
+                prevArray.concat(dataRow.registration)
+              );
+            }}
+          />
+        ) : (
+          <img
+            alt=""
+            style={{ cursor: "pointer" }}
+            src={NotPresent}
+            onClick={() => {
+              const novoArray = selectedProducts.filter(
+                (obj: any) => obj.id !== dataRow.registration.id
+              );
+              setSelectedProducts(novoArray);
+            }}
+          />
+        )}
+      </Row>
+    );
+  };
+  const generatePDF = () => {
+    const registrations = props.meeting?.classroom.register_classroom || [];
+    const pageSize = 20;
 
+    const createTableBody = (registrationsSubset: any, startIndex: any) => {
+      return [
+        ["Nº ", "NOME COMPLETO", "ASSINATURA"],
+        ...registrationsSubset.map((item: any, index: number) => {
+          return [startIndex + index + 1, item.registration.name, ""];
+        }),
+      ];
+    };
 
+    const docDefinition: TDocumentDefinitions = {
+      content: [
+        {
+          text: `${props.meeting?.classroom.project.name}`,
+          style: "header",
+          alignment: "center",
+          bold: true,
+          marginTop: 16,
+        },
+        {
+          text: `${props.meeting?.name}`,
+          style: "subheader",
+          alignment: "center",
+          fontSize: 14,
+        },
+        {
+          text: "Lista de Presença",
+          style: "subheader",
+          alignment: "center",
+          fontSize: 12,
+          marginTop: 32,
+        },
+        {
+          style: "tableExample",
+          marginTop: 16,
+          table: {
+            widths: ["*", "*"],
+            body: [["Data: ", `Turma: ${props.meeting?.classroom?.name}`]],
+          },
+        },
+        ...registrations.reduce((acc: any, curr, index) => {
+          if (index % pageSize === 0) {
+            acc.push({
+              style: "tableExample",
+              marginTop: 16,
+              table: {
+                widths: ["3%", "50%", "47%"],
+                body: createTableBody(
+                  registrations.slice(index, index + pageSize),
+                  index
+                ),
+              },
+
+              pageBreak: index === 0 ? undefined : "before",
+            });
+          }
+          return acc;
+        }, []),
+      ],
+      styles: {
+        header: {
+          fontSize: 18,
+          bold: true,
+          margin: [0, 0, 0, 10],
+        },
+        subheader: {
+          fontSize: 14,
+          margin: [0, 0, 0, 10],
+        },
+        tableExample: {
+          margin: [0, 5, 0, 15],
+        },
+      },
+      header: (currentPage: number, pageCount: number) => {
+        return [
+          {
+            image: logoBase64 || "",
+            width: 480,
+            alignment: "center",
+            marginTop: 32,
+            marginBottom: 128,
+          },
+          {
+            text: `${props.meeting?.classroom.project.name}`,
+            style: "header",
+            alignment: "center",
+            bold: true,
+            marginTop: 16,
+          },
+          {
+            text: `${props.meeting?.name}`,
+            style: "subheader",
+            alignment: "center",
+            fontSize: 14,
+          },
+          {
+            text: "Lista de Presença",
+            style: "subheader",
+            alignment: "center",
+            fontSize: 12,
+            marginTop: 32,
+          },
+        ];
+      },
+      // footer: (currentPage: number, pageCount: number) => {
+      //   return {
+      //     columns: [
+      //       {
+      //         width: '*',
+      //         text: '' // empty column to center the image
+      //       },
+      //       {
+      //         image: logoBaseLeft64 || "",
+      //         width: 400,
+      //         alignment: "center",
+      //       },
+      //       {
+      //         width: '*',
+      //         height: 16,
+      //         text: '' // empty column to center the image
+      //       }
+      //     ],
+      //     margin: [0, 0, 0, 64],
+      //     alignment: 'center'
+      //   };
+      // },
+      footer: (currentPage: number, pageCount: number) => {
+        return {
+          text: `${currentPage} de ${pageCount}`,
+          alignment: "center",
+          margin: [0, 0, 20, 0],
+        };
+      },
+      pageMargins: [40, 100, 40, 60],
+      background: (currentPage, pageCount) => {
+        return {
+          image: logoBaseLeft64 || '',
+          width: 16,
+          absolutePosition: { x: 8, y: 600 }
+        };
+      }
+    };
 
-      </Row>
-    );
+    pdfMake.createPdf(docDefinition).open();
   };
 
-  const { id, idMeeting } = useParams();
   return (
     <div className="card">
       <h3>Lista de presença</h3>
@@ -75,7 +275,10 @@ const Beneficiarios = () => {
         <Button
           label="Salvar"
           icon="pi pi-save"
-          disabled={props.meeting?.meeting_archives?.length! === 0 || props.meeting?.status === Status.APPROVED}
+          disabled={
+            props.meeting?.meeting_archives?.length! === 0 ||
+            props.meeting?.status === Status.APPROVED
+          }
           onClick={() => {
             props.CreateFouls({
               meeting: props.meeting?.id!,
@@ -86,9 +289,7 @@ const Beneficiarios = () => {
         <Button
           label={window.innerWidth > 600 ? "Gerar Lista de presença" : ""}
           icon="pi pi-download"
-          onClick={() => {
-            history(`/turma/${id}/encontros/${idMeeting}/generate`);
-          }}
+          onClick={generatePDF}
         />
       </Row>
       <Padding padding="16px" />
@@ -103,11 +304,11 @@ const Beneficiarios = () => {
             tableStyle={{ minWidth: "50rem" }}
             emptyMessage="Não há alunos registrados"
           >
-            {/* <Column
-              selectionMode="multiple"
-              headerStyle={{ width: "3rem" }}
-            ></Column> */}
-            <Column field="registration.name" align="center" header="Nome"></Column>
+            <Column
+              field="registration.name"
+              align="center"
+              header="Nome"
+            ></Column>
             <Column
               body={bodyRegisterFouls}
               align="center"

src/Pages/Classroom/ClassroomOne/MeetingList/index.tsx

@@ -10,11 +10,14 @@ import { MeetingListTypes } from "../../../../Context/Classroom/Meeting/MeetingL
 import { useFetchRequestClassroomOne } from "../../../../Services/Classroom/query";
 import Empty from "../../../../Components/Empty";
 import Loading from "../../../../Components/Loading";
+import ProjectListProvider from "../../../../Context/Project/ProjectList/context";
 
 const MeetingList = () => {
   return (
     <MeetingListProvider>
-      <MeetingListPage />
+      <ProjectListProvider>
+        <MeetingListPage />
+      </ProjectListProvider>
     </MeetingListProvider>
   );
 };