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

added description editor progress bar

This commit is contained in:
Sofia Papacharalampous 2024-04-29 13:26:41 +03:00
parent e9e06fa51f
commit 7e3cebd299
4 changed files with 117 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,7 +103,7 @@
</div>
</div>
</div>
<div class="row mt-2 stepper-actions justify-content-around">
<div class="row mt-3 stepper-actions justify-content-around">
<div class="col-auto mb-1">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
@ -131,7 +131,7 @@
</div>
<div class="row">
<div class="col-12">
<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDescriptionEditor]="true"></app-form-progress-indication>
<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
</div>
</div>
</div>

11
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html
View File

@ -1,5 +1,10 @@
<div class="demo-progress-bar-container">
<div *ngIf="isEditor()" class="percentage d-flex justify-content-center">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</div>
<mat-progress-bar class="form-progress-bar" [ngClass]="{'progress-bar': isEditor()}" mode="determinate" [value]="value"></mat-progress-bar>
<div *ngIf="isEditor()" class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">{{value}}%</div>
<div class="percentage d-flex justify-content-center"><span *ngIf="total>0">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</span>&nbsp;</div>
<mat-progress-bar *ngIf="value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value"></mat-progress-bar>
<mat-progress-bar *ngIf="!value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="0"></mat-progress-bar>
<div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">
<span *ngIf="value">{{value}}%</span>
<span *ngIf="!value">0%</span>
</div>
</div>

39
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
View File

@ -1,16 +1,37 @@
.percentage {
color: #212121;
opacity: 0.7;
font-weight: 400;
font-size: 0.875rem;
}
// .percentage {
// color: #212121;
// opacity: 0.7;
// font-weight: 400;
// font-size: 0.875rem;
// }
// .progress-bar {
// border-radius: 20px;
// height: 11px;
// }
// ::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
// border-radius: 20px !important;
// }
// Bar container
.progress-bar {
--mdc-linear-progress-active-indicator-height: 11px !important;
border-radius: 20px;
height: 11px;
}
::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
//Progress bar
::ng-deep .mdc-linear-progress__bar-inner {
--mdc-linear-progress-active-indicator-color: var(--primary-color) !important;
border-radius: 20px !important;
}
// Buffer bar
::ng-deep .mdc-linear-progress__buffer {
--mdc-linear-progress-track-height: 11px !important;
}
::ng-deep .mdc-linear-progress__buffer-bar {
--mdc-linear-progress-track-color: #e0e2ec !important;
}

114
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.ts
View File

@ -11,13 +11,14 @@ import { takeUntil } from 'rxjs/operators';
})
export class FormProgressIndicationComponent extends BaseComponent implements OnInit, OnChanges {
@Input() formGroup: UntypedFormGroup;
@Input() isDmpEditor: boolean;
@Input() isDatasetEditor: boolean;
@Input() public progressValueAccuracy = 2;
@Input() checkVisibility: boolean = false;
determinateProgressValue: number;
progressSoFar: number;
total: number;
totalIds: string[] = [];
percent: number;
fieldTypes: string[] = ['dateValue', 'externalIdentifier.identifier', 'externalIdentifier.type', 'reference', 'references', 'textListValue', 'textValue'];
constructor(private visibilityRulesService: VisibilityRulesService) { super(); }
@ -43,20 +44,84 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
}
calculateValueForProgressbar() {
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, true) + this.CountFormControlDepthLengthFotTotal(this.formGroup);
} else {
this.progressSoFar = this.countFormControlsWithValueForProgress(this.formGroup);
this.total = this.CountFormControlDepthLengthFotTotal(this.formGroup);
}
this.progressSoFar = this.countCompletedFields(this.formGroup.get('properties'), this.checkVisibility);
this.total = this.countTotalRequiredFields(this.formGroup.get('properties'), this.checkVisibility);
this.percent = (this.progressSoFar / this.total) * 100;
this.value = Number.parseFloat(this.percent.toPrecision(this.progressValueAccuracy));
}
countTotalRequiredFields(formControl: AbstractControl, checkVisibility = false): number {
let valueCurrent = 0;
if (formControl instanceof UntypedFormGroup) {
if(!checkVisibility || (!formControl.get('id')?.value || (this.visibilityRulesService.isVisibleMap[formControl.get('id').value] ?? true))) {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
valueCurrent = valueCurrent + this.countTotalRequiredFields(control, checkVisibility);
});
}
} else if (formControl instanceof UntypedFormArray) {
formControl.controls.forEach(item => {
valueCurrent = valueCurrent + this.countTotalRequiredFieldsByFieldset(item.get('ordinal').value, item.get('fields') as UntypedFormGroup);
});
}
return valueCurrent;
}
countTotalRequiredFieldsByFieldset(ordinal: number, fieldsFormGroup: UntypedFormGroup): number {
let requiredFieldsCount: number = 0;
const fieldNames = Object.keys(fieldsFormGroup.controls);
for(let item of fieldNames) {
if (!this.checkVisibility || this.visibilityRulesService.isVisible(item, ordinal)) {
const fieldControl = fieldsFormGroup.get(item);
for (let fieldType of this.fieldTypes) {
const typedControl = fieldControl.get(fieldType);
if (this.controlRequired(typedControl) && this.controlEnabled(typedControl)) {
requiredFieldsCount ++;
break;
}
}
}
}
return requiredFieldsCount;
}
countCompletedFields(formControl: AbstractControl, checkVisibility=false): number {
let completedFieldsCount: number = 0;
if (formControl instanceof UntypedFormGroup) {
if(!checkVisibility || (!formControl.get('id')?.value || (this.visibilityRulesService.isVisibleMap[formControl.get('id').value] ?? true))) {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
completedFieldsCount = completedFieldsCount + this.countCompletedFields(control, checkVisibility);
});
}
} else if (formControl instanceof UntypedFormArray) {
formControl.controls.forEach(item => {
completedFieldsCount = completedFieldsCount + this.countCompletedRequiredFieldsByFieldset(item.get('ordinal').value, item.get('fields') as UntypedFormGroup);
});
}
return completedFieldsCount;
}
countCompletedRequiredFieldsByFieldset(ordinal: number, fieldsFormGroup: UntypedFormGroup): number {
let completedFieldsCount: number = 0;
const fieldNames = Object.keys(fieldsFormGroup.controls);
for(let item of fieldNames) {
if (!this.checkVisibility || this.visibilityRulesService.isVisible(item, ordinal)) {
const fieldControl = fieldsFormGroup.get(item);
for (let fieldType of this.fieldTypes) {
const typedControl = fieldControl.get(fieldType);
if (this.controlRequired(typedControl) && this.controlEnabled(typedControl) && typedControl.valid) {
completedFieldsCount ++;
break;
}
}
}
}
return completedFieldsCount;
}
//////////////////////////////////////////////////////////////////////
countFormControlsWithValueForProgress(formControl: AbstractControl): number {
let valueCurent = 0;
if (formControl instanceof UntypedFormGroup) {
@ -169,27 +234,6 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
return valueCurrent;
}
countFormControlsRequiredFieldsForTotal(formControl: AbstractControl, checkVisibility = false): number {
let valueCurrent = 0;
if (formControl instanceof UntypedFormControl) {
if (this.controlRequired(formControl) && this.controlEnabled(formControl)) {
valueCurrent++;
}
} else if (formControl instanceof UntypedFormGroup) {
if(!checkVisibility || (!formControl.get('id')?.value || (this.visibilityRulesService.isVisibleMap[formControl.get('id').value] ?? true))) {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
valueCurrent = valueCurrent + this.countFormControlsRequiredFieldsForTotal(control, checkVisibility);
});
}
} else if (formControl instanceof UntypedFormArray) {
formControl.controls.forEach(item => {
valueCurrent = valueCurrent + this.countFormControlsRequiredFieldsForTotal(item, checkVisibility);
});
}
return valueCurrent;
}
controlRequired(formControl: AbstractControl) {
if (formControl.validator) {
const validator = formControl.validator({} as AbstractControl);
@ -204,8 +248,4 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
return true;
} else { return false }
}
isEditor(): boolean {
return this.isDmpEditor || this.isDatasetEditor;
}
}