Newer
Older
<mat-sidenav #addMenu position="end" mode="over" [opened]="isCourseSearchOpen$ | async">
<mat-toolbar color="primary" class="dialog-toolbar">
<span class="dialog-toolbar-title">Course Search</span>
<button mat-button class="close-btn" (click)="closeCourseSearch();"><i class="material-icons">clear</i></button>
</mat-toolbar>
<div [formGroup]='courseSearchForm' class="add-course-form" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
<input type="text" placeholder="Term" aria-label="Term" matInput [formControl]="" [matAutocomplete]="term">
<mat-autocomplete #term="matAutocomplete">
<mat-option *ngFor="let term of (coursesData$ | async)" [value]="term[0].termCode | getTermDescription">
{{ term[0].termCode | getTermDescription }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Subject" formControlName='coursesInput' required>
<!-- <mat-error *ngIf="coursesInput.invalid">Please select an existing Subject or 'All'.</mat-error> -->
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Keyword, number" value="">
<button mat-button (click)="search()">Search <i class="material-icons">search</i></button>
<div class="search-results-toolbar mat-typography" fxLayout="row" fxLayoutAlign="space-between center" style="padding: 12px 22px; background-color: #EDF1F3">
<h3 style="margin: 0px;">15 results</h3>
<span class="mat-button">Reset Search</span>
</div>
<div id="course-search-results" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
<mat-form-field>
<mat-select placeholder="Order by">
<mat-option>Relevance</mat-option>
<mat-option>Subject</mat-option>
<mat-option>Catalog Number</mat-option>
</mat-select>
</mat-form-field>
<div
cdkDropList
id="queried-courses-list"
[cdkDropListData]="queriedCourses"
[cdkDropListConnectedTo]="dropZones$ | async">
<div
class="course-wrapper"
cdkDrag
[cdkDragData]="course"
*ngFor="let course of this.queriedCourses">
<div class="course-wrapper-inner">
<cse-course-item [course]="course" type="course"></cse-course-item>
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
</mat-sidenav>
<mat-sidenav-content>
<mat-sidenav-container id="plans-container" *ngIf="(visibleDegreePlan$ | async) as degreePlan">
<!-- Menu side nav -->
<mat-sidenav #rightMenu position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
<cse-sidenav-menu-item></cse-sidenav-menu-item>
</mat-sidenav>
<mat-sidenav-content id="degree-plan-wrapper">
<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px" fxLayoutAlign="start center" style="margin: 24px 0px 24px 24px;">
<mat-form-field>
<mat-select
placeholder="Degree Plans"
class="degree-plan-selector"
[value]="visibleRoadmapId$ | async"
[disableOptionCentering]="true"
(selectionChange)="handleDegreePlanChange($event)">
<!-- Render the name of the currently visible degree plan. -->
<mat-select-trigger *ngIf="(visibleDegreePlan$ | async) as degreePlan">
<mat-icon class="primary-star" *ngIf="degreePlan.primary">star_rate</mat-icon>
<span class="plan-name">{{degreePlan.name}}</span>
</mat-select-trigger>
<!-- Show all degree plans in the dropdown list and ddd a star next to the user's primary plan. -->
<mat-option *ngFor="let degreePlan of (allDegreePlans$ | async)" [value]="degreePlan.roadmapId">
<mat-icon class="primary-star" *ngIf="degreePlan.primary">star_rate</mat-icon>
<span class="plan-name">{{degreePlan.name}}</span>
</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button [matMenuTriggerFor]="degreePlanMenu">
<mat-icon>settings</mat-icon>
</button>
<mat-menu #degreePlanMenu="matMenu">
<button mat-menu-item (click)="onCreatePlanClick()">Create new plan</button>
<button mat-menu-item (click)="onRenamePlanClick(degreePlan)">Rename plan</button>
<button mat-menu-item (click)="onDeletePlanClick(degreePlan)">Delete plan</button>
<button mat-menu-item (click)="onMakePrimayClick(degreePlan)">Make primary</button>
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<hr>
<button mat-menu-item (click)="onPrintPlanClick()">Print plan</button>
<button mat-menu-item (click)="onSharePlanClick()">Share plan</button>
</mat-menu>
</div>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
<mat-accordion multi="true" *ngIf="(firstActiveTermCode$ | async) as cutoffTermCode">
<ng-container *ngFor="let year of termsByYear$ | async">
<mat-expansion-panel class="year-container" [expanded]="year.expandedState" (opened)="handleAcademicYearToggle(year)" (closed)="handleAcademicYearToggle(year)">
<mat-expansion-panel-header>
<mat-panel-title>
{{ year.twoDigitYearCode | academicYearState:cutoffTermCode }}
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" class="term-container-wrapper">
<cse-term-container
id="term-{{year.fall.termCode}}"
fxFlex="33%"
[term]="year.fall"></cse-term-container>
<cse-term-container
id="term-{{year.spring.termCode}}"
fxFlex="33%"
[term]="year.spring"></cse-term-container>
<cse-term-container
id="term-{{year.summer.termCode}}"
fxFlex="33%"
[term]="year.summer"></cse-term-container>
</div>
</mat-expansion-panel>
</ng-container>
</mat-accordion>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</mat-sidenav-content>
</mat-sidenav-container>