From 7e3cebd299da59a26e299fc448bcab49cc3f774c Mon Sep 17 00:00:00 2001 From: Sofia Papacharalampous Date: Mon, 29 Apr 2024 13:26:41 +0300 Subject: [PATCH] added description editor progress bar --- .../editor/description-editor.component.html | 4 +- .../form-progress-indication.component.html | 11 +- .../form-progress-indication.component.scss | 39 ++++-- .../form-progress-indication.component.ts | 114 ++++++++++++------ 4 files changed, 117 insertions(+), 51 deletions(-) diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html index 8d2a40aa1..e037ec587 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html @@ -103,7 +103,7 @@ -
+
- +
diff --git a/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html b/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html index 56966d9ab..0befa13a7 100644 --- a/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html +++ b/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html @@ -1,5 +1,10 @@ 
-
{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}
- -
{{value}}%
+
{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}} 
+ + +
+ {{value}}% + 0% +
+ diff --git a/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss b/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss index a15510639..fc7497a0f 100644 --- a/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss +++ b/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss @@ -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; +} diff --git a/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.ts b/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.ts index 908acd641..2661630b1 100644 --- a/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.ts @@ -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; - } }