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

Adds progress bar on dataset editor

This commit is contained in:
apapachristou 2020-10-16 16:48:28 +03:00
parent a631594f5f
commit 9c2f1b12bd
6 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,8 @@
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options">
<div class="col stepper-list">
<div (click)="changeStep(0)" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (5)</div>
<div (click)="changeStep(0)" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
<div (click)="changeStep(0)" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div class="row toc-pane-container" #boundary (click)="changeStep(1)">
<div #spacer></div>
<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
@ -74,6 +75,9 @@
<div (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</div>
</div>
</div>
<div class="col-auto pr-0">
<app-form-progress-indication class="col-12" *ngIf="formGroup" [formGroup]="formGroup" [isDatasetEditor]="true"></app-form-progress-indication>
</div>
</div>
<div class="col-auto form">
<app-dataset-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="formGroup.get('dmp').value.id" [availableProfiles]="formGroup.get('dmp').value.profiles" (formChanged)="formChanged()"></app-dataset-editor-component>

8
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
View File

@ -481,6 +481,14 @@ mat-icon.size-18 {
margin-top: 70px !important;
}
.done-icon {
display: inline-flex;
vertical-align: middle;
font-size: 16px !important;
height: auto;
width: auto;
}
// ::ng-deep .mat-tab-labels {
// justify-content: space-between;
// }

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

@ -884,4 +884,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
backToDmp(id: string) {
this.router.navigate(['/plans', 'edit', id]);
}
datasetInfoValid(): boolean {
return this.formGroup.get('label') && this.formGroup.get('label').valid && this.formGroup.get('profile') && this.formGroup.get('profile').valid;
}
}

4
dmp-frontend/src/app/ui/dataset/dataset.module.ts
View File

@ -28,6 +28,7 @@ import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-crite
import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
import { DatasetEditorDetailsComponent } from '../dmp/editor/dataset-editor-details/dataset-editor-details.component';
import { DatasetEditorDetailsModule } from '../dmp/editor/dataset-editor-details/dataset-editor-details.module';
import { FormProgressIndicationModule } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module';
@NgModule({
imports: [
@ -44,7 +45,8 @@ import { DatasetEditorDetailsModule } from '../dmp/editor/dataset-editor-details
DatasetRoutingModule,
FormValidationErrorsDialogModule,
DatasetCopyDialogModule,
DatasetOverviewModule
DatasetOverviewModule,
FormProgressIndicationModule
],
declarations: [
DatasetListingComponent,

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

@ -79,7 +79,7 @@
</div>
</div>
<div class="col-auto pr-0">
<app-form-progress-indication class="col-12" *ngIf="formGroup" [formGroup]="formGroup" [isEditor]="true"></app-form-progress-indication>
<app-form-progress-indication class="col-12" *ngIf="formGroup" [formGroup]="formGroup" [isDmpEditor]="true"></app-form-progress-indication>
</div>
</div>
<div class="col-auto form">

25
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-progress-indication/form-progress-indication.component.ts
View File

@ -11,7 +11,8 @@ import { takeUntil } from 'rxjs/operators';
})
export class FormProgressIndicationComponent extends BaseComponent implements OnInit {
@Input() formGroup: FormGroup;
@Input() isEditor: boolean;
@Input() isDmpEditor: boolean;
@Input() isDatasetEditor: boolean;
@Input() public progressValueAccuracy = 2;
determinateProgressValue: number;
progressSoFar: number;
@ -32,9 +33,12 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
}
calculateValueForProgressbar() {
if (this.isEditor) {
if (this.isDmpEditor) {
this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup);
this.total = this.countFormControlsRequiredFieldsForTotal(this.formGroup);
} else if (this.isDatasetEditor) {
this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup) + this.countFormControlsWithValueForProgress(this.formGroup);
this.total = this.countFormControlsRequiredFieldsForTotal(this.formGroup) + this.CountFormControlDepthLengthFotTotal(this.formGroup);
} else {
this.progressSoFar = this.countFormControlsWithValueForProgress(this.formGroup);
this.total = this.CountFormControlDepthLengthFotTotal(this.formGroup);
@ -46,11 +50,11 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
countFormControlsWithValueForProgress(formControl: AbstractControl): number {
let valueCurent = 0;
if (formControl instanceof FormGroup) {
if (this.checkFormsIfIsFieldsAndVisible(formControl)) {
if (this.checkFormsIfIsFieldsAndVisible(formControl) && this.checkIfIsRequired((formControl as FormGroup))) {
if (this.haseValue(formControl))
valueCurent++;
}
if (this.chechFieldIfIsFieldSetAndVisible((formControl as FormGroup))) {
if (this.chechFieldIfIsFieldSetAndVisible((formControl as FormGroup)) && this.checkIfIsRequired((formControl as FormGroup))) {
valueCurent = valueCurent + this.compositeFieldsGetChildsForProgress(formControl);
} else {
Object.keys(formControl.controls).forEach(item => {
@ -86,7 +90,12 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
return valueCurent;
}
private checkIfIsRequired(formControl: FormGroup): boolean {
if (formControl.get('validationRequired') && formControl.get('validationRequired').value) {
return true;
}
return false;
}
private checkFormsIfIsFieldsAndVisible(formControl: FormGroup): boolean {
if (formControl.contains('id') && formControl.contains('value')) {
@ -108,7 +117,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
valueCurent = valueCurent + this.CountFormControlDepthLengthFotTotal(item);
});
} else if (formControl instanceof FormGroup) {
if ((formControl as FormGroup).contains('id') && (formControl as FormGroup).contains('value') && (this.visibilityRulesService.checkElementVisibility((formControl as FormGroup).get('id').value))) {
if ((formControl as FormGroup).contains('id') && (formControl as FormGroup).contains('value') && (this.visibilityRulesService.checkElementVisibility((formControl as FormGroup).get('id').value)) && this.checkIfIsRequired((formControl as FormGroup))) {
valueCurent++;
} else if ((formControl as FormGroup).contains('id') && (formControl as FormGroup).contains('fields')) {
valueCurent = valueCurent + this.compositeFieldsGetChildsForTotal(formControl);
@ -188,4 +197,8 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
return true;
} else { return false }
}
isEditor(): boolean {
return this.isDmpEditor || this.isDatasetEditor;
}
}