230 click pointer affordance of academics admin tables (#245)

* Move (click)="updateCourse(elt)" from p tag to div tag

Before, the admin was only able to edit the desired course if they
clicked on the actual text. This change allows the admin to click
anywhere on the row and get redirected to the edit course page.

* Update deleteCourse to work with change

After makinig the change in my previous commit, the page would
redirect to the edit course page when clicking on delete. To fix, I
modified the method to take in an event and call the
stopPropogation method in order to prevent any parent event
handlers from being executed.

* update documentation

* same changes that were made to course.component html and ts

* fixed typo

* fixed typo

* allow admin to click anywhere in row instead of just the text

* add event to delete function to stop propagation

* allow user to click anywhere in the row instead of just the text

* add event to delete method to stop propagation

frontend/src/app/academics/academics-admin/course/admin-course.component.html

@@ -9,12 +9,12 @@
         </div>
       </th>
       <td mat-cell *matCellDef="let element">
-        <div class="row">
-          <p (click)="updateCourse(element)">
+        <div class="row" (click)="updateCourse(element)">
+          <p>
             {{ element.subject_code }}{{ element.number }}: {{ element.title }}
           </p>
           <div clas="modify-buttons">
-            <button mat-stroked-button (click)="deleteCourse(element)">
+            <button mat-stroked-button (click)="deleteCourse(element, $event)">
               Delete
             </button>
           </div>

frontend/src/app/academics/academics-admin/course/admin-course.component.ts

@@ -61,9 +61,11 @@ export class AdminCourseComponent {
 
   /** Delete a course object from the backend database table using the backend HTTP delete request.
    * @param course: course to delete
+   * @param event: event to stop propagation
    * @returns void
    */
-  deleteCourse(course: Course): void {
+  deleteCourse(course: Course, event: Event): void {
+    event.stopPropagation();
     let confirmDelete = this.snackBar.open(
       'Are you sure you want to delete this course?',
       'Delete'

frontend/src/app/academics/academics-admin/room/admin-room.component.html

@@ -9,12 +9,12 @@
         </div>
       </th>
       <td mat-cell *matCellDef="let element">
-        <div class="row">
-          <p (click)="updateRoom(element)">
+        <div class="row" (click)="updateRoom(element)">
+          <p>
             {{ element.nickname }}
           </p>
           <div clas="modify-buttons">
-            <button mat-stroked-button (click)="deleteRoom(element)">
+            <button mat-stroked-button (click)="deleteRoom(element, $event)">
               Delete
             </button>
           </div>

frontend/src/app/academics/academics-admin/room/admin-room.component.ts

@@ -61,9 +61,11 @@ export class AdminRoomComponent {
 
   /** Delete a room object from the backend database table using the backend HTTP delete request.
    * @param room: room to delete
+   * @param event: event to stop propagation
    * @returns void
    */
-  deleteRoom(room: Room): void {
+  deleteRoom(room: Room, event: Event): void {
+    event.stopPropagation();
     let confirmDelete = this.snackBar.open(
       'Are you sure you want to delete this room?',
       'Delete'

frontend/src/app/academics/academics-admin/section/admin-section.component.html

@@ -20,8 +20,8 @@
         </div>
       </th>
       <td mat-cell *matCellDef="let element">
-        <div class="row">
-          <p (click)="updateSection(element)">
+        <div class="row" (click)="updateSection(element)">
+          <p>
             {{ courseFromId(element.course_id)?.subject_code }}
             {{ courseFromId(element.course_id)?.number }} -
             {{ element.number }}:
@@ -32,7 +32,7 @@
             }}
           </p>
           <div clas="modify-buttons">
-            <button mat-stroked-button (click)="deleteSection(element)">
+            <button mat-stroked-button (click)="deleteSection(element, $event)">
               Delete
             </button>
           </div>

frontend/src/app/academics/academics-admin/section/admin-section.component.ts

@@ -97,9 +97,11 @@ export class AdminSectionComponent {
 
   /** Delete a section object from the backend database table using the backend HTTP delete request.
    * @param section: section to delete
+   * @param event: event to stop progagation
    * @returns void
    */
-  deleteSection(section: Section): void {
+  deleteSection(section: Section, event: Event): void {
+    event.stopPropagation();
     let confirmDelete = this.snackBar.open(
       'Are you sure you want to delete this section?',
       'Delete'

frontend/src/app/academics/academics-admin/term/admin-term.component.html

@@ -9,12 +9,12 @@
         </div>
       </th>
       <td mat-cell *matCellDef="let element">
-        <div class="row">
-          <p (click)="updateTerm(element)">
+        <div class="row" (click)="updateTerm(element)">
+          <p>
             {{ element.name }}
           </p>
           <div clas="modify-buttons">
-            <button mat-stroked-button (click)="deleteTerm(element)">
+            <button mat-stroked-button (click)="deleteTerm(element, $event)">
               Delete
             </button>
           </div>

frontend/src/app/academics/academics-admin/term/admin-term.component.ts

@@ -61,9 +61,11 @@ export class AdminTermComponent {
 
   /** Delete a temr object from the backend database table using the backend HTTP delete request.
    * @param term: term to delete
+   * @param event: event to stop progagation
    * @returns void
    */
-  deleteTerm(term: Term): void {
+  deleteTerm(term: Term, event: Event): void {
+    event.stopPropagation();
     let confirmDelete = this.snackBar.open(
       'Are you sure you want to delete this term?',
       'Delete'