From db68644effdc324171d0b3fbb1139965ff689fff Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Thu, 28 Mar 2024 17:58:48 +0200
Subject: [PATCH] styling changes

*annotations > added annotations count
---
 .../annotation-dialog.component.html                 |  9 ++++++++-
 .../annotation-dialog.component.scss                 | 12 ++++++++++++
 .../annotation-dialog.component.ts                   |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
index 74ff94aa8..dc6c4d8af 100644
--- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
+++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
@@ -45,7 +45,14 @@
 				</div>
 			</form>
 		</div>
-		<div class="col-12 mb-3 pt-2 gr-color" *ngIf="threads?.size > 0">{{'ANNOTATION-DIALOG.TITLE' | translate}}</div>
+		<div class="col-12 pt-2 gr-color" *ngIf="threads?.size > 0">
+			<div class="row">
+				<div class="col-auto">	
+					<span>{{'ANNOTATION-DIALOG.TITLE' | translate}}</span>	
+					<span class="comments-count">{{ annotationsCount }}</span>
+				</div>
+			</div>
+		</div>
 		<div class="col-12">
 			<ng-container *ngFor="let thread of threads">
 				<div class="row" *ngIf="getParentAnnotation(thread).protectionType === annotationProtectionTypeEnum.Private" matTooltip="{{'ANNOTATION-DIALOG.PROTECTION.PRIVATE' | translate}}">
diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
index d889ce43d..7b6aa9a15 100644
--- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
+++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
@@ -69,6 +69,18 @@ $mat-card-header-size: 40px !default;
 	color: #f16868;
 }
 
+.comments-count {
+	border-radius: 50%;
+	background-color: #129D99;
+	color: #FFFFFF;
+	margin-left: 0.5em;
+	display: inline-block;
+	width: 40px;
+	height: 40px;
+	padding: 7px;
+	text-align: center;
+}
+
 .profile-picture {
   height: $mat-card-header-size;
   width: $mat-card-header-size;
diff --git a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
index 6b180e818..7025fcb82 100644
--- a/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
@@ -34,6 +34,7 @@ export class AnnotationDialogComponent extends BaseComponent {
 
 	public comments = new Array<Annotation>();
 	public threads = new Set<Guid>();
+	public annotationsCount: number = 0;
 	public annotationsPerThread = {};
 	public showRepliesPerThread = {};
 	public replyEnabledPerThread = {};
@@ -143,7 +144,7 @@ export class AnnotationDialogComponent extends BaseComponent {
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(
 				data => {
-					console.log(data);
+					this.annotationsCount = data.count;
 					this.annotationsPerThread = {};
 					this.parentAnnotationsPerThread = {};
 					this.threads = new Set();