feat: refactor presentation scheduling to use SchedulePresent model and update related components

hoangtuanqn · hoangtuanqn · commit 12819c0e4bf9 · 2026-01-12T11:11:58.000+07:00
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
@@ -57,13 +57,13 @@ model Team {
   topicId      String  @map("topic_id") @db.VarChar(36)
   mentorNote   String? @map("mentor_note") @db.Text
 
-  mentorship  Mentorship   @relation("MentorshipToTeam", fields: [mentorshipId], references: [id])
-  leader      Candidate?   @relation("TeamLeader", fields: [leaderId], references: [id])
-  topic       Topic        @relation(fields: [topicId], references: [id])
-  candidates  Candidate[]  @relation("CandidateToTeam")
-  submissions Submission[]
-  reports     Report[]
-  presents    Present[]
+  mentorship       Mentorship        @relation("MentorshipToTeam", fields: [mentorshipId], references: [id])
+  leader           Candidate?        @relation("TeamLeader", fields: [leaderId], references: [id])
+  topic            Topic             @relation(fields: [topicId], references: [id])
+  candidates       Candidate[]       @relation("CandidateToTeam")
+  submissions      Submission[]
+  reports          Report[]
+  schedulePresents SchedulePresent[]
 
   @@map("teams")
 }
@@ -173,20 +173,20 @@ model BaremScore {
   @@map("scores")
 }
 
-model Present {
+model SchedulePresent {
   id     String @id @default(uuid()) @db.VarChar(36)
   teamId String @map("team_id") @db.VarChar(36)
 
   trialDate    String @unique @map("trial_date") @db.VarChar(255)
   officialDate Json   @map("offical_date") @db.Json
+  finalDate    String @unique @map("final_date") @db.VarChar(255)
 
   createdAt DateTime @default(now()) @map("created_at")
   updatedAt DateTime @updatedAt @map("updated_at")
 
-  // Quan hệ với model Team
   team Team @relation(fields: [teamId], references: [id])
 
-  @@map("presents")
+  @@map("schedule_presents")
 }
 
 enum Role {
diff --git a/backend/src/repositories/team.repository.ts b/backend/src/repositories/team.repository.ts
@@ -2,7 +2,8 @@ import prisma from "~/configs/prisma";
 import { paginate } from "~/utils/pagination";
 import userRespository from "./user.repository";
 import { RoleType } from "~/constants/enums";
-import Present from "~/schemas/present.schema";
+import Present from "~/schemas/schedule-present.schema";
+import SchedulePresent from "~/schemas/schedule-present.schema";
 
 class TeamRepository {
     findWithPagination = async () => {
@@ -239,8 +240,8 @@ class TeamRepository {
     };
 
     createPresentationSchedule = async (data: { teamId: string; trialDate: string; officialDate: string[] }) => {
-        return prisma.present.create({
-            data: new Present({
+        return prisma.schedulePresent.create({
+            data: new SchedulePresent({
                 teamId: data.teamId,
                 trialDate: data.trialDate,
                 officialDate: data.officialDate,
diff --git a/backend/src/schemas/schedule-present.schema.ts b/backend/src/schemas/schedule-present.schema.ts
@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
 
-interface PresentType {
+interface SchedulePresentType {
     id?: string;
     teamId: string;
     trialDate: string;
@@ -9,14 +9,14 @@ interface PresentType {
     updatedAt?: Date;
 }
 
-class Present {
+class SchedulePresent {
     id: string;
     teamId: string;
     trialDate: string;
     officialDate: string[];
     createdAt: Date;
     updatedAt: Date;
-    constructor(present: PresentType) {
+    constructor(present: SchedulePresentType) {
         this.id = present.id || uuidv4();
         this.teamId = present.teamId;
         this.trialDate = present.trialDate;
@@ -26,4 +26,4 @@ class Present {
     }
 }
 
-export default Present;
+export default SchedulePresent;
diff --git a/frontend/src/pages/Present/ConfirmRegister.tsx b/frontend/src/pages/Present/ConfirmRegister.tsx
@@ -0,0 +1,94 @@
+import { Calendar, Clock } from "lucide-react";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "~/components/ui/alert-dialog";
+
+const ConfirmRegister = ({
+    handleConfirmSubmit,
+    showConfirmDialog,
+    setShowConfirmDialog,
+    trialSlot,
+    officialSlots,
+}: {
+    handleConfirmSubmit: () => void;
+    showConfirmDialog: boolean;
+    setShowConfirmDialog: React.Dispatch<React.SetStateAction<boolean>>;
+    trialSlot: string;
+    officialSlots: string[];
+}) => {
+    return (
+        <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+            <AlertDialogContent className="max-w-2xl">
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Xác nhận đăng ký thời gian thuyết trình</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        Kiểm tra lại thông tin đăng ký của bạn trước khi xác nhận.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+
+                <div className="space-y-4 pb-4">
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <Clock className="h-4 w-4 text-blue-500" />
+                            <h4 className="font-semibold text-gray-900">Thuyết trình thử</h4>
+                        </div>
+                        {trialSlot ? (
+                            <div className="rounded-md border-1 border-blue-400 bg-blue-50 p-3">
+                                <div className="flex items-center gap-2 text-sm">
+                                    <Calendar className="h-3.5 w-3.5 text-blue-600" />
+                                    <span className="font-medium text-blue-900">{trialSlot.split("|")[0]}</span>
+                                    <span className="text-blue-600"> - </span>
+                                    <span className="text-blue-800">{trialSlot.split("|")[1]}</span>
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="">
+                                <p className="text-sm text-gray-500 italic">Không đăng ký</p>
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                            <Clock className="h-4 w-4 text-green-600" />
+                            <h4 className="font-semibold text-green-700">Thuyết trình chính thức</h4>
+                        </div>
+                        <div className="space-y-2">
+                            {officialSlots.map((slot) => (
+                                <div key={slot} className="bg-primary/10 border-primary rounded-md border-1 p-3">
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Calendar className="h-3.5 w-3.5 text-green-600" />
+                                        <span className="font-medium text-green-900">{slot.split("|")[0]}</span>
+                                        <span className="text-green-600"> - </span>
+                                        <span className="text-green-800">{slot.split("|")[1]}</span>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="rounded-md border border-amber-200 bg-amber-50 p-3">
+                        <p className="text-sm text-amber-800">
+                            <span className="font-semibold">Lưu ý:</span> Sau khi xác nhận, thông tin sẽ được gửi đến
+                            ban tổ chức. Đảm bảo tất cả thành viên có thể tham gia các khung giờ đã chọn.
+                        </p>
+                    </div>
+                </div>
+
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Hủy</AlertDialogCancel>
+                    <AlertDialogAction onClick={handleConfirmSubmit}>Xác nhận</AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+};
+
+export default ConfirmRegister;
diff --git a/frontend/src/pages/Present/FormRegisterPresent.tsx b/frontend/src/pages/Present/FormRegisterPresent.tsx
@@ -1,23 +1,28 @@
 import React, { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
 import { Calendar, Clock, Send } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
 import { Checkbox } from "~/components/ui/checkbox";
 import { Label } from "~/components/ui/label";
 
+import TeamApi from "~/api-requests/team.requests";
+import Notification from "~/utils/notification";
+import { useAppSelector } from "~/hooks/useRedux";
+import type { AxiosError } from "axios";
+import ConfirmRegister from "./ConfirmRegister";
+
 interface TimeSlots {
     [date: string]: string[];
 }
 
-// Thời gian thuyết trình thử - mỗi ngày 4 slot
 const trialTimeSlots: TimeSlots = {
     "17/01/2026": ["7:00 - 7:45", "8:00 - 8:45", "9:00 - 9:45", "10:00 - 10:45"],
     "18/01/2026": ["7:00 - 7:45", "8:00 - 8:45", "9:00 - 9:45", "10:00 - 10:45"],
     "19/01/2026": ["7:00 - 7:45", "8:00 - 8:45", "9:00 - 9:45", "10:00 - 10:45"],
     "20/01/2026": ["7:00 - 7:45", "8:00 - 8:45", "9:00 - 9:45", "10:00 - 10:45"],
 };
 
-// Thời gian thuyết trình chính thức - mỗi ngày 2 slot
 const officialTimeSlots: TimeSlots = {
     "17/01/2026": ["13:00 - 13:45", "14:00 - 14:45"],
     "18/01/2026": ["13:00 - 13:45", "14:00 - 14:45"],
@@ -26,8 +31,30 @@ const officialTimeSlots: TimeSlots = {
 };
 
 const FormRegisterPresent = () => {
+    const userInfo = useAppSelector((state) => state.user.userInfo);
+    const teamId = userInfo.candidate?.teamId || "";
+
     const [trialSlot, setTrialSlot] = useState<string>("");
     const [officialSlots, setOfficialSlots] = useState<string[]>([]);
+    const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+
+    const registerMutation = useMutation({
+        mutationFn: (data: { teamId: string; trialDate: string; officialDate: string[] }) =>
+            TeamApi.createSchedulePresentation(data),
+        onError: (error: AxiosError<{ message?: string }>) => {
+            console.log(error);
+            Notification.error({
+                text: error.response?.data?.message || "Đăng ký thời gian thuyết trình thất bại!",
+            });
+        },
+        onSuccess: () => {
+            Notification.success({
+                text: "Đăng ký thời gian thuyết trình thành công!",
+            });
+            setTrialSlot("");
+            setOfficialSlots([]);
+        },
+    });
 
     const handleOfficialSlotChange = (slot: string) => {
         setOfficialSlots((prev) => {
@@ -40,11 +67,16 @@ const FormRegisterPresent = () => {
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        console.log({
-            trialSlot,
-            officialSlots,
+        setShowConfirmDialog(true);
+    };
+
+    const handleConfirmSubmit = () => {
+        registerMutation.mutate({
+            teamId,
+            trialDate: trialSlot || "",
+            officialDate: officialSlots,
         });
-        // TODO: Implement API call
+        setShowConfirmDialog(false);
     };
 
     return (
@@ -70,8 +102,15 @@ const FormRegisterPresent = () => {
                     </div>
                     <p className="text-sm text-gray-600">
                         Chọn <span className="font-semibold">MỘT</span> khung giờ để thuyết trình thử nghiệm và nhận
-                        phản hồi
+                        phản hồi từ mentor.
                     </p>
+                    <div className="rounded-md border-l-4 border-blue-400 bg-blue-50 p-3">
+                        <p className="text-xs text-blue-800">
+                            <span className="font-semibold">Lưu ý:</span> Chỉ có{" "}
+                            <span className="font-bold">10 slot</span> thuyết trình thử cho toàn bộ các nhóm. Mỗi nhóm
+                            chỉ được chọn 1 khung giờ tham gia.
+                        </p>
+                    </div>
 
                     <RadioGroup value={trialSlot} onValueChange={setTrialSlot}>
                         {Object.entries(trialTimeSlots).map(([date, slots]) => (
@@ -104,7 +143,6 @@ const FormRegisterPresent = () => {
 
                 <div className="border-t border-gray-200"></div>
 
-                {/* Official Presentation */}
                 <div className="space-y-4">
                     <div className="flex items-center gap-2">
                         <Clock className="h-5 w-5 text-green-600" />
@@ -117,6 +155,13 @@ const FormRegisterPresent = () => {
                         Chọn <span className="font-semibold text-green-700">NHIỀU</span> khung giờ bạn có thể tham gia
                         thuyết trình chính thức
                     </p>
+                    <div className="rounded-md border-l-4 border-green-400 bg-green-50 p-3">
+                        <p className="text-xs text-green-800">
+                            <span className="font-semibold">Lưu ý:</span> Tất cả các nhóm đều được quyền tham gia thuyết
+                            trình chính thức. Vui lòng chọn <span className="font-bold">TẤT CẢ</span> các khung giờ mà{" "}
+                            <span className="font-bold">TẤT CẢ</span> thành viên trong nhóm có thể tham gia được.
+                        </p>
+                    </div>
 
                     <div className="space-y-4">
                         {Object.entries(officialTimeSlots).map(([date, slots]) => (
@@ -147,22 +192,29 @@ const FormRegisterPresent = () => {
                     </div>
                 </div>
 
-                {/* Submit Button */}
                 <div className="flex items-center gap-3 border-t border-gray-200/70 pt-5">
                     <Button
                         type="submit"
                         className="group flex items-center gap-2 transition-all hover:shadow-md"
-                        disabled={officialSlots.length === 0}
+                        disabled={officialSlots.length === 0 || registerMutation.isPending}
                     >
                         <Send className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-                        Đăng ký
+                        {registerMutation.isPending ? "Đang đăng ký..." : "Đăng ký"}
                     </Button>
                     <p className="text-xs text-gray-500">
                         <span className="font-semibold text-red-600">Lưu ý:</span> Bạn phải chọn ít nhất 1 khung giờ cho
                         thuyết trình chính thức
                     </p>
                 </div>
             </form>
+
+            <ConfirmRegister
+                handleConfirmSubmit={handleConfirmSubmit}
+                showConfirmDialog={showConfirmDialog}
+                setShowConfirmDialog={setShowConfirmDialog}
+                trialSlot={trialSlot}
+                officialSlots={officialSlots}
+            />
         </section>
     );
 };
