From 275db833783554c9efb7b0bb092f3a349c65d42b Mon Sep 17 00:00:00 2001
From: Scott Berg <saberg3@wisc.edu>
Date: Tue, 4 Jun 2019 10:31:03 -0500
Subject: [PATCH] Add audit model. Pull in basic audit data.
---
.../dars/dars-view/dars-view.component.html | 67 ++++++++++++-------
.../dars/dars-view/dars-view.component.scss | 25 +++++++
src/app/dars/dars-view/dars-view.component.ts | 35 +++++++++-
src/app/dars/models/audit.ts | 30 +++++++++
src/app/dars/services/api.service.ts | 5 +-
5 files changed, 135 insertions(+), 27 deletions(-)
create mode 100644 src/app/dars/models/audit.ts
diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 0973a1a..c5cd707 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -1,33 +1,40 @@
<mat-sidenav-container id="dars-container">
- <mat-sidenav #auditPane id="dars-report-container" mode="over" position="end">
+ <mat-sidenav #auditSideNav id="dars-report-container" mode="over" position="end">
<div class="audit-wrapper">
- <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="auditPane.close()">
+ <button id="audit-close" mat-button aria-label="Return to DARS audit list" color="primary" (click)="auditSideNav.close()">
<mat-icon>chevron_left</mat-icon>
Return to audit list
</button>
+
+ <div id="loading-audit" *ngIf="isLoading">
+ <img src="../../../assets/img/bucky-happy.svg" alt="Happy Bucky Badger">
+ <p>Loading your degree Audit</p>
+
+ <mat-spinner diameter="50"></mat-spinner>
+ </div>
- <mat-card id="audit">
+ <mat-card id="audit" *ngIf="auditId">
<header class="no-horizontal-padding">
<div class="audit-metadata">
<div>
- <p>Prepared: 10/31/18 - 10:24</p>
- <p>Johnson, Jake John</p>
- <p>Program Code: BS 112</p>
+ <p>{{audit.header.preparedDate}}</p>
+ <p>{{audit.header.name}}</p>
+ <p>Program Code: {{audit.header.degreeProgram}}</p>
</div>
<div class="text-align-right">
- <p>9071231234</p>
- <p>Catalog Year: 20171</p>
- <p>Alternate Catalog Year: 20191</p>
+ <p>{{auditId}}</p>
+ <p>{{audit.header.graduationDate}}</p>
+ <p>{{audit.header.graduationDateLabel}}</p>
</div>
</div>
<h3 class="text-align-center">
- Degree Audit Report System (DARS)
+ {{audit.header.clientDefinedMessage}}
<br />
- College of Letters and Science - Bachelor of Science (B.S)
+ {{audit.header.title1}}
<br />
- Biology Major
+ {{audit.header.title2}}
</h3>
<div class="audit-section-controles">
@@ -42,24 +49,36 @@
<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>
-
+
+ <section *ngIf="audit.topText.length > 0">
+ <p *ngFor="let text of audit.topText" class="text-align-center pre-wrap">{{text}}</p>
+ </section>
+
<section>
- <p>CL/YR: ALS 3</p>
- <p>Advisors: Asen, Brian</p>
- <p>HS Units:</p>
- <div>
- <p class="indent tight">LNG: 0.0 SPA 5.0</p>
- <p class="indent tight">MATH: ALG 1.0 GEO 1.0 ADV 3.0</p>
- <p class="indent tight">SCIENCE:</p>
- <p class="indent tight">SOC STUD:</p>
+ <p class="text-align-center">{{audit.completeText}}</p>
+ </section>
+
+ <section *ngFor="let requirement of audit.requirements">
+ <h4>{{requirement.requirementName}}</h4>
+ <p>{{requirement.status.status}} - {{requirement.status.status}}</p>
+
+ <div *ngFor="let contentType of requirement.requirementLinesGroupedByContentType">
+ <h5>{{contentType.contentType}}</h5>
+
+ <p *ngFor="let line of contentType.lines">{{line}}</p>
</div>
</section>
+
+ <section *ngIf="audit.bottomText.length > 0">
+ <p *ngFor="let text of audit.bottomText" class="text-align-center pre-wrap">{{text}}</p>
+ </section>
- <section class="text-align-center">
+ <!-- Not sure where this info comes from? -->
+ <!-- <section class="text-align-center">
<h4 class="mat-h2 uppercase faded">At least one requirment has not been satisfied</h4>
<p class="mat-h2 faded">For more information about undergraduate L&S program see:</p>
<a href="#" mat-button color="primary">L&S Guide</a>
- </section>
+ </section> -->
</mat-card>
</div>
</mat-sidenav>
@@ -85,7 +104,7 @@
<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)="auditPane.open()">View</button>
+ <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="openAudit(3)">View</button>
</td>
</ng-container>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
index c56ee91..4c76b25 100644
--- a/src/app/dars/dars-view/dars-view.component.scss
+++ b/src/app/dars/dars-view/dars-view.component.scss
@@ -26,6 +26,10 @@
text-transform: uppercase;
}
+.pre-wrap {
+ white-space: pre-wrap;
+}
+
#dars-container {
width: 100%;
height: 100%;
@@ -99,6 +103,27 @@ section {
}
}
+#loading-audit {
+ text-align: center;
+ font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+ img {
+ width: 100%;
+ max-width: 150px;
+ margin: auto;
+ }
+
+ p {
+ text-transform: uppercase;
+ font-weight: bold;
+ font-size: 18px;
+ }
+
+ mat-spinner {
+ margin: auto;
+ }
+}
+
#dars-header-bar {
display: flex;
justify-content: space-between;
diff --git a/src/app/dars/dars-view/dars-view.component.ts b/src/app/dars/dars-view/dars-view.component.ts
index 4c4db3f..5a4a5ab 100644
--- a/src/app/dars/dars-view/dars-view.component.ts
+++ b/src/app/dars/dars-view/dars-view.component.ts
@@ -1,6 +1,7 @@
import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { DarsApiService } from '../services/api.service';
+import { Audit } from '../models/audit';
@Component({
selector: 'cse-dars-view',
@@ -49,5 +50,37 @@ export class DARSViewComponent {
},
];
- constructor(private api: DarsApiService) {}
+ @ViewChild('auditSideNav') auditSideNav: MatSidenav;
+
+ public isLoading: boolean;
+ public auditId: number | null;
+ public audit: Audit;
+
+ constructor(private api: DarsApiService) {
+ this.isLoading = false;
+ this.auditId = null;
+ }
+
+ public openAudit(auditId: number) {
+ // if user is loading a new audit
+ if (auditId !== this.auditId) {
+ this.isLoading = true;
+ this.auditId = null;
+
+ this.api
+ .getAudit(auditId)
+ .toPromise()
+ .then(audit => {
+ this.isLoading = false;
+ this.auditId = auditId;
+ this.audit = audit;
+
+ console.log(audit);
+ })
+ .catch(e => {
+ console.log(e);
+ });
+ }
+ this.auditSideNav.open();
+ }
}
diff --git a/src/app/dars/models/audit.ts b/src/app/dars/models/audit.ts
new file mode 100644
index 0000000..5e2de7c
--- /dev/null
+++ b/src/app/dars/models/audit.ts
@@ -0,0 +1,30 @@
+export interface Requirement {
+ requirementName: string;
+ status: { status: string; description: string };
+ requirementLinesGroupedByContentType: {
+ contentType: string; // I think this can be string literals
+ lines: string[];
+ };
+}
+
+export interface Audit {
+ header: {
+ catalogYear: string;
+ catalogYearLabel: string;
+ clientDefinedMessage: string;
+ degreeProgram: string;
+ degreeProgramLabel: string;
+ graduationDate: string;
+ graduationDateLabel: string;
+ name: string;
+ preparedDate: string;
+ studentId: string;
+ title1: string;
+ title2: string;
+ };
+ topText: string[];
+ bottomText: string[];
+ completeText: string;
+ errorText: any[];
+ requirements: Requirement[];
+}
diff --git a/src/app/dars/services/api.service.ts b/src/app/dars/services/api.service.ts
index 26f5825..ec1b9de 100644
--- a/src/app/dars/services/api.service.ts
+++ b/src/app/dars/services/api.service.ts
@@ -5,6 +5,7 @@ import { DegreeProgram } from '../models/degree-program';
import { AuditMetadata } from '../models/audit-metadata';
import { StudentDegreeProgram } from '../models/student-degree-program';
import { environment } from './../../../environments/environment';
+import { Audit } from '../models/audit';
const auditResponse: any = require('../../../assets/mock-data/audit-response.json');
@@ -48,10 +49,10 @@ export class DarsApiService {
/**
* Get a single audit.
*/
- public getAudit(reportId: number): Observable<any> {
+ public getAudit(reportId: number): Observable<Audit> {
// const url = `${environment.apiDarsUrl}/reports/${reportId}`;
// return this.http.get<any>(url, HTTP_OPTIONS);
- return of({ auditResponse });
+ return of(auditResponse);
}
/**
--
GitLab