Skip to content
This repository has been archived by the owner on Nov 22, 2019. It is now read-only.

Commit

Permalink
Updates to property form and wizard
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdrillin
mdrillin committed Oct 26, 2017
1 parent 6aaca0a commit 2b6576b
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 71 deletions.
22 changes: 12 additions & 10 deletions ngapp/src/app/activities/activities.component.spec.ts
View file
Expand Up @@ -19,21 +19,23 @@ describe("ActivitiesComponent", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [CoreModule, FormsModule, HttpModule, ModalModule.forRoot(), RouterTestingModule, SharedModule],
declarations: [ActivitiesComponent, ActivitiesListComponent, ActivitiesCardsComponent],
providers: [
{provide: ActivityService, useClass: MockActivityService}
]
})
.compileComponents().then(() => {
// nothing to do
declarations: [ActivitiesComponent, ActivitiesListComponent, ActivitiesCardsComponent]
});

// use mock service
TestBed.overrideComponent( ActivitiesComponent, {
set: {
providers: [
{ provide: ActivityService, useClass: MockActivityService },
]
}
});
}));

beforeEach(() => {
fixture = TestBed.createComponent(ActivitiesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

}));

it("should be created", () => {
expect(component).toBeTruthy();
Expand Down
9 changes: 5 additions & 4 deletions ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.html
View file
Expand Up @@ -14,7 +14,7 @@ <h3><i>{{ step1InstructionMessage }}</i></h3>
<form [formGroup]=basicPropertyForm class="form-horizontal" *ngIf="templatesLoaded">
<div [ngClass]="driverValid ? 'form-group' : 'form-group has-error'">
<label class="col-sm-2 control-label">Connection Type</label>
<div class="col-sm-10">
<div class="col-sm-5">
<select class="form-control" formControlName="driver" title="">
<option value="" selected hidden>-- Select a Connection Type ---</option>
<option *ngFor="let driver of templateNames" [value]="driver">{{ driver }}</option>
Expand All @@ -25,14 +25,14 @@ <h3><i>{{ step1InstructionMessage }}</i></h3>

<div [ngClass]="nameValid ? 'form-group' : 'form-group has-error'">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<div class="col-sm-5">
<input class="form-control" formControlName="name" title="">
<div class="help-block" *ngIf="!nameValid">{{ getBasicPropertyErrorMessage("name") }}</div>
</div>
</div>
<div [ngClass]="jndiValid ? 'form-group' : 'form-group has-error'">
<label class="col-sm-2 control-label">JNDI Identifier</label>
<div class="col-sm-10">
<div class="col-sm-5">
<input class="form-control" formControlName="jndi" title="">
<div class="help-block" *ngIf="!jndiValid">{{ getBasicPropertyErrorMessage("jndi") }}</div>
</div>
Expand All @@ -48,7 +48,8 @@ <h3><i>{{ step2InstructionMessage }}</i></h3>
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
</div>
<div class="add-connection-form row" *ngIf="detailPropertiesLoaded">
<app-property-form [formProperties]="getPropertyDefinitions()"></app-property-form>
<app-property-form [formProperties]="getPropertyDefinitions()" (formInitialized)="onDetailPropertyInit($event)"
(formChanged)="onDetailPropertyChanged($event)"></app-property-form>
</div>
</pfng-wizard-step>
<!-- -------------------------- -->
Expand Down
61 changes: 47 additions & 14 deletions ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.ts
View file
Expand Up @@ -53,6 +53,7 @@ export class AddConnectionWizardComponent implements OnInit {
public createComplete = true;
public createSuccessful = false;
public detailPropertiesLoaded = false;
public detailPropertiesLoadedType = "";
public requiredPropValues: Array<[string, string]> = [];
public templatesLoaded = false;

Expand Down Expand Up @@ -106,7 +107,7 @@ export class AddConnectionWizardComponent implements OnInit {
// Step 3 - Review and Create
this.step3Config = {
id: "step3",
priority: 2,
priority: 0,
title: "Review and Create",
allowClickNav: false
} as WizardStepConfig;
Expand All @@ -129,6 +130,7 @@ export class AddConnectionWizardComponent implements OnInit {
loadingTitle: "Add Connection Wizard loading",
loadingSecondaryInfo: "Please wait for the wizard to finish loading...",
title: "Add Connection",
contentHeight: "500px"
} as WizardConfig;

// Load the templates for the first step
Expand All @@ -151,7 +153,6 @@ export class AddConnectionWizardComponent implements OnInit {
// ----------------
// Public Methods
// ----------------

/*
* Return the name valid state
*/
Expand Down Expand Up @@ -230,7 +231,10 @@ export class AddConnectionWizardComponent implements OnInit {
public nextClicked($event: WizardEvent): void {
// When leaving page 1, load the driver-specific property definitions
if ($event.step.config.id === "step1") {
this.loadPropertyDefinitions(this.basicPropertyForm.controls["driver"].value);
const selectedDriver = this.basicPropertyForm.controls["driver"].value;
if(!this.detailPropertiesLoaded || (this.detailPropertiesLoadedType!==selectedDriver)) {
this.loadPropertyDefinitions(selectedDriver);
}
}
}

Expand Down Expand Up @@ -299,9 +303,20 @@ export class AddConnectionWizardComponent implements OnInit {
}
}

public updatePage1ValidStatus( ): void {
this.step1Config.nextEnabled = this.basicPropertyForm.valid;
this.setNavAway(this.step1Config.nextEnabled);
/**
* Handler for property form initialization
* @param {boolean} isValid form valid state
*/
public onDetailPropertyInit(isValid: boolean): void {
this.updatePage2ValidStatus(isValid);
}

/**
* Handler for property form changes
* @param {boolean} isValid form valid state
*/
public onDetailPropertyChanged(isValid: boolean): void {
this.updatePage2ValidStatus(isValid);
}

/**
Expand Down Expand Up @@ -345,13 +360,7 @@ export class AddConnectionWizardComponent implements OnInit {
jndi: new FormControl("", Validators.required),
driver: new FormControl("", Validators.required)
});
this.onChanges();
}

/*
* React to basic property changes - update the page 1 status
*/
private onChanges(): void {
// Responds to basic property changes - updates the page status
this.basicPropertyForm.valueChanges.subscribe((val) => {
this.updatePage1ValidStatus( );
});
Expand All @@ -361,6 +370,16 @@ export class AddConnectionWizardComponent implements OnInit {
this.step1Config.allowNavAway = allow;
}

private updatePage1ValidStatus( ): void {
this.step1Config.nextEnabled = this.basicPropertyForm.valid;
this.setNavAway(this.step1Config.nextEnabled);
}

private updatePage2ValidStatus(formValid: boolean): void {
this.step2Config.nextEnabled = formValid;
this.setNavAway(this.step2Config.nextEnabled);
}

/**
* Load the driver-specific property definitions
*/
Expand All @@ -371,8 +390,22 @@ export class AddConnectionWizardComponent implements OnInit {
.getConnectionTemplateProperties(driverName)
.subscribe(
(props) => {
that.detailProperties = props;
// Sort the properties. (Required properties first)
const firstProps: any[] = [];
const nextProps: any[] = [];
let sortedProps: any[] = [];
for (const prop of props) {
if (prop.isRequired()) {
firstProps.push(prop);
} else {
nextProps.push(prop);
}
}
sortedProps = firstProps.concat(nextProps);

that.detailProperties = sortedProps;
this.detailPropertiesLoaded = true;
this.detailPropertiesLoadedType = driverName;
},
(error) => {
this.logger.error("[AddConnectionWizardComponent] Error: %o", error);
Expand Down
72 changes: 36 additions & 36 deletions ngapp/src/app/connections/connections.component.spec.ts
View file
Expand Up @@ -75,41 +75,41 @@ describe("ConnectionsComponent", () => {
expect(debugEl).toBeNull();
});

// it("should toggle layout", () => {
// // Initial layout should be Card Layout
// let cardDebugElem = fixture.debugElement.query(By.css("app-connections-cards"));
// let listDebugElem = fixture.debugElement.query(By.css("app-connections-list"));
// expect(cardDebugElem).toBeDefined();
// expect(listDebugElem).toBeNull();
// const cardElem = cardDebugElem.nativeElement;
// expect(cardElem).toBeDefined();
//
// // Change the layout to ListLayout
// component.setListLayout();
// fixture.detectChanges();
//
// // Verify that the layout has changed
// cardDebugElem = fixture.debugElement.query(By.css("app-connections-cards"));
// listDebugElem = fixture.debugElement.query(By.css("app-connections-list"));
// expect(cardDebugElem).toBeNull();
// expect(listDebugElem).toBeDefined();
// const listElem = listDebugElem.nativeElement;
// expect(listElem).toBeDefined();
// });

// it("should filter connections", () => {
// // Expect 3 connections initially.
// let connections = component.filteredConnections;
// expect(connections.length).toEqual(3);
//
// // Set a name filter which satisfies none of the connections
// component.nameFilter = "g";
// component.filterConnections();
// fixture.detectChanges();
//
// // Now expect 0 activities match
// connections = component.filteredConnections;
// expect(connections.length).toEqual(0);
// });
it("should toggle layout", () => {
// Initial layout should be Card Layout
let cardDebugElem = fixture.debugElement.query(By.css("app-connections-cards"));
let listDebugElem = fixture.debugElement.query(By.css("app-connections-list"));
expect(cardDebugElem).toBeDefined();
expect(listDebugElem).toBeNull();
const cardElem = cardDebugElem.nativeElement;
expect(cardElem).toBeDefined();

// Change the layout to ListLayout
component.setListLayout();
fixture.detectChanges();

// Verify that the layout has changed
cardDebugElem = fixture.debugElement.query(By.css("app-connections-cards"));
listDebugElem = fixture.debugElement.query(By.css("app-connections-list"));
expect(cardDebugElem).toBeNull();
expect(listDebugElem).toBeDefined();
const listElem = listDebugElem.nativeElement;
expect(listElem).toBeDefined();
});

it("should filter connections", () => {
// Expect 3 connections initially.
let connections = component.filteredConnections;
expect(connections.length).toEqual(3);

// Set a name filter which satisfies none of the connections
component.nameFilter = "g";
component.filterConnections();
fixture.detectChanges();

// Now expect 0 activities match
connections = component.filteredConnections;
expect(connections.length).toEqual(0);
});

});
3 changes: 3 additions & 0 deletions ngapp/src/app/connections/shared/mock-connection.service.ts
View file
Expand Up @@ -26,6 +26,9 @@ export class MockConnectionService extends ConnectionService {

constructor( http: Http, logger: LoggerService ) {
super(http, logger);
this.conn1.setId("conn1");
this.conn2.setId("conn2");
this.conn3.setId("conn3");
}

/**
Expand Down
8 changes: 4 additions & 4 deletions ...src/app/shared/property-form/property-form-property/property-form-property.component.html
View file
@@ -1,16 +1,16 @@
<div [ngClass]="isValid ? 'form-group' : 'form-group has-error'" [formGroup]="form">
<label class="col-md-2 control-label" [attr.for]="property.getId()" data-toggle="tooltip" [title]="property.getDescription()">{{ property.getDisplayName() }}</label>

<div class="col-md-10" [ngSwitch]="controlType.toControlType(property)">
<div class="col-md-5" [ngSwitch]="controlType.toControlType(property)">

<input *ngSwitchCase="controlType.TEXT" class="form-control" [formControlName]="property.getId()"
[id]="property.getId()" type="text" title="A text value">
[id]="property.getId()" type="text" title="A text value" [(ngModel)]="property.theDefaultValue">

<input *ngSwitchCase="controlType.PASSWORD" class="form-control" [formControlName]="property.getId()"
[id]="property.getId()" type="password" title="A text value">
[id]="property.getId()" type="password" title="A text value" [(ngModel)]="property.theDefaultValue">

<input *ngSwitchCase="controlType.CHECKBOX" [formControlName]="property.getId()"
[id]="property.getId()" type="checkbox" title="A boolean value">
[id]="property.getId()" type="checkbox" title="A boolean value" [(ngModel)]="property.theDefaultValue">

<select [id]="property.getId()" *ngSwitchCase="controlType.DROPDOWN" [(ngModel)]="property.theDefaultValue" class="form-control"
[formControlName]="property.getId()" title="A value with allowed values">
Expand Down
13 changes: 10 additions & 3 deletions ngapp/src/app/shared/property-form/property-form.component.ts
View file
Expand Up @@ -15,8 +15,9 @@
* limitations under the License.
*/

import { Component, Input, OnInit } from "@angular/core";
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { Observable } from "rxjs/Observable";

import { ObjectUtils } from "@core/utils/object-utils";
import { PropertyDefinition } from "@shared/property-form/property-definition.model";
Expand All @@ -29,6 +30,8 @@ import { PropertyDefinition } from "@shared/property-form/property-definition.mo
export class PropertyFormComponent implements OnInit {

@Input() public formProperties: Array<PropertyDefinition<any>> = [];
@Output() public formInitialized: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output() public formChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
public form: FormGroup;

constructor( ) {
Expand All @@ -41,10 +44,14 @@ export class PropertyFormComponent implements OnInit {

public ngOnInit(): void {
this.form = this.toFormGroup(this.formProperties);
this.formInitialized.emit(this.form.valid);
this.form.valueChanges.subscribe((val) => {
this.formChanged.emit(this.form.valid);
});
}

public setFormProperties( props: Array<PropertyDefinition<any>> ): void {
this.formProperties = props;
public get valid( ): boolean {
return this.form.valid;
}

/*
Expand Down

0 comments on commit 2b6576b

Please sign in to comment.