ROENROLL-1797 filter metadata into two lists

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

 <mat-sidenav-container id="dars-container">
-    <mat-sidenav id="dars-report-container" mode="over" position="end" [opened]="(visibleAuditStatus$ | async) != 'NotLoaded'">
-        <div class="audit-wrapper">
-            <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="closeAudit()">
-                <mat-icon>chevron_left</mat-icon>
-                Return to audit list
-            </button>
+  <mat-sidenav id="dars-report-container" mode="over" position="end" [opened]="(visibleAuditStatus$ | async) != 'NotLoaded'">
+    <div class="audit-wrapper">
+      <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="closeAudit()">
+        <mat-icon>chevron_left</mat-icon>
+        Return to audit list
+      </button>
 
-            <ng-container [ngSwitch]="visibleAuditStatus$ | async">
-                <ng-container *ngSwitchCase="'Loaded'">
-                    <cse-dars-audit [audit]="audit$ | async"></cse-dars-audit>
-                </ng-container>
-                <ng-container *ngSwitchCase="'Loading'">
-                    <img id="loading-bucky" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
-                    <p>Loading your degree Audit</p>
-                    <mat-spinner diameter="50"></mat-spinner>
-                </ng-container>
-            </ng-container>
-        </div>
-    </mat-sidenav>
-
-    <!-- Main DARS Content -->
-    <div id="dars-main">
-        <cse-alert-container></cse-alert-container>
-        <h2 class="mat-h1">Completed Audit Requests</h2>
+      <ng-container [ngSwitch]="visibleAuditStatus$ | async">
+        <ng-container *ngSwitchCase="'Loaded'">
+          <cse-dars-audit [audit]="audit$ | async"></cse-dars-audit>
+        </ng-container>
+        <ng-container *ngSwitchCase="'Loading'">
+          <img id="loading-bucky" src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
+          <p>Loading your degree Audit</p>
+          <mat-spinner diameter="50"></mat-spinner>
+        </ng-container>
+      </ng-container>
+    </div>
+  </mat-sidenav>
 
-        <div id="dars-header-bar">
-            <div>
-                <h3 class="mat-h2">Degree Audit</h3>
-                <p class="mat-body">See the progress towards your current program of study and degree plans.</p>
-            </div>
-            <div>
-                <button mat-raised-button aria-label="Run new degree audit" color="primary" (click)="openNewAuditOptionsDialog()">Run new degree audit</button>
-            </div>
-        </div>
+  <!-- Main DARS Content -->
+  <div id="dars-main">
+    <cse-alert-container></cse-alert-container>
+    <h2 class="mat-h1">Completed Audit Requests</h2>
 
-        <ng-container [ngSwitch]="metadataStatus$ | async">
-            <ng-container *ngSwitchCase="'Error'">
-                <h2 style="color:red">error loading metadata</h2>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Loading'">
-                <h2>loading metadata</h2>
-            </ng-container>
-            <ng-container *ngSwitchCase="'Loaded'">
-                <cse-dars-metadata-table></cse-dars-metadata-table>
-            </ng-container>
-        </ng-container>
+    <div id="dars-header-bar">
+      <div>
+        <h3 class="mat-h2">Degree Audit</h3>
+        <p class="mat-body">See the progress towards your current program of study and degree plans.</p>
+      </div>
+      <div>
+        <button mat-raised-button aria-label="Run new degree audit" color="primary" (click)="openNewAuditOptionsDialog()">Run new degree audit</button>
+      </div>
     </div>
+
+    <ng-container [ngSwitch]="metadataStatus$ | async">
+      <ng-container *ngSwitchCase="'Error'">
+        <h2 style="color:red">error loading metadata</h2>
+      </ng-container>
+      <ng-container *ngSwitchCase="'Loading'">
+        <h2>loading metadata</h2>
+      </ng-container>
+      <ng-container *ngSwitchCase="'Loaded'">
+        <cse-dars-metadata-table></cse-dars-metadata-table>
+      </ng-container>
+    </ng-container>
+  </div>
 </mat-sidenav-container>

src/app/dars/metadata-table/metadata-table.component.html

 <div id="audits">
-  <table class="audit-table" mat-table [dataSource]="metadata$">
+  <table class="audit-table" mat-table [dataSource]="programMetadata$">
 
     <!-- View Column -->
     <ng-container matColumnDef="view">
@@ -62,4 +62,66 @@
   </div>
 </div>
 
-<div id="what-if-audits"></div>
+<div id="what-if-audits">
+  <table class="audit-table" mat-table [dataSource]="whatIfMetadata$">
+
+    <!-- View Column -->
+    <ng-container matColumnDef="view">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let audit">
+        <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="openAudit(audit)">View</button>
+      </td>
+    </ng-container>
+
+    <!-- School Column -->
+    <ng-container matColumnDef="school">
+      <th mat-header-cell *matHeaderCellDef>Plan/Program</th>
+      <td mat-cell *matCellDef="let audit"><em>???</em></td>
+    </ng-container>
+
+    <!-- Program Column -->
+    <ng-container matColumnDef="program">
+      <th mat-header-cell *matHeaderCellDef>Program of Study</th>
+      <td mat-cell *matCellDef="let audit">{{audit.darsDegreeProgramCode}}</td>
+    </ng-container>
+
+    <!-- Honors Column -->
+    <ng-container matColumnDef="honors">
+      <th mat-header-cell *matHeaderCellDef>Honors Status</th>
+      <td mat-cell *matCellDef="let audit">{{audit.darsHonorsOptionDescription}}</td>
+    </ng-container>
+
+    <!-- Plan Column -->
+    <ng-container matColumnDef="plan">
+      <th mat-header-cell *matHeaderCellDef>Degree Plan</th>
+      <td mat-cell *matCellDef="let audit">{{audit.degreePlannerPlanName}}</td>
+    </ng-container>
+
+    <!-- Status Column -->
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef>Status</th>
+      <td mat-cell *matCellDef="let audit">
+        <div>{{audit.darsStatusOfDegreeAuditRequest}}</div>
+        <div>Run {{audit.darsAuditRunDate | date:'short'}}</div>
+      </td>
+    </ng-container>
+
+    <!-- Status Column -->
+    <ng-container matColumnDef="download">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let audit">
+        <button mat-raised-button>
+          <mat-icon>vertical_align_bottom</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <!-- Row definition -->
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+  <div style="text-align: center">
+    <button mat-stroked-button color="primary" style="margin: 20px auto; padding: 0 30px">Load More</button>
+  </div>
+</div>

src/app/dars/metadata-table/metadata-table.component.ts

@@ -13,6 +13,8 @@ import { StartLoadingAudit } from '../store/actions';
 })
 export class DarsMetadataTableComponent implements OnInit {
   public metadata$: Observable<AuditMetadata[]>;
+  public programMetadata$: Observable<AuditMetadata[]>;
+  public whatIfMetadata$: Observable<AuditMetadata[]>;
   public displayedColumns = [
     'view',
     'school',
@@ -26,7 +28,8 @@ export class DarsMetadataTableComponent implements OnInit {
   constructor(private store: Store<GlobalState>) {}
 
   public ngOnInit() {
-    this.metadata$ = this.store.select(selectors.allAuditMetadata);
+    this.programMetadata$ = this.store.select(selectors.programMetadata);
+    this.whatIfMetadata$ = this.store.select(selectors.whatIfMetadata);
   }
 
   public openAudit(metadata: AuditMetadata) {

src/app/dars/services/api.service.ts

@@ -34,9 +34,7 @@ export class DarsApiService {
   /**
    * Get a students degree programs.
    */
-  public getStudentDegreePrograms(
-    _emplid: number,
-  ): Observable<StudentDegreeProgram[]> {
+  public getStudentDegreePrograms(): Observable<StudentDegreeProgram[]> {
     const url = `${environment.apiDarsUrl}/studentplans`;
     return this.http.get<StudentDegreeProgram[]>(url, HTTP_OPTIONS);
   }

src/app/dars/store/actions.ts

@@ -35,7 +35,12 @@ export class ErrorLoadingAudit implements Action {
 
 export class AddAuditMetadata implements Action {
   public readonly type = DarsActionTypes.AddAuditMetadata;
-  constructor(public payload: { metadata: AuditMetadata[] }) {}
+  constructor(
+    public payload: {
+      programMetadata: AuditMetadata[];
+      whatIfMetadata: AuditMetadata[];
+    },
+  ) {}
 }
 
 export class StartLoadingAudit implements Action {

src/app/dars/store/effects.ts

@@ -6,10 +6,20 @@ import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { DarsActionTypes } from '@app/dars/store/actions';
 import * as darsActions from '@app/dars/store/actions';
-import { flatMap, map } from 'rxjs/operators';
+import { flatMap, map, catchError } from 'rxjs/operators';
 import { DarsApiService } from '../services/api.service';
 import { Alert, DarsDisclaimerAlert } from '@app/core/models/alert';
 import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
+import { AuditMetadata } from '../models/audit-metadata';
+import { StudentDegreeProgram } from '../models/student-degree-program';
+import { of } from 'rxjs';
+
+const isFromDegreePlan = (md: AuditMetadata, pg: StudentDegreeProgram) => {
+  return (
+    md.darsDegreeProgramCode === pg.darsDegreeProgramCode &&
+    md.darsInstitutionCode === pg.darsInstitutionCode
+  );
+};
 
 @Injectable()
 export class DARSEffects {
@@ -26,12 +36,13 @@ export class DARSEffects {
 
     flatMap(() => {
       return forkJoinWithKeys({
+        degreePrograms: this.api.getStudentDegreePrograms(),
         metadata: this.api.getAudits(),
         userPreferences: this.degreeAPI.getUserPreferences(),
       });
     }),
 
-    map(({ metadata, userPreferences }) => {
+    map(({ degreePrograms, metadata, userPreferences }) => {
       const alerts: Alert[] = [];
       if (userPreferences.darsHasDismissedDisclaimer !== true) {
         alerts.push(
@@ -45,7 +56,29 @@ export class DARSEffects {
         );
       }
 
-      return new darsActions.AddAuditMetadata({ metadata });
+      const programMetadata: AuditMetadata[] = [];
+      const whatIfMetadata: AuditMetadata[] = [];
+
+      metadata.forEach(md => {
+        if (degreePrograms.some(dp => isFromDegreePlan(md, dp))) {
+          programMetadata.push(md);
+        } else {
+          whatIfMetadata.push(md);
+        }
+      });
+
+      return new darsActions.AddAuditMetadata({
+        programMetadata,
+        whatIfMetadata,
+      });
+    }),
+
+    catchError(() => {
+      return of(
+        new darsActions.ErrorLoadingMetadata({
+          message: 'Error loading metadata. Please try again',
+        }),
+      );
     }),
   );
 

src/app/dars/store/reducer.ts

@@ -24,23 +24,24 @@ export function darsReducer(
       };
     }
     case DarsActionTypes.AddAuditMetadata: {
-      if (state.metadata.status === 'Loaded') {
-        return {
-          ...state,
-          metadata: {
-            status: 'Loaded',
-            metadata: state.metadata.metadata.concat(action.payload.metadata),
-          },
-        };
-      } else {
-        return {
-          ...state,
-          metadata: {
-            status: 'Loaded',
-            metadata: action.payload.metadata,
-          },
-        };
-      }
+      const programMetadata = (state.metadata.status === 'Loaded'
+        ? state.metadata.programMetadata
+        : []
+      ).concat(action.payload.programMetadata);
+
+      const whatIfMetadata = (state.metadata.status === 'Loaded'
+        ? state.metadata.whatIfMetadata
+        : []
+      ).concat(action.payload.whatIfMetadata);
+
+      return {
+        ...state,
+        metadata: {
+          status: 'Loaded',
+          programMetadata: programMetadata,
+          whatIfMetadata,
+        },
+      };
     }
     case DarsActionTypes.StartLoadingAudit: {
       return {

src/app/dars/store/selectors.ts

@@ -11,11 +11,22 @@ export const metadataStatus = createSelector(
   (state: DARSState) => state.metadata.status,
 );
 
-export const allAuditMetadata = createSelector(
+export const programMetadata = createSelector(
   getDARSState,
   (state: DARSState) => {
     if (state.metadata.status === 'Loaded') {
-      return state.metadata.metadata;
+      return state.metadata.programMetadata;
+    } else {
+      return [];
+    }
+  },
+);
+
+export const whatIfMetadata = createSelector(
+  getDARSState,
+  (state: DARSState) => {
+    if (state.metadata.status === 'Loaded') {
+      return state.metadata.whatIfMetadata;
     } else {
       return [];
     }

src/app/dars/store/state.ts

@@ -6,7 +6,11 @@ export interface DARSState {
   metadata:
     | { status: 'Error'; message: string }
     | { status: 'Loading' }
-    | { status: 'Loaded'; metadata: AuditMetadata[] };
+    | {
+        status: 'Loaded';
+        programMetadata: AuditMetadata[];
+        whatIfMetadata: AuditMetadata[];
+      };
   visibleAudit:
     | { status: 'Error'; message: string }
     | { status: 'NotLoaded' }