Responsive filtering quality of life improvements

my-app/src/model.js

@@ -17,6 +17,7 @@ export const model = {
     departments : [],
     locations: [],
     avgRatings: [],
+    /* courses the user selected as their favourite */
     favourites: [],
     searchHistory:[],
     isReady: false,
@@ -31,18 +32,19 @@ export const model = {
     filterOptions: {
         //apply-X-Filter boolean triggering flag wether corresponding filtering functions should run or not
         //different arrays require different data, some uses string arrays, some boolean values, and so on
-        applyTranscriptFilter: true,
+        applyTranscriptFilter: false,
         eligibility: "weak",  //the possible values for the string are: "weak"/"moderate"/"strong"
         applyLevelFilter: true,
         level: ["PREPARATORY", "BASIC", "ADVANCED", "RESEARCH"], //the possible values for the array are: "PREPARATORY", "BASIC", "ADVANCED", "RESEARCH"
-        applyLanguageFilter: true,
+        applyLanguageFilter: false,
         language: "none", //the possible values for the string are: "none"/"english"/"swedish"/"both"
-        applyLocationFilter:true,
+        applyLocationFilter:false,
         location: [], //the possible values for the array are: 'KTH Campus', 'KTH Kista', 'AlbaNova', 'KTH Flemingsberg', 'KTH Solna', 'KTH Södertälje', 'Handelshögskolan', 'KI Solna', 'Stockholms universitet', 'KONSTFACK'
         applyCreditsFilter:true,
         creditMin: 0,
         creditMax: 45,
-        applyDepartmentFilter: true,
+        applyDepartmentFilter: false,
+        department: [],
         applyRemoveNullCourses: false,
         period: [true, true, true, true],
         applyPeriodFilter: true
@@ -209,6 +211,7 @@ export const model = {
 
     updateLevelFilter(level) {
         this.filterOptions.level = level;
+        console.log(level);
     },
 
     updateDepartmentFilter(department) {
@@ -258,6 +261,29 @@ export const model = {
     setApplyPeriodFilter(periodfilterState) {
         this.filterOptions.applyPeriodFilter = periodfilterState;
     },
+    //for better display we would like the departments in a structured format based on school 
+    formatDepartments() {
+        const grouped = this.departments?.reduce((acc, item) => {
+            const [school, department] = item.split("/");
+            if (!acc[school]) {
+                acc[school] = [];
+            }
+            acc[school].push(department?.trim());
+            return acc;
+        }, {});
+        const sortedGrouped = Object.keys(grouped)
+            .sort()
+            .reduce((acc, key) => {
+            acc[key] = grouped[key].sort();
+            return acc;
+            }, {});
+        const fields = Object.entries(sortedGrouped).map(([school, departments], index) => ({
+            id: index + 1,
+            label: school,
+            subItems: departments,
+        }));
+        return fields;
+    },
     async getAverageRating(courseCode) {
         const reviews = await getReviewsForCourse(courseCode);
         if (!reviews || reviews.length === 0) return null;

my-app/src/pages/App.jsx

@@ -16,14 +16,14 @@ function App({ model }) {
 
 	return (
 			/* The sidebar styling(under the menu)*/
-		<div className=" flex h-screen w-screen bg-[#6246a8] ">
+		<div className=" flex h-screen w-screen bg-gradient-to-t from-[#4f3646] to-[#6747c0] overflow-hidden">
 			{	/* If sidebar is open, set length to 400px, else it should not be visible  */}
-			<div className={`${sidebarIsOpen ? 'w-[400px]' : ''}`}>
+			<div className={`${sidebarIsOpen ? 'w-[400px] min-w-[300px]' : 'w-[50px]'}`}>
 				<Menu
-					width={400}
-					isOpen={model.sidebarIsOpen}
+					width={window.innerWidth<700?'100%':Math.max(window.innerWidth * 0.26, 300)} 
+					isOpen={sidebarIsOpen}
 					onStateChange={(state) => setSidebarIsOpen(state.isOpen)}
-					className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] z-0 h-screen"
+					className="bg-gradient-to-t from-[#4f3646] to-[#6747c0] z-0 " 
 					noOverlay
 					styles={{
 						bmMenuWrap: {
@@ -32,7 +32,7 @@ function App({ model }) {
 						bmBurgerButton: {
 							position: 'absolute',
 							top: '20px',
-							left: '20px',
+							left: '8px',
 							width: '36px',
 							height: '30px',
 							zIndex: '20'

my-app/src/presenters/FilterPresenter.jsx

@@ -147,9 +147,9 @@ const FilterPresenter = observer(({ model }) => {
 
         bestCourses = localFilteredCourses.filter(function (course) {
             try {
-                return (locations.includes(course?.location));
+                return (locations.includes(course?.location.toUpperCase()));
             } catch (error) {
-                console.log("for some reason course?.location is: ", course?.location, error);
+                console.log("for some reason course?.location is: ", course, error);
                 return false;
             }
 
@@ -394,10 +394,7 @@ const FilterPresenter = observer(({ model }) => {
                 updatePeriods();
             }
             if (model.filterOptions.applyLocationFilter) {
-                //after deo finishes locations, until then dont
-
-                //console.log("going to apply location on:",localFilteredCourses.length);
-                //updateLocations();
+                updateLocations();
             }
             if (model.filterOptions.applyLevelFilter) {
                 updateLevels();
@@ -412,8 +409,7 @@ const FilterPresenter = observer(({ model }) => {
                 applyTranscriptEligibility();
             }
             if (model.filterOptions.applyDepartments) {
-                //console.log("going to apply location on:",localFilteredCourses.length);
-                //updateDepartments();
+                updateDepartments();
             }
 
             model.filteredCourses = [...localFilteredCourses];

my-app/src/presenters/PrerequisitePresenter.jsx

@@ -462,7 +462,8 @@ export const PrerequisitePresenter = observer((props) => {
         let key = Object.keys(prereqs);
         if (prereqs[key] === true) {
             return true;
-        } else {
+        }
+        else {
             return false;
         }
 

my-app/src/presenters/SidebarPresenter.jsx

@@ -7,17 +7,13 @@ const SidebarPresenter = observer(({ model }) => {
 
     useEffect(() => {
         model.setFiltersChange();
-    })
+    });
 
     let currentLanguageSet = model.filterOptions.language;
     let currentLevelSet = model.filterOptions.level;
     let currentPeriodSet = model.filterOptions.period;
-    let currentDepartmentSet = [
-        "EECS/Computational Science and  Technology", "EECS/Theoretical Computer Science", "EECS/Electric Power and Energy Systems", "EECS/Network and Systems Engineering",
-        "ITM/Learning in Engineering Sciences", "ITM/Industrial Economics and Management", "ITM/Energy Systems", "ITM/Integrated Product Development and Design", "ITM/SKD GRU",
-        "SCI/Mathematics", "SCI/Applied Physics", "SCI/Mechanics", "SCI/Aeronautical and Vehicle Engineering",
-        "ABE/Sustainability and Environmental Engineering", "ABE/Concrete Structures", "ABE/Structural Design & Bridges", "ABE/History of Science, Technology and Environment",
-    ]
+    let currentDepartmentSet = model.filterOptions.department;
+    let currentLocationSet = model.filterOptions.location
 
     function handleLanguageFilterChange(param) {
         if (param === "English") {
@@ -58,26 +54,11 @@ const SidebarPresenter = observer(({ model }) => {
         model.updateLanguageFilter(currentLanguageSet);
     }
     function handleLevelFilterChange(param) {
-        let properParam;
-        switch (param) {
-            case "Preparatory":
-                properParam = "PREPARATORY";
-                break;
-            case "Basic":
-                properParam = "BASIC";
-                break;
-            case "Advanced":
-                properParam = "ADVANCED";
-                break;
-            case "Research":
-                properParam = "RESEARCH";
-                break;
-        }
 
-        if (!currentLevelSet.includes(properParam)) {
-            currentLevelSet.push(properParam);
+        if (!currentLevelSet.includes(param)) {
+            currentLevelSet.push(param);
         } else {
-            const index = currentLevelSet.indexOf(properParam);
+            const index = currentLevelSet.indexOf(param);
             if (index > -1) {
                 currentLevelSet.splice(index, 1);
             }
@@ -104,6 +85,19 @@ const SidebarPresenter = observer(({ model }) => {
         model.setFiltersChange();
     }
 
+    function handleLocationFilterChange(param) {
+        if (currentLocationSet.includes(param)) {
+            const index = currentLocationSet.indexOf(param);
+            if (index > -1) {
+                currentLocationSet.splice(index, 1);
+            }
+        } else {
+            currentLocationSet.push(param);
+        }
+        model.updateLocationFilter(currentLocationSet);
+        model.setFiltersChange();
+    }
+
     /*HandleFilterChange param is structured as such
         [
             type of the field: (toggle, slider, dropdown, buttongroup)
@@ -120,7 +114,7 @@ const SidebarPresenter = observer(({ model }) => {
                 handleLevelFilterChange(param[2]);
                 break;
             case "location":
-                console.log("location filter set to: " + param[2]);
+                handleLocationFilterChange(param[2]);
                 break;
             case "credits":
                 model.updateCreditsFilter(param[2]);
@@ -130,6 +124,7 @@ const SidebarPresenter = observer(({ model }) => {
                 break;
             case "department":
                 handleDepartmentFilterChange(param[2]);
+                console.log(param[2]);
                 break;
             case "period":
                 handlePeriodFilterChange(param[2]);
@@ -194,20 +189,30 @@ const SidebarPresenter = observer(({ model }) => {
             HandleFilterEnable={HandleFilterEnable}
             reApplyFilter={reApplyFilter}
             toggleRemoveNull={setApplyRemoveNullCourses}
+
             initialApplyTranscriptFilter={model.filterOptions.applyTranscriptFilter}
-            initialTranscriptElegiblityValue = {model.filterOptions.eligibility}
+            initialTranscriptElegiblityValue={model.filterOptions.eligibility}
+
             initialLanguageFilterOptions={currentLanguageSet}
             initialLanguageFilterEnable={model.filterOptions.applyLanguageFilter}
+
             initialLevelFilterOptions={currentLevelSet}
             initialLevelFilterEnable={model.filterOptions.applyLevelFilter}
+
             initialPeriodFilterOptions={currentPeriodSet}
             initialPeriodFilterEnable={model.filterOptions.applyPeriodFilter}
+
             initialDepartmentFilterOptions={currentDepartmentSet}
             initialDepartmentFilterEnable={model.filterOptions.applyDepartmentFilter}
-            initialLocationFilterOptions={[]}
+            DepartmentFilterField = {model.formatDepartments()}
+
+            initialLocationFilterOptions={currentLocationSet}
             initialLocationFilterEnable={model.filterOptions.applyLocationFilter}
+            LocationFilterField = {model.locations}
+
             initialCreditsFilterOptions={[model.filterOptions.creditMin, model.filterOptions.creditMax]}
             initialCreditsFilterEnable={model.filterOptions.applyCreditsFilter}
+
             initialApplyNullFilterEnable={model.filterOptions.applyRemoveNullCourses }
         />
     );