steper init On step
This commit is contained in:
parent
ae5fce7bf3
commit
74694c82b6
|
@ -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>
|
||||
|
|
|
@ -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; }
|
||||
|
|
Loading…
Reference in New Issue