diff --git a/src/app/dars/audit/audit.component.html b/src/app/dars/audit/audit.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..be8a83d73d263fd2416a6eb7646940809f3f126d
--- /dev/null
+++ b/src/app/dars/audit/audit.component.html
@@ -0,0 +1,67 @@
+<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>
diff --git a/src/app/dars/audit/audit.component.scss b/src/app/dars/audit/audit.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7e191bda02d57076f42b7e75702c8d5c1859394e
--- /dev/null
+++ b/src/app/dars/audit/audit.component.scss
@@ -0,0 +1,81 @@
+#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;
+}
diff --git a/src/app/dars/audit/audit.component.ts b/src/app/dars/audit/audit.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f04dd4f49088840143547820b9be638b6495baf4
--- /dev/null
+++ b/src/app/dars/audit/audit.component.ts
@@ -0,0 +1,10 @@
+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;
+}
diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index c5cd70704cc45fef165bd4c57961f2f4748df11c..293e05729553152155feef6abbfd35b39a40ebd4 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -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>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
index 4c76b250141081740e5dcd52234505d2d989bb14..96ccc796bacd2262deedb2b6e3e6fcd9d21f36f7 100644
--- a/src/app/dars/dars-view/dars-view.component.scss
+++ b/src/app/dars/dars-view/dars-view.component.scss
@@ -1,35 +1,3 @@
-.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;
diff --git a/src/app/dars/dars-view/dars-view.component.ts b/src/app/dars/dars-view/dars-view.component.ts
index 5a4a5abb7ecee465186a0a1b6f34991c7aa3673e..468b224628fa246c30664ab6a03e6fdf686e4365 100644
--- a/src/app/dars/dars-view/dars-view.component.ts
+++ b/src/app/dars/dars-view/dars-view.component.ts
@@ -1,4 +1,4 @@
-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';
diff --git a/src/app/dars/dars.module.ts b/src/app/dars/dars.module.ts
index 5b66173130951f49f6ad7d7fcd5f9d47eb13ec67..d3cfa9c6f15333a2da40de2d8f6b4ed47908c0cf 100644
--- a/src/app/dars/dars.module.ts
+++ b/src/app/dars/dars.module.ts
@@ -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 {}