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 16:59:35 +02:00
commit 443f010335
10 changed files with 66 additions and 54 deletions

View File

@ -55,13 +55,13 @@ export class DatasetProfileCriteriaComponent extends BaseCriteriaComponent imple
message: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-TITLE'), message: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-TITLE'),
confirmButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML'), confirmButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML'),
cancelButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-CANCEL'), cancelButton: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
name: this.language.instant('DATASET-WIZARD.UPLOAD.UPLOAD-XML-NAME'), name: "",
file: FileList, file: FileList,
sucsess: false sucsess: false
} }
}); });
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => { dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
if (data.sucsess && data.name != null && data.file != null) { if (data && data.sucsess && data.name != null && data.file != null) {
this.datasetService.uploadFile(data.file, data.name) this.datasetService.uploadFile(data.file, data.name)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(); .subscribe();

View File

@ -5,19 +5,21 @@
</div> </div>
<div class="col-auto"> <div class="col-auto">
<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" /> <input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
<button mat-raised-button class="col-auto" color="{{btnColore}}" (click)="imgFileInput.click()" <button mat-icon-button class="col-auto" (click)="imgFileInput.click()" type="button">
type="button"><mat-icon>attach_file</mat-icon></button> <mat-icon color="{{btnColore}}">attach_file</mat-icon>
</button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<mat-form-field class="col-12"> <mat-form-field class="col-12">
<input matInput placeholder="{{'DATASET-WIZARD.UPLOAD.UPLOAD-XML-NAME'| translate}}" <input matInput placeholder="{{'DATASET-WIZARD.UPLOAD.UPLOAD-XML-NAME'| translate}}" name="datasetProfileName" [(ngModel)]="data.name">
name="datasetProfileName" [(ngModel)]="data.name">
</mat-form-field> </mat-form-field>
<div class="col-auto"><button mat-raised-button color="primary" type="button" <div class="col-auto">
(click)="cancel()">{{ data.cancelButton }}</button></div> <button mat-raised-button color="primary" type="button" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col"></div> <div class="col"></div>
<div class="col-auto"><button mat-raised-button color="primary" type="button" <div class="col-auto">
(click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button></div> <button mat-raised-button color="primary" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
</div>
</div> </div>
</div> </div>

View File

@ -1,23 +1,25 @@
<div class="confirmation-dialog"> <div class="confirmation-dialog">
<div class="row"> <div class="row">
<div class="confirmation-message col"> <div class="confirmation-message col-auto align-self-center">
<h4>{{ data.message }}</h4> <h4>{{ data.message }}</h4>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" /> <input class="hidden" type="file" #imgFileInput (change)="selectXML($event)" accept="text/xml" />
<button mat-raised-button class="col-auto" color="{{btnColore}}" (click)="imgFileInput.click()" <button mat-icon-button class="col-auto" (click)="imgFileInput.click()" type="button">
type="button">{{ 'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-IMPORT' | translate }}</button> <mat-icon color="{{btnColore}}">attach_file</mat-icon>
</button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<mat-form-field class="col-12"> <mat-form-field class="col-12">
<input matInput placeholder="{{'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-NAME'| translate}}" <input matInput placeholder="{{'DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-NAME'| translate}}" name="datasetProfileName" [(ngModel)]="data.name">
name="datasetProfileName" [(ngModel)]="data.name">
</mat-form-field> </mat-form-field>
<div class="col-auto"><button mat-raised-button color="primary" type="button" <div class="col-auto">
(click)="cancel()">{{ data.cancelButton }}</button></div> <button mat-raised-button color="primary" type="button" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col"></div> <div class="col"></div>
<div class="col-auto"><button mat-raised-button color="primary" type="button" <div class="col-auto">
(click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button></div> <button mat-raised-button color="primary" type="button" (click)="confirm()" [disabled]="!hasProfile()">{{ data.confirmButton }}</button>
</div>
</div> </div>
</div> </div>

View File

@ -59,13 +59,13 @@ export class DmpProfileCriteriaComponent extends BaseCriteriaComponent implement
message: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'), message: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-TITLE'),
confirmButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'), confirmButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML'),
cancelButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-CANCEL'), cancelButton: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-FILE-CANCEL'),
name: this.language.instant('DMP-PROFILE-LISTING.UPLOAD.UPLOAD-XML-NAME'), name: '',
file: FileList, file: FileList,
sucsess: false sucsess: false
} }
}); });
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => { dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
if (data.sucsess && data.name != null && data.file != null) { if (data && data.sucsess && data.name != null && data.file != null) {
this.dmpProfileService.uploadFile(data.file, data.name) this.dmpProfileService.uploadFile(data.file, data.name)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(); .subscribe();

View File

@ -5,7 +5,6 @@ import { QuickWizardCreateAdd } from './quick-wizard-create-add/quick-wizard-cre
const routes: Routes = [ const routes: Routes = [
{ path: '', component: DashboardComponent }, { path: '', component: DashboardComponent },
{ path: 'create-add', component: QuickWizardCreateAdd }
]; ];
@NgModule({ @NgModule({

View File

@ -1,25 +1,29 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import { MatStepper } from '@angular/material'; import { MatStepper } from '@angular/material';
import { Router } from '@angular/router/src/router'; import { Router } from '@angular/router';
import { BaseComponent } from '../../core/common/base/base.component'; import { BaseComponent } from '../../core/common/base/base.component';
import { QuickWizardService } from '../../core/services/quick-wizard/quick-wizard.service'; import { QuickWizardService } from '../../core/services/quick-wizard/quick-wizard.service';
import { DatasetCreateWizardModel } from './dataset-create-wizard.model'; import { DatasetCreateWizardModel } from './dataset-create-wizard.model';
import { IBreadCrumbComponent } from '../misc/breadcrumb/definition/IBreadCrumbComponent';
import { Observable } from 'rxjs';
import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item';
@Component({ @Component({
selector: 'dataset-create-wizard.component', selector: 'dataset-create-wizard.component',
templateUrl: 'dataset-create-wizard.component.html', templateUrl: 'dataset-create-wizard.component.html',
styleUrls: ['./dataset-create-wizard.component.scss'], styleUrls: ['./dataset-create-wizard.component.scss'],
}) })
export class DatasetCreateWizard extends BaseComponent implements OnInit { export class DatasetCreateWizard extends BaseComponent implements OnInit, IBreadCrumbComponent {
breadCrumbs: Observable<BreadcrumbItem[]>;
isLinear = false; isLinear = false;
formGroup: FormGroup; formGroup: FormGroup;
router: Router;
datasetCreateWizardModel: DatasetCreateWizardModel; datasetCreateWizardModel: DatasetCreateWizardModel;
@ViewChild('stepper') stepper: MatStepper; @ViewChild('stepper') stepper: MatStepper;
constructor( constructor(
private router: Router,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
public quickWizardService: QuickWizardService, public quickWizardService: QuickWizardService,
) { ) {
@ -29,6 +33,13 @@ export class DatasetCreateWizard extends BaseComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.datasetCreateWizardModel = new DatasetCreateWizardModel(); this.datasetCreateWizardModel = new DatasetCreateWizardModel();
this.formGroup = this.datasetCreateWizardModel.buildForm(); this.formGroup = this.datasetCreateWizardModel.buildForm();
this.breadCrumbs = Observable.of([
{
parentComponentName: 'Dashboard',
label: 'Quick Add Dataset',
url: '/datasetcreatewizard'
}]
);
} }
save() { save() {
@ -38,7 +49,7 @@ export class DatasetCreateWizard extends BaseComponent implements OnInit {
submit() { submit() {
this.quickWizardService.createQuickDatasetWizard(this.formGroup.value) this.quickWizardService.createQuickDatasetWizard(this.formGroup.value)
.subscribe(data => { .subscribe(data => {
this.router.navigateByUrl('/create-add'); this.router.navigateByUrl('/home');
}) })
} }

View File

@ -5,8 +5,8 @@
<h4>{{'CRITERIA.FILTERS'| translate}}</h4> <h4>{{'CRITERIA.FILTERS'| translate}}</h4>
</mat-card-title> </mat-card-title>
<div class="col"></div> <div class="col"></div>
<button class="uploadButton" mat-raised-button color="primary" (click)="fileSave($event)" type="button col-auto"> <button class="importButton" mat-raised-button color="primary" (click)="fileSave($event)" type="button col-auto">
{{'DMP-UPLOAD.UPLOAD-BUTTON' | translate}} {{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}
</button> </button>
</mat-card-header> </mat-card-header>
<div class="row"> <div class="row">

View File

@ -1,21 +1,19 @@
<div class="confirmation-dialog"> <div class="confirmation-dialog">
<div class="confirmation-message">
<div class="row"> <div class="row">
<div class="col-auto align-self-center">
<h4>{{'DMP-UPLOAD.TITLE' | translate}}</h4>
</div>
<div class="col-auto"> <div class="col-auto">
{{'DMP-UPLOAD.TITLE' | translate}} <button mat-icon-button class="col-auto" (click)="fileInput.click()" type="button">
</div> <mat-icon color="primary">attach_file</mat-icon>
<div class="uploadButton">
<button mat-raised-button color="primary" (click)="fileInput.click()" type="button col-auto">
{{'DMP-UPLOAD.UPLOAD-BUTTON' | translate}}
</button> </button>
<input class="hidden" #fileInput type="file" (change)="uploadFile($event)"> <input class="hidden" #fileInput type="file" (change)="uploadFile($event)" accept="text/xml">
</div> </div>
</div> </div>
</div> <div class="row">
<mat-form-field class="col"> <mat-form-field class="col-12">
<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="DMP Name" name="uploadFileInput"> <input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="DMP Name" name="uploadFileInput">
</mat-form-field> </mat-form-field>
<div class="row">
<div class="col-auto"> <div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button> <button mat-raised-button color="primary" type="button" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div> </div>

View File

@ -52,7 +52,7 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
this.breadCrumbs = Observable.of([ this.breadCrumbs = Observable.of([
{ {
parentComponentName: 'Dashboard', parentComponentName: 'Dashboard',
label: 'QuickCreate', label: 'Quick Create DMP',
url: '/quick-wizard' url: '/quick-wizard'
}] }]
); );
@ -112,7 +112,7 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
onCallbackSuccess(): void { onCallbackSuccess(): void {
this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success); this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.router.navigate(['/home/create-add']); this.router.navigate(['/home']);
} }
onCallbackError(errorResponse: any) { onCallbackError(errorResponse: any) {

View File

@ -216,7 +216,7 @@
} }
}, },
"DMP-UPLOAD": { "DMP-UPLOAD": {
"TITLE": "Upload Data Managment Plan via XML", "TITLE": "Import Data Managment Plan",
"UPLOAD-BUTTON": "Upload", "UPLOAD-BUTTON": "Upload",
"ACTIONS": { "ACTIONS": {
"IMPORT": "Import", "IMPORT": "Import",
@ -256,7 +256,7 @@
}, },
"UPLOAD": { "UPLOAD": {
"UPLOAD-XML": "Import", "UPLOAD-XML": "Import",
"UPLOAD-XML-FILE-TITLE": "Select Xml file with Dataset Profile to Upload", "UPLOAD-XML-FILE-TITLE": "Import Dataset Profile",
"UPLOAD-XML-NAME": "Name Of Dataset Profile", "UPLOAD-XML-NAME": "Name Of Dataset Profile",
"UPLOAD-XML-IMPORT": "File", "UPLOAD-XML-IMPORT": "File",
"UPLOAD-XML-FILE-CANCEL": "Cancel" "UPLOAD-XML-FILE-CANCEL": "Cancel"
@ -387,7 +387,7 @@
}, },
"UPLOAD": { "UPLOAD": {
"UPLOAD-XML": "Import", "UPLOAD-XML": "Import",
"UPLOAD-XML-FILE-TITLE": "Select Xml file with Dmp Profile to Upload", "UPLOAD-XML-FILE-TITLE": "Import Data Managment Plan Profile",
"UPLOAD-XML-NAME": "Name Of Dmp Profile", "UPLOAD-XML-NAME": "Name Of Dmp Profile",
"UPLOAD-XML-IMPORT": "File", "UPLOAD-XML-IMPORT": "File",
"UPLOAD-XML-FILE-CANCEL": "Cancel" "UPLOAD-XML-FILE-CANCEL": "Cancel"