chevron_left
@@ -131,7 +131,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}}%
+
0">{{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;
- }
}