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

Restyles clone DMP page and adds funder and project fields on tab grant

This commit is contained in:
apapachristou 2019-08-30 16:02:02 +03:00
parent 8ebe2961b7
commit a9a39db622
11 changed files with 239 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html Normal file
View File

@ -0,0 +1,58 @@
<div class="main-content">
<div class="container-fluid">
<div *ngIf="dmp" class="card">
<div class="card-header card-header-plain d-flex">
<div class="card-desc clone-dmp d-flex flex-column justify-content-center">
<h4 class="card-title">{{ formGroup.get('label').value }}</h4>
</div>
<div class="d-flex ml-auto p-2">
<span class="clone-mode">{{ 'DMP-LISTING.ACTIONS.CLONE' | translate}}</span> &nbsp;
<span class="clone-mode-text"> {{ 'GENERAL.PREPOSITIONS.OF' | translate}} {{ parentDmpLabel }}</span>
</div>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<div class="d-flex flex-column">
<mat-tab-group [(selectedIndex)]="selectedTab" class="mt-3">
<mat-tab>
<ng-template mat-tab-label>
<i class="material-icons-outlined mr-2">view_agenda</i>
{{ 'SIDE-BAR.GENERAL' | translate }}
</ng-template>
<app-general-tab [formGroup]="formGroup"></app-general-tab>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-2">work_outline</mat-icon>
{{ 'DMP-LISTING.COLUMNS.GRANT' | translate }}
</ng-template>
<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized"></app-grant-tab>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="mr-2">library_books</mat-icon>
{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
</ng-template>
<app-dmp-wizard-dataset-listing-component *ngIf="formGroup" [formGroup]="formGroup" [dmpId]="formGroup.get('id').value"></app-dmp-wizard-dataset-listing-component>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label></ng-template>
</mat-tab>
</mat-tab-group>
<div class="d-flex justify-content-end pt-2 pb-4 pl-2 pr-2">
<div>
<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button" class="text-uppercase mr-2">
{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
</button>
</div>
<div *ngIf="formGroup.enabled">
<button mat-raised-button type="button" (click)="formSubmit()" [disabled]="!isFormValid()" class="text-uppercase dark-theme mr-2" color="primary">
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

41
dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.scss Normal file
View File

@ -0,0 +1,41 @@
.menu-item {
width: 248px;
}
.more-horiz {
font-size: 28px;
color: #aaaaaa;
}
.clone-dmp {
height: 3.5em;
}
.clone-mode {
// line-height: 2em;
text-transform: uppercase;
color: #4687e6;
font-weight: 400;
align-self: center;
}
.clone-mode-text {
color: black;
align-self: center;
}
.more-icon :hover {
color: #4687e6;
}
::ng-deep .mat-tab-labels {
justify-content: space-between;
}
::ng-deep .mat-tab-label-content {
text-transform: uppercase;
}
::ng-deep .mat-ink-bar {
background-color: #0070c0 !important;
}

105
dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts Normal file
View File

@ -0,0 +1,105 @@
import { Component, OnInit } from '@angular/core';
import { DmpWizardEditorModel } from '../wizard/dmp-wizard-editor.model';
import { FormGroup } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../core/common/base/base.component';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { DmpModel } from '../../../core/model/dmp/dmp';
import { TranslateService } from '@ngx-translate/core';
import { DmpService } from '../../../core/services/dmp/dmp.service';
import { Observable } from 'rxjs';
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { UiNotificationService, SnackBarNotificationLevel } from '../../../core/services/notification/ui-notification-service';
import { FunderFormModel } from '../editor/grant-tab/funder-form-model';
import { ProjectFormModel } from '../editor/grant-tab/project-form-model';
import { GrantTabModel } from '../editor/grant-tab/grant-tab-model';
@Component({
selector: 'app-dmp-clone',
templateUrl: './dmp-clone.component.html',
styleUrls: ['./dmp-clone.component.scss']
})
export class DmpCloneComponent extends BaseComponent implements OnInit {
breadCrumbs: Observable<BreadcrumbItem[]>;
dmp: DmpWizardEditorModel;
formGroup: FormGroup;
itemId: string;
isFinalized: false;
isPublic: false;
selectedTab = 0;
parentDmpLabel: string;
constructor(
private route: ActivatedRoute,
private router: Router,
private language: TranslateService,
private dmpService: DmpService,
private uiNotificationService: UiNotificationService
) {
super();
}
ngOnInit() {
this.route.params
.pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => {
this.itemId = params['id'];
this.dmpService.getSingle(this.itemId).map(data => data as DmpModel)
.pipe(takeUntil(this._destroyed))
.subscribe(data => {
this.dmp = new DmpWizardEditorModel();
this.dmp.grant = new GrantTabModel();
this.dmp.project = new ProjectFormModel();
this.dmp.funder = new FunderFormModel();
this.dmp.fromModel(data);
this.formGroup = this.dmp.buildForm();
this.parentDmpLabel = this.formGroup.get('label').value;
const breadCrumbs = [];
breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/plans" });
breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/plans/clone/' + this.dmp.id });
this.breadCrumbs = Observable.of(breadCrumbs);
});
});
}
public cancel(id: String): void {
if (id != null) {
this.router.navigate(['/plans/overview/' + id]);
} else {
this.router.navigate(['/plans']);
}
}
public isFormValid(): boolean {
return this.formGroup.valid;
}
formSubmit(): void {
if (!this.isFormValid()) { return; }
this.dmpService.clone(this.formGroup.getRawValue(), this.itemId)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
);
}
onCallbackSuccess(): void {
this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.router.navigate(['/plans']);
}
onCallbackError(error: any) {
this.setErrorModel(error.error);
}
public setErrorModel(validationErrorModel: ValidationErrorModel) {
Object.keys(validationErrorModel).forEach(item => {
(<any>this.dmp.validationErrorModel)[item] = (<any>validationErrorModel)[item];
});
}
}

4
dmp-frontend/src/app/ui/dmp/dmp.module.ts
View File

@ -28,6 +28,7 @@ import { PeopleTabComponent } from './editor/people-tab/people-tab.component';
import { GrantTabComponent } from './editor/grant-tab/grant-tab.component';
import { DatasetsTabComponent } from './editor/datasets-tab/datasets-tab.component';
import { DmpOverviewModule } from './overview/dmp-overview.module';
import { DmpCloneComponent } from './clone/dmp-clone.component';
@NgModule({
imports: [
@ -61,7 +62,8 @@ import { DmpOverviewModule } from './overview/dmp-overview.module';
GeneralTabComponent,
PeopleTabComponent,
GrantTabComponent,
DatasetsTabComponent
DatasetsTabComponent,
DmpCloneComponent
],
entryComponents: [
DmpInvitationDialogComponent,

3
dmp-frontend/src/app/ui/dmp/dmp.routing.ts
View File

@ -5,6 +5,7 @@ import { InvitationAcceptedComponent } from './invitation/accepted/dmp-invitatio
import { DmpListingComponent } from './listing/dmp-listing.component';
import { DmpWizardComponent } from './wizard/dmp-wizard.component';
import { DmpOverviewComponent } from './overview/dmp-overview.component';
import { DmpCloneComponent } from './clone/dmp-clone.component';
const routes: Routes = [
{
@ -73,7 +74,7 @@ const routes: Routes = [
},
{
path: 'clone/:id',
component: DmpWizardComponent,
component: DmpCloneComponent,
data: {
clone: false,
breadcrumb: true

2
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
View File

@ -49,7 +49,7 @@
<mat-icon class="mr-2">work_outline</mat-icon>
{{ 'DMP-LISTING.COLUMNS.GRANT' | translate }}
</ng-template>
<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isNew]="isNew" [isFinalized]="isFinalized"></app-grant-tab>
<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized"></app-grant-tab>
</mat-tab>
<mat-tab *ngIf="!isNew">
<ng-template mat-tab-label>

1
dmp-frontend/src/app/ui/dmp/editor/grant-tab/grant-tab.component.ts
View File

@ -21,7 +21,6 @@ export class GrantTabComponent implements OnInit {
@Input() grantformGroup: FormGroup;
@Input() projectFormGroup: FormGroup;
@Input() funderFormGroup: FormGroup;
@Input() isNew: boolean;
@Input() isFinalized: boolean;
isCreateNew = false;
isCreateNewProject = false;

18
dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard-editor.model.ts
View File

@ -12,6 +12,9 @@ import { GrantListingModel } from "../../../core/model/grant/grant-listing";
import { ResearcherModel } from "../../../core/model/researcher/researcher";
import { UserModel } from "../../../core/model/user/user";
import { ValidJsonValidator } from "../../../library/auto-complete/auto-complete-custom-validator";
import { FunderFormModel } from "../editor/grant-tab/funder-form-model";
import { ProjectFormModel } from "../editor/grant-tab/project-form-model";
import { GrantTabModel } from "../editor/grant-tab/grant-tab-model";
export class DmpWizardEditorModel {
public id: string;
@ -23,7 +26,9 @@ export class DmpWizardEditorModel {
public creator: UserModel;
public status: Status = Status.Active;
public description: String;
public grant: GrantListingModel;
public grant: GrantTabModel;
public funder: FunderFormModel;
public project: ProjectFormModel;
public organisations: OrganizationModel[] = [];
public researchers: ResearcherModel[] = [];
public profiles: DmpProfile[] = [];
@ -41,7 +46,9 @@ export class DmpWizardEditorModel {
this.status = item.status;
this.lockable = item.lockable;
this.description = item.description;
this.grant = item.grant;
this.grant.fromModel(item.grant);
this.project.fromModel(item.project);
this.funder.fromModel(item.funder);
this.organisations = item.organisations;
this.researchers = item.researchers;
this.profiles = item.profiles;
@ -63,7 +70,10 @@ export class DmpWizardEditorModel {
version: [{ value: this.version, disabled: disabled }, context.getValidation('version').validators],
status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators],
description: [{ value: this.description, disabled: disabled }],
grant: [{ value: this.grant, disabled: disabled }, context.getValidation('grant').validators],
// grant: [{ value: this.grant, disabled: disabled }, context.getValidation('grant').validators],
grant: this.grant.buildForm(),
project: this.project.buildForm(),
funder: this.funder.buildForm(),
organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('organisations').validators],
researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
profiles: [{ value: this.profiles, disabled: disabled }, context.getValidation('profiles').validators],
@ -88,6 +98,8 @@ export class DmpWizardEditorModel {
baseContext.validation.push({ key: 'status', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'status')] });
baseContext.validation.push({ key: 'description', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'description')] });
baseContext.validation.push({ key: 'grant', validators: [Validators.required, ValidJsonValidator, BackendErrorValidator(this.validationErrorModel, 'grant')] });
baseContext.validation.push({ key: 'project', validators: [BackendErrorValidator(this.validationErrorModel, 'project')] });
baseContext.validation.push({ key: 'funder', validators: [BackendErrorValidator(this.validationErrorModel, 'funder')] });
baseContext.validation.push({ key: 'organisations', validators: [BackendErrorValidator(this.validationErrorModel, 'organisations')] });
baseContext.validation.push({ key: 'researchers', validators: [BackendErrorValidator(this.validationErrorModel, 'researchers')] });
baseContext.validation.push({ key: 'profiles', validators: [Validators.required, ValidJsonValidator, BackendErrorValidator(this.validationErrorModel, 'profiles')] });

9
dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard.component.ts
View File

@ -14,6 +14,9 @@ import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCru
import { DmpWizardEditorModel } from './dmp-wizard-editor.model';
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
import { HttpErrorResponse } from '@angular/common/http';
import { GrantTabModel } from '../editor/grant-tab/grant-tab-model';
import { ProjectFormModel } from '../editor/grant-tab/project-form-model';
import { FunderFormModel } from '../editor/grant-tab/funder-form-model';
@Component({
selector: 'app-dmp-wizard-component',
@ -46,7 +49,11 @@ export class DmpWizardComponent extends BaseComponent implements OnInit, IBreadC
this.dmpService.getSingle(this.itemId).map(data => data as DmpModel)
.pipe(takeUntil(this._destroyed))
.subscribe(data => {
this.dmp = new DmpWizardEditorModel().fromModel(data);
this.dmp = new DmpWizardEditorModel();
this.dmp.grant = new GrantTabModel();
this.dmp.project = new ProjectFormModel();
this.dmp.funder = new FunderFormModel();
this.dmp.fromModel(data);
this.formGroup = this.dmp.buildForm();
if (this.route.routeConfig.path.startsWith('new_version/')) {

4
dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container-fluid">
<h3>{{'DATASET-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
<h5 mat-subheader>{{'DATASET-LISTING.SELECT-DATASETS-TO-CLONE' | translate}} {{titlePrefix}}</h5>
<mat-card class="mat-card">
<mat-selection-list #selectedItems (selectionChange)="selectionChanged($event,selectedItems)">
<mat-list-option *ngFor="let dataset of datasets;" [value]="dataset.id" >
@ -7,4 +7,4 @@
</mat-list-option>
</mat-selection-list>
</mat-card>
</div>
</div>

4
dmp-frontend/src/assets/i18n/en.json
View File

@ -52,6 +52,9 @@
"VIEW-ALL": "View All",
"SHOW-MORE": "Show more",
"LOG-IN": "Log in"
},
"PREPOSITIONS": {
"OF": "of"
}
},
"EMAIL-CONFIRMATION": {
@ -404,6 +407,7 @@
},
"DATASET-LISTING": {
"TITLE": "Dataset Descriptions",
"SELECT-DATASETS-TO-CLONE": "Select which datasets to include in the new DMP. Selected datasets will be editable.",
"COLUMNS": {
"NAME": "Name",
"REFERNCE": "Reference",