Add new Chapter structure (doesn't work yet, because backend is slacking)

Author: Alexandra Zwinger

src/components/ModuleProgressSettings.tsx

@@ -1,38 +1,18 @@
 import React, {useState} from 'react';
 import '../styles/Modal.css';
 import {CuteButton} from './CuteButton';
+import {Chapter, UserModule} from "../dtos/ModuleDto";
 
 interface ModalProps {
     isOpen: boolean;
     onClose: () => void;
+    module: UserModule;
 }
 
-interface Checkbox {
-    id: number;
-    text: string;
-    checked: boolean;
-}
-
-interface Chapter {
-    id: number;
-    title: string;
-    checkboxes: Checkbox[];
-}
+const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module}) => {
+    const [chapters, setChapters] = useState<Chapter[]>(module.chapter);
 
-const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
-    const [chapters, setChapters] = useState<Chapter[]>([
-        {
-            id: 1,
-            title: 'Kapitel 1',
-            checkboxes: [
-                {id: 1, text: 'Checkbox 1', checked: false},
-                {id: 2, text: 'Checkbox 2', checked: false},
-                {id: 3, text: 'Checkbox 3', checked: false},
-            ],
-        },
-    ]);
-
-    const toggleCheckbox = (chapterId: number, checkboxId: number) => {
+    const toggleCheckbox = (chapterId: string, checkboxId: string) => {
         setChapters((prevChapters) =>
             prevChapters.map((chapter) =>
                 chapter.id === chapterId
@@ -49,9 +29,9 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
         );
     };
 
-    const addCheckbox = (chapterId: number) => {
+    const addCheckbox = (chapterId: string) => {
         const newCheckbox = {
-            id: Date.now(),
+            id: Date.now().toString(),
             text: `Checkbox ${Math.random()}`,
             checked: false,
         };
@@ -65,7 +45,7 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
         );
     };
 
-    const deleteCheckbox = (chapterId: number, checkboxId: number) => {
+    const deleteCheckbox = (chapterId: string, checkboxId: string) => {
         setChapters((prevChapters) =>
             prevChapters.map((chapter) =>
                 chapter.id === chapterId
@@ -82,13 +62,17 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
 
     const addChapter = () => {
         const newChapter = {
-            id: Date.now(),
+            id: Date.now().toString(),
             title: `Kapitel ${chapters.length + 1}`,
             checkboxes: [],
         };
         setChapters((prev) => [...prev, newChapter]);
     };
 
+    const saveProgress = () => {
+        //TODO
+    }
+
     return (
         <div className="modal-overlay" onClick={onClose}>
             <div className="modal-content p-8 min-w-[300px] w-[650px] overflow-y-scroll  max-h-[80%] max-w-[90%]"
@@ -179,6 +163,7 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
                         text={'Speichern'}
                         bgColor={"#56A095"} textColor={"#e8fcf6"}
                         classname={'sm:text-2xl text-lg'}
+                        onClick={saveProgress}
                     />
                 </div>
 

src/components/yourStudies/UserInfo.tsx

@@ -4,13 +4,14 @@ import {getMeetingsOfWeek} from "../../api/MeetingApi";
 import axiosInstance from "../../AxiosConfig";
 import {MeetingDto} from "../../dtos/MeetingDto";
 import ModuleProgressSettings from "../ModuleProgressSettings";
-import {ModuleDto} from "../../dtos/ModuleDto";
+import {Chapter, Checkbox, UserModule} from "../../dtos/ModuleDto";
 import {getUser} from "../../api/UserApi";
 
 export default function UserInfo() {
     const [weeklyMeetings, setWeeklyMeetings] = useState<MeetingDto[]>([]);
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-    const [modules, setModules] = useState<ModuleDto[]>([]);
+    const [modules, setModules] = useState<UserModule[]>([]);
+    const [activeModule, setActiveModule] = useState<UserModule | undefined>();
 
     const filterMeetingsForCurrentWeek = (meetings: MeetingDto[]) => {
         const currentDate = new Date();
@@ -45,22 +46,37 @@ export default function UserInfo() {
         fetchUserInfo();
     }, []);
 
-    const openModal = () => {
+    const openModal = (moduleName: string) => {
+        setActiveModule(modules.find((m) => m.name === moduleName));
         setIsModalOpen(true);
     };
 
     const closeModal = () => {
         setIsModalOpen(false);
     };
 
+    const calculateProgress = (module: UserModule): number => {
+        if (!module.chapter?.length) return 0;
+
+        let checked = 0;
+        let total = 0;
+
+        module.chapter.forEach((chapter: Chapter) => {
+            total += chapter.checkboxes.length;
+            checked += chapter.checkboxes.filter((box: Checkbox) => box.checked).length;
+        });
+
+        return total === 0 ? 0 : checked / total;
+    }
+
     return (
         <div className="lg:w-[60%] w-[80%] sm:px-8 mb-16 justify-center mt-8">
             <div className="w-full md:px-16">
                 <p className="text-2xl font-bold text-white text-left lg:mt-4 mt-16 mb-7">Prüfungstermine</p>
 
                 <table className="w-full border-collapse hidden md:table">
                     <tbody>
-                    {modules.map((subject, index) => (
+                    {modules && modules.map((subject, index) => (
                         <tr key={index}>
                             <td className="px-1 py-1 text-[#9B9B9B]">{subject.name}</td>
                             <td className="px-1 py-1 text-[#2AB19D]">DATE</td>
@@ -71,7 +87,7 @@ export default function UserInfo() {
                     </tbody>
                 </table>
                 <div className="md:hidden space-y-4">
-                    {modules.map((subject, index) => (
+                    {modules && modules.map((subject, index) => (
                         <div key={index} className="p-3 shadow-sm">
                             <p className="text-[#9B9B9B]">
                                 {subject.name}
@@ -128,17 +144,20 @@ export default function UserInfo() {
                 </div>
 
                 <p className="text-2xl font-bold text-white text-left mt-9 mb-6">Lernfortschritt</p>
-                {modules.map((subject, index) => (
+                {modules && modules.map((subject, index) => (
                     <div key={index} className="mb-6">
                         <p className="text-m text-[#9B9B9B]">{subject.name}</p>
-                        <div onClick={openModal}>
-                            <ProgressBar progress={0.5}/>
+                        <div onClick={() => {
+                            openModal(subject.name)
+                        }}>
+                            <ProgressBar progress={calculateProgress(subject)}/>
                         </div>
                     </div>
                 ))}
             </div>
             {
-                isModalOpen && <ModuleProgressSettings isOpen={isModalOpen} onClose={closeModal}/>
+                isModalOpen && activeModule &&
+                <ModuleProgressSettings isOpen={isModalOpen} onClose={closeModal} module={activeModule}/>
             }
         </div>
     );

src/dtos/ModuleDto.tsx

@@ -1,3 +1,20 @@
 export type ModuleDto = {
     name: string;
-}
+}
+
+export type UserModule = {
+    name: string;
+    chapter: Chapter[];
+}
+
+export type  Checkbox = {
+    id: string;
+    text: string;
+    checked: boolean;
+}
+
+export type  Chapter = {
+    id: string;
+    title: string;
+    checkboxes: Checkbox[];
+}

src/dtos/UserDto.tsx

@@ -1,7 +1,7 @@
-import {ModuleDto} from "./ModuleDto";
+import {UserModule} from "./ModuleDto";
 
 export type UserDto = {
     username: string;
     uuid: string;
-    modules: ModuleDto[];
+    modules: UserModule[];
 }