DOM manipulation removal

src/components/Course.vue

@@ -101,16 +101,10 @@ export default {
     };
   },
   computed: {
-    rqString() {
-      return 'RQ';
-    },
-
-    // TODO: bold requirements
     requirementString() {
       return this.alerts.requirement;
     },
 
-    // TODO: too much DOM manipulation that vue should fix - talk to Sam
     cautionString() {
       return this.alerts.caution;
     },
@@ -137,7 +131,6 @@ export default {
       return `https://www.cureviews.org/course/${this.subject}/${this.number}`;
     },
 
-    // TODO: change semester from FA18
     roster() {
       return `https://classes.cornell.edu/browse/roster/FA18/class/${this.subject}/${this.number}`;
     },

src/components/Modals/DeleteSemester.vue

@@ -24,11 +24,9 @@
 <script>
 import Vue from 'vue';
 import NewCourse from '@/components/Modals/NewCourse';
-import NewCustomCourse from '@/components/Modals/NewCustomCourse';
 import NewSemester from '@/components/Modals/NewSemester';
 
 Vue.component('newCourse', NewCourse);
-Vue.component('newCustomCourse', NewCustomCourse);
 Vue.component('newSemester', NewSemester);
 
 
@@ -52,8 +50,7 @@ export default {
   },
   methods: {
     closeCurrentModal() {
-      const modal = document.getElementById(`deleteSemesterModal-${this.deleteSemID}`);
-      modal.style.display = 'none';
+      this.$emit('close-delete-modal');
     },
     deleteSemester() {
       this.$emit('delete-semester', this.deleteSemType, this.deleteSemYear);

src/components/Modals/EditSemester.vue

@@ -14,6 +14,7 @@
             :year="deleteSemYear"
             :type="deleteSemType"
             @duplicateSemester="disableButton"
+            @updateSemProps="updateSemProps"
             ref="modalBodyComponent">
         </newSemester>
       </div>
@@ -32,11 +33,9 @@
 <script>
 import Vue from 'vue';
 import NewCourse from '@/components/Modals/NewCourse';
-import NewCustomCourse from '@/components/Modals/NewCustomCourse';
 import NewSemester from '@/components/Modals/NewSemester';
 
 Vue.component('newCourse', NewCourse);
-Vue.component('newCustomCourse', NewCustomCourse);
 Vue.component('newSemester', NewSemester);
 
 export default {
@@ -48,7 +47,9 @@ export default {
   },
   data() {
     return {
-      isDisabled: false
+      isDisabled: false,
+      season: '',
+      year: ''
     };
   },
   computed: {
@@ -64,17 +65,20 @@ export default {
   },
   methods: {
     closeCurrentModal() {
-      const modal = document.getElementById(`editSemesterModal-${this.deleteSemID}`);
-      modal.style.display = 'none';
+      this.$emit('close-edit-modal');
     },
     editSemester() {
       if (!this.isDisabled) {
-        this.$parent.editSemester(this.deleteSemID);
+        this.$emit('edit-semester', this.season, this.year);
         this.closeCurrentModal();
       }
     },
     disableButton(bool) {
       this.isDisabled = bool;
+    },
+    updateSemProps(season, year) {
+      this.season = season;
+      this.year = year;
     }
   }
 };

src/components/Modals/Modal.vue

@@ -13,6 +13,8 @@
         :currentSemesters="currentSemesters"
         placeholderText = 'CS 1110", "Multivariable Calculus", etc.'
         @duplicateSemester="disableButton"
+        @close-current-model="closeCourseModal"
+        @updateSemProps="updateSemProps"
         ref="modalBodyComponent"
       ></component>
       <div class="modal-buttonWrapper">
@@ -26,12 +28,10 @@
 <script>
 import Vue from 'vue';
 import NewCourse from '@/components/Modals/NewCourse';
-import NewCustomCourse from '@/components/Modals/NewCustomCourse';
 import NewSemester from '@/components/Modals/NewSemester';
 import EditSemester from '@/components/Modals/EditSemester';
 
 Vue.component('newCourse', NewCourse);
-Vue.component('newCustomCourse', NewCustomCourse);
 Vue.component('newSemester', NewSemester);
 Vue.component('editSemester', EditSemester);
 
@@ -40,7 +40,9 @@ export default {
     return {
       isOnboard: false,
       courseIsAddable: true,
-      isDisabled: false
+      isDisabled: false,
+      season: '',
+      year: ''
     };
   },
   props: {
@@ -75,24 +77,24 @@ export default {
       if (this.type === 'course') {
         return 'newCourse';
       }
-      return 'newCustomCourse';
+      return '';
     }
   },
   methods: {
     disableButton(bool) {
       this.isDisabled = bool;
     },
+    closeCourseModal() {
+      this.$emit('close-course-modal');
+    },
     closeCurrentModal() {
-      let modal;
       if (this.type === 'course') {
-        modal = document.getElementById(`${this.type}Modal-${this.semesterID}`);
-      } else {
-        modal = document.getElementById(`${this.type}Modal`);
+        this.$emit('close-course-modal');
+        return;
       }
       if (this.type === 'semester') {
         this.$refs.modalBodyComponent.resetDropdowns();
       }
-      modal.style.display = 'none';
     },
     // Note: Currently not used
     checkCourseDuplicate(key) {
@@ -103,13 +105,10 @@ export default {
         const dropdown = document.getElementById(`dropdown-${this.semesterID}`);
         const title = dropdown.value;
 
-        // TODO: can I make the valid assumption that the course code is up to the colon in the title?
         const key = title.substring(0, title.indexOf(':'));
         this.addCourse();
       } else if (this.type === 'semester') {
         this.addSemester();
-      } else {
-        // TODO: add custom course
       }
     },
     addCourse() {
@@ -118,7 +117,6 @@ export default {
       // name used to transmit roster information
       const roster = dropdown.name;
 
-      // TODO: can I make the valid assumption that the course code is up to the colon in the title?
       const courseCode = title.substring(0, title.indexOf(':'));
       const subject = courseCode.split(' ')[0];
       const number = courseCode.split(' ')[1];
@@ -160,22 +158,20 @@ export default {
     },
     addSemester() {
       if (!this.isDisabled) {
-        const seasonInput = document.getElementById(`season-placeholder`);
-        const yearInput = document.getElementById(`year-placeholder`);
-        this.$parent.addSemester(
-          seasonInput.innerHTML.trim(' ').split(' ')[0],
-          parseInt(yearInput.innerHTML, 10)
-        );
+        this.$emit('add-semester', this.season, this.year);
 
         this.closeCurrentModal();
       }
+    },
+    updateSemProps(season, year) {
+      this.season = season;
+      this.year = year;
     }
   }
 };
 </script>
 
 <style lang="scss">
-// TODO: font family
 .modal {
   padding: 1rem;
 

src/components/Modals/NewCourse.vue

@@ -25,15 +25,19 @@ export default {
     }
   },
   mounted() {
+    // Activate focus and set input to empty
+    const input = document.getElementById(`dropdown-${this.semesterID}`);
+    input.value = '';
+    input.focus();
+
     this.autocomplete(
       document.getElementById(`dropdown-${this.semesterID}`),
       coursesJSON
     );
   },
   methods: {
     closeCourseModal() {
-      const modal = document.getElementById(`courseModal-${this.semesterID}`);
-      modal.style.display = 'none';
+      this.$emit('close-course-modal');
     },
     autocomplete(inp, courses) {
       /* the autocomplete function takes two arguments,

src/components/Modals/NewSemester.vue

@@ -194,6 +194,9 @@ export default {
   directives: {
     'click-outside': clickOutside
   },
+  mounted() {
+    this.$emit('updateSemProps', this.seasonPlaceholder, this.yearPlaceholder);
+  },
   methods: {
     seasonValue(season) {
       return SeasonsEnum[season[1].toLowerCase()];
@@ -259,6 +262,7 @@ export default {
       displayOptions.boxBorder = '#C4C4C4';
       displayOptions.arrowColor = '#C4C4C4';
       displayOptions.placeholderColor = '#757575';
+      this.$emit('updateSemProps', this.seasonText || this.seasonPlaceholder, this.yearText || this.yearPlaceholder);
     },
     selectSeason(text) {
       this.selectOption('season', text);