ROENROLL-1400

src/app/app.component.scss

@@ -8,7 +8,6 @@ header {
   left: 0;
   width: 100%;
   height: 112px;
-  background-color: teal;
 }
 
 main {

src/app/degree-planner/course-search/course-search.component.html

@@ -8,9 +8,9 @@
         </mat-form-field>
   
         <mat-form-field class="example-full-width">
-          <input type="text" placeholder="Subject" aria-label="Subject" matInput formControlName="subject" [matAutocomplete]="subject">
+          <input type="text" placeholder="Subject" aria-label="Subject" matInput #subjectInput formControlName="subject" [matAutocomplete]="subject">
           <mat-autocomplete autoActiveFirstOption #subject="matAutocomplete">
-            <mat-option *ngFor="let subject of filteredSubjects | keyvalue" [value]="subject.value | titlecase">{{subject.value | titlecase}}</mat-option>
+            <mat-option *ngFor="let subject of filteredSubjects" [value]="subject | titlecase" (onSelectionChange)="subjectChange($event, subjectInput)">{{subject | titlecase}}</mat-option>
           </mat-autocomplete>
         </mat-form-field>
   

src/app/degree-planner/course-search/course-search.component.ts

 import { Observable, Subscription } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { Store, select } from '@ngrx/store';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { GlobalState } from '@app/core/state';
 import * as utils from '@app/degree-planner/shared/utils';
 import * as selectors from '@app/degree-planner/store/selectors';
@@ -24,6 +24,8 @@ import { Course, SubjectMapping } from '@app/core/models/course';
   styleUrls: ['./course-search.component.scss'],
 })
 export class CourseSearchComponent implements OnInit, OnDestroy {
+  @ViewChild('subject') subjectInput;
+
   // Internal variables used to store search info
   public queriedCourses: Course[];
   public hasResults: boolean;
@@ -37,8 +39,9 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
   public isCourseSearchOpen$: Observable<boolean>;
 
   // Internal variables to store subjects and filtered subjects list
-  public subjects: SubjectMapping;
-  public filteredSubjects: SubjectMapping;
+  public subjects: string[];
+  public subjectMap: SubjectMapping;
+  public filteredSubjects: string[];
 
   public termSubscription: Subscription;
   public searchOpenSubscribe: Subscription;
@@ -66,7 +69,6 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
     // Get active terms to populate term select box
     this.activeTerms$ = this.store.pipe(select(selectors.getActiveTerms));
 
-    // TODO unsubscribe on disconnect
     // Get observable for the search open state
     this.isCourseSearchOpen$ = this.store.pipe(
       select(selectors.isCourseSearchOpen),
@@ -83,8 +85,15 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
     this.store
       .pipe(select(selectors.getSubjectDescriptions))
       .subscribe(subjects => {
-        this.subjects = { [-1]: 'All', ...subjects };
-        this.filteredSubjects = { [-1]: 'All', ...subjects };
+        this.subjectMap = { [-1]: 'All', ...subjects };
+        const ordered = Object.entries(subjects)
+          .map(subject => {
+            return subject[1];
+          })
+          .sort();
+
+        this.subjects = ['all', ...ordered];
+        this.filteredSubjects = ['all', ...ordered];
       });
 
     // Deafults for the search form
@@ -128,21 +137,13 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
         return;
       }
 
-      // Create an object to store fitlered subjects
-      const filtered = {};
-
-      // Filter the terms based on users search
-      Object.entries(this.subjects).map(subject => {
-        const [key, name] = subject;
-
-        const search = name.replace(/\s/g, '');
-
+      this.filteredSubjects = this.subjects.filter(subject => {
+        const search = subject.replace(/\s/g, '');
         if (search.toLowerCase().indexOf(value.toLowerCase()) === 0) {
-          filtered[key] = name;
+          return true;
         }
+        return false;
       });
-
-      this.filteredSubjects = filtered;
     });
   }
 
@@ -152,6 +153,26 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
     this.searchOpenSubscribe.unsubscribe();
   }
 
+  public subjectChange($event, input) {
+    console.log(input);
+
+    const subject = $event.source.value;
+    const { search, term } = this.courseSearchForm.value;
+    this.search(search, term, subject);
+
+    // Focus is needed to keep the cursor at the start of the input after a selection is made
+    input.focus();
+  }
+
+  // Get a subject code from text
+  public getSubjectCode(text): string | undefined {
+    // Check if subject is valid
+    const subjectEntry: [string, any] | undefined = Object.entries(
+      this.subjectMap,
+    ).find(option => option[1].toLowerCase() === text.toLowerCase());
+    return subjectEntry ? subjectEntry[0] : subjectEntry;
+  }
+
   // Function that runs on form submit
   // Get form values and run a search
   public formSubmit() {
@@ -162,15 +183,10 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
   // Run a search and display all results if the serach is valid
   public search(search, term, subject) {
     // Get the form field values
-    let subjectCode;
+    console.log(subject);
 
     // Check if subject is valid
-    Object.entries(this.subjects).forEach(option => {
-      const [key, value] = option;
-      if (value.toLowerCase() === subject.toLowerCase()) {
-        subjectCode = key;
-      }
-    });
+    const subjectCode = this.getSubjectCode(subject);
 
     if (!subjectCode) {
       this.snackBar.open('Please select a valid subject', undefined, {

src/app/degree-planner/shared/course-item/course-item.component.scss

@@ -34,6 +34,7 @@
   p {
     margin: 0;
     padding: 0;
+    font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
   }
 
   .mat-icon {