Onboarding Required Fields Bug (#487)

* Onboarding Required Fields for first page and handling invalid majors/minors * make isError and isInvalidMajorOrMinorError computed props
cornell-dti · May 2, 2021 · cdb438f · cdb438f
1 parent e991bae
commit cdb438f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 31 deletions.
diff --git a/src/components/Modals/Onboarding/Onboarding.vue b/src/components/Modals/Onboarding/Onboarding.vue
@@ -57,6 +57,12 @@
         <div class="onboarding-error" :class="{ 'onboarding--hidden': !isError }">
           Please fill out all required fields and try again.
         </div>
+        <div
+          class="onboarding-error"
+          :class="{ 'onboarding--hidden': !isInvalidMajorOrMinorError }"
+        >
+          Invalid major or minor. Delete the placeholder major or minor and try again.
+        </div>
       </div>
       <div class="onboarding-bottom">
         <div class="onboarding-bottom--section onboarding-bottom--section---center">
@@ -95,6 +101,7 @@ import OnboardingBasic from '@/components/Modals/Onboarding/OnboardingBasic.vue'
 import OnboardingTransfer from '@/components/Modals/Onboarding/OnboardingTransfer.vue';
 import OnboardingReview from '@/components/Modals/Onboarding/OnboardingReview.vue';
 import { db, onboardingDataCollection, usernameCollection } from '@/firebaseConfig';
+import { getMajorFullName, getMinorFullName } from '@/utilities';
 import store from '@/store';
 
 const placeholderText = 'Select one';
@@ -111,42 +118,53 @@ export default defineComponent({
   data() {
     return {
       currentPage: 1,
-      isError: false,
       name: { ...this.userName },
       onboarding: { ...this.onboardingData },
     };
   },
-  methods: {
-    submitOnboarding() {
-      // Display error if a required field is empty, otherwise submit
-      if (
+  computed: {
+    // Display error if a required field is empty
+    isError(): boolean {
+      return (
         this.name.firstName === '' ||
         this.name.lastName === '' ||
         this.onboarding.college === '' ||
         this.onboarding.gradYear === '' ||
         this.onboarding.entranceYear === ''
-      ) {
-        this.isError = true;
-      } else {
-        db.batch()
-          .set(usernameCollection.doc(store.state.currentFirebaseUser.email), {
-            firstName: this.name.firstName,
-            middleName: this.name.middleName,
-            lastName: this.name.lastName,
-          })
-          .set(onboardingDataCollection.doc(store.state.currentFirebaseUser.email), {
-            gradYear: this.onboarding.gradYear,
-            entranceYear: this.onboarding.entranceYear,
-            colleges: [{ acronym: this.onboarding.college }],
-            majors: this.onboarding.major.map(acronym => ({ acronym })),
-            minors: this.onboarding.minor.map(acronym => ({ acronym })),
-            exam: this.onboarding.exam,
-            class: this.onboarding.transferCourse,
-            tookSwim: this.onboarding.tookSwim,
-          })
-          .commit();
-        this.$emit('onboard');
-      }
+      );
+    },
+    // Display error if onboarding data includes a major or minor that doesn't exist in requirementsJSON
+    isInvalidMajorOrMinorError(): boolean {
+      return (
+        this.onboarding.major
+          .map(getMajorFullName)
+          .some((majorFullName: string) => majorFullName === '') ||
+        this.onboarding.minor
+          .map(getMinorFullName)
+          .some((minorFullName: string) => minorFullName === '')
+      );
+    },
+  },
+  methods: {
+    submitOnboarding() {
+      db.batch()
+        .set(usernameCollection.doc(store.state.currentFirebaseUser.email), {
+          firstName: this.name.firstName,
+          middleName: this.name.middleName,
+          lastName: this.name.lastName,
+        })
+        .set(onboardingDataCollection.doc(store.state.currentFirebaseUser.email), {
+          gradYear: this.onboarding.gradYear,
+          entranceYear: this.onboarding.entranceYear,
+          colleges: [{ acronym: this.onboarding.college }],
+          majors: this.onboarding.major.map(acronym => ({ acronym })),
+          minors: this.onboarding.minor.map(acronym => ({ acronym })),
+          exam: this.onboarding.exam,
+          class: this.onboarding.transferCourse,
+          tookSwim: this.onboarding.tookSwim,
+        })
+        .commit();
+      this.$emit('onboard');
     },
     goBack() {
       this.currentPage = this.currentPage - 1 === 0 ? 0 : this.currentPage - 1;
@@ -155,7 +173,10 @@ export default defineComponent({
       this.currentPage = page;
     },
     goNext() {
-      this.currentPage = this.currentPage === FINAL_PAGE ? FINAL_PAGE : this.currentPage + 1;
+      // Only move onto next page if error message is not displayed
+      if (!(this.isError || this.isInvalidMajorOrMinorError)) {
+        this.currentPage = this.currentPage === FINAL_PAGE ? FINAL_PAGE : this.currentPage + 1;
+      }
     },
     updateBasic(
       gradYear: string,

diff --git a/src/utilities.ts b/src/utilities.ts
@@ -33,15 +33,21 @@ export function getCurrentYearSuffix(): string {
 }
 
 export function getCollegeFullName(acronym: string): string {
-  return requirementJSON.college[acronym].name;
+  // Return empty string if college is not in requirementJSON
+  const college = requirementJSON.college[acronym];
+  return college ? college.name : '';
 }
 
 export function getMajorFullName(acronym: string): string {
-  return requirementJSON.major[acronym].name;
+  // Return empty string if major is not in requirementJSON
+  const major = requirementJSON.major[acronym];
+  return major ? major.name : '';
 }
 
 export function getMinorFullName(acronym: string): string {
-  return requirementJSON.minor[acronym].name;
+  // Return empty string if minor is not in requirementJSON
+  const minor = requirementJSON.minor[acronym];
+  return minor ? minor.name : '';
 }
 
 function getAllSubjects(): ReadonlySet<string> {