Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision ff9e2e0b894acd6b30ee578a2ca46b95813ccdeb) +++ frontend/src/App.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -1,4 +1,4 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import CourseCatalog from "./components/SubjectCatalog"; +import CourseCatalog from "./components/SubjectCatalog/SubjectCatalog"; import "./index.css"; import Home from "./pages/Home"; Index: ontend/src/components/SubjectCatalog.tsx =================================================================== --- frontend/src/components/SubjectCatalog.tsx (revision ff9e2e0b894acd6b30ee578a2ca46b95813ccdeb) +++ (revision ) @@ -1,611 +1,0 @@ -import { useEffect, useState } from "react"; -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, - }); - - const filteredSubjects = subjectData.filter((subject) => { - const searchMatches = - subject.name.toLowerCase().includes(searchTerm.toLowerCase()) || - subject.code.toLowerCase().includes(searchTerm.toLowerCase()) || - subject.abstract?.toLowerCase().includes(searchTerm.toLowerCase()); - - const seasonMatches = - filters.season === "" || filters.season === subject.info.season; - - const semesterMatches = - filters.semester.length === 0 || - filters.semester.includes(subject.info.semester); - - 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 - ); - }); - - const resetFilters = () => { - setSearchTerm(""); - setFilters({ - 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, - }); - }; - - const FilterSidebar = () => { - return ( -
-
-

Филтри

- -
-
- {/* filter by season*/} -
-

Семестар

-
- {["Летен", "Зимски"].map((season) => { - const seasonValue = season === "Летен" ? "S" : "W"; - return ( -
- - setFilters((prev) => ({ - ...prev, - season: - prev.season === seasonValue ? "" : seasonValue, - })) - } - checked={filters.season === seasonValue} - 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 prereq */} -
-
- - 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 */} -
- {/* 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 */} - - {!isLoaded ? ( -
- {[...Array(9)].map((_, index) => ( - - ))} -
- ) : ( -
- {filteredSubjects.slice(0, visibleCourses).map((subject) => ( -
-
-
-
-

- {subject.name} -

-

{subject.code}

-
-
- -

- tuka treba abstract: Lorem ipsum dolor - sit, amet consectetur adipisicing elit. Et praesentium - dolores est animi officiis aperiam. - {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 could be used as certain flags for some subjects, like most picked subject, best match etc. */} -
-
- TAG1 -
-
- TAG2 -
-
- - {/* this could lead to a subject view page, for now there is no such thing*/} - {/* if implemented, tags should be moved elsewhere*/} - {/* */} -
-
-
- ))} -
- )} - - {/* Load more button */} - {isLoaded && filteredSubjects.length > visibleCourses && ( -
- -
- )} - - {/* No results message */} - {isLoaded && filteredSubjects.length === 0 && ( -
-

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

- -
- )} -
-
- {showModal && selectedSubject && ( - - )} -
- ); -}; - -export default SubjectCatalog; Index: frontend/src/components/SubjectCatalog/FilterSidebar.tsx =================================================================== --- frontend/src/components/SubjectCatalog/FilterSidebar.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) +++ frontend/src/components/SubjectCatalog/FilterSidebar.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -0,0 +1,265 @@ +import { PROGRAMS } from "../../constants/subjects"; +import { Filters } from "./types"; +import { resetFilters } from "./utils"; +interface FilterSidebarProps { + setSearchTerm: (term: string) => void; + setProfessorSearchTerm: (term: string) => void; + setAssistantSearchTerm: (term: string) => void; + setFilters: (filters: (prev: Filters) => Filters) => void; + filters: Filters; +} + +const FilterSidebar = ({ + setSearchTerm, + setProfessorSearchTerm, + setAssistantSearchTerm, + setFilters, + filters, +}: FilterSidebarProps) => { + return ( +
+
+

Филтри

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

Семестар

+
+ {["Летен", "Зимски"].map((season) => { + const seasonValue = season === "Летен" ? "S" : "W"; + return ( +
+ + setFilters((prev) => ({ + ...prev, + season: prev.season === seasonValue ? "" : seasonValue, + })) + } + checked={filters.season === seasonValue} + 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 prereq */} +
+
+ + setFilters((prev) => ({ + ...prev, + hasPrerequisites: !prev.hasPrerequisites, + })) + } + checked={filters.hasPrerequisites} + className="h-4 w-4 rounded border-gray-300 text-blue-600" + /> + +
+
+
+
+ ); +}; + +export default FilterSidebar; Index: frontend/src/components/SubjectCatalog/SkeletonCard.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SkeletonCard.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) +++ frontend/src/components/SubjectCatalog/SkeletonCard.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -0,0 +1,23 @@ +const SkeletonCard = () => { + return ( +
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ ); +}; +export default SkeletonCard; Index: frontend/src/components/SubjectCatalog/StaffSearch.tsx =================================================================== --- frontend/src/components/SubjectCatalog/StaffSearch.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) +++ frontend/src/components/SubjectCatalog/StaffSearch.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -0,0 +1,48 @@ +interface StaffSearchProps { + randomStaff: string[]; + professorSearchTerm: string; + setProfessorSearchTerm: (val: string) => void; + assistantSearchTerm: string; + setAssistantSearchTerm: (val: string) => void; +} + +function StaffSearch({ + randomStaff, + professorSearchTerm, + setProfessorSearchTerm, + assistantSearchTerm, + setAssistantSearchTerm, +}: StaffSearchProps) { + 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" + /> +
+ + ); +} + +export default StaffSearch; Index: frontend/src/components/SubjectCatalog/SubjectCatalog.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) +++ frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -0,0 +1,166 @@ +import { useEffect, useState } from "react"; +import FilterSidebar from "./FilterSidebar"; +import SkeletonCard from "./SkeletonCard"; +import StaffSearch from "./StaffSearch"; +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 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(); + setSubjectData(data.subjects); + setIsLoaded(true); + }; + fetchData(); + }, []); + + useEffect(() => { + getRandomStaff(subjectData, setRandomStaff); + }, [subjectData]); + + const loadMore = () => { + setVisibleCourses((prev) => prev + 10); + }; + + const openSubjectDetails = (subject: Subject) => { + setSelectedSubject(subjectData[subject.id - 1]); + setShowModal(true); + }; + + const closeModal = () => { + setShowModal(false); + }; + 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 */} + + {!isLoaded ? ( +
+ {[...Array(9)].map((_, index) => ( + + ))} +
+ ) : ( + + )} + + {/* Load more button */} + {isLoaded && filteredSubjects.length > visibleCourses && ( +
+ +
+ )} + + {/* No results message */} + {isLoaded && filteredSubjects.length === 0 && ( +
+

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

+ +
+ )} +
+
+ {showModal && selectedSubject && ( + + )} +
+ ); +}; + +export default SubjectCatalog; Index: frontend/src/components/SubjectCatalog/SubjectList.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectList.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) +++ frontend/src/components/SubjectCatalog/SubjectList.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -0,0 +1,98 @@ +import { Subject } from "./types"; + +interface SubjectListProps { + filteredSubjects: Subject[]; + visibleCourses: number; + openSubjectDetails: (subject: Subject) => void; +} + +const SubjectList = ({ + filteredSubjects, + visibleCourses, + openSubjectDetails, +}: SubjectListProps) => { + return ( +
+ {filteredSubjects.slice(0, visibleCourses).map((subject) => ( +
+
+
+
+

{subject.name}

+

{subject.code}

+
+
+ +

+ tuka treba abstract: Lorem ipsum dolor sit, amet + consectetur adipisicing elit. Et praesentium dolores est animi + officiis aperiam. + {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 could be used as certain flags for some subjects, like most picked subject, best match etc. */} +
+
+ TAG1 +
+
+ TAG2 +
+
+ + {/* this could lead to a subject view page, for now there is no such thing*/} + {/* if implemented, tags should be moved elsewhere*/} + {/* */} +
+
+
+ ))} +
+ ); +}; + +export default SubjectList; Index: frontend/src/components/SubjectCatalog/SubjectModal.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectModal.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) +++ frontend/src/components/SubjectCatalog/SubjectModal.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -0,0 +1,187 @@ +import { Subject } from "./types"; + +interface SubjectModalProps { + selectedSubject: Subject; + closeModal: () => void; +} + +function SubjectModal({ selectedSubject, closeModal }: SubjectModalProps) { + return ( + <> +
+
+
+
+
+

{selectedSubject.name}

+

{selectedSubject.code}

+
+ +
+ +
+

+ tuka ide abstract Lorem ipsum dolor, sit amet + consectetur adipisicing elit. Quia, ad repellat consectetur + laboriosam aperiam cumque. + {selectedSubject.abstract} +

+
+ +
+

Професори:

+

+ {selectedSubject.info.professors.length == 0 + ? "Нема одредени професори" + : selectedSubject.info.professors.join(", ")} +

+
+
+

Асистенти:

+

+ {selectedSubject.info.assistants.length == 0 + ? "Нема одредени асистенти" + : selectedSubject.info.assistants.join(", ")} +

+
+ +
+

+ Информации за предметот +

+ +
+
+
+
+

+ Препорачан семестар +

+

+ {selectedSubject.info.semester} +

+
+
+
+
+

Зимски / Летен

+

+ {selectedSubject.info.season == "S" + ? "Летен" + : "Зимски"} +

+
+
+
+
+

Ниво

+

+ L{selectedSubject.info.level} +

+
+
+
+
+
+
+

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

+

+ {selectedSubject.info.mandatory_for.length == 0 + ? "Не е задолжителен предмет" + : selectedSubject.info.mandatory_for + .map((s) => s.replace(/\d+$/, "")) + .join(", ")} +

+
+
+
+
+

Изборен за:

+

+ {selectedSubject.info.elective_for.length == 0 + ? "Не е изборен предмет" + : selectedSubject.info.elective_for + .map((s) => s.replace(/\d+$/, "")) + .join(", ")} +

+
+
+
+
+

Предуслови:

+

+ {selectedSubject.info.prerequisite.length == 0 + ? "Нема предуслов" + : selectedSubject.info.prerequisite} +

+
+
+
+
+
+
+ {selectedSubject.info.participants[0] == 0 ? ( +
+ Овој предмет не бил активиран минатиот семестар. +
+ ) : ( +

{`Овој предмет минатиот семестар бил запишан од + ${selectedSubject.info.participants[0]} студенти.`}

+ )} +
+
+

Тагови

+
+ {/* TODO: change this when real tags are added in the database*/} + {["Web Development", "Machine Learning", "Data Science"].map( + (tag) => ( + + {tag} + + ) + )} +
+
+ +
+ + {/* */} +
+
+
+
+ + ); +} +export default SubjectModal; Index: frontend/src/components/SubjectCatalog/types.ts =================================================================== --- frontend/src/components/SubjectCatalog/types.ts (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) +++ frontend/src/components/SubjectCatalog/types.ts (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -0,0 +1,38 @@ +import { PROGRAMS } from "../../constants/subjects"; + +export interface Subject { + id: number; + code: string; + name: string; + abstract: string; + info: SubjectInfo; +} + +export interface SubjectInfo { + level: number; + short: string; + prerequisite: string; + activated: boolean; + participants: number[]; + mandatory: boolean; + mandatory_for: Programs[]; + semester: number; + season: string; + elective_for: Programs[]; + professors: string[]; + assistants: string[]; +} + +export type Filters = { + season: "W" | "S" | ""; + semester: number[]; + level: number[]; + activated: "activated" | "not_activated" | ""; + mandatoryFor: Programs[]; + electiveFor: Programs[]; + professors: string[]; + assistants: string[]; + hasPrerequisites: boolean; +}; + +export type Programs = (typeof PROGRAMS)[number]; Index: frontend/src/components/SubjectCatalog/utils.ts =================================================================== --- frontend/src/components/SubjectCatalog/utils.ts (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) +++ frontend/src/components/SubjectCatalog/utils.ts (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -0,0 +1,138 @@ +import { Filters, Programs, Subject } from "./types"; + +interface filteredSubjectsParams { + subjectData: Subject[]; + searchTerm: string; + professorSearchTerm: string; + assistantSearchTerm: string; + filters: { + season: "W" | "S" | ""; + semester: number[]; + level: number[]; + activated: "activated" | "not_activated" | ""; + mandatoryFor: Programs[]; + electiveFor: Programs[]; + professors: string[]; + assistants: string[]; + hasPrerequisites: boolean; + }; +} + +export const filterSubjects = ({ + subjectData, + searchTerm, + professorSearchTerm, + assistantSearchTerm, + filters, +}: filteredSubjectsParams) => + subjectData.filter((subject) => { + const searchMatches = + subject.name.toLowerCase().includes(searchTerm.toLowerCase()) || + subject.code.toLowerCase().includes(searchTerm.toLowerCase()) || + subject.abstract?.toLowerCase().includes(searchTerm.toLowerCase()); + + const seasonMatches = + filters.season === "" || filters.season === subject.info.season; + + const semesterMatches = + filters.semester.length === 0 || + filters.semester.includes(subject.info.semester); + + 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 + ); + }); + +export const resetFilters = ( + setSearchTerm: (val: string) => void, + setProfessorSearchTerm: (val: string) => void, + setAssistantSearchTerm: (val: string) => void, + setFilters: (val: (prev: Filters) => Filters) => void +) => { + setSearchTerm(""); + setProfessorSearchTerm(""); + setAssistantSearchTerm(""); + setFilters(() => ({ + season: "", + semester: [], + level: [], + activated: "", + mandatoryFor: [], + electiveFor: [], + professors: [], + assistants: [], + hasPrerequisites: false, + })); +}; + +export const getRandomStaff = ( + subjectData: Subject[], + setRandomStaff: ([]: string[]) => void +) => { + 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]); +}; Index: ontend/src/components/SubjectModal.tsx =================================================================== --- frontend/src/components/SubjectModal.tsx (revision ff9e2e0b894acd6b30ee578a2ca46b95813ccdeb) +++ (revision ) @@ -1,187 +1,0 @@ -import { Subject } from "../types"; - -interface SubjectModalProps { - selectedSubject: Subject; - closeModal: () => void; -} - -function SubjectModal({ selectedSubject, closeModal }: SubjectModalProps) { - return ( - <> -
-
-
-
-
-

{selectedSubject.name}

-

{selectedSubject.code}

-
- -
- -
-

- tuka ide abstract Lorem ipsum dolor, sit amet - consectetur adipisicing elit. Quia, ad repellat consectetur - laboriosam aperiam cumque. - {selectedSubject.abstract} -

-
- -
-

Професори:

-

- {selectedSubject.info.professors.length == 0 - ? "Нема одредени професори" - : selectedSubject.info.professors.join(", ")} -

-
-
-

Асистенти:

-

- {selectedSubject.info.assistants.length == 0 - ? "Нема одредени асистенти" - : selectedSubject.info.assistants.join(", ")} -

-
- -
-

- Информации за предметот -

- -
-
-
-
-

- Препорачан семестар -

-

- {selectedSubject.info.semester} -

-
-
-
-
-

Зимски / Летен

-

- {selectedSubject.info.season == "S" - ? "Летен" - : "Зимски"} -

-
-
-
-
-

Ниво

-

- L{selectedSubject.info.level} -

-
-
-
-
-
-
-

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

-

- {selectedSubject.info.mandatory_for.length == 0 - ? "Не е задолжителен предмет" - : selectedSubject.info.mandatory_for - .map((s) => s.replace(/\d+$/, "")) - .join(", ")} -

-
-
-
-
-

Изборен за:

-

- {selectedSubject.info.elective_for.length == 0 - ? "Не е изборен предмет" - : selectedSubject.info.elective_for - .map((s) => s.replace(/\d+$/, "")) - .join(", ")} -

-
-
-
-
-

Предуслови:

-

- {selectedSubject.info.prerequisite.length == 0 - ? "Нема предуслов" - : selectedSubject.info.prerequisite} -

-
-
-
-
-
-
- {selectedSubject.info.participants[0] == 0 ? ( -
- Овој предмет не бил активиран минатиот семестар. -
- ) : ( -

{`Овој предмет минатиот семестар бил запишан од - ${selectedSubject.info.participants[0]} студенти.`}

- )} -
-
-

Тагови

-
- {/* TODO: change this when real tags are added in the database*/} - {["Web Development", "Machine Learning", "Data Science"].map( - (tag) => ( - - {tag} - - ) - )} -
-
- -
- - {/* */} -
-
-
-
- - ); -} -export default SubjectModal; Index: frontend/src/pages/SubjectsView.tsx =================================================================== --- frontend/src/pages/SubjectsView.tsx (revision ff9e2e0b894acd6b30ee578a2ca46b95813ccdeb) +++ frontend/src/pages/SubjectsView.tsx (revision b0495c9fc7619057d3883c0985b9723a41f5dabd) @@ -1,3 +1,3 @@ -import SubjectCatalog from "../components/SubjectCatalog"; +import SubjectCatalog from "../components/SubjectCatalog/SubjectCatalog"; function SubjectsView() { Index: ontend/src/types.ts =================================================================== --- frontend/src/types.ts (revision ff9e2e0b894acd6b30ee578a2ca46b95813ccdeb) +++ (revision ) @@ -1,26 +1,0 @@ -import { PROGRAMS } from "./constants/subjects"; - -export interface Subject { - id: number; - code: string; - name: string; - abstract: string; - info: SubjectInfo; -} - -export interface SubjectInfo { - level: number; - short: string; - prerequisite: string; - activated: boolean; - participants: number[]; - mandatory: boolean; - mandatory_for: Programs[]; - semester: number; - season: string; - elective_for: Programs[]; - professors: string[]; - assistants: string[]; -} - -export type Programs = (typeof PROGRAMS)[number];