update table dataSource when new metadata loaded

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

@@ -56,7 +56,7 @@
     
         <div class="dars-audit-group" >
           <cse-dars-metadata-table
-            [metadata]="programMetadata$ | async"
+            [metadata]="programMetadata$"
             [title]="'Degree Audit'"
             [tagline]="'See the progress towards your current program of study and degree plans.'"
             [button]="'Run new degree audit'"
@@ -67,7 +67,7 @@
     
         <div class="dars-audit-group">
           <cse-dars-metadata-table
-            [metadata]="whatIfMetadata$ | async"
+            [metadata]="whatIfMetadata$"
             [title]="'&lsquo;What if&rsquo; Audit'"
             [tagline]="'See the progress towards a new program of study and degree plans.'"
             [button]="'Run new &lsquo;what if&rsquo; audit'"

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

@@ -7,12 +7,12 @@
       <p>{{tagline}}</p>          
   </caption>
 
-    <div *ngIf="metadata.length <= 0" class="no-audits">
+    <div *ngIf="(metadata | async).length <= 0" class="no-audits">
       <p>You don't have any {{title}}</p>
       <button mat-stroked-button color="primary" aria-label="button" (click)="buttonClick.emit()">{{button}}</button>
     </div>
 
-    <table mat-table *ngIf="metadata.length > 0" [dataSource]="dataSource">
+    <table mat-table *ngIf="(metadata | async).length > 0" [dataSource]="dataSource">
     <!-- View Column -->
     <ng-container matColumnDef="view">
       <th mat-header-cell *matHeaderCellDef></th>

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

-import { Component, Input, Output, EventEmitter, ViewChild, OnInit } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  OnInit,
+} from '@angular/core';
 import { AuditMetadata } from '../models/audit-metadata';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
-
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'cse-dars-metadata-table',
@@ -10,7 +18,7 @@ import { MatTableDataSource } from '@angular/material/table';
   styleUrls: ['./metadata-table.component.scss'],
 })
 export class DarsMetadataTableComponent implements OnInit {
-  @Input() public metadata: AuditMetadata[];
+  @Input() public metadata: Observable<AuditMetadata[]>;
   @Input() public title: string;
   @Input() public tagline: string;
   @Input() public button: string;
@@ -32,12 +40,7 @@ export class DarsMetadataTableComponent implements OnInit {
     'download',
   ];
 
-  public ngOnInit() {
-    this.dataSource = new MatTableDataSource<AuditMetadata>(this.sortMetadata(this.metadata));
-    this.dataSource.paginator = this.paginator;
-  }
-
-  public sortMetadata(metadata: AuditMetadata[]): AuditMetadata[] {
+  public static sortMetadata(metadata: AuditMetadata[]): AuditMetadata[] {
     return metadata.sort((a, b) => {
       const aDate = new Date(a.darsAuditRunDate);
       const bDate = new Date(b.darsAuditRunDate);
@@ -51,4 +54,14 @@ export class DarsMetadataTableComponent implements OnInit {
       return 0;
     });
   }
+
+  public ngOnInit() {
+    this.metadata.pipe(
+      tap(metadata => {
+        const sorted = DarsMetadataTableComponent.sortMetadata(metadata);
+        this.dataSource = new MatTableDataSource<AuditMetadata>(sorted);
+        this.dataSource.paginator = this.paginator;
+      }),
+    );
+  }
 }