steper init On step

This commit is contained in:
Diamantis Tziotzios 2019-03-01 18:18:17 +02:00
parent ae5fce7bf3
commit 74694c82b6
2 changed files with 63 additions and 45 deletions

View File

@ -1,59 +1,68 @@
<div class="quick-wizard-editor">
<form [formGroup]="formGroup">
<form [formGroup]="formGroup">
<h3 *ngIf="isNew">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.TITLE' | translate }}</h3>
<div class="row">
<mat-horizontal-stepper linear class="col-12" #stepper>
<mat-step [stepControl]="formGroup.get('project')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('project')">
<app-quick-wizard-project-editor-component class="col-12"
[formGroup]="formGroup.get('project')">
</app-quick-wizard-project-editor-component>
</div>
<div class="navigation-buttons-container">
<button style="float:right;" matStepperNext mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div>
<ng-container *ngIf="isAvtive('step1')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('project')">
<app-quick-wizard-project-editor-component class="col-12"
[formGroup]="formGroup.get('project')">
</app-quick-wizard-project-editor-component>
</div>
<div class="navigation-buttons-container">
<button style="float:right;" matStepperNext mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div>
</ng-container>
</mat-step>
<mat-step [stepControl]="formGroup.get('dmp')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('dmp')">
<app-quick-wizard-dmp-editor-component class="col-12" [formGroup]="formGroup.get('dmp')" [dmpLabel]="formGroup.get('project').get('label')">
</app-quick-wizard-dmp-editor-component>
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button color="primary">
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div>
<ng-container *ngIf="isAvtive('step2')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('dmp')">
<app-quick-wizard-dmp-editor-component class="col-12" [formGroup]="formGroup.get('dmp')"
[dmpLabel]="formGroup.get('project').get('label')">
</app-quick-wizard-dmp-editor-component>
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button color="primary">
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div>
</ng-container>
</mat-step>
<mat-step [stepControl]="formGroup.get('datasets')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('datasets')">
<!-- <div *ngIf="this.isActiveStep(3)" class="row"> -->
<app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup" [profile]="formGroup.get('dmp').get('profile')" [datasetLabel]="formGroup.get('dmp').get('label')">
</app-dataset-editor-wizard-component>
<!-- <app-dataset-description-form class="col-12" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
<ng-container *ngIf="isAvtive('step3')">
<ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}}
</ng-template>
<div *ngIf="formGroup.get('datasets')">
<!-- <div *ngIf="this.isActiveStep(3)" class="row"> -->
<app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup"
[profile]="formGroup.get('dmp').get('profile')"
[datasetLabel]="formGroup.get('dmp').get('label')">
</app-dataset-editor-wizard-component>
<!-- <app-dataset-description-form class="col-12" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
[form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules"
[datasetProfileId]="formGroup.get('profile').value"></app-dataset-description-form>
<div class="col-12 description-action-row">
</app-dataset-description-form> -->
<!-- </div> -->
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button (click)='formSubmit()'
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div>
<!-- </div> -->
</div>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button (click)='formSubmit()'
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div>
</ng-container>
</mat-step>
</mat-horizontal-stepper>
</div>

View File

@ -32,11 +32,9 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
quickWizard: QuickWizardEditorWizardModel
formGroup: FormGroup = null;
private uiNotificationService: UiNotificationService
isLinear = false;
firstStepFormGroup: FormGroup;
secondFormGroup: FormGroup;
uiNotificationService: any;
constructor(
@ -89,6 +87,17 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
// });
}
isAvtive(step: string): boolean {
switch (step) {
case 'step1':
return this.stepper.selectedIndex==0;
case 'step2':
return this.stepper.selectedIndex==1;
case 'step3':
return this.stepper.selectedIndex==2;
}
}
formSubmit(): void {
this.touchAllFormFields(this.formGroup);
if (!this.isFormValid()) { return; }