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

Merge branch 'ui-refactoring' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-refactoring

This commit is contained in:
Diamantis Tziotzios 2019-03-06 12:03:14 +02:00
parent dee23a0e8f 9eb9364683
commit 391bf0bca1
4 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.html
View File

@ -3,7 +3,7 @@
<mat-step class="step-container" [stepControl]="formGroup.get('dmpMeta')"> <mat-step class="step-container" [stepControl]="formGroup.get('dmpMeta')">
<ng-template matStepLabel>{{'DATASET-CREATE-WIZARD.FIRST-STEP.TITLE'| translate}}</ng-template> <ng-template matStepLabel>{{'DATASET-CREATE-WIZARD.FIRST-STEP.TITLE'| translate}}</ng-template>
<form [formGroup]="formGroup.get('dmpMeta')"> <form [formGroup]="formGroup.get('dmpMeta')">
<dataset-dmp-selector-component class="col-12" [formGroup]="formGroup.get('dmpMeta')"> <dataset-dmp-selector-component class="col-12" [formGroup]="formGroup.get('dmpMeta')" [datasetFormGroup]="formGroup.get('datasets')" [stepper]="stepper">
</dataset-dmp-selector-component> </dataset-dmp-selector-component>
</form> </form>
<div class="col-12"> <div class="col-12">
@ -20,7 +20,7 @@
<ng-template matStepLabel> <ng-template matStepLabel>
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}} {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.TITLE' | translate}}
</ng-template> </ng-template>
<div *ngIf="formGroup.get('dmpMeta').valid && isAvtive('step2')"> <div *ngIf="formGroup.get('dmpMeta').valid && isActive('step2')">
<app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup" <app-dataset-editor-wizard-component class="col-12" [formGroup]="formGroup"
[datasetProfile]="formGroup.get('dmpMeta').get('datasetProfile')" [datasetProfile]="formGroup.get('dmpMeta').get('datasetProfile')"
[datasetLabel]="formGroup.get('dmpMeta').get('dmp').value['label']"> [datasetLabel]="formGroup.get('dmpMeta').get('dmp').value['label']">
@ -34,4 +34,4 @@
</div> </div>
</mat-step> </mat-step>
</mat-horizontal-stepper> </mat-horizontal-stepper>
</div> </div>

2
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.ts
View File

@ -42,7 +42,7 @@ export class DatasetCreateWizard extends BaseComponent implements OnInit {
}) })
} }
isAvtive(step: string): boolean { isActive(step: string): boolean {
switch (step) { switch (step) {
case 'step1': case 'step1':
return this.stepper.selectedIndex==0; return this.stepper.selectedIndex==0;

30
dmp-frontend/src/app/ui/dataset-create-wizard/dmp-selector/dataset-dmp-selector.component.html
View File

@ -1,14 +1,20 @@
<div class="dataset-dmp-selector" [formGroup]="formGroup" *ngIf="formGroup"> <div class="dataset-dmp-selector" [formGroup]="formGroup" *ngIf="formGroup">
<mat-form-field class="col-md-6"> <mat-card>
<app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}" <div>
[configuration]="dmpAutoCompleteConfiguration"> <mat-form-field class="col-md-12">
</app-single-auto-complete> <app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}"
</mat-form-field> [configuration]="dmpAutoCompleteConfiguration">
<mat-form-field class="col-md-6"> </app-single-auto-complete>
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="datasetProfile"> </mat-form-field>
<mat-option *ngFor="let datasetProfile of availableProfiles" [value]="datasetProfile"> </div>
{{datasetProfile.label}} <div>
</mat-option> <mat-form-field class="col-md-12" *ngIf="availableProfiles.length > 1">
</mat-select> <mat-select (selectionChange)="datasetChanged($event)" placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="datasetProfile">
</mat-form-field> <mat-option *ngFor="let datasetProfile of availableProfiles" [value]="datasetProfile">
{{datasetProfile.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-card>
</div> </div>

21
dmp-frontend/src/app/ui/dataset-create-wizard/dmp-selector/dataset-dmp-selector.component.ts
View File

@ -4,7 +4,7 @@ import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCru
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item'; import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { MatStepper, MatSnackBar } from '@angular/material'; import { MatStepper, MatSnackBar } from '@angular/material';
import { FormGroup } from '@angular/forms'; import { FormGroup, FormArray } from '@angular/forms';
import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile'; import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { RequestItem } from '../../../core/query/request-item'; import { RequestItem } from '../../../core/query/request-item';
@ -31,6 +31,8 @@ export class DatasetDmpSelector extends BaseComponent implements OnInit, IBreadC
breadCrumbs: Observable<BreadcrumbItem[]>; breadCrumbs: Observable<BreadcrumbItem[]>;
dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration; dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
@Input() formGroup: FormGroup; @Input() formGroup: FormGroup;
@Input() datasetFormGroup: FormGroup;
@Input() stepper: MatStepper;
formControl: FormControl; formControl: FormControl;
availableProfiles: DatasetProfileModel[] = []; availableProfiles: DatasetProfileModel[] = [];
@ -60,6 +62,12 @@ export class DatasetDmpSelector extends BaseComponent implements OnInit, IBreadC
this.formGroup.get('datasetProfile').reset(); this.formGroup.get('datasetProfile').reset();
} }
}); });
this.formGroup.get('datasetProfile').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => {
(this.datasetFormGroup.get('datasetsList') as FormArray).controls.length = 0;
});
} }
searchDmp(query: string): Observable<DmpListingModel[]> { searchDmp(query: string): Observable<DmpListingModel[]> {
@ -68,10 +76,9 @@ export class DatasetDmpSelector extends BaseComponent implements OnInit, IBreadC
const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, null, { fields: fields }); const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, null, { fields: fields });
dmpDataTableRequest.criteria = new DmpCriteria(); dmpDataTableRequest.criteria = new DmpCriteria();
dmpDataTableRequest.criteria.like = query; dmpDataTableRequest.criteria.like = query;
//const dmpListingModel =
return this.dmpService.getPaged(dmpDataTableRequest, "autocomplete") return this.dmpService.getPaged(dmpDataTableRequest, "autocomplete")
.map(x => x.data); .map(y => y.data);
} }
loadDatasetProfiles() { loadDatasetProfiles() {
@ -83,7 +90,15 @@ export class DatasetDmpSelector extends BaseComponent implements OnInit, IBreadC
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(items => { .subscribe(items => {
this.availableProfiles = items; this.availableProfiles = items;
if (this.availableProfiles.length === 1) {
this.formGroup.get('datasetProfile').patchValue(this.availableProfiles[0]);
this.stepper.next();
}
}); });
} }
} }
datasetChanged($event) {
this.stepper.next();
}
} }