Add graduation year

src/components/Modals/Onboarding/Onboarding.vue

@@ -121,7 +121,8 @@ export default Vue.extend({
       if (
         this.name.firstName === '' ||
         this.name.lastName === '' ||
-        this.onboarding.college === ''
+        this.onboarding.college === '' ||
+        this.onboarding.gradYear === ''
       ) {
         this.isError = true;
       } else {
@@ -132,6 +133,7 @@ export default Vue.extend({
             lastName: this.name.lastName,
           })
           .set(onboardingDataCollection.doc(store.state.currentFirebaseUser.email), {
+            gradYear: this.onboarding.gradYear,
             colleges: [{ acronym: this.onboarding.college }],
             majors: this.onboarding.major.map(acronym => ({ acronym })),
             minors: this.onboarding.minor.map(acronym => ({ acronym })),
@@ -153,13 +155,14 @@ export default Vue.extend({
       this.currentPage = this.currentPage === FINAL_PAGE ? FINAL_PAGE : this.currentPage + 1;
     },
     updateBasic(
+      gradYear: string,
       college: string,
       major: readonly string[],
       minor: readonly string[],
       name: FirestoreUserName
     ) {
       this.name = name;
-      this.onboarding = { ...this.onboarding, college, major, minor };
+      this.onboarding = { ...this.onboarding, gradYear, college, major, minor };
     },
     updateTransfer(
       exams: readonly FirestoreAPIBExam[],

src/components/Modals/Onboarding/OnboardingBasic.vue

@@ -35,6 +35,20 @@
         <span class="onboarding-subHeader--font">Your Major</span>
       </div>
       <div class="onboarding-inputs">
+        <div class="onboarding-inputWrapper onboarding-inputWrapper--college">
+          <label class="onboarding-label"
+            >Graduation Year<span class="onboarding-required-star">*</span></label
+          >
+          <div class="onboarding-selectWrapper">
+            <onboarding-basic-single-dropdown
+              :availableChoices="semesters"
+              :choice="gradYear"
+              :cannotBeRemoved="true"
+              :scrollBottomToIndex="9"
+              @on-select="selectGraduationYear"
+            />
+          </div>
+        </div>
         <div class="onboarding-inputWrapper onboarding-inputWrapper--college">
           <label class="onboarding-label"
             >College<span class="onboarding-required-star">*</span></label
@@ -49,9 +63,7 @@
           </div>
         </div>
         <div class="onboarding-inputWrapper onboarding-inputWrapper--college">
-          <label class="onboarding-label"
-            >Major<span class="onboarding-required-star">*</span></label
-          >
+          <label class="onboarding-label">Major</label>
           <onboarding-basic-multi-dropdown
             :availableChoices="majors"
             :dropdownChoices="majorAcronyms"
@@ -112,6 +124,7 @@ export default Vue.extend({
       middleName: this.userName.middleName,
       lastName: this.userName.lastName,
       placeholderText,
+      gradYear: this.onboardingData.gradYear,
       collegeAcronym: this.onboardingData.college,
       majorAcronyms,
       minorAcronyms,
@@ -146,11 +159,22 @@ export default Vue.extend({
       });
       return minors;
     },
+    semesters(): Readonly<Record<string, string>> {
+      const semsDict: Record<string, string> = {};
+      const yearRange = 6;
+      const curYear = new Date().getFullYear();
+      for (let i = -yearRange; i <= yearRange; i += 1) {
+        const yr = String(curYear + i);
+        semsDict[yr] = yr;
+      }
+      return semsDict;
+    },
   },
   methods: {
     updateBasic() {
       this.$emit(
         'updateBasic',
+        this.gradYear,
         this.collegeAcronym,
         this.majorAcronyms.filter(it => it !== ''),
         this.minorAcronyms.filter(it => it !== ''),
@@ -174,6 +198,10 @@ export default Vue.extend({
         }
       }
     },
+    selectGraduationYear(year: string) {
+      this.gradYear = year;
+      this.updateBasic();
+    },
     selectCollege(acronym: string) {
       this.collegeAcronym = acronym;
       this.clearMajorIfNotInCollege();

src/components/Modals/Onboarding/OnboardingBasicSingleDropdown.vue

@@ -25,6 +25,7 @@
           v-for="(fullName, key) in availableChoices"
           :key="key"
           class="onboarding-dropdown-content-item"
+          ref="scrollRef"
           @click="onSelect(key)"
         >
           {{ fullName }}
@@ -57,6 +58,7 @@ export default Vue.extend({
     },
     choice: { type: String, required: true },
     cannotBeRemoved: { type: Boolean, required: true },
+    scrollBottomToIndex: { type: Number, default: 0 },
   },
   data() {
     return {
@@ -83,6 +85,14 @@ export default Vue.extend({
         this.boxBorder = yuxuanBlue;
         this.arrowColor = yuxuanBlue;
       }
+
+      // scroll the bottom of the graduation year dropdown to scrollBottomToIndex
+      if (!contentShown && this.scrollBottomToIndex > 0) {
+        this.$nextTick(() => {
+          const el = (this.$refs.scrollRef as Element[])[this.scrollBottomToIndex];
+          el.scrollIntoView({ behavior: 'auto', block: 'nearest' });
+        });
+      }
     },
     closeDropdownIfOpen() {
       if (this.stopClose) {

src/components/Modals/Onboarding/OnboardingReview.vue

@@ -43,16 +43,22 @@
         <div class="onboarding-selectWrapper">
           <div class="onboarding-selectWrapper-review">
             <label class="onboarding-label"
-              >College<span class="onboarding-required-star">*</span></label
+              >Graduation Year<span class="onboarding-required-star">*</span></label
             >
             <div>
-              <label class="onboarding-label--review">{{ collegeText }}</label>
+              <label class="onboarding-label--review">{{ gradYearText }}</label>
             </div>
           </div>
           <div class="onboarding-selectWrapper-review">
             <label class="onboarding-label"
-              >Major<span class="onboarding-required-star">*</span></label
+              >College<span class="onboarding-required-star">*</span></label
             >
+            <div>
+              <label class="onboarding-label--review">{{ collegeText }}</label>
+            </div>
+          </div>
+          <div class="onboarding-selectWrapper-review">
+            <label class="onboarding-label">Major</label>
             <div v-for="(major, index) in onboardingData.major" :key="index">
               <label class="onboarding-label--review">{{ getMajorFullName(major) }}</label>
             </div>
@@ -166,6 +172,9 @@ export default Vue.extend({
         ? getCollegeFullName(this.onboardingData.college)
         : placeholderText;
     },
+    gradYearText(): string {
+      return this.onboardingData.gradYear !== '' ? this.onboardingData.gradYear : placeholderText;
+    },
     totalCredits(): number {
       let count = 0;
       this.onboardingData.exam.forEach(exam => {

src/requirements/__test__/exam-credit.test.ts

@@ -161,6 +161,7 @@ it("Some colleges don't have an equivalent course", () => {
  */
 it('Exam is counted correctly for one major', () => {
   const userData: AppOnboardingData = {
+    gradYear: '2020',
     college: 'EN',
     major: ['CS'],
     exam: [{ type: 'AP', score: 5, subject: 'Computer Science A' }],
@@ -176,6 +177,7 @@ it('Exam is counted correctly for one major', () => {
 
 it('Two exams are counted correctly for one major', () => {
   const userData: AppOnboardingData = {
+    gradYear: '2020',
     college: 'EN',
     major: ['CS'],
     exam: [
@@ -194,6 +196,7 @@ it('Two exams are counted correctly for one major', () => {
 
 it('One exam is only counted once for multiple majors', () => {
   const userData: AppOnboardingData = {
+    gradYear: '2020',
     college: 'EN',
     major: ['CS', 'Biological Sciences'],
     exam: [{ type: 'AP', score: 5, subject: 'Computer Science A' }],
@@ -210,6 +213,7 @@ it('One exam is only counted once for multiple majors', () => {
 
 it('Equivalent course appears if it matches one major but not the other', () => {
   let userData: AppOnboardingData = {
+    gradYear: '2020',
     college: 'EN',
     major: ['Biological Sciences'],
     exam: [{ type: 'AP', score: 4, subject: 'Statistics' }],
@@ -222,6 +226,7 @@ it('Equivalent course appears if it matches one major but not the other', () =>
   expect(courseEquivalents.length).toBe(0);
 
   userData = {
+    gradYear: '2020',
     college: 'EN',
     major: ['CS', 'Biological Sciences'],
     exam: [{ type: 'AP', score: 4, subject: 'Statistics' }],

src/store.ts

@@ -64,6 +64,7 @@ const store: TypedVuexStore = new TypedVuexStore({
     currentFirebaseUser: null!,
     userName: { firstName: '', middleName: '', lastName: '' },
     onboardingData: {
+      gradYear: '',
       college: '',
       major: [],
       minor: [],
@@ -212,6 +213,7 @@ const autoRecomputeDerivedData = (): (() => void) =>
 
 const createAppOnboardingData = (data: FirestoreOnboardingUserData): AppOnboardingData => ({
   // TODO: take into account multiple colleges
+  gradYear: data.gradYear ? data.gradYear : '',
   college: data.colleges[0].acronym,
   major: data.majors.map(({ acronym }) => acronym),
   minor: data.minors.map(({ acronym }) => acronym),

src/user-data.d.ts

@@ -45,6 +45,7 @@ type FirestoreTransferClass = {
 };
 type FirestoreOnboardingUserData = {
   readonly class: readonly FirestoreTransferClass[];
+  readonly gradYear: string;
   readonly colleges: readonly FirestoreCollegeOrMajorOrMinor[];
   readonly majors: readonly FirestoreCollegeOrMajorOrMinor[];
   readonly minors: readonly FirestoreCollegeOrMajorOrMinor[];
@@ -98,6 +99,7 @@ interface CornellCourseRosterCourseFullDetail extends CornellCourseRosterCourse
 }
 
 type AppOnboardingData = {
+  readonly gradYear: string;
   readonly college: string;
   readonly major: readonly string[];
   readonly minor: readonly string[];