This repository was archived by the owner on Aug 28, 2023. It is now read-only.
VA Risk Wizard step two #370
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,40 @@ | ||
| <div class="step-header"> | ||
| <h3>Hazard</h3> | ||
| <h5>{{ risk.weatherEvent?.name }}</h5> | ||
| </div> | ||
| <div class="step-content"> | ||
| <form [formGroup]="form"> | ||
| <div class="step-form-control"> | ||
| <h5>Probability</h5> | ||
| <app-option-dropdown [control]="form.controls['probability']" | ||
| [options]="relativeOptions"> | ||
| </app-option-dropdown> | ||
| </div> | ||
| <div class="step-form-control"> | ||
| <h5>Frequency <span class="icon icon-question-circle-o" tooltip="{{ tooltipText.frequency }}"></span></h5> | ||
| <div class="btn-group"> | ||
| <button class="btn btn-primary" | ||
| [ngClass]="{active: form.controls.frequency.value === opt}" | ||
| *ngFor="let opt of directionalOptionsKeys" | ||
| (click)="updateDirectionalControl(form.controls.frequency, opt)"> | ||
| {{ directionalOptions.get(opt)?.label }} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="step-form-control"> | ||
| <h5>Intensity <span class="icon icon-question-circle-o" tooltip="{{ tooltipText.intensity }}"></span></h5> | ||
| <div class="btn-group"> | ||
| <button class="btn btn-primary" | ||
| [ngClass]="{active: form.controls.intensity.value === opt}" | ||
| *ngFor="let opt of directionalOptionsKeys" | ||
| (click)="updateDirectionalControl(form.controls.intensity, opt)"> | ||
| {{ directionalOptions.get(opt)?.label }} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div class="step-footer"> | ||
| <button type="button" nextStep>Skip Step</button> | ||
| <button type="button" [disabled]="form.pristine" nextStep (finalize)="save()">Continue</button> | ||
| </div> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,92 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; | ||
|
|
||
| import { | ||
| OrgRiskDirectionalOption, | ||
| OrgRiskDirectionalOptions, | ||
| OrgRiskRelativeOption, | ||
| OrgRiskRelativeOptions, | ||
| Risk | ||
| } from '../../shared/'; | ||
| import { RiskStepKey } from '../risk-step-key'; | ||
| import { WizardStepComponent } from '../wizard-step.component'; | ||
| import { WizardSessionService } from '../wizard-session.service'; | ||
|
|
||
| interface HazardStepFormModel { | ||
|
Contributor
There was a problem hiding this comment. put in it's own file? the identify step form model is in it's own file. It's exceptionally unlikely that this model will be used anywhere else independently so fundamentally I'm not opposed to this being here, but we should be consistent either way.
Contributor
Author
There was a problem hiding this comment. Good catch and good point. Given that this is for now a private interface on both components, I'll probably move the one in identify back to the component and remove the exports on these. |
||
| frequency: OrgRiskDirectionalOption; | ||
| intensity: OrgRiskDirectionalOption; | ||
| probability: OrgRiskRelativeOption; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'app-risk-step-hazard', | ||
| templateUrl: 'hazard-step.component.html' | ||
| }) | ||
|
|
||
| export class HazardStepComponent extends WizardStepComponent<Risk> implements OnInit { | ||
|
|
||
| public form: FormGroup; | ||
| public key = RiskStepKey.Hazard; | ||
| public navigationSymbol = '2'; | ||
| public risk: Risk; | ||
| public title = 'Hazard'; | ||
| public tooltipText = { | ||
| frequency: 'Estimation of the change in how often this hazard will occur in the future', | ||
| intensity: 'Estimation of the change in strength of this hazard in the future' | ||
| }; | ||
|
|
||
| public directionalOptions = OrgRiskDirectionalOptions; | ||
| public relativeOptions = OrgRiskRelativeOptions; | ||
| // Can't *ngFor a map type or iterable, so instead we realize the iterable and use that in *ngFors | ||
|
Contributor
There was a problem hiding this comment. stanks but useful comment |
||
| public directionalOptionsKeys = Array.from(OrgRiskDirectionalOptions.keys()); | ||
| public relativeOptionsKeys = Array.from(OrgRiskRelativeOptions.keys()); | ||
|
|
||
| constructor(private fb: FormBuilder, | ||
| protected session: WizardSessionService<Risk>) { | ||
| super(session); | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| super.ngOnInit(); | ||
| this.risk = this.session.getData() || new Risk({}); | ||
| this.setupForm(this.fromModel(this.risk)); | ||
| this.form.get('intensity').valueChanges.subscribe(v => console.log('intensity: ', v)); | ||
| } | ||
|
|
||
| save() { | ||
| const data: HazardStepFormModel = { | ||
| frequency: this.form.controls.frequency.value, | ||
| intensity: this.form.controls.intensity.value, | ||
| probability: this.form.controls.probability.value | ||
| }; | ||
| this.session.setDataForKey(this.key, data); | ||
| } | ||
|
|
||
| updateDirectionalControl(control: FormControl, value: OrgRiskDirectionalOption) { | ||
| control.setValue(value); | ||
| control.markAsDirty(); | ||
| } | ||
|
|
||
| setupForm(data: HazardStepFormModel) { | ||
| this.form = this.fb.group({ | ||
| 'frequency': [data.frequency, []], | ||
| 'intensity': [data.intensity, []], | ||
| 'probability': [data.probability, []], | ||
| }); | ||
| } | ||
|
|
||
| fromModel(model: Risk): HazardStepFormModel { | ||
| return { | ||
| frequency: model.frequency, | ||
| intensity: model.intensity, | ||
| probability: model.probability | ||
| }; | ||
| } | ||
|
|
||
| toModel(data: HazardStepFormModel, model: Risk) { | ||
| model.frequency = data.frequency; | ||
| model.intensity = data.intensity; | ||
| model.probability = data.probability; | ||
| return model; | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,22 @@ | ||
| <div class="step-header"> | ||
| <h3>Identify risk</h3> | ||
| </div> | ||
| <div class="step-content"> | ||
| <p>Match a hazard to a subset of people, structures or assets (sometimes referred to as a "community system") that the selected hazard may impact</p> | ||
| <form [formGroup]="form"> | ||
| <div class="step-form-control"> | ||
| <label for="">Hazard</label> | ||
| <input type="text" formControlName="hazard"> | ||
| <span *ngIf="form.controls.hazard.errors">*Required</span> | ||
| </div> | ||
| <div class="step-form-control"> | ||
| <label for="">Community System</label> | ||
| <input type="text" formControlName="communitySystem"> | ||
| <span *ngIf="form.controls.communitySystem.errors">*Required</span> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| <div class="step-footer"> | ||
| <button type="button" [disabled]="!form.valid" nextStep (finalize)="save()">Continue</button> | ||
|
Contributor
There was a problem hiding this comment. i think the buttons are generally considered part of the
Contributor
Author
There was a problem hiding this comment. Generally yes, if they directly interact with form events, like a form submit button. That's not the case here though, these buttons are a part of wizard navigation not the form itself. |
||
| <button type="button" (click)="cancel()">Cancel</button> | ||
| </div> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think
buttons are what we're looking for rather thanbtn-group. The behavior is off too. If I change my selection, the buttons don't always respond. It would be nice to be able to select "unsure" again, and that is not possible. I'm on Chrome.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whoa. Weird. The actual issue is that you can't select a button to the left of one you've already selected. That's new. Will fix.
I don't think the implementation of button vs button group really matters aside from button group is more semantically correct (since it enforces only one selected at a time) and we can separate the buttons with CSS. I'll play with it either way.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well look what I found: valor-software/ngx-bootstrap#2581
Guess I'll switch to a standard button implementation real quick.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Didn't address button spacing. That's fairly straightforward and can be addressed later in a styling pass.