degree-planner.component.html

<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>
    </mat-toolbar>

    <form [formGroup]='courseSearchForm' (ngSubmit)="search()" 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 formControlName="subject" [matAutocomplete]="subject">
        <mat-autocomplete autoActiveFirstOption #subject="matAutocomplete">
          <mat-option *ngFor="let subject of filteredSubjects | keyvalue" [value]="subject.value">{{subject.value}}</mat-option>
        </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)="resetSearch()">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>
  </mat-sidenav>

      <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)="resetSearch()">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="padding: 12px 22px;">
          <div
            cdkDropList
            id="queried-courses-list"
            [cdkDropListData]="queriedCourses"
            [cdkDropListConnectedTo]="getTermDropZone()">
            <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>
              </div>
            </div>
          </div>
        </div>
      </div>

    <div
      cdkDropList
      id="queried-courses-list"
      [cdkDropListData]="queriedCourses"
      [cdkDropListConnectedTo]="dropZoneIds$ | 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>
        </div>
      </div>
    </div>

  <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>
</mat-sidenav-container>