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

DMP Editor. Uncompleted guide steps appear with red color when form is invalid and the user attemps to save.

This commit is contained in:
Kristian Ntavidi 2021-03-19 13:30:21 +02:00
parent 97db10be12
commit abaf61cf02
7 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -10,7 +10,7 @@
</mat-chip>
</ng-container>
</mat-chip-list>
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
<input matInput #autocompleteInput class="col" [class.hide-placeholder]="hidePlaceholder" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> -->
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>

21
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
View File

@ -44,3 +44,24 @@
max-height: 4.8em !important;
overflow: auto !important;
}
.hide-placeholder{
&::-webkit-input-placeholder {
/* WebKit browsers */
color: transparent;
}
&:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: transparent;
}
&::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: transparent;
}
&:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: transparent;
}
&::placeholder {
color: transparent;
}
}

1
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
View File

@ -66,6 +66,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
get shouldLabelFloat() { return this.focused || !this.empty; }
@Input() hidePlaceholder: boolean = false;
@Input()
get placeholder() { return this._placeholder; }
set placeholder(placeholder) {

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

@ -619,7 +619,10 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
if(aControl.errors){
//check if has placeholder
if( (<any>aControl).nativeElement !== undefined && (<any>aControl).nativeElement !== null){
controlName = this._getPlaceHolder(aControl);
const placeholder = this._getPlaceHolder(aControl);
if(placeholder){
controlName = placeholder;
}
}
const errorMessage = this._getErrorMessage(aControl, controlName);

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

@ -14,7 +14,7 @@
<div class="profile-form">
<mat-form-field>
<mat-label>{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}</mat-label>
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)">
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('profiles')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)" (optionActionClicked)="onPreviewTemplate($event)">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
{{formGroup.get('profiles').getError('backendError').message}}</mat-error>

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

@ -33,17 +33,17 @@
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options" id="stepper-options">
<ol class="stepper-list">
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
<li (click)="changeStep(0)" *ngIf="formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</li>
<li (click)="changeStep(0)" *ngIf="formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</li>
<li (click)="changeStep(0)" *ngIf="formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
<li (click)="changeStep(1)" *ngIf="!fundingInfoValid()" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (2)</li>
<li (click)="changeStep(1)" *ngIf="!fundingInfoValid()" [ngClass]="{'active': this.step === 1, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (2)</li>
<li (click)="changeStep(1)" *ngIf="fundingInfoValid()" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}}</li>
<li (click)="changeStep(3)" *ngIf="!datasetInfoValid()" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}} (1)</li>
<li (click)="changeStep(3)" *ngIf="!datasetInfoValid()" [ngClass]="{'active': this.step === 3, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}} (1)</li>
<li (click)="changeStep(3)" *ngIf="datasetInfoValid()" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
<!-- <li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}"> -->

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

@ -99,6 +99,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
maxStep: number = 4;
scrollTop: number;
hintErrors:boolean = false;
constructor(
private dmpProfileService: DmpProfileService,
@ -412,6 +413,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
// console.log("update ", this.formGroup);
if (!this.isFormValid()) {
this.showValidationErrorsDialog();
this.hintErrors = true;
return;
}
this.onSubmit(addNew, showAddDatasetDialog);
@ -815,7 +817,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
if(aControl.errors){
//check if has placeholder
if( (<any>aControl).nativeElement !== undefined && (<any>aControl).nativeElement !== null){
controlName = this._getPlaceHolder(aControl);
const placeholder = this._getPlaceHolder(aControl);
if(placeholder){
controlName = placeholder;
}
}
const errorMessage = this._getErrorMessage(aControl, controlName);
@ -856,6 +861,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
if(!this._isDMPDescriptionValid()){
const errmess = this._buildDMPDescriptionErrorMessages();
this.showValidationErrorsDialog(undefined, errmess);
this.hintErrors = true;
return;
}