From c266cbd789e7ab42a35d42aaee5183453e5037e4 Mon Sep 17 00:00:00 2001
From: ievavold <ievavold@wisc.edu>
Date: Tue, 11 Jun 2019 09:49:10 -0500
Subject: [PATCH] simplify audit metadata tables
---
.../dars/dars-view/dars-view.component.html | 41 +++++++++--
.../dars/dars-view/dars-view.component.scss | 3 +-
src/app/dars/dars-view/dars-view.component.ts | 4 ++
.../metadata-table.component.html | 72 +------------------
.../metadata-table.component.ts | 26 ++-----
5 files changed, 50 insertions(+), 96 deletions(-)
diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 735a5fd..2aebc33 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -27,7 +27,7 @@
</cse-alert-container>
<h2 class="mat-h1">Completed Audit Requests</h2>
- <div id="dars-header-bar">
+ <div class="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>
@@ -37,7 +37,7 @@
</div>
</div>
- <ng-container [ngSwitch]="metadataStatus$ | async">
+ <div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
<ng-container *ngSwitchCase="'Error'">
<h2 style="color:red">error loading metadata</h2>
</ng-container>
@@ -45,8 +45,41 @@
<h2>loading metadata</h2>
</ng-container>
<ng-container *ngSwitchCase="'Loaded'">
- <cse-dars-metadata-table></cse-dars-metadata-table>
+ <cse-dars-metadata-table
+ [metadata]="programMetadata$ | async"
+ (openAudit)="openAudit($event)">
+ </cse-dars-metadata-table>
</ng-container>
- </ng-container>
+ </div>
+
+ <div class="dars-header-bar">
+ <div>
+ <h3 class="mat-h2">‘What if’ Audit</h3>
+ <p class="mat-body">See the progress towards a new program of study and degree plans.</p>
+ </div>
+ <div>
+ <button
+ mat-raised-button
+ aria-label="Run new degree audit"
+ color="primary">
+ Run new ‘what if’ audit
+ </button>
+ </div>
+ </div>
+
+ <div class="dars-audit-group" [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
+ [metadata]="whatIfMetadata$ | async"
+ (openAudit)="openAudit($event)">
+ </cse-dars-metadata-table>
+ </ng-container>
+ </div>
</div>
</mat-sidenav-container>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
index ea8be92..34e3b6c 100644
--- a/src/app/dars/dars-view/dars-view.component.scss
+++ b/src/app/dars/dars-view/dars-view.component.scss
@@ -49,7 +49,8 @@
}
}
-#dars-header-bar {
+.dars-header-bar {
+ margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: baseline;
diff --git a/src/app/dars/dars-view/dars-view.component.ts b/src/app/dars/dars-view/dars-view.component.ts
index 74b1103..d5e79c9 100644
--- a/src/app/dars/dars-view/dars-view.component.ts
+++ b/src/app/dars/dars-view/dars-view.component.ts
@@ -19,6 +19,8 @@ import { Alert } from '@app/core/models/alert';
})
export class DARSViewComponent implements OnInit {
public metadataStatus$: Observable<DARSState['metadata']['status']>;
+ public programMetadata$: Observable<AuditMetadata[]>;
+ public whatIfMetadata$: Observable<AuditMetadata[]>;
public visibleAuditStatus$: Observable<DARSState['visibleAudit']['status']>;
public audit$: Observable<Audit | null>;
public alerts$: Observable<Alert[]>;
@@ -32,6 +34,8 @@ export class DARSViewComponent implements OnInit {
public ngOnInit() {
this.store.dispatch(new darsActions.StartLoadingMetadata());
this.metadataStatus$ = this.store.select(selectors.metadataStatus);
+ this.programMetadata$ = this.store.select(selectors.programMetadata);
+ this.whatIfMetadata$ = this.store.select(selectors.whatIfMetadata);
this.visibleAuditStatus$ = this.store.select(selectors.visibleAuditStatus);
// this.audit$ = this.store.select(selectors.visibleAudit);
this.audit$ = this.api.getAudit(3);
diff --git a/src/app/dars/metadata-table/metadata-table.component.html b/src/app/dars/metadata-table/metadata-table.component.html
index 0863cb3..b92d77a 100644
--- a/src/app/dars/metadata-table/metadata-table.component.html
+++ b/src/app/dars/metadata-table/metadata-table.component.html
@@ -1,11 +1,11 @@
<div id="audits">
- <table class="audit-table" mat-table [dataSource]="programMetadata$">
+ <table class="audit-table" mat-table [dataSource]="metadata">
<!-- 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>
+ <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="openAudit.emit(audit)">View</button>
</td>
</ng-container>
@@ -56,72 +56,4 @@
<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>
-
-<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>
diff --git a/src/app/dars/metadata-table/metadata-table.component.ts b/src/app/dars/metadata-table/metadata-table.component.ts
index a4136df..3436b5e 100644
--- a/src/app/dars/metadata-table/metadata-table.component.ts
+++ b/src/app/dars/metadata-table/metadata-table.component.ts
@@ -1,20 +1,15 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
import { AuditMetadata } from '../models/audit-metadata';
-import { Store } from '@ngrx/store';
-import { GlobalState } from '@app/core/state';
-import * as selectors from '../store/selectors';
-import { StartLoadingAudit } from '../store/actions';
@Component({
selector: 'cse-dars-metadata-table',
templateUrl: './metadata-table.component.html',
styleUrls: ['./metadata-table.component.scss'],
})
-export class DarsMetadataTableComponent implements OnInit {
- public metadata$: Observable<AuditMetadata[]>;
- public programMetadata$: Observable<AuditMetadata[]>;
- public whatIfMetadata$: Observable<AuditMetadata[]>;
+export class DarsMetadataTableComponent {
+ @Input() public metadata: AuditMetadata[];
+ @Output() public openAudit = new EventEmitter<AuditMetadata>();
+
public displayedColumns = [
'view',
'school',
@@ -24,15 +19,4 @@ export class DarsMetadataTableComponent implements OnInit {
'status',
'download',
];
-
- constructor(private store: Store<GlobalState>) {}
-
- public ngOnInit() {
- this.programMetadata$ = this.store.select(selectors.programMetadata);
- this.whatIfMetadata$ = this.store.select(selectors.whatIfMetadata);
- }
-
- public openAudit(metadata: AuditMetadata) {
- this.store.dispatch(new StartLoadingAudit(metadata));
- }
}
--
GitLab