Update top section of audit

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

@@ -2,15 +2,17 @@
   <header id="audit-header" class="no-horizontal-padding">
     <div class="audit-metadata">
       <div>
-        <p>{{audit.header.preparedDate}}</p>
+        <p>{{audit.header.preparedLabel}}: {{audit.header.preparedDate}}</p>
         <p>{{audit.header.studentName}}</p>
-        <p>Program Code: {{audit.header.darsDegreeProgramCode}}</p>
+        <p>{{audit.header.darsDegreeProgramCodeLabel}}: {{audit.header.darsDegreeProgramCode}}</p>
       </div>
 
       <div class="text-align-right">
-        <p>{{metadata.darsDegreeAuditReportId}}</p>
-        <!-- <p>{{audit.header.graduationDate}}</p>
-        <p>{{audit.header.graduationDateLabel}}</p> -->
+        <p>0123456789</p>
+        <p>{{audit.header.darsCatalogYearTermLabel}}: {{audit.header.darsCatalogYearTerm}}</p>
+        <p *ngIf="audit.header.darsAlternateCatalogYearTerm1">
+          {{audit.header.darsAlternateCatalogYearTerm1Label}}: {{audit.header.darsAlternateCatalogYearTerm1}}
+        </p>
       </div>
     </div>
 
@@ -28,11 +30,90 @@
     </div>
   </header>
 
-  <section class="audit-section">
-    <p class="tight faded">This audit was run using values not reflected in your current status. Parameters used when submitting this audit request:</p>
-    <br/>
-    <p class="tight faded">Honors Processing: Keep current status.</p>
-    <p class="tight faded">Courses Used: Using courses from Curse Guide Plan: (Plan name field blank in cobol program "stuinst.)</p>
+  <section class="audit-section" class="audit-top-section">
+    <div *ngIf="audit.topSection.academicPlansSection && audit.topSection.academicPlansSection.planList.length > 0">
+      <h4>Academic Plans:</h4>
+      <ng-contrainer *ngFor="let plan of audit.topSection.academicPlansSection.planList">
+        <p class="audit-academic-plan">{{plan.planTypeLabel}}: {{plan.declareDate}} {{plan.planCodeNumber}} {{plan.planCodeDescription}}</p>
+      </ng-contrainer>
+    </div>
+    
+    <div *ngIf="audit.topSection.advisorSection && audit.topSection.advisorSection.advisorNames">
+      <h4>{{audit.topSection.advisorSection.advisorLabel}}:</h4>
+
+      <ng-container *ngFor="let name of audit.topSection.advisorSection.advisorNames">
+        <p class="audit-advisor-name">{{name}}</p>
+      </ng-container>
+    </div>
+
+    <div *ngIf="audit.topSection.degreesSection && audit.topSection.degreesSection.degrees.length > 0">
+      <h4>{{audit.topSection.degreesSection.label}}:</h4>
+      <div *ngFor="let degree of audit.topSection.degreesSection.degrees" class="audit-degree">
+        <p class="audit-degree-awarded">Awarded: {{degree.awardedDate}}</p>
+        <p class="audit-degree-major">Major: {{degree.major}} {{degree.degreeCode}}</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="audit-section audit-credit-tables">
+    <!-- TODO Figure out how to get this to look like a matTable -->
+      <table mat-table [dataSource]="formatHighSchoolUnitData(audit.topSection.highSchoolUnitsSection.units)">
+        <caption>HS Units</caption>
+
+        <tr mat-header-row *matHeaderRowDef="highSchoolUnitsSection"></tr>
+        <tr mat-row *matRowDef="let row; columns: highSchoolUnitsSection;"></tr>
+
+        <ng-container matColumnDef="LANG">
+          <th mat-header-cell *matHeaderCellDef>Lang</th>
+          <td mat-cell *matCellDef="let courses">{{courses.LANG}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="MATH">
+          <th mat-header-cell *matHeaderCellDef>Math</th>
+          <td mat-cell *matCellDef="let courses">{{courses.MATH}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="SCIENCE">
+          <th mat-header-cell *matHeaderCellDef>Science</th>
+          <td mat-cell *matCellDef="let courses">{{courses.SCIENCE}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="SOC STUD">
+          <th mat-header-cell *matHeaderCellDef>Soc Stud</th>
+          <td mat-cell *matCellDef="let courses">{{courses['SOC STUD']}}</td>
+        </ng-container>
+      </table>
+
+      <table mat-table [dataSource]="audit.topSection.advancedStandingCreditsSection.advanceStandingCredits">
+        <caption>{{audit.topSection.advancedStandingCreditsSection.sectionLabel}}</caption>
+        <tr mat-header-row *matHeaderRowDef="advancedStandingCredits"></tr>
+        <tr mat-row *matRowDef="let row; columns: advancedStandingCredits;"></tr>
+        <tr mat-footer-row *matFooterRowDef="advancedStandingCredits"></tr>
+
+        <ng-container matColumnDef="dateValue">
+          <th mat-header-cell *matHeaderCellDef>Date</th>
+          <td mat-cell *matCellDef="let course">{{course.dateValue}}</td>
+          <td mat-footer-cell *matFooterCellDef class="bold">Total</td>
+        </ng-container>
+
+        <ng-container matColumnDef="typeValue">
+          <th mat-header-cell *matHeaderCellDef>Type</th>
+          <td mat-cell *matCellDef="let course">{{course.typeValue}}</td>
+          <td mat-footer-cell *matFooterCellDef></td>
+        </ng-container>
+
+        <ng-container matColumnDef="degreeCreditsValue">
+          <th mat-header-cell *matHeaderCellDef class="text-align-right">Deg</th>
+          <td mat-cell *matCellDef="let course" class="text-align-right">{{course.degreeCreditsValue}}</td>
+          <td mat-footer-cell *matFooterCellDef class="bold text-align-right">{{audit.topSection.advancedStandingCreditsSection.totals.degreeCreditsValue}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="courseCreditsValue">
+          <th mat-header-cell *matHeaderCellDef class="text-align-right">Crse</th>
+          <td mat-cell *matCellDef="let course" class="text-align-right">{{course.courseCreditsValue}}</td>
+          <td mat-footer-cell *matFooterCellDef class="bold text-align-right">{{audit.topSection.advancedStandingCreditsSection.totals.courseCreditsValue}}</td>
+        </ng-container>
+      </table>
   </section>
   
   <section class="audit-section">

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

@@ -30,7 +30,7 @@ $blue: #0479a8;
 
 #audit-header,
 .audit-section {
-  border-bottom: solid 1px #616161;
+  border-bottom: solid 1px #7d7a7a;
   padding: 20px 75px;
 
   &:last-child {
@@ -226,7 +226,6 @@ $blue: #0479a8;
 .content-type-noSubrequirementNeedsSummaryLine,
 .content-type-noRequirementNeedsLine {
   color: $red;
-  margin-left: 20px;
   align-items: center;
 }
 
@@ -255,13 +254,40 @@ $blue: #0479a8;
   color: $red;
 }
 
+.audit-top-section {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 75px;
+
+  h4 {
+    margin-bottom: 10px;
+  }
+
+  p {
+    margin: 3px auto;
+  }
+
+  & > div {
+    flex: 0 0 48%;
+    width: 48%;
+  }
+}
+
+.audit-credit-tables {
+  display: flex;
+  justify-content: space-between;
+
+  > table {
+    width: 48%;
+  }
+}
+
 /*
 
   Course requirments styles
 
 */
-.content-type-okSubrequirementCourses,
-.content-type-noSubrequirementCourses {
+#audit {
   .mat-table {
     border: solid 1px #e3e3e3;
     border-top-width: 0px;
@@ -285,4 +311,16 @@ $blue: #0479a8;
       padding-bottom: 10px;
     }
   }
+
+  .mat-cell,
+  .mat-header-cell,
+  .mat-footer-cell {
+    &.bold {
+      font-weight: bold;
+    }
+
+    &.text-align-right {
+      text-align: right;
+    }
+  }
 }

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

@@ -10,10 +10,9 @@ import {
   Requirement,
   ContentType,
   SubRequirementCourses,
-  RequirementContents,
-  SubRequirementCourse,
 } from '../models/audit/requirement';
 import { MatAccordion } from '@angular/material';
+import { AuditUnits } from '../models/audit/top-section';
 
 @Component({
   selector: 'cse-dars-audit',
@@ -32,6 +31,16 @@ export class DarsAuditComponent implements OnInit {
     'title',
     'note',
   ];
+
+  public highSchoolUnitsSection = ['LANG', 'MATH', 'SCIENCE', 'SOC STUD'];
+
+  public advancedStandingCredits = [
+    'dateValue',
+    'typeValue',
+    'degreeCreditsValue',
+    'courseCreditsValue',
+  ];
+
   @Input() audit: Audit;
 
   @ViewChild(MatAccordion) requirements: MatAccordion;
@@ -91,4 +100,30 @@ export class DarsAuditComponent implements OnInit {
   public asLineBody(reqBody: any) {
     return reqBody as (ContentType & { template: 'lines' });
   }
+
+  public formatHighSchoolUnitData(units: AuditUnits[]) {
+    const formatted: object[] = [];
+    // Get the max number of rows
+    const maxRows = units.reduce((acc, unit) => {
+      if (unit.subjectUnits && unit.subjectUnits.length > acc) {
+        return unit.subjectUnits.length;
+      }
+      return acc;
+    }, 0);
+
+    for (let i = 0; i < maxRows; i++) {
+      formatted[i] = {};
+      units.forEach(unit => {
+        if (!unit.subjectUnits) {
+          formatted[i][unit.unitLabel] = '';
+          return;
+        }
+        formatted[i][unit.unitLabel] = unit.subjectUnits[i]
+          ? `${unit.subjectUnits[i].subject} ${unit.subjectUnits[i].unitsTaken}`
+          : '';
+        return;
+      });
+    }
+    return formatted;
+  }
 }

src/app/dars/models/audit/top-section.ts

@@ -19,15 +19,11 @@ export interface AuditTopSection {
   };
   highSchoolUnitsSection: {
     highSchoolUnitsLabel: string;
-    units: [];
+    units: AuditUnits[];
   };
   advancedStandingCreditsSection: {
-    advancedStandingLabels: {
-      dateLabel: string;
-      typeLabel: string;
-      degreeCreditsLabel: string;
-      courseCreditsLabel: string;
-    };
+    sectionLabel: string;
+    advancedStandingLabels: AdvancedStandingLabels;
     advanceStandingCredits: AuditAdvanceStandingCredits[];
     totals: {
       totalsLabel: string;
@@ -62,6 +58,13 @@ export interface AuditSubjectUnit {
   unitsTaken: string;
 }
 
+export interface AdvancedStandingLabels {
+  dateLabel: string;
+  typeLabel: string;
+  degreeCreditsLabel: string;
+  courseCreditsLabel: string;
+}
+
 export interface AuditAdvanceStandingCredits {
   dateValue: string;
   typeValue: string;