Incorporates patternfly-ng wizard

teiid · Oct 16, 2017 · 2929088 · 2929088
1 parent 7e7ca3a
commit 2929088
Show file tree

Hide file tree

Showing 38 changed files with 1,220 additions and 1,644 deletions.
diff --git a/ngapp/package-lock.json b/ngapp/package-lock.json
diff --git a/ngapp/package.json b/ngapp/package.json
@@ -23,6 +23,7 @@
     "@angular/router": "^4.2.4",
     "core-js": "^2.4.1",
     "ngx-bootstrap": "^1.9.3",
+    "patternfly-ng": "^0.13.1",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.14"
   },

diff --git a/ngapp/src/app/activities/activities-cards/activities-cards.component.html b/ngapp/src/app/activities/activities-cards/activities-cards.component.html
@@ -12,13 +12,11 @@ <h2 class="activity-card-title">
             <span class="pull-right fa fa-fw fa-edit activity-card-action-icon" (click)="onEditActivity(activity.getId())"></span>
           </h2>
           <hr/>
-          <div class="activity-tags">
-            <span class="activity-tags-label">Source:</span>
-            <span class="activity-tags-label">{{ activity.getSourceConnection() }}&nbsp;&nbsp;&nbsp;</span>
+          <div>
+            <span><b>Source:</b>&nbsp;&nbsp;{{ activity.getSourceConnection() }}</span>
           </div>
-          <div class="activity-tags">
-            <span class="activity-tags-label">Target:</span>
-            <span class="activity-tags-label">{{ activity.getSourceConnection() }}&nbsp;&nbsp;&nbsp;</span>
+          <div>
+            <span><b>Target:</b>&nbsp;&nbsp;{{ activity.getTargetConnection() }}</span>
           </div>
           <!--
           <div class="activity-tags" *ngIf="activity.tags && activity.tags.length > 0">

diff --git a/ngapp/src/app/activities/activities-list/activities-list.component.html b/ngapp/src/app/activities/activities-list/activities-list.component.html
@@ -14,13 +14,11 @@
           -->
         </div>
         <div class="list-view-pf-additional-info">
-          <div class="activity-tags">
-            <span class="activity-tags-label">Source:</span>
-            <span class="activity-tags-label">{{ activity.getSourceConnection() }}&nbsp;&nbsp;&nbsp;</span>
+          <div>
+            <span><b>Source:</b>&nbsp;&nbsp;{{ activity.getSourceConnection() }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
           </div>
-          <div class="activity-tags">
-            <span class="activity-tags-label">Target:</span>
-            <span class="activity-tags-label">{{ activity.getTargetConnection() }}&nbsp;&nbsp;&nbsp;</span>
+          <div>
+            <span><b>Target:</b>&nbsp;&nbsp;{{ activity.getTargetConnection() }}</span>
           </div>
           <!--
           <div class="activity-tags" *ngIf="activity.tags && activity.tags.length > 0">

diff --git a/ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.css b/ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.css
@@ -0,0 +1,18 @@
+.add-connection-form {
+  padding: 15px
+}
+
+.add-connection-form /*.form-instructions*/ {
+  font-size: 15px;
+  padding-top: 10px
+}
+
+.add-connection-form .form-instructions ol {
+  padding-left: 20px;
+}
+
+.wizard-pf-failed-icon {
+  color: #9c3535;
+  font-size: 67px;
+  line-height: 67px;
+}
diff --git a/ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.html b/ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.html
@@ -0,0 +1,111 @@
+<pfng-wizard #wizard
+             [config]="wizardConfig"
+             (onCancel)="cancelClicked($event)"
+             (onNext)="nextClicked($event)"
+             (onStepChange)="stepChanged($event)">
+  <!-- ------------------------- -->
+  <!-- Step 1 : Basic Properties -->
+  <!-- ------------------------- -->
+  <pfng-wizard-step [config]="step1Config">
+    <h3><i>{{ step1InstructionMessage }}</i></h3>
+    <div *ngIf="!templatesLoaded">
+      <div class="spinner spinner-lg blank-slate-pf-icon"></div>
+    </div>
+    <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">
+          <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>
+          </select>
+          <div class="help-block" *ngIf="!driverValid">{{ getBasicPropertyErrorMessage("driver") }}</div>
+        </div>
+      </div>
+
+      <div [ngClass]="nameValid ? 'form-group' : 'form-group has-error'">
+        <label class="col-sm-2 control-label">Name</label>
+        <div class="col-sm-10">
+          <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">
+          <input class="form-control" formControlName="jndi" title="">
+          <div class="help-block" *ngIf="!jndiValid">{{ getBasicPropertyErrorMessage("jndi") }}</div>
+        </div>
+      </div>
+    </form>
+  </pfng-wizard-step>
+  <!-- ---------------------------- -->
+  <!-- Step 2 : Advanced Properties -->
+  <!-- ---------------------------- -->
+  <pfng-wizard-step [config]="step2Config">
+    <h3><i>{{ step2InstructionMessage }}</i></h3>
+    <div *ngIf="!detailPropertiesLoaded">
+      <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>
+    </div>
+  </pfng-wizard-step>
+  <!-- -------------------------- -->
+  <!-- Step 3 : Review and Create -->
+  <!-- -------------------------- -->
+  <pfng-wizard-step [config]="step3Config">
+    <!-- Step 3A: Review -->
+    <pfng-wizard-substep [config]="step3aConfig">
+      <h3><i>{{ step3InstructionMessage }}</i></h3>
+      <h4>Connection Properties:</h4>
+      <form class="form-horizontal">
+        <div class="form-group">
+          <label class="col-sm-2 control-label">Connection Type:</label>
+          <label class="col-sm-10">{{ connectionDriverName }}</label>
+        </div>
+        <div class="form-group">
+          <label class="col-sm-2 control-label">Name:</label>
+          <label class="col-sm-10">{{ connectionName }}</label>
+        </div>
+        <div class="form-group">
+          <label class="col-sm-2 control-label">JNDI Identifier:</label>
+          <label class="col-sm-10">{{ connectionJndiName }}</label>
+        </div>
+      </form>
+      <h4>Connection Detail Required Properties:</h4>
+      <form class="form-horizontal">
+        <div *ngFor="let prop of requiredPropertyValues">
+          <div class="form-group">
+            <label class="col-sm-2 control-label">{{ prop[0] }}:</label>
+            <label class="col-sm-10">{{ prop[1] }}</label>
+          </div>
+        </div>
+      </form>
+    </pfng-wizard-substep>
+    <!-- Step 3B: Create -->
+    <pfng-wizard-substep [config]="step3bConfig" (onShow)="createConnection()">
+      <div class="wizard-pf-contents">
+        <!-- In progress -->
+        <div class="wizard-pf-process blank-slate-pf" *ngIf="!createComplete">
+          <div class="spinner spinner-lg blank-slate-pf-icon"></div>
+          <h3 class="blank-slate-pf-main-action">Creation in progress</h3>
+          <p class="blank-slate-pf-secondary-action">The connection is being created. </p>
+        </div>
+        <!-- Create Successful -->
+        <div class="wizard-pf-complete blank-slate-pf" *ngIf="createComplete && createSuccessful">
+          <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
+          <h3 class="blank-slate-pf-main-action">Creation was successful</h3>
+          <p class="blank-slate-pf-secondary-action">The connection was created successfully. Click on the button to see all connections.</p>
+          <a class="btn btn-lg btn-primary" [routerLink]="[connectionSummaryLink]">View All Connections</a>
+        </div>
+        <!-- Create Failed -->
+        <div class="wizard-pf-complete blank-slate-pf" *ngIf="createComplete && !createSuccessful">
+          <div class="wizard-pf-failed-icon"><span class="glyphicon glyphicon-remove-circle"></span></div>
+          <h3 class="blank-slate-pf-main-action">Creation failed</h3>
+          <p class="blank-slate-pf-secondary-action">The connection creation failed.  Correct any properties and retry.</p>
+        </div>
+      </div>
+    </pfng-wizard-substep>
+  </pfng-wizard-step>
+</pfng-wizard>
diff --git a/ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.spec.ts b/ngapp/src/app/connections/add-connection-wizard/add-connection-wizard.component.spec.ts
@@ -0,0 +1,36 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import {FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {RouterTestingModule} from "@angular/router/testing";
+import {CoreModule} from "@core/core.module";
+import {PropertyFormPropertyComponent} from "@shared/property-form/property-form-property/property-form-property.component";
+import {PropertyFormComponent} from "@shared/property-form/property-form.component";
+import {SharedModule} from "@shared/shared.module";
+import {PatternFlyNgModule, WizardConfig, WizardStepComponent} from "patternfly-ng";
+import { AddConnectionWizardComponent } from "./add-connection-wizard.component";
+
+describe("AddConnectionWizardComponent", () => {
+  let component: AddConnectionWizardComponent;
+  let fixture: ComponentFixture<AddConnectionWizardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ CoreModule, FormsModule, PatternFlyNgModule, ReactiveFormsModule, RouterTestingModule, SharedModule ],
+      declarations: [ AddConnectionWizardComponent, FormGroup, PropertyFormComponent, PropertyFormPropertyComponent,
+                      WizardConfig, WizardStepComponent ]
+    })
+    .compileComponents().then(() => {
+      // nothing to do
+    });
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddConnectionWizardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should be created", () => {
+    expect(component).toBeTruthy();
+  });
+});