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

Fixes layout and adds breadcrumb on /plans/clone/:id

This commit is contained in:
apapachristou 2019-06-13 18:27:30 +03:00
parent e77977f604
commit 7940562eeb
4 changed files with 72 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard.component.html
View File

@ -1,19 +1,23 @@
<div class="dmp-wizard"> <div class="main-content">
<mat-horizontal-stepper #stepper> <div class="container-fluid">
<mat-step> <div class="dmp-wizard">
<ng-template matStepLabel>{{'DMP-WIZARD.FIRST-STEP.DMP' | translate}}</ng-template> <mat-horizontal-stepper #stepper>
<app-dmp-wizard-editor-component [formGroup]="formGroup" *ngIf="formGroup"></app-dmp-wizard-editor-component> <mat-step>
<div class="navigation-buttons-container"> <ng-template matStepLabel>{{'DMP-WIZARD.FIRST-STEP.DMP' | translate}}</ng-template>
<button style="float:right;" matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button> <app-dmp-wizard-editor-component [formGroup]="formGroup" *ngIf="formGroup"></app-dmp-wizard-editor-component>
</div> <div class="navigation-buttons-container">
</mat-step> <button style="float:right;" matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
<mat-step> </div>
<ng-template matStepLabel>{{'DMP-WIZARD.FIRST-STEP.DATASETS' | translate}}</ng-template> </mat-step>
<app-dmp-wizard-dataset-listing-component [formGroup]="formGroup" [dmpId]="formGroup.get('id').value" *ngIf="formGroup"></app-dmp-wizard-dataset-listing-component> <mat-step>
<div class="navigation-buttons-container"> <ng-template matStepLabel>{{'DMP-WIZARD.FIRST-STEP.DATASETS' | translate}}</ng-template>
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button> <app-dmp-wizard-dataset-listing-component [formGroup]="formGroup" [dmpId]="formGroup.get('id').value" *ngIf="formGroup"></app-dmp-wizard-dataset-listing-component>
<button style="float:right;" matStepperNext mat-raised-button (click)='submit()' color="primary">{{'DMP-WIZARD.ACTIONS.SAVE' | translate}}</button> <div class="navigation-buttons-container">
</div> <button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
</mat-step> <button style="float:right;" matStepperNext mat-raised-button (click)='submit()' color="primary">{{'DMP-WIZARD.ACTIONS.SAVE' | translate}}</button>
</mat-horizontal-stepper> </div>
</mat-step>
</mat-horizontal-stepper>
</div>
</div>
</div> </div>

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

@ -58,6 +58,11 @@ export class DmpWizardComponent extends BaseComponent implements OnInit, IBreadC
this.formGroup.get('label').setValue(this.dmp.label + " New"); this.formGroup.get('label').setValue(this.dmp.label + " New");
this.isClone = true; this.isClone = true;
} }
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);
console.log(this.breadCrumbs);
}); });
}); });
} }

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

@ -2,8 +2,8 @@
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card> <mat-card>
<mat-card-content> <mat-card-content>
<div class="row"> <div class="d-flex row">
<mat-form-field class="col-md-6"> <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')">
@ -11,7 +11,7 @@
<mat-error *ngIf="formGroup.get('label').hasError('required')"> <mat-error *ngIf="formGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-6"> <mat-form-field class="col-8">
<app-single-auto-complete [formControl]="formGroup.get('project')" <app-single-auto-complete [formControl]="formGroup.get('project')"
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
[configuration]="projectAutoCompleteConfiguration"> [configuration]="projectAutoCompleteConfiguration">
@ -22,7 +22,7 @@
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12"> <mat-form-field class="col-8">
<textarea matInput class="description-area" <textarea matInput class="description-area"
placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"> placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea> </textarea>
@ -31,20 +31,20 @@
<mat-error *ngIf="formGroup.get('description').hasError('required')"> <mat-error *ngIf="formGroup.get('description').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-6"> <mat-form-field class="col-8">
<app-multiple-auto-complete class="col-md-10" [formControl]="formGroup.get('profiles')" <app-multiple-auto-complete [formControl]="formGroup.get('profiles')"
placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}"
[configuration]="profilesAutoCompleteConfiguration"> [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 mat-icon-button matSuffix type="button" (click)="availableProfiles()"> <button matSuffix type="button" class="input-btn" (click)="availableProfiles()">
<mat-icon>view_list</mat-icon> <mat-icon class="icon-btn">view_list</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-6"> <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}}" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
[configuration]="organisationsAutoCompleteConfiguration"> [configuration]="organisationsAutoCompleteConfiguration">
@ -54,7 +54,7 @@
<mat-error *ngIf="formGroup.get('organisations').hasError('required')"> <mat-error *ngIf="formGroup.get('organisations').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-6"> <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}}" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
[configuration]="researchersAutoCompleteConfiguration"> [configuration]="researchersAutoCompleteConfiguration">
@ -63,8 +63,8 @@
{{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 mat-icon-button matSuffix type="button" (click)="addResearcher()"> <button matSuffix type="button" class="input-btn" (click)="addResearcher()">
<mat-icon>add_circle</mat-icon> <mat-icon class="icon-btn">add_circle</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-6"> <mat-form-field class="col-md-6">

56
dmp-frontend/src/app/ui/dmp/wizard/editor/dmp-wizard-editor.component.scss
View File

@ -1,39 +1,47 @@
.full-width { .full-width {
width: 100%; width: 100%;
} }
.input-table { .input-table {
table-layout: fixed; table-layout: fixed;
}
.input-btn {
border: none;
color: #aaaaaa;
background-color: #ffffff00;
cursor: pointer;
}
.input-btn :hover {
color: #4687f0 !important;
} }
.table-card .mat-grid-tile { .table-card .mat-grid-tile {
background: rgba(0, 0, 0, 0.32); background: rgba(0, 0, 0, 0.32);
} }
.data-management-plan-wizard-editor { .data-management-plan-wizard-editor {
.mat-form-field-full-width {
mat-form-field {
width: 100%;
padding: 3px;
}
}
.mat-form-field-full-width{ .mat-card {
mat-form-field { margin: 16px 0;
width: 100%; }
padding: 3px;
}
}
p {
margin: 16px;
}
.mat-card { .left-button {
margin: 16px 0; float: left;
} }
p {
margin: 16px;
}
.left-button {
float: left;
}
.description-area {
height: 100px;
}
.description-area {
height: 100px;
}
} }