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

move audit report rendering into own component

parent 275db833
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 165 additions and 155 deletions
src/app/dars/audit/audit.component.html 0 → 100644
+ 67
− 0
View file @ 41b8da01
<mat-card id="audit" *ngIf="auditId">
<header class="no-horizontal-padding">
<div class="audit-metadata">
<div>
<p>{{audit.header.preparedDate}}</p>
<p>{{audit.header.name}}</p>
<p>Program Code: {{audit.header.degreeProgram}}</p>
</div>
<div class="text-align-right">
<p>{{auditId}}</p>
<p>{{audit.header.graduationDate}}</p>
<p>{{audit.header.graduationDateLabel}}</p>
</div>
</div>
<h3 class="text-align-center">
{{audit.header.clientDefinedMessage}}
<br />
{{audit.header.title1}}
<br />
{{audit.header.title2}}
</h3>
<div class="audit-section-controles">
<button mat-stroked-button color="primary">Open All Sections</button>
<button mat-stroked-button color="primary">Close All Sections</button>
</div>
</header>
<section>
<p class="tight faded">This audit was run using values not reflected in your current status. Parameters used when submitting this audit request:</p>
<br/>
<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 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>
<!-- 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> -->
</mat-card>
src/app/dars/audit/audit.component.scss 0 → 100644
+ 81
− 0
View file @ 41b8da01
#audit {
padding: 20px 100px;
header {
h3 {
font-weight: 500;
font-size: 1.2rem;
}
}
}
.audit-metadata {
display: flex;
justify-content: space-between;
line-height: 0.5rem;
}
.audit-section-controles {
text-align: center;
button {
margin: 20px 40px;
padding: 0 30px;
}
}
header,
section {
border-bottom: solid 1px #616161;
padding: 20px 75px;
&:last-child {
border-bottom: none;
}
&.no-padding {
padding: 0;
}
&.no-horizontal-padding {
padding-left: 0;
padding-right: 0;
}
&.no-vertical-padding {
padding-top: 0;
background-position: 0;
}
}
.indent {
margin-left: 20px;
}
.tight {
margin: 2px auto;
}
.faded {
color: #616161;
}
.text-align-center {
text-align: center;
}
.text-align-right {
text-align: right;
}
.text-align-left {
text-align-last: left;
}
.uppercase {
text-transform: uppercase;
}
.pre-wrap {
white-space: pre-wrap;
}
src/app/dars/audit/audit.component.ts 0 → 100644
+ 10
− 0
View file @ 41b8da01
import { Component, Input } from '@angular/core';
@Component({
selector: 'cse-dars-audit',
templateUrl: './audit.component.html',
styleUrls: ['./audit.component.scss'],
})
export class DarsAuditComponent {
@Input() auditId: number;
}
src/app/dars/dars-view/dars-view.component.html
+ 3
− 71
View file @ 41b8da01
......@@ -5,84 +5,16 @@
<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" *ngIf="auditId">
<header class="no-horizontal-padding">
<div class="audit-metadata">
<div>
<p>{{audit.header.preparedDate}}</p>
<p>{{audit.header.name}}</p>
<p>Program Code: {{audit.header.degreeProgram}}</p>
</div>
<div class="text-align-right">
<p>{{auditId}}</p>
<p>{{audit.header.graduationDate}}</p>
<p>{{audit.header.graduationDateLabel}}</p>
</div>
</div>
<h3 class="text-align-center">
{{audit.header.clientDefinedMessage}}
<br />
{{audit.header.title1}}
<br />
{{audit.header.title2}}
</h3>
<div class="audit-section-controles">
<button mat-stroked-button color="primary">Open All Sections</button>
<button mat-stroked-button color="primary">Close All Sections</button>
</div>
</header>
<section>
<p class="tight faded">This audit was run using values not reflected in your current status. Parameters used when submitting this audit request:</p>
<br/>
<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 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>
<!-- 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> -->
</mat-card>
<cse-dars-audit [auditId]="auditId"></cse-dars-audit>
</div>
</mat-sidenav>
<!-- Main DARS Content -->
<div id="dars-main">
<h2 class="mat-h1">Completed Audit Requests</h2>
......@@ -160,4 +92,4 @@
<div id="what-if-audits"></div>
</div>
</mat-sidenav-container>
\ No newline at end of file
</mat-sidenav-container>
src/app/dars/dars-view/dars-view.component.scss
+ 1
− 82
View file @ 41b8da01
.indent {
margin-left: 20px;
}
.tight {
margin: 2px auto;
}
.faded {
color: #616161;
}
.text-align-center {
text-align: center;
}
.text-align-right {
text-align: right;
}
.text-align-left {
text-align-last: left;
}
.uppercase {
text-transform: uppercase;
}
.pre-wrap {
white-space: pre-wrap;
}
#dars-container {
width: 100%;
height: 100%;
......@@ -39,6 +7,7 @@
#dars-report-container {
width: 100%;
}
.audit-wrapper,
#dars-main {
max-width: 1200px;
......@@ -49,60 +18,10 @@
margin: 50px auto;
}
#audit {
padding: 20px 100px;
header {
h3 {
font-weight: 500;
font-size: 1.2rem;
}
}
}
#audit-close {
margin-bottom: 20px;
}
.audit-metadata {
display: flex;
justify-content: space-between;
line-height: 0.5rem;
}
.audit-section-controles {
text-align: center;
button {
margin: 20px 40px;
padding: 0 30px;
}
}
header,
section {
border-bottom: solid 1px #616161;
padding: 20px 75px;
&:last-child {
border-bottom: none;
}
&.no-padding {
padding: 0;
}
&.no-horizontal-padding {
padding-left: 0;
padding-right: 0;
}
&.no-vertical-padding {
padding-top: 0;
background-position: 0;
}
}
#loading-audit {
text-align: center;
font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
......
src/app/dars/dars-view/dars-view.component.ts
+ 1
− 1
View file @ 41b8da01
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { DarsApiService } from '../services/api.service';
import { Audit } from '../models/audit';
......
src/app/dars/dars.module.ts
+ 2
− 1
View file @ 41b8da01
......@@ -3,11 +3,12 @@ import { DARSViewComponent } from './dars-view/dars-view.component';
import { EffectsModule } from '@ngrx/effects';
import { SharedModule } from '@app/shared/shared.module';
import { DARSEffects } from './store/effects';
import { DarsAuditComponent } from './audit/audit.component';
@NgModule({
imports: [EffectsModule.forRoot([DARSEffects]), SharedModule],
exports: [],
declarations: [DARSViewComponent],
declarations: [DARSViewComponent, DarsAuditComponent],
entryComponents: [],
})
export class DARSModule {}
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