Audit course key / legend formatting

src/app/dars/audit-legend/audit-legend.component.html

+<section id="audit-legend">
+  <!-- COURSE SYMBOLS TABLE -->
+  <table mat-table [dataSource]="auditCourseSymbols">
+    <caption>Course Symbols</caption>
+    <tr mat-header-row *matHeaderRowDef="auditCourseColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>
+
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef>Symbol</th>
+      <td mat-cell *matCellDef="let legend">{{ legend.symbol }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>Description</th>
+      <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
+    </ng-container>
+  </table>
+
+  <!-- GRADE SYMBOLS TABLE -->
+  <table mat-table [dataSource]="auditGradeSymbols">
+    <caption>Grade Symbols</caption>
+    <tr mat-header-row *matHeaderRowDef="auditCourseColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>
+
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef>Symbol</th>
+      <td mat-cell *matCellDef="let legend">{{ legend.symbol }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>Description</th>
+      <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
+    </ng-container>
+  </table>
+
+  <!-- REQUIREMENT INFO TABLE -->
+  <table mat-table [dataSource]="auditReqInformation">
+    <caption>Requirement / Sub-requirement Information</caption>
+    <tr mat-header-row *matHeaderRowDef="auditCourseColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>
+
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef>Symbol</th>
+      <td mat-cell *matCellDef="let legend">{{ legend.symbol }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>Description</th>
+      <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
+    </ng-container>
+  </table>
+
+    <!-- Audit Exception SYMBOLS TABLE -->
+    <table mat-table [dataSource]="auditExceptionSymbols">
+      <caption>Exception Symbols</caption>
+      <tr mat-header-row *matHeaderRowDef="auditCourseColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>
+
+      <ng-container matColumnDef="symbol">
+        <th mat-header-cell *matHeaderCellDef>Symbol</th>
+        <td mat-cell *matCellDef="let legend">{{ legend.symbol }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="description">
+        <th mat-header-cell *matHeaderCellDef>Description</th>
+        <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
+      </ng-container>
+    </table>
+</section>
\ No newline at end of file

src/app/dars/audit-legend/audit-legend.component.scss

+#audit-legend {
+  table {
+    width: 100%;
+    margin-bottom: 2em;
+  }
+}

src/app/dars/audit-legend/audit-legend.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cse-audit-legend',
+  templateUrl: './audit-legend.component.html',
+  styleUrls: ['./audit-legend.component.scss'],
+})
+export class AuditLegendComponent {
+  public auditCourseColumns: string[] = ['symbol', 'description'];
+  public auditCourseSymbols: { symbol: string; description: string }[] = [
+    { symbol: '>D', description: 'Duplicate course - retains GPA effect' },
+    { symbol: '>R', description: 'Repeatable course' },
+    { symbol: '>S', description: 'Credit split between requirements' },
+    {
+      symbol: '>X',
+      description: 'Repeated course - no course credit or GPA effect',
+    },
+    { symbol: '(R)', description: 'Required course' },
+    { symbol: '(X)', description: 'Original course value' },
+  ];
+
+  public auditGradeSymbols: { symbol: string; description: string }[] = [
+    { symbol: 'EIP', description: 'Extended incomplete' },
+    { symbol: 'CR', description: 'Credit (credit/no credit courses)' },
+    { symbol: 'HS', description: 'High school unit' },
+    { symbol: 'IN', description: 'Incomplete (credit/no credit courses)' },
+    { symbol: 'INP', description: 'In-progress course (current term)' },
+    { symbol: 'IP', description: 'Incomplete' },
+    { symbol: 'N', description: 'No credit (credit/no credit courses)' },
+    { symbol: 'NR', description: 'Not reported' },
+    { symbol: 'NW', description: 'No work' },
+    { symbol: 'PL', description: 'Planned course' },
+    { symbol: 'PP', description: 'Progress' },
+    { symbol: 'PS', description: 'Mock/pseudo course' },
+    { symbol: 'Q', description: 'Question on credits or honors' },
+    { symbol: 'S', description: 'Satisfactory (pass/fail and audit courses)' },
+    { symbol: 'T', description: 'Transfer/test/advanced standing course' },
+    { symbol: 'U', description: 'Unsatisfactory (pass/fail courses)' },
+  ];
+
+  public auditReqInformation: { symbol: string; description: string }[] = [
+    { symbol: 'OK', description: 'Requirement complete' },
+    { symbol: 'NO', description: 'Requirement not complete' },
+    {
+      symbol: 'IP',
+      description: 'Requirement uses in-progress credit/courses',
+    },
+    {
+      symbol: 'IN-P',
+      description: 'Sub-requirement uses in progress credit/courses',
+    },
+    {
+      symbol: 'PL',
+      description: 'Requirement/sub-requirement uses planned course',
+    },
+    { symbol: 'R', description: 'Required sub-requirement (mandatory)' },
+    {
+      symbol: '<>',
+      description: "Optional/other requirement in OR'd set complete",
+    },
+    { symbol: '+', description: 'Sub-requirement complete' },
+    { symbol: '-', description: 'Sub-requirement not complete' },
+    { symbol: '*', description: 'Optional sub-requirement, courses assigned' },
+    {
+      symbol: ' ',
+      description: 'Optional sub-requirement, no courses assigned',
+    },
+  ];
+
+  public auditExceptionSymbols: { symbol: string; description: string }[] = [
+    {
+      symbol: 'AC',
+      description: 'Course approved for requirement/sub-requirement',
+    },
+    {
+      symbol: 'IC',
+      description: 'Course inserted into requirement/sub-requirement',
+    },
+    { symbol: 'EC', description: 'Course exchanged for specified course' },
+    {
+      symbol: 'FC',
+      description: 'Course forced into requirement/sub-requirement',
+    },
+    { symbol: 'CM', description: 'Course modified' },
+    { symbol: 'CY', description: 'Catalog year modified' },
+    {
+      symbol: 'DC',
+      description: 'Course deleted from requirement/sub-requirement',
+    },
+    { symbol: 'RM', description: 'Requirement modified' },
+    { symbol: 'WC', description: 'Waive course' },
+    { symbol: 'WP', description: 'Waive mock/pseudo course' },
+  ];
+}

src/app/dars/audit/audit.component.html

@@ -212,6 +212,19 @@
       </ng-container>
       <!-- END OF REQUIREMENT -->
 
+      <!-- AUDIT COURSE KEY / LEGEND -->
+      <mat-expansion-panel #requirementPanel [expanded]="true" id="legend-panel">
+        <mat-expansion-panel-header collapsedHeight="auto" expandedHeight="auto">
+          <mat-panel-title class="requirement-title">
+            <div class="requirement-icon-outer">
+                <mat-icon class="requirement-toggle">{{requirementPanel.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon>
+            </div>
+            <div><p>Audit Legend</p></div>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <cse-audit-legend></cse-audit-legend>
+      </mat-expansion-panel>
+
     </mat-accordion>
   </section>
 </mat-card>

src/app/dars/audit/audit.component.scss

@@ -131,6 +131,11 @@ $blue: #0479a8;
   margin-top: -4px;
 }
 
+#legend-panel {
+  .requirement-toggle {
+    margin-right: 0px;
+  }
+}
 .content-type {
   margin-bottom: 5px;
 

src/app/dars/audit/audit.component.ts

@@ -46,6 +46,12 @@ export class DarsAuditComponent implements OnInit {
   @ViewChild(MatAccordion) requirements: MatAccordion;
 
   public ngOnInit() {
+    // Filter out LEGEND from audit data
+    this.audit.requirements = this.audit.requirements.filter(function(
+      requirement,
+    ) {
+      return requirement.requirementName !== 'LEGEND';
+    });
     console.log(this.audit);
   }
 

src/app/dars/dars-view/dars-view.component.html

@@ -20,7 +20,7 @@
           <mat-card class="loading-wrapper">
             <mat-progress-bar class="card-top-spinner" mode="indeterminate"></mat-progress-bar>
             <img class="bucky-image" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
-            <p>Loading your degree Audit</p>
+            <p>Loading your degree audit</p>
           </mat-card>
         </ng-container>
       </ng-container>

src/app/dars/dars.module.ts

@@ -4,6 +4,7 @@ import { EffectsModule } from '@ngrx/effects';
 import { SharedModule } from '@app/shared/shared.module';
 import { DARSEffects } from './store/effects';
 import { DarsAuditComponent } from './audit/audit.component';
+import { AuditLegendComponent } from './audit-legend/audit-legend.component';
 import { DarsMetadataTableComponent } from './metadata-table/metadata-table.component';
 import { MetadataMobileViewComponent } from './metadata-mobile-view/metadata-mobile-view.component';
 import { MatStepperModule } from '@angular/material';
@@ -28,6 +29,7 @@ import { NewWhatIfAuditDialogComponent } from './new-what-if-audit-dialog/new-wh
     NewWhatIfAuditDialogComponent,
     DARSViewComponent,
     DarsAuditComponent,
+    AuditLegendComponent,
     DarsMetadataTableComponent,
     MetadataMobileViewComponent,
   ],