Index: backend/subjects/serializers.py =================================================================== --- backend/subjects/serializers.py (revision 2b670ade00e5473dbdd55f3323fb9b0ba6461eef) +++ backend/subjects/serializers.py (revision 2b85a2905c1365805f81fc749189fcb181f6665c) @@ -17,5 +17,9 @@ 'elective_for', 'professors', - 'assistants' + 'assistants', + 'tags', + 'technologies', + 'evaluation', + 'is_easy' ] class SubjectSerializer(serializers.ModelSerializer): Index: backend/subjects/views.py =================================================================== --- backend/subjects/views.py (revision 2b670ade00e5473dbdd55f3323fb9b0ba6461eef) +++ backend/subjects/views.py (revision 2b85a2905c1365805f81fc749189fcb181f6665c) @@ -8,5 +8,4 @@ from .models import Subject_Info, Subject -# Create your views here. def index(request): return HttpResponse("ok") Index: frontend/src/components/SubjectCatalog/SubjectCatalog.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision 2b670ade00e5473dbdd55f3323fb9b0ba6461eef) +++ frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision 2b85a2905c1365805f81fc749189fcb181f6665c) @@ -1,3 +1,4 @@ import { useEffect, useState } from "react"; +import { Filters, Subject } from "../types"; import FilterSidebar from "./FilterSidebar"; import SkeletonCard from "./SkeletonCard"; @@ -5,187 +6,179 @@ import SubjectList from "./SubjectList"; import SubjectModal from "./SubjectModal"; -import { Filters, Subject } from "../types"; import { filterSubjects, getRandomStaff, resetFilters } from "./utils"; const SubjectCatalog = () => { - const [visibleCourses, setVisibleCourses] = useState(10); - const [searchTerm, setSearchTerm] = useState(""); - const [professorSearchTerm, setProfessorSearchTerm] = useState(""); - const [assistantSearchTerm, setAssistantSearchTerm] = useState(""); - const [selectedSubject, setSelectedSubject] = useState(null); - const [subjectData, setSubjectData] = useState([]); - const [isLoaded, setIsLoaded] = useState(false); - const [randomStaff, setRandomStaff] = useState(["", ""]); - const [showModal, setShowModal] = useState(false); - const [filters, setFilters] = useState({ - season: "", - semester: [], - level: [], - activated: "", - mandatoryFor: [], - electiveFor: [], - professors: [], - assistants: [], - hasPrerequisites: false, - }); + const [visibleCourses, setVisibleCourses] = useState(10); + const [searchTerm, setSearchTerm] = useState(""); + const [professorSearchTerm, setProfessorSearchTerm] = useState(""); + const [assistantSearchTerm, setAssistantSearchTerm] = useState(""); + const [selectedSubject, setSelectedSubject] = useState(null); + const [subjectData, setSubjectData] = useState([]); + const [isLoaded, setIsLoaded] = useState(false); + const [randomStaff, setRandomStaff] = useState(["", ""]); + const [showModal, setShowModal] = useState(false); + const [filters, setFilters] = useState({ + season: "", + semester: [], + level: [], + activated: "", + mandatoryFor: [], + electiveFor: [], + professors: [], + assistants: [], + hasPrerequisites: false, + }); - const filteredSubjects: Subject[] = filterSubjects({ - subjectData, - searchTerm, - professorSearchTerm, - assistantSearchTerm, - filters, - }); + const filteredSubjects: Subject[] = filterSubjects({ + subjectData, + searchTerm, + professorSearchTerm, + assistantSearchTerm, + filters, + }); - useEffect(() => { - const fetchData = async () => { - const response = await fetch("http://localhost:8000/subjects"); - const data = await response.json(); - console.log(data); - setSubjectData(data); - setIsLoaded(true); - }; - fetchData(); - }, []); + useEffect(() => { + const fetchData = async () => { + const response = await fetch("http://localhost:8000/subjects"); + const data = await response.json(); + console.log(data); + setSubjectData(data); + setIsLoaded(true); + }; + fetchData(); + }, []); - useEffect(() => { - getRandomStaff(subjectData, setRandomStaff); - }, [subjectData]); + useEffect(() => { + getRandomStaff(subjectData, setRandomStaff); + }, [subjectData]); - const loadMore = () => { - setVisibleCourses((prev) => prev + 10); - }; + const loadMore = () => { + setVisibleCourses((prev) => prev + 10); + }; - const openSubjectDetails = (subject: Subject) => { - setSelectedSubject( - subjectData.find((item) => item.id == subject.id) ?? null - ); - setShowModal(true); - }; + const openSubjectDetails = (subject: Subject) => { + setSelectedSubject( + subjectData.find((item) => item.id == subject.id) ?? null + ); + setShowModal(true); + }; - const closeModal = () => { - setShowModal(false); - }; + const closeModal = () => { + setShowModal(false); + }; - const getSubjectPrerequisites = (): "Нема предуслов" | number | string[] => { - const prerequisite = selectedSubject?.subject_info?.prerequisite; - - if (!prerequisite) return "Нема предуслов"; - - if ("subjects" in prerequisite && Array.isArray(prerequisite.subjects)) { - const names = prerequisite.subjects.map( - (item) => - subjectData.find((subject) => subject.id === item)?.name || "/" - ); - return names.length > 0 ? names : "Нема предуслов"; - } - - if ("credits" in prerequisite && typeof prerequisite.credits === "number") { - return prerequisite.credits; - } - - return "Нема предуслов"; - }; - + const getSubjectPrerequisites = (): "Нема предуслов" | number | string[] => { + const prerequisite = selectedSubject?.subject_info?.prerequisite; - return ( -
-

Преглед на сите предмети

-
-
- - -
- {/* Main content */} -
- {/* Search bar */} -
- setSearchTerm(e.target.value)} - className="w-full p-3 pl-4 pr-12 border border-gray-300 rounded-lg + if (!prerequisite) return "Нема предуслов"; + + if ("subjects" in prerequisite && Array.isArray(prerequisite.subjects)) { + const names = prerequisite.subjects.map( + (item) => + subjectData.find((subject) => subject.id === item)?.name || "/" + ); + return names.length > 0 ? names : "Нема предуслов"; + } + + if ("credits" in prerequisite && typeof prerequisite.credits === "number") { + return prerequisite.credits; + } + + return "Нема предуслов"; + }; + + return ( +
+

Преглед на сите предмети

+
+
+ + +
+ {/* Main content */} +
+ {/* Search bar */} +
+ setSearchTerm(e.target.value)} + className="w-full p-3 pl-4 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" - /> - {/* */} -
+ /> +
- {/* Course grid */} + {/* Course grid */} - {!isLoaded ? ( -
- {[...Array(9)].map((_, index) => ( - - ))} -
- ) : ( - - )} + {!isLoaded ? ( +
+ {[...Array(9)].map((_, index) => ( + + ))} +
+ ) : ( + + )} - {/* Load more button */} - {isLoaded && filteredSubjects.length > visibleCourses && ( -
- -
- )} + {/* Load more button */} + {isLoaded && filteredSubjects.length > visibleCourses && ( +
+ +
+ )} - {/* No results message */} - {isLoaded && filteredSubjects.length === 0 && ( -
-

- Не постојат такви предмети -

- -
- )} -
-
- {showModal && selectedSubject && ( - - )} -
- ); + {/* No results message */} + {isLoaded && filteredSubjects.length === 0 && ( +
+

+ Не постојат такви предмети +

+ +
+ )} +
+
+ {showModal && selectedSubject && ( + + )} +
+ ); }; Index: frontend/src/components/SubjectCatalog/SubjectList.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectList.tsx (revision 2b670ade00e5473dbdd55f3323fb9b0ba6461eef) +++ frontend/src/components/SubjectCatalog/SubjectList.tsx (revision 2b85a2905c1365805f81fc749189fcb181f6665c) @@ -2,51 +2,49 @@ interface SubjectListProps { - filteredSubjects: Subject[]; - visibleCourses: number; - openSubjectDetails: (subject: Subject) => void; + filteredSubjects: Subject[]; + visibleCourses: number; + openSubjectDetails: (subject: Subject) => void; } const SubjectList = ({ - filteredSubjects, - visibleCourses, - openSubjectDetails, + filteredSubjects, + visibleCourses, + openSubjectDetails, }: SubjectListProps) => { - return ( -
- {filteredSubjects.slice(0, visibleCourses).map((subject) => ( -
+ {filteredSubjects.slice(0, visibleCourses).map((subject) => ( +
-
-
-
-

{subject.name}

-

{subject.code}

-
-
+ > +
+
+
+

{subject.name}

+

{subject.code}

+
+
- {/*

+ {/*

{subject.abstract}

*/} -
- {/* these tags are for listing the domains a subject covers, ex. backend, AI ...*/} - {["Web Development", "Machine Learning", "Data Science"].map( - (tag) => ( - - {tag} - - ) - )} -
+
+ {/* these tags are for listing the domains a subject covers, ex. backend, AI ...*/} + {subject.subject_info.tags.map((tag) => ( + + {tag} + + ))} +
-
- {/* these tags could be used as certain flags for some subjects, like most picked subject, best match etc. */} - {/*
+
+ {/* these tags could be used as certain flags for some subjects, like most picked subject, best match etc. */} + {/*
TAG1 @@ -56,17 +54,17 @@
*/} - -
-
-
- ))} -
- ); + +
+
+
+ ))} +
+ ); }; Index: frontend/src/components/types.ts =================================================================== --- frontend/src/components/types.ts (revision 2b670ade00e5473dbdd55f3323fb9b0ba6461eef) +++ frontend/src/components/types.ts (revision 2b85a2905c1365805f81fc749189fcb181f6665c) @@ -15,12 +15,15 @@ current_year: number; passed_subjects: Subject[]; - study_effort: string, - preferred_domains: string[], - preferred_technologies: string[], - preferred_evaluation: string[], - favorite_professors: string[] + study_effort: string; + preferred_domains: string[]; + preferred_technologies: string[]; + preferred_evaluation: string[]; + favorite_professors: string[]; } -type Prerequisite = { subjects: number[] } | { credits: number } | { none: true }; +type Prerequisite = + | { subjects: number[] } + | { credits: number } + | { none: true }; export interface SubjectInfo { @@ -37,4 +40,8 @@ professors: string[]; assistants: string[]; + tags: string[]; + technologies: string[]; + evaluation: string[]; + is_easy: boolean; }