Index: frontend/src/components/SubjectCatalog.tsx =================================================================== --- frontend/src/components/SubjectCatalog.tsx (revision 6935b4669fd8b28338920bac1a2f44db903f1724) +++ frontend/src/components/SubjectCatalog.tsx (revision cc86fbd913388ff4fb65f4d8c9d3227c9a758ef6) @@ -1,15 +1,26 @@ import { useEffect, useState } from "react"; -import { Subject } from "../types"; +import { PROGRAMS } from "../constants/subjects"; +import { Programs, Subject } from "../types"; import SubjectModal from "./SubjectModal"; 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: "" as "W" | "S" | "", semester: [] as number[], + level: [] as number[], + activated: "" as "activated" | "not_activated" | "", + mandatoryFor: [] as Programs[], + electiveFor: [] as Programs[], + professors: [] as string[], + assistants: [] as string[], + hasPrerequisites: false as boolean, }); @@ -17,15 +28,4 @@ /* filter checklist - [] level: number; - ? prerequisite: string; - [] activated: boolean; - ? participants: number[]; - [] mandatory: boolean; - [] mandatory_for: string[]; - [x] semester: number; - [x] season: string; - [] elective_for: string[]; - ?professors: string[]; - ?assistants: string[]; izbrisi btn da raboti @@ -34,27 +34,4 @@ */ } - - const SkeletonCard = () => { - return ( -
-
-
- -
-
- -
-
-
-
-
- -
-
-
-
-
- ); - }; const filteredSubjects = subjectData.filter((subject) => { @@ -71,54 +48,74 @@ filters.semester.includes(subject.info.semester); - return searchMatches && seasonMatches && semesterMatches; + const levelMatches = + filters.level.length === 0 || filters.level.includes(subject.info.level); + + const activatedMatches = + filters.activated == "" || + (filters.activated == "activated" && subject.info.activated) || + (filters.activated == "not_activated" && !subject.info.activated); + + const mandatoryMatches = + filters.mandatoryFor.length === 0 || + subject.info.mandatory_for.some((item) => + filters.mandatoryFor.includes(item) + ); + + const electiveMatches = + filters.electiveFor.length === 0 || + subject.info.elective_for.some((item) => + filters.electiveFor.includes(item) + ); + + const professorsMatches = + professorSearchTerm == "" || + subject.info.professors.some((item) => + item.toLowerCase().includes(professorSearchTerm.toLowerCase()) + ); + + const assistantsMatches = + assistantSearchTerm == "" || + subject.info.assistants.some((item) => + item.toLowerCase().includes(assistantSearchTerm.toLowerCase()) + ); + + const prerequisitesMatch = + !filters.hasPrerequisites || subject.info.prerequisite == ""; + + return ( + searchMatches && + seasonMatches && + semesterMatches && + levelMatches && + activatedMatches && + mandatoryMatches && + electiveMatches && + professorsMatches && + assistantsMatches && + prerequisitesMatch + ); }); - useEffect(() => { - const fetchData = async () => { - const response = await fetch("http://localhost:8000/subjects"); - const data = await response.json(); - setSubjectData(data.subjects); - setIsLoaded(true); - }; - fetchData(); - }, []); - - const loadMore = () => { - setVisibleCourses((prev) => prev + 10); - }; - - const openSubjectDetails = (subject: Subject) => { - setSelectedSubject(subjectData[subject.id - 1]); - setShowModal(true); - }; - - const closeModal = () => { - setShowModal(false); - }; - - return ( -
-

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

-
- {/* filters sidebar */} -
-
-

Филтри

- -
- {/* TODO: add more filters following this template*/} -
- {/* filter by season*/} -
-

Сезона

+ const FilterSidebar = () => { + return ( +
+
+

Филтри

+ +
+
+ {/* filter by season*/} +
+

Семестар

+
{["Летен", "Зимски"].map((season) => { const seasonValue = season === "Летен" ? "S" : "W"; return ( -
+
- - {/* filter by semester*/} -
-

Семестар

-
- {Array.from(Array(8)).map((_, index) => { - const i = index + 1; - return ( -
- - setFilters((prev) => ({ - ...prev, - semester: prev.semester.includes(i) - ? prev.semester.filter((item) => item !== i) - : [...prev.semester, i], - })) - } - checked={filters.semester.includes(i)} - className="h-4 w-4 rounded border-gray-300 text-blue-600" - /> - -
- ); - })} -
+
+ + {/* filter by semester*/} +
+ {/*

Семестар

*/} +
+ {Array.from(Array(8)).map((_, index) => { + const i = index + 1; + return ( +
+ + setFilters((prev) => ({ + ...prev, + semester: prev.semester.includes(i) + ? prev.semester.filter((item) => item !== i) + : [...prev.semester, i], + })) + } + checked={filters.semester.includes(i)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by level */} +
+

Ниво

+
+ {Array.from(Array(3)).map((_, index) => { + const i = index + 1; + const level = `L${i}`; + return ( +
+ + setFilters((prev) => ({ + ...prev, + level: prev.level.includes(i) + ? prev.level.filter((item) => item !== i) + : [...prev.level, i], + })) + } + checked={filters.level.includes(i)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by activation*/} +
+

Активирани

+
+ {["Активирани", "Неактивирани"].map((value) => { + const activeValue = + value === "Активирани" ? "activated" : "not_activated"; + return ( +
+ + setFilters((prev) => ({ + ...prev, + activated: + prev.activated === activeValue ? "" : activeValue, + })) + } + checked={filters.activated === activeValue} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by mandatoryFor */} +
+

Задолжителен за:

+
+ {PROGRAMS.map((program) => { + const programName = program.replace(/\d+$/, ""); + return ( +
+ + setFilters((prev) => ({ + ...prev, + mandatoryFor: prev.mandatoryFor.includes(program) + ? prev.mandatoryFor.filter( + (item) => item !== program + ) + : [...prev.mandatoryFor, program], + })) + } + checked={filters.mandatoryFor.includes(program)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by electiveFor */} +
+

Изборен за:

+
+ {PROGRAMS.map((program) => { + const programName = program.replace(/\d+$/, ""); + return ( +
+ + setFilters((prev) => ({ + ...prev, + electiveFor: prev.electiveFor.includes(program) + ? prev.electiveFor.filter( + (item) => item !== program + ) + : [...prev.electiveFor, program], + })) + } + checked={filters.electiveFor.includes(program)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ); + })} +
+
+ {/* filter by level */} +
+
+ + setFilters((prev) => ({ + ...prev, + hasPrerequisites: !prev.hasPrerequisites, + })) + } + checked={filters.hasPrerequisites} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> +
- +
+ ); + }; + + const SkeletonCard = () => { + return ( +
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ ); + }; + + useEffect(() => { + const fetchData = async () => { + const response = await fetch("http://localhost:8000/subjects"); + const data = await response.json(); + setSubjectData(data.subjects); + setIsLoaded(true); + }; + fetchData(); + }, []); + + useEffect(() => { + if (subjectData.length == 0) return; + const getRandomProfessor = () => { + const randomSubject1 = + subjectData[Math.floor(Math.random() * subjectData.length)]; + return randomSubject1?.info.professors[ + Math.floor(Math.random() * randomSubject1.info.professors.length) + ]; + }; + const getRandomAssistant = () => { + const randomSubject2 = + subjectData[Math.floor(Math.random() * subjectData.length)]; + return randomSubject2?.info.assistants[ + Math.floor(Math.random() * randomSubject2.info.assistants.length) + ]; + }; + let randomProfessor = ""; + let randomAssistant = ""; + + while (!randomProfessor) randomProfessor = getRandomProfessor(); + while (!randomAssistant) randomAssistant = getRandomAssistant(); + + setRandomStaff([randomProfessor, randomAssistant]); + }, [subjectData]); + + const loadMore = () => { + setVisibleCourses((prev) => prev + 10); + }; + + const openSubjectDetails = (subject: Subject) => { + setSelectedSubject(subjectData[subject.id - 1]); + setShowModal(true); + }; + + const closeModal = () => { + setShowModal(false); + }; + return ( +
+

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

+
+
+ +
+

Пребарај по професор:

+ { + return setProfessorSearchTerm(e.target.value); + }} + className="w-full py-3 px-2 border border-gray-300 rounded-lg + focus:ring-2 focus:ring-blue-500 focus:border-blue-500" + /> +
+
+

Пребарај по асистент:

+ { + return setAssistantSearchTerm(e.target.value); + }} + className="w-full py-3 px-2 border border-gray-300 rounded-lg + focus:ring-2 focus:ring-blue-500 focus:border-blue-500" + /> +
+
{/* Main content */}
Index: frontend/src/constants/subjects.ts =================================================================== --- frontend/src/constants/subjects.ts (revision cc86fbd913388ff4fb65f4d8c9d3227c9a758ef6) +++ frontend/src/constants/subjects.ts (revision cc86fbd913388ff4fb65f4d8c9d3227c9a758ef6) @@ -0,0 +1,8 @@ +export const PROGRAMS = [ + "SIIS23", + "IMB23", + "PIT23", + "IE23", + "KI23", + "KN23", +] as const; Index: frontend/src/types.ts =================================================================== --- frontend/src/types.ts (revision 6935b4669fd8b28338920bac1a2f44db903f1724) +++ frontend/src/types.ts (revision cc86fbd913388ff4fb65f4d8c9d3227c9a758ef6) @@ -1,2 +1,4 @@ +import { PROGRAMS } from "./constants/subjects"; + export interface Subject { id: number; @@ -14,9 +16,11 @@ participants: number[]; mandatory: boolean; - mandatory_for: string[]; + mandatory_for: Programs[]; semester: number; season: string; - elective_for: string[]; + elective_for: Programs[]; professors: string[]; assistants: string[]; } + +export type Programs = (typeof PROGRAMS)[number]; Index: tmp.txt =================================================================== --- tmp.txt (revision cc86fbd913388ff4fb65f4d8c9d3227c9a758ef6) +++ tmp.txt (revision cc86fbd913388ff4fb65f4d8c9d3227c9a758ef6) @@ -0,0 +1,397 @@ + + +export default function CourseCatalog() { + const [visibleCourses, setVisibleCourses] = useState(10); + const [searchTerm, setSearchTerm] = useState(''); + const [selectedCourse, setSelectedCourse] = useState(null); + const [showModal, setShowModal] = useState(false); + const [filters, setFilters] = useState({ + department: [] as string[], + semester: [] as string[], + level: [] as string[] + }); + + // Filter and search logic + const filteredCourses = courseData.filter(course => { + // Search term filter + const matchesSearch = + course.name.toLowerCase().includes(searchTerm.toLowerCase()) || + course.code.toLowerCase().includes(searchTerm.toLowerCase()) || + course.description.toLowerCase().includes(searchTerm.toLowerCase()); + + // Department filter + const departmentMatch = filters.department.length === 0 || + filters.department.includes(course.department); + + // Semester filter + const semesterMatch = filters.semester.length === 0 || + filters.semester.includes(course.semester); + + // Level filter + const levelMatch = filters.level.length === 0 || + filters.level.includes(course.level); + + return matchesSearch && departmentMatch && semesterMatch && levelMatch; + }); + + // Handler for checkbox filters + const handleFilterChange = (category: 'department' | 'semester' | 'level', value: string) => { + setFilters(prev => { + const updatedFilters = { ...prev }; + if (updatedFilters[category].includes(value)) { + updatedFilters[category] = updatedFilters[category].filter(item => item !== value); + } else { + updatedFilters[category] = [...updatedFilters[category], value]; + } + return updatedFilters; + }); + }; + + // Reset filters + const resetFilters = () => { + setFilters({ + department: [], + semester: [], + level: [] + }); + setSearchTerm(''); + }; + + // Load more courses + const loadMore = () => { + setVisibleCourses(prev => prev + 10); + }; + + // Open course details modal + const openCourseDetails = (course: Course) => { + setSelectedCourse(course); + setShowModal(true); + }; + + // Close course details modal + const closeModal = () => { + setShowModal(false); + setSelectedCourse(null); + }; + + return ( +
+

Faculty Course Catalog

+ +
+ {/* Filters sidebar */} +
+
+

Filters

+ +
+ + {/* Department filter */} +
+

Department

+
+ {['Computer Science', 'Mathematics', 'Physics', 'Engineering'].map(dept => ( +
+ handleFilterChange('department', dept)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ))} +
+
+ + {/* Semester filter */} +
+

Semester

+
+ {['Fall', 'Spring', 'Summer'].map(semester => ( +
+ { + setFilters(prev => ({ + ...prev, + semester: [semester] + })); + }} + className="h-4 w-4 rounded-full border-gray-300 text-blue-600" + /> + +
+ ))} +
+
+ + {/* Level filter */} +
+

Level

+
+ {['Beginner', 'Intermediate', 'Advanced'].map(level => ( +
+ handleFilterChange('level', level)} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+ ))} +
+
+
+ + {/* 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 */} +
+ {filteredCourses.slice(0, visibleCourses).map(course => ( +
+
+
+
+

{course.name}

+

{course.code}

+
+
+ {course.credits} credits +
+
+ +

+ {course.description} +

+ +
+ {course.tags.map(tag => ( + + {tag} + + ))} +
+ +
+ + + +
+
+
+ ))} +
+ + {/* Load more button */} + {filteredCourses.length > visibleCourses && ( +
+ +
+ )} + + {/* No results message */} + {filteredCourses.length === 0 && ( +
+

No courses match your search criteria.

+ +
+ )} +
+
+ + {/* Course details modal */} + {showModal && selectedCourse && ( +
+
+
+
+
+

{selectedCourse.name}

+

{selectedCourse.code}

+
+ +
+ +
+

About this course

+

{selectedCourse.description}

+
+ + {selectedCourse.learningOutcomes && ( +
+

Learning outcomes

+
    + {selectedCourse.learningOutcomes.map((outcome, index) => ( +
  • {outcome}
    • + ))} +
+
+ )} + +
+

Course details

+ +
+
+
+ + + +
+

Credits

+

{selectedCourse.credits}

+
+
+ +
+ + + +
+

Semester

+

{selectedCourse.semester}

+
+
+ +
+ + + +
+

Duration

+

{selectedCourse.duration}

+
+
+
+ +
+
+ + + +
+

Department

+

{selectedCourse.department}

+
+
+ +
+ + + +
+

Prerequisites

+

{selectedCourse.prerequisites}

+
+
+
+
+
+ +
+

Tags

+
+ {selectedCourse.tags.map(tag => ( + + {tag} + + ))} +
+
+ +
+ + +
+
+
+
+ )} +
+ ); +}