added description editor progress bar

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

@@ -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>

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

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

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

@@ -1,16 +1,37 @@
-.percentage {
+// .percentage {
-	color: #212121;
+// 	color: #212121;
-	opacity: 0.7;
+// 	opacity: 0.7;
-	font-weight: 400;
+// 	font-weight: 400;
-	font-size: 0.875rem;
+// 	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;
+}

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.countCompletedFields(this.formGroup.get('properties'), this.checkVisibility);
-			this.progressSoFar = this.countFormControlsValidForProgress(this.formGroup);
+		this.total = this.countTotalRequiredFields(this.formGroup.get('properties'), this.checkVisibility);
-			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.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;
-	}
 }