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>
</div>
<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>
</div>
</div>
@ -18,14 +19,14 @@
<i class="material-icons-outlined mr-2">view_agenda</i>
{{ 'SIDE-BAR.GENERAL' | translate }}
</ng-template>
<app-general-tab [formGroup]="formGroup"></app-general-tab>
<app-general-tab [formGroup]="formGroup" [isNewVersion]="isNewVersion"></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>
<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>
<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;
selectedTab = 0;
parentDmpLabel: string;
isNewVersion: boolean = false;
constructor(
private route: ActivatedRoute,
@ -57,6 +58,16 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
this.formGroup = this.dmp.buildForm();
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 = [];
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 });

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

@ -66,7 +66,8 @@ const routes: Routes = [
},
{
path: 'new_version/:id',
component: DmpWizardComponent,
// component: DmpWizardComponent,
component: DmpCloneComponent,
data: {
clone: false,
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="row pt-2">
<mat-form-field class="col-8">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label"
formControlName="label" required>
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">
@ -14,8 +13,7 @@
<div class="row pt-2">
<mat-form-field class="col-8">
<!-- <textarea matInput class="description-area" -->
<textarea rows="3" matInput class="description-area"
placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea>
<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
{{formGroup.get('description').getError('backendError').message}}
@ -27,16 +25,13 @@
</div>
<div class="row pt-2">
<mat-form-field class="col-8">
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}"
[configuration]="profilesAutoCompleteConfiguration">
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled"
(click)="availableProfiles()">
<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled" (click)="availableProfiles()">
<mat-icon class="icon-btn">view_list</mat-icon>
</button>
</mat-form-field>
@ -44,9 +39,7 @@
</div>
<div class="row pt-1">
<mat-form-field class="col-8">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
[configuration]="organisationsAutoCompleteConfiguration">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
@ -57,16 +50,13 @@
</div>
<div class="row pt-3">
<mat-form-field class="col-8">
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')"
placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
[configuration]="researchersAutoCompleteConfiguration">
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('researchers').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button"
(click)="addResearcher()">
<button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher()">
<mat-icon class="icon-btn">add_circle</mat-icon>
</button>
</mat-form-field>
@ -74,15 +64,11 @@
</div>
<div class="row pt-2">
<mat-form-field class="col-8">
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')"
placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}"
[configuration]="dmpProfileAutoCompleteConfiguration">
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}" [configuration]="dmpProfileAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
</div>
<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" [formGroup]="formGroup"
[dmpProfileDefinition]="selectedDmpProfileDefinition"
[dmpProfileId]="formGroup.get('profile').value.id">
<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" [formGroup]="formGroup" [dmpProfileDefinition]="selectedDmpProfileDefinition" [dmpProfileId]="formGroup.get('profile').value.id">
</app-dynamic-dmp-field-resolver>
</div>
@ -90,8 +76,7 @@
<div class="col-2">
<div class='row version-menu'>
<mat-form-field class="col-auto">
<input matInput placeholder="Version" disabled
[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
<input matInput placeholder="Version" disabled [value]="formGroup.get('version').value == undefined ?0 :formGroup.get('version').value">
</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> -->
<div class="col-auto mb-2">
@ -99,13 +84,13 @@
</div>
<!-- Versioning Actions -->
<!-- <div class="col-auto d-flex align-content-center mb-1" style="cursor: pointer;">
<mat-icon>edit</mat-icon>
<span>Click here to edit</span>
</div>
<div class="col-auto d-flex align-content-center mb-3" style="cursor: pointer;">
<mat-icon>history</mat-icon>
Click here to view previous versions
</div> -->
<mat-icon>edit</mat-icon>
<span>Click here to edit</span>
</div>
<div class="col-auto d-flex align-content-center mb-3" style="cursor: pointer;">
<mat-icon>history</mat-icon>
Click here to view previous versions
</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 {
@Input() formGroup: FormGroup = null;
@Input() isNewVersion: boolean;
filteringOrganisationsAsync = 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; }
this.registerFormEventsForDmpProfile();
if (this.isNewVersion) {
this.formGroup.get('label').disable();
}
this.dmpProfileAutoCompleteConfiguration = {
filterFn: this.dmpProfileSearch.bind(this),
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 -->
<div class="col d-flex">
<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>
<span>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</span>
</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>
<span>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW-GRANT' | translate}}</span>
</div>

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

@ -25,3 +25,11 @@
width: 100%;
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() funderFormGroup: FormGroup;
@Input() isFinalized: boolean;
@Input() isNewVersion: boolean;
isCreateNew = false;
isCreateNewProject = false;
isCreateNewFunder = false;
@ -101,7 +103,8 @@ export class GrantTabComponent implements OnInit {
return this.funderService.getWithExternal(funderRequestItem)
}
create() {
createGrant() {
if (this.isNewVersion) { return };
this.isCreateNew = !this.isCreateNew;
this.setValidators();
}
@ -126,6 +129,9 @@ export class GrantTabComponent implements OnInit {
this.grantformGroup.get('label').disable();
this.grantformGroup.get('description').disable();
}
if (this.isNewVersion) {
this.grantformGroup.get('label').disable();
}
else {
this.grantformGroup.get('existGrant').enable();
this.grantformGroup.get('label').disable();