add-dataservice-wizard.component.html

<pfng-wizard #wizard
             [config]="wizardConfig"
             (onCancel)="cancelClicked($event)"
             (onNext)="nextClicked($event)"
             (onStepChange)="stepChanged($event)">
  <!-- ------------------------- -->
  <!-- Step 1 : Table Selection -->
  <!-- ------------------------- -->
  <pfng-wizard-step [config]="step1Config">
    <h3><i>{{ step1InstructionMessage }}</i></h3>
    <br>
    <app-connection-table-selector (selectedTableListUpdated)="updatePage1ValidStatus()"></app-connection-table-selector>
  </pfng-wizard-step>
  <!-- -------------------------- -->
  <!-- Step 2 : Review and Create -->
  <!-- -------------------------- -->
  <pfng-wizard-step [config]="step2Config">
    <!-- Step 2A: Review -->
    <pfng-wizard-substep [config]="step2aConfig">
      <h3><i>{{ step2InstructionMessage }}</i></h3>
      <br>
      <form [formGroup]=basicPropertyForm class="form-horizontal">
        <div [ngClass]="nameValid ? 'form-group' : 'form-group has-error'">
          <label class="col-sm-2 control-label">Name</label>
          <div class="col-sm-5">
            <input class="form-control" formControlName="name" title="">
            <div class="help-block" *ngIf="!nameValid">{{ nameValidationError }}</div>
          </div>
        </div>
        <div [ngClass]="'form-group'">
          <label class="col-sm-2 control-label">Description</label>
          <div class="col-sm-5">
            <input class="form-control" formControlName="description" title="">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Selected Tables:</label>
          <div class="col-sm-5">
            <div *ngFor="let table of dataserviceSourceTables">
              <label>[ {{ table.getConnection().getId() }} ] {{ table.getName() }}</label>
            </div>
          </div>
        </div>
      </form>
    </pfng-wizard-substep>
    <!-- Step 2B: Create -->
    <pfng-wizard-substep [config]="step2bConfig" (onShow)="createDataservice()">
      <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">{{ finalPageTitle }}</h3>
          <p class="blank-slate-pf-secondary-action">{{ finalPageMessage }}</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">{{ finalPageTitle }}</h3>
          <p class="blank-slate-pf-secondary-action">{{ finalPageMessage }}</p>
          <button class="btn btn-lg btn-primary" type="button" (click)="onDeployDataservice()">View All Dataservices</button>
        </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">{{ finalPageTitle }}</h3>
          <div class="blank-slate-pf-secondary-action">
            {{ finalPageMessage }}
            <br>
            <div style="font-style: italic;">{{ errorDetails }}</div>
          </div>
        </div>
      </div>
    </pfng-wizard-substep>
  </pfng-wizard-step>
</pfng-wizard>