From 807bb069ea6a482a3538526dfa63f4d163457197 Mon Sep 17 00:00:00 2001
From: Paulina Nogal <pnogal@wisc.edu>
Date: Thu, 6 Jun 2019 16:11:04 +0000
Subject: [PATCH] Roenroll 1791
---
src/app/app.module.ts | 2 +
.../dars/dars-view/dars-view.component.html | 2 +-
src/app/dars/dars-view/dars-view.component.ts | 10 +-
.../new-audit-options.component.html | 111 ++++++++++++++++++
.../new-audit-options.component.scss | 36 ++++++
.../new-audit-options.component.spec.ts | 25 ++++
.../new-audit-options.component.ts | 45 +++++++
src/app/dars/dars.module.ts | 16 ++-
src/app/shared/shared.module.ts | 2 +
src/assets/sass/general.scss | 37 ++++++
10 files changed, 279 insertions(+), 7 deletions(-)
create mode 100644 src/app/dars/dars-view/new-audit-options/new-audit-options.component.html
create mode 100644 src/app/dars/dars-view/new-audit-options/new-audit-options.component.scss
create mode 100644 src/app/dars/dars-view/new-audit-options/new-audit-options.component.spec.ts
create mode 100644 src/app/dars/dars-view/new-audit-options/new-audit-options.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index eb358f3..8245547 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 8f67efe..f296898 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/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>
diff --git a/src/app/dars/dars-view/dars-view.component.ts b/src/app/dars/dars-view/dars-view.component.ts
index 4e84da1..0396ee0 100644
--- a/src/app/dars/dars-view/dars-view.component.ts
+++ b/src/app/dars/dars-view/dars-view.component.ts
@@ -1,5 +1,7 @@
-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 }));
}
diff --git a/src/app/dars/dars-view/new-audit-options/new-audit-options.component.html b/src/app/dars/dars-view/new-audit-options/new-audit-options.component.html
new file mode 100644
index 0000000..fc97e29
--- /dev/null
+++ b/src/app/dars/dars-view/new-audit-options/new-audit-options.component.html
@@ -0,0 +1,111 @@
+<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>
diff --git a/src/app/dars/dars-view/new-audit-options/new-audit-options.component.scss b/src/app/dars/dars-view/new-audit-options/new-audit-options.component.scss
new file mode 100644
index 0000000..b1918f1
--- /dev/null
+++ b/src/app/dars/dars-view/new-audit-options/new-audit-options.component.scss
@@ -0,0 +1,36 @@
+.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;
+}
diff --git a/src/app/dars/dars-view/new-audit-options/new-audit-options.component.spec.ts b/src/app/dars/dars-view/new-audit-options/new-audit-options.component.spec.ts
new file mode 100644
index 0000000..c910771
--- /dev/null
+++ b/src/app/dars/dars-view/new-audit-options/new-audit-options.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+ });
+});
diff --git a/src/app/dars/dars-view/new-audit-options/new-audit-options.component.ts b/src/app/dars/dars-view/new-audit-options/new-audit-options.component.ts
new file mode 100644
index 0000000..a9249fe
--- /dev/null
+++ b/src/app/dars/dars-view/new-audit-options/new-audit-options.component.ts
@@ -0,0 +1,45 @@
+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(''),
+ }),
+ ]),
+ });
+ }
+}
diff --git a/src/app/dars/dars.module.ts b/src/app/dars/dars.module.ts
index 6bb732a..08b9305 100644
--- a/src/app/dars/dars.module.ts
+++ b/src/app/dars/dars.module.ts
@@ -1,19 +1,27 @@
-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 {}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 6ccb51c..aeb5f72 100644
--- a/src/app/shared/shared.module.ts
+++ b/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,
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index b7bb6f9..12a23d8 100644
--- a/src/assets/sass/general.scss
+++ b/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) {
--
GitLab