Newer
Older
<form [formGroup]='courseSearchForm' (ngSubmit)="formSubmit()" class="add-course-form" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
<mat-form-field>
<mat-select placeholder="Term" aria-label="Term" formControlName="term">
<mat-option value="0000">All</mat-option>
<mat-option *ngFor="let yearCode of activeTerms$ | async" [value]="yearCode">{{yearCode | getTermDescription}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="example-full-width">
<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" [value]="subject | titlecase" (onSelectionChange)="subjectChange($event, subjectInput)">{{subject | titlecase}}</mat-option>
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
</mat-autocomplete>
</mat-form-field>
<mat-form-field>
<div class="search-input-wrapper">
<input id="keyword-field" matInput placeholder="Keyword, number" formControlName="search" value="">
<button id="search-button" mat-icon-button aria-label="Search" matSuffix style="margin-top: -10px;"><i class="material-icons">search</i></button>
</div>
</mat-form-field>
</form>
<div *ngIf="hasResults || isLoading">
<div class="search-results-toolbar mat-typography" fxLayout="row" fxLayoutAlign="space-between center" style="padding: 12px 22px; background-color: #EDF1F3; min-height: 60px;">
<h3 *ngIf="isLoading" style="margin: 0px;">Searching for courses...</h3>
<h3 *ngIf="hasResults" style="margin: 0px;">{{queriedCourses.length}} result(s)</h3>
<button *ngIf="hasResults" mat-button (click)="resetSearchForm()">Reset Search</button>
</div>
<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
<div id="course-search-results" fxLayout="column" fxLayoutAlign="space-around none" style="margin-top: 20px; padding: 12px 22px;">
<div *ngIf="hasResults && queriedCourses.length === 0" class="mat-typography" style="text-align: center;">
<img style="width: 50%;" src="../../assets/img/bucky-sad.svg" alt="No results found">
<h3>No search results found.</h3>
</div>
<div
cdkDropList
id="queried-courses-list"
[cdkDropListData]="queriedCourses"
[cdkDropListConnectedTo]="dropZoneIds$ | async"
>
<div
class="course-wrapper"
cdkDrag
[cdkDragData]="course"
*ngFor="let course of queriedCourses"
>
<div class="course-wrapper-inner">
<cse-course-item [course]="course" type="search"></cse-course-item>
</div>
</div>
</div>
</div>
</div>