Requirement Updates

src/app/dars/audit/audit.component.html

@@ -40,31 +40,36 @@
   </section> -->
   
   <section>
-    <mat-accordion multi="true" #requirements>
+    <mat-accordion multi="true" hideToggle="true" displayMode="flat" #requirements>
 
       <!-- START OF REQUIREMENT -->
       <ng-container *ngFor="let requirement of audit.requirements">
         
         <!-- START OF REQUIREMENT TEXT -->
         <ng-container *ngIf="requirement.status.status === 'NONE'; else requirementTemplate">
-          <pre *ngFor="let contentType of requirement.requirementLinesGroupedByContentType">
-            <p *ngFor="let line of contentType.lines" class="text-align-center">{{line}}</p>
-          </pre>
+          <div *ngFor="let contentType of requirement.requirementLinesGroupedByContentType" class="content-type-{{contentType.contentType}}" matTooltip="{{contentType.contentType}}">
+            <p *ngFor="let line of contentType.lines">{{line}}</p>
+          </div>
         </ng-container>
         <!-- END OF REQUIREMENT TEXT -->
 
         <!-- START OF ACCORDION REQUIREMENT -->
         <ng-template #requirementTemplate>
-          <mat-expansion-panel>
+          <mat-expansion-panel #requirementPanel>
 
             <mat-expansion-panel-header collapsedHeight="auto" expandedHeight="auto">
               <mat-panel-title class="requirement-title status-{{requirement.status.status === 'OK' ? 'ok' : 'no'}}">
                 <div class="requirement-icon-outer">
+                    <mat-icon class="requirement-toggle">{{requirementPanel.expanded ? 'arrow_drop_down' : 'arrow_right'}}</mat-icon>
                     <mat-icon *ngIf="requirement.status.status === 'OK'" class="requirement-icon ok-icon">check_circle</mat-icon>
                     <mat-icon *ngIf="requirement.status.status === 'NO'" class="requirement-icon no-icon">cancel</mat-icon>
                 </div>
                 <div>
-                  <p *ngFor="let line of getRequirementTitle(requirement)">{{line}}</p>
+                  <p>
+                    <ng-container *ngFor="let line of getRequirementTitle(requirement)">
+                      {{line}}
+                    </ng-container>
+                  </p>
                 </div>
               </mat-panel-title>
             </mat-expansion-panel-header>
@@ -72,7 +77,7 @@
             <div *ngFor="let contentType of getRequirementBody(requirement)">
               
               <div class="content-type content-type-{{contentType.contentType}}" matTooltip="{{contentType.contentType}}" matTooltipPosition="left">
-                <p *ngFor="let line of contentType.lines">{{line}}</p>
+                <p *ngFor="let line of contentType.lines" class="pre-wrap requirement-line" [innerHTML]="line | auditLine: contentType.contentType"></p>
               </div>
             </div>
 

src/app/dars/audit/audit.component.scss

+$green: #2e7d32;
+$red: #c5050c;
+$blue: #0479a8;
+
 #audit {
   padding: 20px 100px;
 
@@ -78,6 +82,12 @@ section {
 
 .pre-wrap {
   white-space: pre-wrap;
+  font-family: 'Consolas', 'SFMono-Regular', 'Liberation Mono', 'Menlo',
+    'Courier', monospace;
+}
+
+.mat-expansion-panel {
+  box-shadow: none;
 }
 
 .requirement-title {
@@ -86,14 +96,96 @@ section {
   font-size: 1.35rem;
 
   &.status-ok {
-    color: #2e7d32;
+    color: $green;
   }
 
   &.status-no {
-    color: #c5050c;
+    color: $red;
+  }
+}
+
+.requirement-icon-outer {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  margin: 20px 15px 0 0;
+  font-size: 1.75rem;
+}
+
+.requirement-toggle {
+  font-size: 2rem !important;
+  margin-right: 20px;
+  color: #000;
+  margin-top: -4px;
+}
+
+.content-type {
+  margin-bottom: 5px;
+
+  > p {
+    margin: 2.5px auto;
   }
 }
 
+.content-type-hText {
+  text-align: center;
+}
+
+.content-type-noSubrequirementAcceptCourses,
+.content-type-noSubrequirementCourses,
+.content-type-noSubrequirementNeedsSummaryLine,
+.content-type-noSubrequirementRejectCourses,
+.content-type-okSubrequirementAcceptCourses,
+.content-type-okSubrequirementCourses,
+.content-type-okSubrequirementEarnedLine,
+.content-type-okSubrequirementNeedsSummaryLine {
+  margin-left: 43px;
+}
+
+.requirement-line {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.content-type-okSubrequirementTLine,
+.content-type-noSubrequirementTLine {
+  margin-top: 20px;
+  font-weight: bold;
+}
+
+.content-type-okSubrequirementTLine {
+  color: $green;
+}
+
+.content-type-noSubrequirementTLine {
+  color: $red;
+}
+
+.tline-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.content-type-okSubrequirementCourses,
+.content-type-noSubrequirementCourses {
+  color: $blue;
+}
+
+.content-type-okSubrequirementNeedsSummaryLine {
+  color: $green;
+}
+
+.content-type-noSubrequirementNeedsSummaryLine,
+.content-type-noRequirementNeedsLine {
+  color: $red;
+  margin-left: 20px;
+  align-items: center;
+}
+
 .requirement-icon-outer {
   margin: 20px 15px 0 0;
   font-size: 1.75rem;
@@ -114,13 +206,13 @@ section {
 
 .content-type-okSubrequirementCourses,
 .content-type-noSubrequirementCourses {
-  color: #0479a8;
+  color: $blue;
   margin-left: 20px;
 }
 
 .content-type-okSubrequirementNeedsSummaryLine,
 .content-type-noSubrequirementNeedsSummaryLine,
 .content-type-noRequirementNeedsLine {
-  color: #c5050c;
   margin-left: 20px;
+  color: $red;
 }

src/app/dars/audit/audit.component.ts

-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, OnInit } from '@angular/core';
 import { Audit, Requirement, ContentType } from '../models/audit';
-import { DarsApiService } from '../services/api.service';
-import { Store } from '@ngrx/store';
-import { GlobalState } from '@app/core/state';
-import * as selectors from '../store/selectors';
-import { Observable } from 'rxjs';
 import { MatAccordion } from '@angular/material';
 
 @Component({
@@ -12,12 +7,16 @@ import { MatAccordion } from '@angular/material';
   templateUrl: './audit.component.html',
   styleUrls: ['./audit.component.scss'],
 })
-export class DarsAuditComponent {
+export class DarsAuditComponent implements OnInit {
   public metadata: any = {};
   public auditId: number;
   @Input() audit: Audit;
 
-  @ViewChild('requirements') requirements: MatAccordion;
+  @ViewChild(MatAccordion) requirements: MatAccordion;
+
+  public ngOnInit() {
+    console.log(this.audit);
+  }
 
   public openAllRequirements() {
     this.requirements.openAll();

src/app/dars/dars.module.ts

@@ -10,6 +10,7 @@ import { MatStepperModule } from '@angular/material';
 import { AlertContainerComponent } from '../shared/components/alert-container/alert-container.component';
 import { StoreModule } from '@ngrx/store';
 import { darsReducer } from './store/reducer';
+import { AuditLinePipe } from './pipes/audit-line.pipe';
 
 @NgModule({
   imports: [
@@ -20,6 +21,7 @@ import { darsReducer } from './store/reducer';
   ],
   exports: [MatStepperModule],
   declarations: [
+    AuditLinePipe,
     NewAuditOptionsComponent,
     DARSViewComponent,
     DarsAuditComponent,

src/app/dars/pipes/audit-line.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { ContentType } from '../models/audit';
+/*
+ * Raise the value exponentially
+ * Takes an exponent argument that defaults to 1.
+ * Usage:
+ *   value | exponentialStrength:exponent
+ * Example:
+ *   {{ 2 | exponentialStrength:10 }}
+ *   formats to: 1024
+ */
+@Pipe({ name: 'auditLine' })
+export class AuditLinePipe implements PipeTransform {
+  replaceIcon(line: string, search: string, icon: string): string {
+    return line.replace(search, `<i class="material-icons">${icon}</i>`);
+  }
+
+  transform(line: string, type: ContentType['contentType']): string {
+    switch (type) {
+      case 'okSubrequirementTLine': {
+        line = this.replaceIcon(line, '+', 'check');
+        break;
+      }
+
+      case 'noSubrequirementTLine': {
+        line = this.replaceIcon(line, '-', 'close');
+        break;
+      }
+    }
+
+    return line;
+  }
+}