Newer
Older
<mat-sidenav-container hasBackdrop="false" *ngIf="(degreePlan$ | async) as degreePlan">
<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">keyboard_arrow_right</i></button>
<cse-course-search></cse-course-search>
11
12
13
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
58
59
60
61
62
63
64
65
66
67
<mat-sidenav-content>
<mat-sidenav-container id="plans-container">
<!-- 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]="degreePlan.roadmapId"
[disableOptionCentering]="true"
(selectionChange)="handleDegreePlanChange($event)">
<!-- Render the name of the currently visible degree plan. -->
<mat-select-trigger>
<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)" [disabled]="degreePlan.primary">Delete plan</button>
<button mat-menu-item (click)="onMakePrimayClick(degreePlan)" [disabled]="degreePlan.primary">Make primary</button>
<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">
<ng-container *ngFor="let yearCode of (yearCodes$ | async)">
<cse-year-container [yearCode]="yearCode"></cse-year-container>
</ng-container>
</mat-accordion>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</mat-sidenav-content>