Merge pull request #23 from ipti/new/registration

New/registration

.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/

package.json

@@ -12,6 +12,7 @@
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "axios": "^1.6.7",
+    "buffer": "^6.0.3",
     "cross-env": "^7.0.3",
     "file-saver": "^2.0.5",
     "formik": "^2.4.5",

src/Components/TextInput/index.tsx

@@ -9,12 +9,14 @@ const TextInput = ({
   disabled,
   onBlur,
   name,
+  type
 }: PropsInputText) => {
   return (
     <div>
       <InputText
         style={{ width: "100%" }}
         onBlur={onBlur}
+        type={type}
         disabled={disabled}
         value={value}
         name={name}

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

@@ -37,6 +37,7 @@ export interface Project {
 export interface Project {
   name: string
   id: number
+  ruler_url: string
 }
 
 

src/Context/Project/ProjectOne/context.tsx

@@ -5,10 +5,12 @@ import { ProjectOneTypes } from "./type";
 export const ProjectOneContext = createContext<ProjectOneTypes | null>(null);
 
 const ProjectOneProvider = ({ children }: { children: React.ReactNode }) => {
-  const { isLoading, project, updateProject } = ProjectOneState();
+  const { isLoading, project, updateProject, rulerProject } = ProjectOneState();
 
   return (
-    <ProjectOneContext.Provider value={{ isLoading, project, updateProject }}>
+    <ProjectOneContext.Provider
+      value={{ isLoading, project, updateProject, rulerProject }}
+    >
       {children}
     </ProjectOneContext.Provider>
   );

src/Context/Project/ProjectOne/state.tsx

@@ -8,7 +8,8 @@ export const ProjectOneState = () => {
   const { id } = useParams();
   const { data, isLoading } = useFetchRequestProjectOne(parseInt(id!));
   const [project, setProject] = useState();
-  const { requestUpdateprojectMutation } = ProjectController();
+  const { requestUpdateprojectMutation, requestRulerprojectMutation } =
+    ProjectController();
 
   useEffect(() => {
     if (data) {
@@ -17,13 +18,20 @@ export const ProjectOneState = () => {
   }, [data]);
 
   const updateProject = (data: UpdateProject, id: number) => {
-    console.log(id)
     requestUpdateprojectMutation.mutate({ data: data, id: id });
   };
 
+  const rulerProject = (file: File, id: number) => {
+    const formData = new FormData();
+
+    formData.append("file", file);
+    requestRulerprojectMutation.mutate({ data: formData, id: id });
+  };
+
   return {
     project,
     isLoading,
     updateProject,
+    rulerProject
   };
 };

src/Context/Project/ProjectOne/type.tsx

@@ -4,6 +4,7 @@ export interface ProjectOneTypes {
   project: ApiProject | undefined;
   isLoading: boolean;
   updateProject: (data: UpdateProject, id: number) => void;
+  rulerProject: (file: File, id: number) => void
 }
 
 export interface ApiProject {
@@ -17,6 +18,7 @@ export interface Project {
   active: boolean
   approval_percentage: number
   avartar_url: any
+  ruler_url: string
   social_technology_id: number
   createdAt: string
   updatedAt: string

src/Controller/controllerGlobal.tsx

@@ -1,3 +1,7 @@
+import axios from "axios";
+import { Buffer } from 'buffer'; 
+
+
 export const gerarIdAleatorio = (tamanho: number) => {
   const caracteres =
     "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
@@ -98,4 +102,16 @@ export const loadImageFileAsBase64 = (imagePath: string): Promise<string> => {
       })
       .catch(reject);
   });
+};
+
+
+export const convertImageUrlToBase64 = async (imageUrl: string): Promise<string> => {
+  try {
+    const response = await axios.get(imageUrl, { responseType: 'arraybuffer' });
+    const base64 = Buffer.from(response.data, 'binary').toString('base64');
+    const mimeType = response.headers['content-type'];
+    return `data:${mimeType};base64,${base64}`;
+  } catch (error: any) {
+    throw new Error(`Failed to convert image to Base64: ${error.message}`);
+  }
 };

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

@@ -19,6 +19,7 @@ import {
 } from "../../../../../../Context/Classroom/Meeting/MeetingListRegistration/type";
 import {
   Status,
+  convertImageUrlToBase64,
   loadImageFileAsBase64,
 } from "../../../../../../Controller/controllerGlobal";
 import styles from "../../../../../../Styles";
@@ -39,6 +40,8 @@ const Beneficiarios = () => {
 
   const [logoBase64, setLogoBase64] = useState<string | null>(null);
   const [logoBaseLeft64, setLogoBaseLeft64] = useState<string | null>(null);
+  const [logoBaseRegua64, setLogoBaseRegua64] = useState<string | null>(null);
+
 
   const FilterRegistration = (fouls: any) => {
     const array = [];
@@ -78,6 +81,24 @@ const Beneficiarios = () => {
     loadLogo();
   }, []);
 
+
+  useEffect(() => {
+    const loadLogo = async () => {
+      try {
+        if (props.meeting?.classroom.project.ruler_url) {
+          const base64 = await convertImageUrlToBase64(props.meeting?.classroom.project.ruler_url);
+
+          setLogoBaseRegua64(base64);
+        }
+
+      } catch (error) {
+        console.error("Error loading logo image:", error);
+      }
+    };
+
+    loadLogo();
+  }, [props.meeting]);
+
   const FilterId = (fouls: any) => {
     const array = [];
     for (const foul of fouls) {
@@ -247,13 +268,18 @@ const Beneficiarios = () => {
       //     alignment: 'center'
       //   };
       // },
-      footer: (currentPage: number, pageCount: number) => {
-        return {
-          text: `${currentPage} de ${pageCount}`,
+      footer: (currentPage, pageCount) => {
+        return logoBaseRegua64 ? {
+          image: logoBaseRegua64 || '',
           alignment: "center",
-          margin: [0, 0, 20, 0],
-        };
-      },
+          margin: [0, 0, 20, 20], 
+          fit: [400, 400]
+        } : {
+            text: `${currentPage} de ${pageCount}`,
+            alignment: "center",
+            margin: [0, 0, 20, 0],
+          }
+        },
       pageMargins: [40, 100, 40, 60],
       background: (currentPage, pageCount) => {
         return {

src/Pages/Classroom/ClassroomOne/Report/Pdf/index.tsx

@@ -12,7 +12,7 @@ import imgLateral from "../../../../../Assets/images/logoleftpdf.png";
 import pdfMake from "pdfmake/build/pdfmake";
 import pdfFonts from "pdfmake/build/vfs_fonts";
 import { TDocumentDefinitions } from "pdfmake/interfaces";
-import { loadImageFileAsBase64 } from "../../../../../Controller/controllerGlobal";
+import { convertImageUrlToBase64, loadImageFileAsBase64 } from "../../../../../Controller/controllerGlobal";
 
 pdfMake.vfs = pdfFonts.pdfMake.vfs;
 
@@ -21,7 +21,7 @@ export const ReportClassroom = () => {
 
   const [logoBase64, setLogoBase64] = useState<string | null>(null);
   const [logoBaseLeft64, setLogoBaseLeft64] = useState<string | null>(null);
-  // const [logoBaseRegua64, setLogoBaseRegua64] = useState<string | null>(null);
+  const [logoBaseRegua64, setLogoBaseRegua64] = useState<string | null>(null);
 
   const [report, setReport] = useState<ReportClassroomType | undefined>();
 
@@ -59,6 +59,24 @@ export const ReportClassroom = () => {
     loadLogo();
   }, []);
 
+  useEffect(() => {
+    const loadLogo = async () => {
+      try {
+        if (report?.project.ruler_url) {
+          const base64 = await convertImageUrlToBase64(report?.project.ruler_url);
+
+          setLogoBaseRegua64(base64);
+        }
+
+      } catch (error) {
+        console.error("Error loading logo image:", error);
+      }
+    };
+
+    loadLogo();
+  }, [report]);
+
+
   // useEffect(() => {
   //   const loadLogo = async () => {
   //     try {
@@ -232,7 +250,7 @@ export const ReportClassroom = () => {
 
   const generatePDF = () => {
     const pageSize = 10; // Define the number of rows per page
-  
+
     // Function to generate the table body for a specific subset of registrations
     const createTableBody = (registrationsSubset: any, startIndex: number) => {
       // Create the header row
@@ -243,7 +261,7 @@ export const ReportClassroom = () => {
         "FREQUÊNCIA",
         "STATUS",
       ];
-  
+
       // Create the body rows
       const bodyRows = registrationsSubset.map((item: any, index: number) => {
         return [
@@ -254,10 +272,10 @@ export const ReportClassroom = () => {
           parseInt(bodyTotal(item).percentage) > report?.project?.approval_percentage! ? "Aprovado" : "Reprovado",
         ];
       });
-  
+
       return [headerRow, ...bodyRows];
     };
-  
+
     const docDefinition: TDocumentDefinitions = {
       pageOrientation: "landscape",
       content: [
@@ -351,13 +369,18 @@ export const ReportClassroom = () => {
           },
         ];
       },
-      footer: (currentPage: number, pageCount: number) => {
-        return {
-          text: `${currentPage} de ${pageCount}`,
+      footer: (currentPage, pageCount) => {
+        return logoBaseRegua64 ? {
+          image: logoBaseRegua64 || '',
           alignment: "center",
-          margin: [0, 0, 20, 0],
-        };
-      },
+          margin: [0, 0, 20, 20], 
+          fit: [400, 400]
+        } : {
+            text: `${currentPage} de ${pageCount}`,
+            alignment: "center",
+            margin: [0, 0, 20, 0],
+          }
+        },
       pageMargins: [40, 60, 40, 60],
       background: (currentPage, pageCount) => {
         return {
@@ -367,10 +390,10 @@ export const ReportClassroom = () => {
         };
       },
     };
-  
+
     pdfMake.createPdf(docDefinition).open();
   };
-  
+
 
   const bodyTotal = (rowData: RegisterClassroom) => {
     var count = 0;