Roenroll 1791

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { DegreePlannerModule } from './degree-planner/degree-planner.module';
 import { preferencesReducer } from './core/reducer';
 import { UserPreferencesEffects } from './core/effects';
 import { EffectsModule } from '@ngrx/effects';
+import { NewAuditOptionsComponent } from './dars/dars-view/new-audit-options/new-audit-options.component';
 
 @NgModule({
   imports: [
@@ -49,6 +50,7 @@ import { EffectsModule } from '@ngrx/effects';
   ],
   declarations: [AppComponent, HeaderComponent],
   entryComponents: [
+    NewAuditOptionsComponent,
     CourseDetailsDialogComponent,
     FeedbackDialogComponent,
     CreditOverloadDialogComponent,

src/app/dars/dars-view/dars-view.component.html

@@ -28,7 +28,7 @@
                 <p class="mat-body">See the progress towards your current program of study and degree plans.</p>
             </div>
             <div>
-                <button mat-raised-button aria-label="Run new degree audit" color="primary">Run new degree audit</button>
+                <button mat-raised-button aria-label="Run new degree audit" color="primary" (click)="openNewAuditOptionsDialog()">Run new degree audit</button>
             </div>
         </div>
 

src/app/dars/dars-view/dars-view.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { AuditMetadata } from '../models/audit-metadata';
+import { MatDialog } from '@angular/material';
+import { NewAuditOptionsComponent } from '../dars-view/new-audit-options/new-audit-options.component';
 import { DARSState } from '../store/state';
 import { Store } from '@ngrx/store';
 import { GlobalState } from '@app/core/state';
@@ -16,7 +18,7 @@ export class DARSViewComponent implements OnInit {
   public metadataStatus$: Observable<DARSState['metadata']['status']>;
   public visibleAuditStatus$: Observable<DARSState['visibleAudit']['status']>;
 
-  constructor(private store: Store<GlobalState>) {}
+  constructor(private store: Store<GlobalState>, public dialog: MatDialog) {}
 
   public ngOnInit() {
     this.store.dispatch(new darsActions.StartLoadingMetadata());
@@ -24,6 +26,10 @@ export class DARSViewComponent implements OnInit {
     this.visibleAuditStatus$ = this.store.select(selectors.visibleAuditStatus);
   }
 
+  public openNewAuditOptionsDialog() {
+    this.dialog.open(NewAuditOptionsComponent, {});
+  }
+
   public openAudit(metadata: AuditMetadata) {
     this.store.dispatch(new darsActions.StartLoadingAudit({ metadata }));
   }

src/app/dars/dars-view/new-audit-options/new-audit-options.component.html

+<mat-toolbar color="primary" class="dialog-toolbar">
+    <h2 class="dialog-toolbar-title">
+      Request Degree Audit
+    </h2>
+    <button
+      mat-button
+      mat-dialog-close
+      class="close-btn"
+      aria-label="Close audit dialog"
+      cdkFocusRegionEnd>
+      <i
+        class="material-icons"
+        alt="Close audit dialog"
+        matTooltip="Close audit dialog"
+        matTooltipPosition="above"
+        >clear</i>
+    </button>
+  </mat-toolbar>
+
+  <mat-dialog-content id="new-audit-options-stepper" class="mat-typography dialog-with-toolbar">
+
+    <div fxLayout="column" fxLayoutAlign="none" fxLayoutGap="10px">
+      <form [formGroup]="newAuditForm" id="newAuditForm">
+        <mat-vertical-stepper linear #stepper formArrayName="formArray">
+            <mat-step class="audit-step" formGroupName="0" [stepControl]="formArray?.get([0])">
+                <ng-template matStepLabel>Choose audit type</ng-template>
+                  <mat-radio-group class="audit-radio-group" formControlName="auditType">
+                    <mat-radio-button checked="true" class="audit-radio-button" name="declared-audit-type" id="declared-audit-type" value="declaredMajorAudit" aria-label="Select run a degree audit with declared major">
+                      <p>Run a degree audit with declared major <br />
+                      <span class="sub-line">See the progress towards your current program of study.</span></p>
+                    </mat-radio-button>
+
+                    <mat-radio-button class="audit-radio-button" name="what-if-audit-type" id="what-if-audit-type" value="whatIfAudit" aria-label="Select run a what-if degree audit">
+                      <p>Run a what-if degree audit <br />
+                      <span class="sub-line">See the progress towards a new program of study and degree plans.</span></p>
+                    </mat-radio-button>
+                  </mat-radio-group>
+                <div class="step-buttons-group">
+                  <button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
+                </div>
+            </mat-step>
+
+            <mat-step class="audit-step" formGroupName="1" [stepControl]="formArray?.get([1])">
+              <ng-template matStepLabel>Select program of study</ng-template>
+                <mat-radio-group class="audit-radio-group" formControlName="programOfStudy">
+                  <mat-radio-button class="audit-radio-button" name="" id="" value="" aria-label="">
+                      Major: Psychology
+                  </mat-radio-button>
+                </mat-radio-group>
+              <div class="step-buttons-group">
+                <button mat-button matStepperPrevious color="primary">Back</button>
+                <button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
+              </div>
+            </mat-step>
+
+            <mat-step class="audit-step" formGroupName="2" [stepControl]="formArray?.get([2])">
+              <ng-template matStepLabel>Choose audit settings</ng-template>
+              <mat-form-field class="audit-settings-option">
+                <mat-label>Honors Degree Options</mat-label>
+                <mat-select formControlName="honors" placeholder="Honors Degree Option" aria-label="Honors Degree Options" [disableOptionCentering]="true">
+                  <mat-option value="">Keep current status</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field class="audit-settings-option">
+                  <mat-label>Include Courses Form</mat-label>
+                  <mat-select formControlName="coursesForm" placeholder="Include Courses Form" aria-label="Include Courses Form" [disableOptionCentering]="true">
+                    <mat-option value="">Previous, current, future, and planned terms</mat-option>
+                  </mat-select>
+                </mat-form-field>
+
+                <p style="margin-top: 12px;"><strong>Run against which degree plan?</strong></p>
+                <mat-form-field class="audit-settings-option">
+                  <mat-label>Degree Plan</mat-label>
+                  <mat-select formControlName="runAgainst" placeholder="Degree Plan" aria-label="Degree Plan" [disableOptionCentering]="true">
+                    <mat-option value="">Engineering</mat-option>
+                  </mat-select>
+                </mat-form-field>
+
+                <div class="step-buttons-group">
+                  <button mat-button matStepperPrevious color="primary">Back</button>
+                  <button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
+                </div>
+            </mat-step>
+
+            <mat-step class="audit-step" formGroupName="3" [stepControl]="formArray?.get([3])">
+              <ng-template matStepLabel>Select credits</ng-template>
+              <p>To provide more accurate audit, specify the number of credits you planto make in the following course(s):</p>
+              <!-- If no variable credits were found, show the message -->
+              <!-- <p>No variable credits found.The audit is ready to be run.</p> -->
+              <div fxLayout="row" fxFlex="100">
+                <div fxLayoutAlign="start center" fxFlex="80">
+                  <p>Spring 2020: BIO 151 <br /> Introductory biology</p>
+                </div>
+                <div fxLayoutAlign="end center" fxFlex="20">
+                  <mat-form-field id="audit-credits-selector">
+                    <mat-select formControlName="credits" placeholder="" aria-label="Number of credits" [disableOptionCentering]="true">
+                      <mat-option value="">2</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+              </div>
+              <div class="step-buttons-group">
+                <button mat-button matStepperPrevious color="primary">Back</button>
+                <button mat-button mat-raised-button color="primary">Run Audit</button>
+                <!-- <button mat-button (click)="stepper.reset()" mat-stroked-button color="primary">Reset</button> -->
+              </div>
+            </mat-step>
+          </mat-vertical-stepper>
+        </form>
+    </div>
+  </mat-dialog-content>

src/app/dars/dars-view/new-audit-options/new-audit-options.component.scss

+.mat-form-field {
+  display: flex !important;
+}
+
+.audit-radio-button {
+  margin-bottom: 1em;
+  .mat-radio-label {
+    white-space: normal !important;
+  }
+  p {
+    margin-bottom: 0px;
+    margin-left: 12px;
+    font-weight: 500;
+    .sub-line {
+      color: #6e655f;
+      font-weight: normal;
+    }
+  }
+}
+
+.audit-radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+}
+
+.step-buttons-group {
+  margin-top: 1.2em;
+  button {
+    text-transform: uppercase;
+  }
+}
+
+#audit-credits-selector {
+  margin-top: 12px;
+}

src/app/dars/dars-view/new-audit-options/new-audit-options.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewAuditOptionsComponent } from './new-audit-options.component';
+
+describe('NewAuditOptionsComponent', () => {
+  let component: NewAuditOptionsComponent;
+  let fixture: ComponentFixture<NewAuditOptionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewAuditOptionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewAuditOptionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dars/dars-view/new-audit-options/new-audit-options.component.ts

+import { Component, OnInit } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  Validators,
+  FormArray,
+  AbstractControl,
+} from '@angular/forms';
+
+@Component({
+  selector: 'cse-new-audit-options',
+  templateUrl: './new-audit-options.component.html',
+  styleUrls: ['./new-audit-options.component.scss'],
+})
+export class NewAuditOptionsComponent implements OnInit {
+  public newAuditForm: FormGroup;
+
+  get formArray(): AbstractControl | null {
+    return this.newAuditForm.get('formArray');
+  }
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit() {
+    this.newAuditForm = this.fb.group({
+      formArray: this.fb.array([
+        this.fb.group({
+          auditType: new FormControl(''),
+        }),
+        this.fb.group({
+          programOfStudy: new FormControl(''),
+        }),
+        this.fb.group({
+          honors: new FormControl(''),
+          coursesForm: new FormControl(''),
+          runAgainst: new FormControl(''),
+        }),
+        this.fb.group({
+          credits: new FormControl(''),
+        }),
+      ]),
+    });
+  }
+}

src/app/dars/dars.module.ts

-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 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';
 import { DarsMetadataTableComponent } from './metadata-table/metadata-table.component';
+import { NewAuditOptionsComponent } from './dars-view/new-audit-options/new-audit-options.component';
+import { MatStepperModule } from '@angular/material';
 
 @NgModule({
-  imports: [EffectsModule.forFeature([DARSEffects]), SharedModule],
-  exports: [],
+  imports: [
+    EffectsModule.forFeature([DARSEffects]),
+    SharedModule,
+    MatStepperModule,
+  ],
+  exports: [MatStepperModule],
   declarations: [
+    NewAuditOptionsComponent,
     DARSViewComponent,
     DarsAuditComponent,
     DarsMetadataTableComponent,
   ],
-  entryComponents: [],
+  entryComponents: [NewAuditOptionsComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class DARSModule {}

src/app/shared/shared.module.ts

@@ -28,6 +28,7 @@ import { AcademicYearRangePipe } from './pipes/academic-year-range.pipe';
 import { CourseDetailsComponent } from './components/course-details/course-details.component';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatRadioModule } from '@angular/material/radio';
 import { CourseDetailsDialogComponent } from '../degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
 import { FeedbackDialogComponent } from '../degree-planner/dialogs/feedback-dialog/feedback-dialog.component';
 import { ConfirmDialogComponent } from './dialogs/confirm-dialog/confirm-dialog.component';
@@ -55,6 +56,7 @@ const modules = [
   MatCardModule,
   MatTableModule,
   MatSelectModule,
+  MatRadioModule,
   FlexLayoutModule,
   MatSidenavModule,
   MatSlideToggleModule,

src/assets/sass/general.scss

@@ -298,6 +298,43 @@ body {
   overflow: hidden;
 }
 
+// Form styles
+
+.audit-radio-button {
+  .mat-radio-label {
+    white-space: normal !important;
+  }
+}
+
+#new-audit-options-stepper {
+  max-width: 400px !important;
+}
+
+#audit-credits-selector {
+  .mat-form-field-infix {
+    width: 3em;
+    text-align: center;
+  }
+}
+
+.audit-settings-option {
+  .mat-form-field-wrapper {
+    width: 100% !important;
+  }
+}
+
+.mat-radio-outer-circle {
+  border-color: #0479a8 !important;
+}
+
+.audit-radio-button.mat-accent .mat-radio-inner-circle,
+.audit-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple {
+  background-color: #0479a8;
+}
+.audit-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
+  background-color: rgba(4, 121, 168, 0.7) !important;
+}
+
 // Media queries
 
 @media screen and (max-width: 500px) {