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

Restyles DMP new version page

This commit is contained in:
apapachristou 2019-09-02 11:19:16 +03:00
parent 44edc298d8
commit 286b90d6a7
8 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
View File

@ -6,7 +6,8 @@
<h4 class="card-title">{{ formGroup.get('label').value }}</h4> <h4 class="card-title">{{ formGroup.get('label').value }}</h4>
</div> </div>
<div class="d-flex ml-auto p-2"> <div class="d-flex ml-auto p-2">
<span class="clone-mode">{{ 'DMP-LISTING.ACTIONS.CLONE' | translate}}</span> &nbsp; <span *ngIf="!isNewVersion" class="clone-mode">{{ 'DMP-LISTING.ACTIONS.CLONE' | translate}}</span> &nbsp;
<span *ngIf="isNewVersion" class="clone-mode">{{ 'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}</span> &nbsp;
<span class="clone-mode-text"> {{ 'GENERAL.PREPOSITIONS.OF' | translate}} {{ parentDmpLabel }}</span> <span class="clone-mode-text"> {{ 'GENERAL.PREPOSITIONS.OF' | translate}} {{ parentDmpLabel }}</span>
</div> </div>
</div> </div>
@ -18,14 +19,14 @@
<i class="material-icons-outlined mr-2">view_agenda</i> <i class="material-icons-outlined mr-2">view_agenda</i>
{{ 'SIDE-BAR.GENERAL' | translate }} {{ 'SIDE-BAR.GENERAL' | translate }}
</ng-template> </ng-template>
<app-general-tab [formGroup]="formGroup"></app-general-tab> <app-general-tab [formGroup]="formGroup" [isNewVersion]="isNewVersion"></app-general-tab>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon class="mr-2">work_outline</mat-icon> <mat-icon class="mr-2">work_outline</mat-icon>
{{ 'DMP-LISTING.COLUMNS.GRANT' | translate }} {{ 'DMP-LISTING.COLUMNS.GRANT' | translate }}
</ng-template> </ng-template>
<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized"></app-grant-tab> <app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized" [isNewVersion]="isNewVersion"></app-grant-tab>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>

11
dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts
View File

@ -30,6 +30,7 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
isPublic: false; isPublic: false;
selectedTab = 0; selectedTab = 0;
parentDmpLabel: string; parentDmpLabel: string;
isNewVersion: boolean = false;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
@ -57,6 +58,16 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
this.formGroup = this.dmp.buildForm(); this.formGroup = this.dmp.buildForm();
this.parentDmpLabel = this.formGroup.get('label').value; this.parentDmpLabel = this.formGroup.get('label').value;
if (this.route.routeConfig.path.startsWith('new_version/')) {
this.formGroup.get('version').setValue(this.formGroup.get('version').value + 1);
this.formGroup.controls['label'].disable();
this.formGroup.controls['grant'].disable();
this.isNewVersion = true;
} else if (this.route.routeConfig.path.startsWith('clone/')) {
this.formGroup.get('label').setValue(this.dmp.label + " New");
this.isNewVersion = false;
}
const breadCrumbs = []; const breadCrumbs = [];
breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/plans" }); 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 }); breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/plans/clone/' + this.dmp.id });

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

@ -66,7 +66,8 @@ const routes: Routes = [
}, },
{ {
path: 'new_version/:id', path: 'new_version/:id',
component: DmpWizardComponent, // component: DmpWizardComponent,
component: DmpCloneComponent,
data: { data: {
clone: false, clone: false,
breadcrumb: true breadcrumb: true

49
dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html
View File

@ -3,8 +3,7 @@
<div class="col-9 pt-4 pb-4 pl-4"> <div class="col-9 pt-4 pb-4 pl-4">
<div class="row pt-2"> <div class="row pt-2">
<mat-form-field class="col-8"> <mat-form-field class="col-8">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" <input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error> {{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')"> <mat-error *ngIf="formGroup.get('label').hasError('required')">
@ -14,8 +13,7 @@
<div class="row pt-2"> <div class="row pt-2">
<mat-form-field class="col-8"> <mat-form-field class="col-8">
<!-- <textarea matInput class="description-area" --> <!-- <textarea matInput class="description-area" -->
<textarea rows="3" matInput class="description-area" <textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea> </textarea>
<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')"> <!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
{{formGroup.get('description').getError('backendError').message}} {{formGroup.get('description').getError('backendError').message}}
@ -27,16 +25,13 @@
</div> </div>
<div class="row pt-2"> <div class="row pt-2">
<mat-form-field class="col-8"> <mat-form-field class="col-8">
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" <app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}"
[configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')"> <mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
{{formGroup.get('profiles').getError('backendError').message}}</mat-error> {{formGroup.get('profiles').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('profiles').hasError('required')"> <mat-error *ngIf="formGroup.get('profiles').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled" <button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled" (click)="availableProfiles()">
(click)="availableProfiles()">
<mat-icon class="icon-btn">view_list</mat-icon> <mat-icon class="icon-btn">view_list</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
@ -44,9 +39,7 @@
</div> </div>
<div class="row pt-1"> <div class="row pt-1">
<mat-form-field class="col-8"> <mat-form-field class="col-8">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" <app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')"> <mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
{{formGroup.get('organisations').getError('backendError').message}}</mat-error> {{formGroup.get('organisations').getError('backendError').message}}</mat-error>
@ -57,16 +50,13 @@
</div> </div>
<div class="row pt-3"> <div class="row pt-3">
<mat-form-field class="col-8"> <mat-form-field class="col-8">
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" <app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')"> <mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
{{formGroup.get('researchers').getError('backendError').message}}</mat-error> {{formGroup.get('researchers').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('researchers').hasError('required')"> <mat-error *ngIf="formGroup.get('researchers').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" <button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher()">
(click)="addResearcher()">
<mat-icon class="icon-btn">add_circle</mat-icon> <mat-icon class="icon-btn">add_circle</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
@ -74,15 +64,11 @@
</div> </div>
<div class="row pt-2"> <div class="row pt-2">
<mat-form-field class="col-8"> <mat-form-field class="col-8">
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" <app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}" [configuration]="dmpProfileAutoCompleteConfiguration">
placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}"
[configuration]="dmpProfileAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
</mat-form-field> </mat-form-field>
</div> </div>
<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" [formGroup]="formGroup" <app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" [formGroup]="formGroup" [dmpProfileDefinition]="selectedDmpProfileDefinition" [dmpProfileId]="formGroup.get('profile').value.id">
[dmpProfileDefinition]="selectedDmpProfileDefinition"
[dmpProfileId]="formGroup.get('profile').value.id">
</app-dynamic-dmp-field-resolver> </app-dynamic-dmp-field-resolver>
</div> </div>
@ -90,8 +76,7 @@
<div class="col-2"> <div class="col-2">
<div class='row version-menu'> <div class='row version-menu'>
<mat-form-field class="col-auto"> <mat-form-field class="col-auto">
<input matInput placeholder="Version" disabled <input matInput placeholder="Version" disabled [value]="formGroup.get('version').value == undefined ?0 :formGroup.get('version').value">
[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
</mat-form-field> </mat-form-field>
<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12" [formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> --> <!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12" [formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
<div class="col-auto mb-2"> <div class="col-auto mb-2">
@ -99,13 +84,13 @@
</div> </div>
<!-- Versioning Actions --> <!-- Versioning Actions -->
<!-- <div class="col-auto d-flex align-content-center mb-1" style="cursor: pointer;"> <!-- <div class="col-auto d-flex align-content-center mb-1" style="cursor: pointer;">
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
<span>Click here to edit</span> <span>Click here to edit</span>
</div> </div>
<div class="col-auto d-flex align-content-center mb-3" style="cursor: pointer;"> <div class="col-auto d-flex align-content-center mb-3" style="cursor: pointer;">
<mat-icon>history</mat-icon> <mat-icon>history</mat-icon>
Click here to view previous versions Click here to view previous versions
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>

5
dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.ts
View File

@ -29,6 +29,7 @@ import { startWith } from 'rxjs/internal/operators';
export class GeneralTabComponent extends BaseComponent implements OnInit { export class GeneralTabComponent extends BaseComponent implements OnInit {
@Input() formGroup: FormGroup = null; @Input() formGroup: FormGroup = null;
@Input() isNewVersion: boolean;
filteringOrganisationsAsync = false; filteringOrganisationsAsync = false;
filteringResearchersAsync = false; filteringResearchersAsync = false;
@ -59,6 +60,10 @@ export class GeneralTabComponent extends BaseComponent implements OnInit {
if (this.formGroup.get('definition')) { this.selectedDmpProfileDefinition = this.formGroup.get('definition').value; } if (this.formGroup.get('definition')) { this.selectedDmpProfileDefinition = this.formGroup.get('definition').value; }
this.registerFormEventsForDmpProfile(); this.registerFormEventsForDmpProfile();
if (this.isNewVersion) {
this.formGroup.get('label').disable();
}
this.dmpProfileAutoCompleteConfiguration = { this.dmpProfileAutoCompleteConfiguration = {
filterFn: this.dmpProfileSearch.bind(this), filterFn: this.dmpProfileSearch.bind(this),
initialItems: (extraData) => this.dmpProfileSearch(''), initialItems: (extraData) => this.dmpProfileSearch(''),

4
dmp-frontend/src/app/ui/dmp/editor/grant-tab/grant-tab.component.html
View File

@ -66,11 +66,11 @@
<!-- Toggle Between Add Grant or Use Existing --> <!-- Toggle Between Add Grant or Use Existing -->
<div class="col d-flex"> <div class="col d-flex">
<div class="row" *ngIf="!isFinalized"> <div class="row" *ngIf="!isFinalized">
<div class="col-12 add-entity" *ngIf="isCreateNew" (click)="create()"> <div class="col-12 add-entity" *ngIf="isCreateNew" (click)="createGrant()">
<mat-icon>settings_backup_restore</mat-icon> <mat-icon>settings_backup_restore</mat-icon>
<span>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</span> <span>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</span>
</div> </div>
<div class="col-12 add-entity" *ngIf="!isCreateNew" (click)="create()"> <div class="col-12" [ngClass]="isNewVersion?'disabled-toggle':'add-entity'" *ngIf="!isCreateNew" (click)="createGrant()">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
<span>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW-GRANT' | translate}}</span> <span>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW-GRANT' | translate}}</span>
</div> </div>

8
dmp-frontend/src/app/ui/dmp/editor/grant-tab/grant-tab.component.scss
View File

@ -25,3 +25,11 @@
width: 100%; width: 100%;
left: 0; left: 0;
} }
.disabled-toggle {
display: flex;
align-self: center;
padding-bottom: 1em;
cursor: default;
color: #e0e0e0;
}

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

@ -23,6 +23,8 @@ export class GrantTabComponent implements OnInit {
@Input() projectFormGroup: FormGroup; @Input() projectFormGroup: FormGroup;
@Input() funderFormGroup: FormGroup; @Input() funderFormGroup: FormGroup;
@Input() isFinalized: boolean; @Input() isFinalized: boolean;
@Input() isNewVersion: boolean;
isCreateNew = false; isCreateNew = false;
isCreateNewProject = false; isCreateNewProject = false;
isCreateNewFunder = false; isCreateNewFunder = false;
@ -101,7 +103,8 @@ export class GrantTabComponent implements OnInit {
return this.funderService.getWithExternal(funderRequestItem) return this.funderService.getWithExternal(funderRequestItem)
} }
create() { createGrant() {
if (this.isNewVersion) { return };
this.isCreateNew = !this.isCreateNew; this.isCreateNew = !this.isCreateNew;
this.setValidators(); this.setValidators();
} }
@ -126,6 +129,9 @@ export class GrantTabComponent implements OnInit {
this.grantformGroup.get('label').disable(); this.grantformGroup.get('label').disable();
this.grantformGroup.get('description').disable(); this.grantformGroup.get('description').disable();
} }
if (this.isNewVersion) {
this.grantformGroup.get('label').disable();
}
else { else {
this.grantformGroup.get('existGrant').enable(); this.grantformGroup.get('existGrant').enable();
this.grantformGroup.get('label').disable(); this.grantformGroup.get('label').disable();