Skip to content
Snippets Groups Projects
Commit c266cbd7 authored by Isaac Evavold's avatar Isaac Evavold
Browse files

simplify audit metadata tables

parent 037b1936
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/dars/dars-view/dars-view.component.html
+ 37
− 4
View file @ c266cbd7
......@@ -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">&lsquo;What if&rsquo; 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 &lsquo;what if&rsquo; 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>
src/app/dars/dars-view/dars-view.component.scss
+ 2
− 1
View file @ c266cbd7
......@@ -49,7 +49,8 @@
}
}
#dars-header-bar {
.dars-header-bar {
margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: baseline;
......
src/app/dars/dars-view/dars-view.component.ts
+ 4
− 0
View file @ c266cbd7
......@@ -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);
......
src/app/dars/metadata-table/metadata-table.component.html
+ 2
− 70
View file @ c266cbd7
<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>
src/app/dars/metadata-table/metadata-table.component.ts
+ 5
− 21
View file @ c266cbd7
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));
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment