MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.html
View File

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

15
dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.ts
View File

@ -32,11 +32,9 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
quickWizard: QuickWizardEditorWizardModel quickWizard: QuickWizardEditorWizardModel
formGroup: FormGroup = null; formGroup: FormGroup = null;
private uiNotificationService: UiNotificationService
isLinear = false;
firstStepFormGroup: FormGroup; firstStepFormGroup: FormGroup;
secondFormGroup: FormGroup; secondFormGroup: FormGroup;
uiNotificationService: any;
constructor( 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 { formSubmit(): void {
this.touchAllFormFields(this.formGroup); this.touchAllFormFields(this.formGroup);
if (!this.isFormValid()) { return; } if (!this.isFormValid()) { return; }