degree-planner.component.html

<mat-sidenav-container [hasBackdrop]="mobileView.matches">
  <mat-sidenav-content role="main">
    <mat-progress-bar id="loading-plan-progress" mode="indeterminate" *ngIf="(isLoadingPlan$ | async)"></mat-progress-bar>
    <mat-sidenav-container id="plans-container" ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar">
      <mat-sidenav-content
        id="degree-plan-wrapper"
        role="region"
        cdkFocusRegionStart
        [ngClass]="{ isLoadingPlan: isLoadingPlan$ | async }"
        *ngIf="(degreePlan$ | async) as degreePlan">

        <cse-alert-container></cse-alert-container>

        <div
          id="maincontent"
          fxLayout="row"
          fxLayoutGap="20px"
          fxLayoutAlign="start center"
          style="margin: 24px 0px 24px 24px;">
          <h1 class="sr-only" tabindex="0">Degree Planner</h1>
          <mat-form-field class="degree-plans-form-field">
            <mat-select
              aria-label="Degree plans list"
              [disabled]="isLoadingPlan$ | async"
              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"
                  alt="Primary degree plan star"
                  matTooltip="Primary plan"
                  matTooltipPosition="above"
                  >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"
                  alt="Primary degree plan star"
                  matTooltip="Primary plan"
                  matTooltipPosition="above"
                  >star_rate</mat-icon>
                <span class="plan-name">{{ degreePlan.name }}</span>
              </mat-option>
            </mat-select>
          </mat-form-field>

          <button
            mat-icon-button
            aria-label="Degree plan settings"
            [matMenuTriggerFor]="degreePlanMenu"
            [disabled]="isLoadingPlan$ | async">
            <mat-icon
              aria-label="Degree plan settings"
              alt="Degree plan settings"
              matTooltip="Plan settings"
              matTooltipPosition="right"
              >settings</mat-icon>
          </button>
          <mat-menu #degreePlanMenu="matMenu">
            <button mat-menu-item (click)="onAddAcademicYear()">
              Add academic year
            </button>
            <button mat-menu-item (click)="onRenamePlanClick(degreePlan)">
              Rename plan
            </button>
            <button
              mat-menu-item
              (click)="onMakePrimayClick(degreePlan)"
              [disabled]="degreePlan.primary">
              Make primary
            </button>
            <a mat-menu-item target="_blank" href="/api/degreeplanpdf?roadmapId={{ degreePlan.roadmapId }}">Create PDF</a>
            <button
              mat-menu-item
              (click)="onDeletePlanClick(degreePlan)"
              [disabled]="degreePlan.primary">
              Delete plan
            </button>
            <hr />
            <button mat-menu-item (click)="onCreatePlanClick()">
              Add degree plan
            </button>
          </mat-menu>
        </div>

        <div
          id="year-wrapper"
          fxLayout="column"
          fxLayoutGap="20px"
          fxLayoutAlign="start stretch"
          style="margin:24px 24px 72px 24px">
          <div id="year-mask" *ngIf="(isLoadingPlan$ | async)"></div>
          <div id="accordion-controls">
            <button mat-button color="primary" (click)="toggleAllYears(true)" aria-label="Expand All Years">Expand All</button>
            <span>|</span>
            <button mat-button color="primary" (click)="toggleAllYears(false)" aria-label="Collapse All Years">Collapse All</button>
          </div>
          <mat-accordion multi="true">
            <cse-year-container
              *ngFor="let yearCode of yearCodes$ | async; trackBy: trackYearCodes"
              [yearCode]="yearCode">
            </cse-year-container>
          </mat-accordion>
        </div>
      </mat-sidenav-content>
        <!-- Menu side nav -->
      <mat-sidenav position="end" role="region" cdkFocusRegionEnd (closedStart)="closeSidenav()"
        [mode]="mobileView.matches ? 'over' : 'side'"
        [disableClose]="!mobileView.matches"
        [opened]="(isSidenavOpen$ | async) || !mobileView.matches">
        <cse-sidenav-menu-item></cse-sidenav-menu-item>
        <p class="version-number">v{{ version }}</p>
      </mat-sidenav>
    </mat-sidenav-container>
  </mat-sidenav-content>
  <mat-sidenav #addMenu position="end" mode="over" role="region" [opened]="isCourseSearchOpen$ | async" (closedStart)="closeCourseSearch()">
    <mat-toolbar color="primary" class="dialog-toolbar">
      <span class="dialog-toolbar-title">Course Search</span>
      <button mat-button aria-label="Close course search sidenav" class="close-btn" (click)="closeCourseSearch()">
        <i class="material-icons" alt="Close course search sidenav" matTooltip="Close sidenav" matTooltipPosition="above">keyboard_arrow_right</i>
      </button>
    </mat-toolbar>
    <cse-course-search></cse-course-search>
  </mat-sidenav>
</mat-sidenav-container>