FIxed multi year bugs

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <v-app id="app">
-        <Header />
+        <Header @updateYear="updateYear()" />
 
         <v-main class="main-content">
             <router-view />
@@ -33,17 +33,7 @@ export default {
         // Note: localStorage saves as a string
         let darkMode = localStorage.getItem(DARK_MODE);
         this.$vuetify.theme.dark = darkMode === null ? DEFAULT_DARK_MODE : darkMode === 'true';
-    },
-    methods: {
-        handleInput() {
-            this.$root.$emit('changedFilter', this.searchInput)
-        },
-        clearProgress() {
-            this.$root.$emit('resetProgress')
-            this.$store.editingCourses = false
-            location.reload()
-        },
-    },
+    }
 }
 </script>
 

frontend/src/components/Bookmark.vue

@@ -61,7 +61,6 @@
             <span>Add pathway to "My Pathways"</span>  
         </v-tooltip>
     </span>
-
 </template>
 
 <script>

frontend/src/components/CourseTable.vue

@@ -75,6 +75,10 @@ export default {
         graph: {
             type: Boolean,
             required: false,
+        },
+        hasData: {
+            type: Boolean,
+            required: true
         }
     },
     data() {
@@ -89,6 +93,20 @@ export default {
         filteredCourses() {
             let tempCourses = JSON.parse(JSON.stringify(this.courses));
 
+            //Weird hack that is needed
+            //Basically since this is a computed method it will auto run
+            //whenever the "data" is changed but since this.courses
+            //doesn't change since it is a reference to the courses from
+            //the parent component we need to change a data piece that
+            //is used in this function. I created the hasData prop to do 
+            //this. We need to then use the hasData to do "something"
+            //in order for it to be rerendered, I used an arbitrary if
+            //statement that will have no effect in order to compile with 
+            // no warnings.
+            if(this.hasData) {
+                tempCourses = JSON.parse(JSON.stringify(tempCourses));
+            }
+
             if(this.search && this.search != ''){
                 tempCourses = Object.fromEntries(Object.entries(tempCourses)
                     .filter(([key]) => key
@@ -97,7 +115,7 @@ export default {
             }
             for(const course in tempCourses) {
                 if(tempCourses[course] == null) {
-                    tempCourses[course]= {};
+                    tempCourses[course] = {};
                     tempCourses[course]["name"] = course;
                     tempCourses[course]["hasData"] = false;
                 }

frontend/src/components/CourseTableCourse.vue

@@ -7,8 +7,8 @@
             @click="toggleCheckbox()"
         >
             This course has pre-requisite(s): 
-            <span v-for='(prereq, index) in course.prerequisites' :key="prereq">
-                {{prereq}} <span v-if="index < course.prerequisites.length-1">,&nbsp;</span>
+            <span v-for="(prereq, index) in course.prerequisites" :key="prereq">
+                {{ prereq }} <span v-if="index < course.prerequisites.length-1">,&nbsp;</span>
             </span>
         </v-alert>
         <v-tooltip v-show="hover" bottom>
@@ -40,7 +40,7 @@
                                 <h1 class="text-h5 class-card__title">
                                     {{ course.name }}
                                 </h1>
-                                <small v-if="course.hasData" class="class-card__subtitle">
+                                <small v-if="course.ID != null" class="class-card__subtitle">
                                     {{ course.subj }}-{{ course.ID }}
                                     <CourseTableModifiers
                                         class="mt-4 class-card__subtitle__modifiers"
@@ -52,13 +52,13 @@
                         </v-list-item-content>
                     </v-list-item>
                     <v-card-text
-                        v-if="course.hasData && desc"
+                        v-if="course.ID != null && desc"
                         class="class-card__desc"
                     >
                         {{ course.description }}
                     </v-card-text>
                     <v-card-text
-                        v-if="!course.hasData"
+                        v-if="course.ID == null"
                         class="class-card__desc"
                     >
                         Data not found within RPI catalog, see SIS for more info.
@@ -92,7 +92,7 @@
                         <h1 class="text-h5 class-card__title">
                             {{ course.name }}
                         </h1>
-                        <small v-if="course.hasData" class="class-card__subtitle">
+                        <small v-if="course.ID != null" class="class-card__subtitle">
                             {{ course.subj }}-{{ course.ID }}
                             <CourseTableModifiers
                                 class="mt-4 class-card__subtitle__modifiers"
@@ -104,13 +104,13 @@
                 </v-list-item-content>
             </v-list-item>
             <v-card-text
-                v-if="course.hasData && desc"
+                v-if="course.ID != null && desc"
                 class="class-card__desc"
             >
                 {{ course.description }}
             </v-card-text>
             <v-card-text
-                v-if="!course.hasData"
+                v-if="course.ID == null"
                 class="class-card__desc"
             >
                 Data not found within RPI catalog, see SIS for more info.
@@ -122,7 +122,7 @@
 <script>
 import CourseTableModifiers from './CourseTableModifiers'
 
-const requiredProps = ['hasData', 'name'];
+const requiredProps = ['name'];
 
 export default {
     name: 'CourseTableCourse',
@@ -183,7 +183,7 @@ export default {
                     this.$store.commit('addCourse', c);
                     this.$emit('checkbox-clicked', { name: this.course.name, selected: true });
                     // now check to see if there are pre-requisites present
-                    if ( this.course.prerequisites.length != 0) {
+                    if (this.course.prerequisites && this.course.prerequisites.length != 0) {
                         // console.log("pre-requisite")
                         this.alert = true;
                         // this.$emit("showAlert", this.course.prerequisites );
@@ -192,7 +192,7 @@ export default {
                     this.$store.commit('delCourse', c);
                     this.$emit('checkbox-clicked', { name: this.course.name, selected: false });
                     this.alert = false;
-                    if ( this.course.prerequisites.length != 0) {
+                    if (this.course.prerequisites && this.course.prerequisites.length != 0) {
                         // console.log("pre-requisite")
                         this.alert = false;
                         // this.$emit("hideAlert", this.course.prerequisites );

frontend/src/components/DarkLightModeButton.vue

@@ -2,17 +2,16 @@
     <v-tooltip bottom>
         <template #activator="{off}">
             <v-switch
-                inset
-                small fab elevation="0"
-                v-on="off"
                 v-model="isLight"
-                @click="darkMode"
+                inset small fab
+                elevation="0"
                 size="small"
                 color="yellow darken-2"
                 :prepend-icon="correctIcon"
                 style="padding-top:21px;"
-            >
-            </v-switch>
+                v-on="off"
+                @click="darkMode"
+            />
         </template>
         <span>Switch to Light Mode</span>
     </v-tooltip>

frontend/src/components/Header.vue

@@ -25,9 +25,11 @@ import YearSelection from '../components/YearSelection.vue'
 
 export default {
     name: 'Header',
-    components: { DarkLightModeButton, 
-    HeaderNav,
-    YearSelection }
+    components: {
+        DarkLightModeButton, 
+        HeaderNav,
+        YearSelection
+    }
 }
 </script>
 

frontend/src/components/MyPathway.vue

@@ -45,7 +45,7 @@
                     <v-col>
                         <div class="bookmark">
                             <Bookmark
-                                :myPathway=true
+                                :my-pathway="true"
                                 :pathway-id="title"
                                 :courses="courses"
                                 @update="$emit('update')"
@@ -73,9 +73,9 @@
                                     mdi-alert
                                 </v-icon>
                             </template>
-                            <span><div>There are pre-requisite(s) for this course:<br/>
-                                <span v-for='(prereq, index) in course.prerequisites' :key="prereq">
-                                    {{prereq}} <span v-if="index < course.prerequisites.length-1">,&nbsp;</span>
+                            <span><div>There are pre-requisite(s) for this course:<br>
+                                <span v-for="(prereq, index) in course.prerequisites" :key="prereq">
+                                    {{ prereq }} <span v-if="index < course.prerequisites.length-1">,&nbsp;</span>
                                 </span>
                             </div></span>
                         </v-tooltip>
@@ -95,7 +95,7 @@
 
 <script>
 import getColorFromCategry from '../helpers/category-colors.js';
-import { pathwayCategories, courses as allCourses } from '../data/data.js'
+import { pathwayCategories } from '../data/data.js'
 import Bookmark from './Bookmark'
 
 
@@ -121,19 +121,27 @@ export default {
             type: Boolean
         }
     },
-    mounted() {
+    data() {
+        return {
+            coursesData: {}
+        }
+    },
+    created() {
+        const year = this.$store.state.year;
+        import('../data/json/' + year + '/courses.json').then((val) => this.coursesData = Object.freeze(val));
     },
     methods: {
         hasPreReq( courseName ) {
-            return allCourses[courseName].prerequisites.length != 0;
+            if(!this.coursesData[courseName]) return false;
+            return this.coursesData[courseName].prerequisites.length != 0;
         },
         formatCourseCategory(classes) {
             if (!classes || !classes.length)
                 return []; // Shouldn't happen!
             let out = [];
             for(const clazz in classes) {
-                if(allCourses[classes[clazz]]) {
-                    let myClass = allCourses[classes[clazz]];
+                if(this.coursesData[classes[clazz]]) {
+                    let myClass = this.coursesData[classes[clazz]];
                     myClass.hasData = true;
                     out.push(myClass);
                 }

frontend/src/components/PathwayCategory.vue

@@ -32,14 +32,13 @@
                         </a>
                     </li>
                 </template>
-                <span>{{ pathwaysData[pathway].description }}</span>
+                <span v-if="pathwaysData[pathway]">{{ pathwaysData[pathway].description }}</span>
             </v-tooltip>
         </ul>
     </v-card>
 </template>
 
 <script>
-import { pathways as pathwaysData } from '../data/data.js'
 
 export default {
     name: 'PathwayCategory',
@@ -59,10 +58,13 @@ export default {
         pathways: {
             type: Array, // Array of pathway ids
             default: () => [],
-            validator: val => val.every(x => Object.keys(pathwaysData).includes(x))
         }
     },
-    data() { return { pathwaysData }; }
+    data() { return { pathwaysData: {} }; },
+    created() {
+        const year = this.$store.state.year;
+        import('../data/json/' + year + '/pathways.json').then((val) => this.pathwaysData = Object.freeze(val));
+    }
 }
 </script>
 

frontend/src/components/YearSelection.vue

@@ -29,7 +29,8 @@ export default {
     },
     methods: {
         updateYear() {
-            this.$store.commit('changeYear',this.selection)
+            this.$store.commit('changeYear', this.selection);
+            location.reload();
         }
     }
 }

frontend/src/data/data.js

@@ -1,21 +1,13 @@
 import pathwayCategoriesJSON from './json/pathway_categories.json'
 import yearsJSON from './json/years.json'
-import store from '../store/store.js'
-
-import coursesJSON from './json/2021-2022/courses.json'
-import pathwaysJSON from './json/2021-2022/pathways.json'
 
 // Neatify JSON data:
 // Sort pathways in pathway categories
 pathwayCategoriesJSON.forEach(category => category.pathways.sort());
 
 // Prevent accidental modification
-Object.freeze(coursesJSON);
-Object.freeze(pathwaysJSON);
 Object.freeze(yearsJSON);
 Object.freeze(pathwayCategoriesJSON);
 
-export const pathways = pathwaysJSON;
 export const pathwayCategories = pathwayCategoriesJSON;
 export const years = yearsJSON;
-export const courses = coursesJSON;

frontend/src/pages/AdminPortal/AdminCoursePage.vue

@@ -122,7 +122,6 @@
 import Breadcrumbs from '../../components/Breadcrumbs'
 import breadcrumbs from '../../data/breadcrumbs.js'
 import axios from 'axios'
-import { courses, pathways } from '../../data/data.js'
 
 export default {
     components: {
@@ -147,6 +146,8 @@ export default {
             minors: [],
             myPathways: [],
             pathways: [],
+            pathwaysData: {},
+            coursesData: {},
 
             rules: {
                 courseCode: value => ('' + value).length === 4
@@ -172,6 +173,10 @@ export default {
         }
     },
     created() {
+        const year = this.$store.state.year;
+        import('../../data/json/' + year + '/pathways.json').then((val) => this.pathwaysData = Object.freeze(val));
+        import('../../data/json/' + year + '/courses.json').then((val) => this.coursesData = Object.freeze(val));
+
         const course = this.getCourse();
         if(course) {
             this.name = course.name;
@@ -189,8 +194,8 @@ export default {
             this.odd = course.offered.odd;
         }
         let myPathways = new Set();
-        for(const key in pathways) {
-            const singlePathway = pathways[key];
+        for(const key in this.pathwaysData) {
+            const singlePathway = this.pathwaysData[key];
             if(course) {
                 for(const prio in singlePathway) {
                     if(singlePathway[prio] instanceof Object && !(singlePathway[prio] instanceof Array)) {
@@ -211,8 +216,10 @@ export default {
             if(!this.$route.query.class) {
                 return null;
             }
-            
-            return courses[this.$route.query.class];
+            if(!this.coursesData[this.$route.query.class]) {
+                return null;
+            }
+            return this.coursesData[this.$route.query.class];
         },
         submit() {
             let newCourse = this.getCourse();