Merge pull request #170 from cornell-dti/dom-manipulation-removal

DOM manipulation removal

src/components/Confirmation.vue

@@ -1,7 +1,3 @@
-// One prop for text // Otherwise - the same for courses and semesters // Can leave as display: none
-like the 2 modals in Semester.vue until necessary? Or can itself be created from the addCourse()
-method - unsure what the right move is right now
-
 <template>
   <div class="confirmation">
     <div class="confirmation-left">

src/components/Course.vue

@@ -88,16 +88,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;
     },
@@ -124,7 +118,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/Dashboard.vue

@@ -29,11 +29,13 @@
         :isBottomBarExpanded="bottomBar.isExpanded"
         :isBottomBar="bottomCourses.length > 0"
         :isMobile="isMobile"
+        :currSemID="currSemID"
 
         @compact-updated="compactVal = $event"
         @updateBar="updateBar"
         @close-bar="closeBar"
         @updateRequirementsMenu="updateRequirementsMenu"
+        @increment-semID="incrementSemID"
       />
     </div>
     <tourwindow
@@ -368,18 +370,9 @@ export default Vue.extend({
       // Return randomly generated color
       return randomColor;
     },
-
-    createSemester(courses: readonly AppCourse[], type: FirestoreSemesterType, year: number): AppSemester {
-      const semester = {
-        courses,
-        id: this.currSemID,
-        type,
-        year
-      };
+    incrementSemID(){
       this.currSemID += 1;
-      return semester;
     },
-
     updateRequirementsMenu() {
       this.requirementsKey += 1;
     },

src/components/Modals/DeleteSemester.vue

@@ -25,11 +25,9 @@
 /* eslint-disable import/extensions */
 import Vue from 'vue';
 import NewCourse from '@/components/Modals/NewCourse.vue';
-import NewCustomCourse from '@/components/Modals/NewCustomCourse.vue';
 import NewSemester from '@/components/Modals/NewSemester.vue';
 
 Vue.component('newCourse', NewCourse);
-Vue.component('newCustomCourse', NewCustomCourse);
 Vue.component('newSemester', NewSemester);
 
 
@@ -53,8 +51,7 @@ export default Vue.extend({
   },
   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,13 +40,16 @@ export default {
     return {
       isOnboard: false,
       courseIsAddable: true,
-      isDisabled: false
+      isDisabled: false,
+      season: '',
+      year: ''
     };
   },
   props: {
     type: String,
     semesterID: Number,
-    currentSemesters: Array
+    currentSemesters: Array,
+    isOpen: Boolean
   },
   computed: {
     contentId() {
@@ -75,24 +78,25 @@ 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.$emit('close-semester-modal');
         this.$refs.modalBodyComponent.resetDropdowns();
       }
-      modal.style.display = 'none';
     },
     // Note: Currently not used
     checkCourseDuplicate(key) {
@@ -103,13 +107,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,13 +119,10 @@ 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];
 
-      const parent = this.$parent;
-
       // To use for retrieve course data from Firebase
       // // TODO: error handling if course not found or some firebase error
       // docRef
@@ -148,7 +146,7 @@ export default {
               const course = resultJSONclass;
               course.roster = roster;
               if (this.courseIsAddable) {
-                parent.addCourse(course);
+                this.$emit('add-course', course);
               }
             }
           });
@@ -160,15 +158,14 @@ 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;
     }
   }
 };

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

@@ -183,6 +183,9 @@ export default {
   directives: {
     'click-outside': clickOutside
   },
+  mounted() {
+    this.$emit('updateSemProps', this.seasonPlaceholder, this.yearPlaceholder);
+  },
   methods: {
     seasonValue(season) {
       return SeasonsEnum[season[1].toLowerCase()];
@@ -245,9 +248,10 @@ export default {
       }
       const displayOptions = this.displayOptions[type];
       displayOptions.shown = false;
-      displayOptions.boxBorder = inactiveGray;
-      displayOptions.arrowColor = inactiveGray;
-      displayOptions.placeholderColor = lightPlaceholderGray;
+      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);