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">
<mat-horizontal-stepper #stepper>
<mat-step>
<ng-template matStepLabel>{{'DMP-WIZARD.FIRST-STEP.DMP' | translate}}</ng-template>
<app-dmp-wizard-editor-component [formGroup]="formGroup" *ngIf="formGroup"></app-dmp-wizard-editor-component>
<div class="navigation-buttons-container">
<button style="float:right;" matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{'DMP-WIZARD.FIRST-STEP.DATASETS' | translate}}</ng-template>
<app-dmp-wizard-dataset-listing-component [formGroup]="formGroup" [dmpId]="formGroup.get('id').value" *ngIf="formGroup"></app-dmp-wizard-dataset-listing-component>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button (click)='submit()' color="primary">{{'DMP-WIZARD.ACTIONS.SAVE' | translate}}</button>
</div>
</mat-step>
</mat-horizontal-stepper>
<div class="main-content">
<div class="container-fluid">
<div class="dmp-wizard">
<mat-horizontal-stepper #stepper>
<mat-step>
<ng-template matStepLabel>{{'DMP-WIZARD.FIRST-STEP.DMP' | translate}}</ng-template>
<app-dmp-wizard-editor-component [formGroup]="formGroup" *ngIf="formGroup"></app-dmp-wizard-editor-component>
<div class="navigation-buttons-container">
<button style="float:right;" matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{'DMP-WIZARD.FIRST-STEP.DATASETS' | translate}}</ng-template>
<app-dmp-wizard-dataset-listing-component [formGroup]="formGroup" [dmpId]="formGroup.get('id').value" *ngIf="formGroup"></app-dmp-wizard-dataset-listing-component>
<div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button (click)='submit()' color="primary">{{'DMP-WIZARD.ACTIONS.SAVE' | translate}}</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</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.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">
<mat-card>
<mat-card-content>
<div class="row">
<mat-form-field class="col-md-6">
<div class="d-flex row">
<mat-form-field class="col-8">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label"
formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
@ -11,7 +11,7 @@
<mat-error *ngIf="formGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<mat-form-field class="col-8">
<app-single-auto-complete [formControl]="formGroup.get('project')"
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
[configuration]="projectAutoCompleteConfiguration">
@ -22,7 +22,7 @@
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-12">
<mat-form-field class="col-8">
<textarea matInput class="description-area"
placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea>
@ -31,20 +31,20 @@
<mat-error *ngIf="formGroup.get('description').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<app-multiple-auto-complete class="col-md-10" [formControl]="formGroup.get('profiles')"
placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
<mat-form-field class="col-8">
<app-multiple-auto-complete [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 mat-icon-button matSuffix type="button" (click)="availableProfiles()">
<mat-icon>view_list</mat-icon>
<button matSuffix type="button" class="input-btn" (click)="availableProfiles()">
<mat-icon class="icon-btn">view_list</mat-icon>
</button>
</mat-form-field>
<mat-form-field class="col-md-6">
<mat-form-field class="col-8">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
[configuration]="organisationsAutoCompleteConfiguration">
@ -54,7 +54,7 @@
<mat-error *ngIf="formGroup.get('organisations').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6">
<mat-form-field class="col-8">
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')"
placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
[configuration]="researchersAutoCompleteConfiguration">
@ -63,8 +63,8 @@
{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('researchers').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button mat-icon-button matSuffix type="button" (click)="addResearcher()">
<mat-icon>add_circle</mat-icon>
<button matSuffix type="button" class="input-btn" (click)="addResearcher()">
<mat-icon class="icon-btn">add_circle</mat-icon>
</button>
</mat-form-field>
<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 {
width: 100%;
width: 100%;
}
.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 {
background: rgba(0, 0, 0, 0.32);
background: rgba(0, 0, 0, 0.32);
}
.data-management-plan-wizard-editor {
.mat-form-field-full-width{
mat-form-field {
width: 100%;
padding: 3px;
}
}
.mat-form-field-full-width {
mat-form-field {
width: 100%;
padding: 3px;
}
}
.mat-card {
margin: 16px 0;
}
.mat-card {
margin: 16px 0;
}
p {
margin: 16px;
}
p {
margin: 16px;
}
.left-button {
float: left;
}
.left-button {
float: left;
}
.description-area {
height: 100px;
}
.description-area {
height: 100px;
}
}