[Makeup Exam] Filled format with form data.

Emanuel-Palestino · Jan 21, 2024 · 700a54d · 700a54d
1 parent 819f84a
commit 700a54d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 27 deletions.
diff --git a/app/printingFormats/makeup_exam/Format.tsx b/app/printingFormats/makeup_exam/Format.tsx
@@ -1,20 +1,22 @@
+import { formatedDate } from '@/app/utils/format'
 import logo from '@/public/UTMEscudo.png'
+import { MakeUpExam } from '@/src/models/MakeUpExam'
 import Image from 'next/image'
 import { FC } from 'react'
 
 
-export const Format = () => {
+export const Format: FC<{ data: MakeUpExam, date: Date }> = ({ data, date }) => {
 
 	return (
 		<section className="w-full h-full text-[15px] px-6 flex flex-col justify-between">
-			<Section to="Servicios Escolares" />
-			<Section to="el alumno" />
+			<Section to="Servicios Escolares" data={data} date={date} />
+			<Section to="el alumno" data={data} date={date} />
 		</section>
 	)
 
 }
 
-const Section: FC<{ to: string }> = ({ to }) => {
+const Section: FC<{ to: string, data: MakeUpExam, date: Date }> = ({ to, data, date }) => {
 
 	return (
 		<div>
@@ -30,46 +32,46 @@ const Section: FC<{ to: string }> = ({ to }) => {
 			<div className="flex flex-col gap-3">
 				<div className="flex gap-4">
 					<p className="font-semibold">NOMBRE DEL ALUMNO:</p>
-					<p>Palestino Hernández Emanuel</p>
+					<p>{data.paternalSurname} {data.maternalSurname} {data.name}</p>
 				</div>
 
 				<div className="flex gap-6">
 					<div className="flex gap-4">
 						<p className="font-semibold">MATRÍCULA:</p>
-						<p>2019020337</p>
+						<p>{data.enrollment}</p>
 					</div>
 					<div className="flex gap-4">
 						<p className="font-semibold">GRUPO ACTUAL:</p>
-						<p>902-A</p>
+						<p>{data.group}</p>
 					</div>
 					<div className="flex gap-4">
 						<p className="font-semibold">PORCENTAJE DE BECA:</p>
-						<p>100%</p>
+						<p>{data.percentageOfScholarship}%</p>
 					</div>
 				</div>
 
 				<div className="flex gap-4 items-center">
 					<p className="font-semibold">MATERIA(S):</p>
-					<p>Ingenieria de requerimientos, pruebas de software, matematicas aplicadas, otra materia de relleno</p>
+					<p>{data.makeupExamCourses}</p>
 				</div>
 
 				<div className="flex gap-4">
 					<p className="font-semibold">SEMESTRE AL QUE CORRESPONDE(N) LAS MATERIA(S):</p>
-					<p>Noveno</p>
+					<p>{data.semester}</p>
 				</div>
 
 				<div className="flex gap-4">
-					<p>1° Extraordinario (✔)</p>
-					<p>2° Extraordinario (✔)</p>
+					<p>1° Extraordinario ({data.makeUpExamNumber == 1 ? '✔' : null})</p>
+					<p>2° Extraordinario ({data.makeUpExamNumber == 2 ? '✔' : null})</p>
 					<div className="flex gap-4">
 						<p>Número de materias cursadas y/o recursadas:</p>
-						<p>5</p>
+						<p>{data.courses}</p>
 					</div>
 				</div>
 			</div>
 
 			<div className="mt-4 text-center">
-				<p>HUAJUAPAN DE LEÓN, OAX, A 19 de Enero de 2023</p>
+				<p>HUAJUAPAN DE LEÓN, OAX, A {formatedDate(date)}</p>
 			</div>
 
 			<p className="font-bold mt-2 leading-none text-[14px]">En caso de que el alumno no tenga derecho a presentar el examen de acuerdo al Reglamento de alumnos de Licenciatura vigente, la calificación obtenida en el examen no tendrá validez.</p>

diff --git a/app/ui/makeup_exam/Form.tsx b/app/ui/makeup_exam/Form.tsx
@@ -10,15 +10,19 @@ import { Controller, useForm } from "react-hook-form"
 import { PDFWrapper } from "../PDFWrapper"
 import { Format } from "@/app/printingFormats/makeup_exam/Format"
 import { usePDF } from "@/src/hooks/usePDF"
+import { useState } from "react"
 
 
 export const Form = () => {
 
 	const { target, createPDF } = usePDF('Solicitud de Examen Extraordinario')
+	const [data, setData] = useState<MakeUpExam>()
+
+	const updateData = async (data: MakeUpExam) => setData(data)
 
 	const {
 		handleSubmit,
-		control,
+		control
 	} = useForm<MakeUpExam>({
 		defaultValues: {
 			name: '',
@@ -27,17 +31,18 @@ export const Form = () => {
 			enrollment: '',
 			group: '',
 			percentageOfScholarship: 100,
-			courses: '',
+			makeupExamCourses: '',
 			semester: 'Primero',
 			makeUpExamNumber: 1,
-			retakenCourses: 0,
+			courses: 0,
 
 		}
 	})
 
-	const onSubmit = handleSubmit(data => {
+	const onSubmit = handleSubmit(async data => {
 		data.makeUpExamNumber = Number(data.makeUpExamNumber)
-		data.retakenCourses = Number(data.retakenCourses)
+		data.courses = Number(data.courses)
+		await updateData(data)
 
 		createPDF()
 	})
@@ -117,7 +122,7 @@ export const Form = () => {
 
 						<h3 className="col-span-3 text-xl">Solicitud</h3>
 						<Controller
-							name="courses"
+							name="makeupExamCourses"
 							control={control}
 							render={({ field }) => (
 								<Input
@@ -134,7 +139,7 @@ export const Form = () => {
 							control={control}
 							render={({ field }) => (
 								<Select
-									label="Semestre"
+									label="Semestre de la(s) materia(s)"
 									isRequired
 									{...field}
 									selectedKeys={[field.value]}
@@ -170,7 +175,7 @@ export const Form = () => {
 						/>
 
 						<Controller
-							name="retakenCourses"
+							name="courses"
 							control={control}
 							render={({ field }) => (
 								<Input
@@ -190,9 +195,11 @@ export const Form = () => {
 				</CardBody>
 			</Card>
 
-			<PDFWrapper target={target}>
-				<Format />
-			</PDFWrapper>
+			{data ? (
+				<PDFWrapper target={target}>
+					<Format data={data} date={new Date()} />
+				</PDFWrapper>
+			) : null}
 		</>
 
 	)

diff --git a/src/models/MakeUpExam.ts b/src/models/MakeUpExam.ts
@@ -5,8 +5,8 @@ export interface MakeUpExam {
 	enrollment: string
 	group: string
 	percentageOfScholarship: number
-	courses: string
+	makeupExamCourses: string
 	semester: string
 	makeUpExamNumber: number
-	retakenCourses: number
+	courses: number
 }