From bded2d4d2387c400e28190d3724a347f98eeabb5 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Wed, 8 May 2024 15:01:09 +0300
Subject: [PATCH] fix on breadcrumbs text

---
 dmp-frontend/src/app/core/formatting.module.ts    |  4 ++++
 .../listing/description-listing.component.html    |  8 ++++----
 .../app/ui/dmp/listing/dmp-listing.component.html |  6 +++---
 .../navigation-breadcrumb.component.html          |  4 ++--
 .../pipes/app-title-case-format.pipe.ts           | 15 +++++++++++++++
 dmp-frontend/src/common/ui/common-ui.module.ts    |  2 ++
 6 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 dmp-frontend/src/common/formatting/pipes/app-title-case-format.pipe.ts

diff --git a/dmp-frontend/src/app/core/formatting.module.ts b/dmp-frontend/src/app/core/formatting.module.ts
index 4160b1f39..89bc5348d 100644
--- a/dmp-frontend/src/app/core/formatting.module.ts
+++ b/dmp-frontend/src/app/core/formatting.module.ts
@@ -11,6 +11,7 @@ import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe
 import {FieldValuePipe} from "@app/core/pipes/field-value.pipe";
 import {ColumnClassPipe} from "@app/core/pipes/column-class.pipe";
 import { PipeService } from '@common/formatting/pipe.service';
+import { AppTitleCaseFormatPipe } from '@common/formatting/pipes/app-title-case-format.pipe';
 
 //
 //
@@ -20,6 +21,7 @@ import { PipeService } from '@common/formatting/pipe.service';
 
 @NgModule({
 	declarations: [
+		AppTitleCaseFormatPipe,
 		NgForLimitPipe,
 		SumarizeTextPipe,
 		TimezoneInfoDisplayPipe,
@@ -31,6 +33,7 @@ import { PipeService } from '@common/formatting/pipe.service';
 		ColumnClassPipe,
 	],
 	exports: [
+		AppTitleCaseFormatPipe,
 		NgForLimitPipe,
 		SumarizeTextPipe,
 		TimezoneInfoDisplayPipe,
@@ -45,6 +48,7 @@ import { PipeService } from '@common/formatting/pipe.service';
 		EnumUtils,
 		DatePipe,
 		PipeService,
+		AppTitleCaseFormatPipe,
 		NgForLimitPipe,
 		SumarizeTextPipe,
 		TimezoneInfoDisplayPipe,
diff --git a/dmp-frontend/src/app/ui/description/listing/description-listing.component.html b/dmp-frontend/src/app/ui/description/listing/description-listing.component.html
index 0c00d37a7..6daf95490 100644
--- a/dmp-frontend/src/app/ui/description/listing/description-listing.component.html
+++ b/dmp-frontend/src/app/ui/description/listing/description-listing.component.html
@@ -15,10 +15,10 @@
 					</div>
 				</div>
 			</div>
-			<div class="col-auto header-title">
-				<div class="row">
-					<div class="col-12">
-						<p *ngIf="listingItems && listingItems.length > 0 || this.lookup.like">{{(isPublic ? 'DESCRIPTION-LISTING.TITLE-EXPLORE' : 'DESCRIPTION-LISTING.TITLE') | translate}}</p>
+			<div class="col-auto">
+				<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="row">
+					<div class="col-12 header-title">
+						<p >{{(isPublic ? 'DESCRIPTION-LISTING.TITLE-EXPLORE' : 'DESCRIPTION-LISTING.TITLE') | translate}}</p>
 					</div>
 					<div class="col-12">
 						<app-navigation-breadcrumb />
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
index 7bb13e3c2..09c0fcadd 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
@@ -11,10 +11,10 @@
 					</div>
 				</div>
 			</div>
-			<div class="col-12">
-				<p *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-auto header-title">{{(isPublic ? 'GENERAL.TITLES.EXPLORE-PLANS' : 'GENERAL.TITLES.PLANS') | translate}}</p>
+			<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like"  class="col-12">
+				<p class="col-auto header-title">{{(isPublic ? 'GENERAL.TITLES.EXPLORE-PLANS' : 'GENERAL.TITLES.PLANS') | translate}}</p>
 			</div>
-			<div class="col-12">
+			<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-12">
 				<app-navigation-breadcrumb />
 			</div>
 			<!-- TODO: implement filters -->
diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html b/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html
index a08f55805..038540288 100644
--- a/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html
+++ b/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html
@@ -5,12 +5,12 @@
             
             <a *ngIf="(!item?.skipNavigation && !last) else regularText" [routerLink]="computePath(index)" class="text-black" disabled>
                 <ng-container *ngIf="item.title !== HOME_SYMBOL else homeIcon">
-                    {{ item.title | translate:item.translateParams | titlecase }}
+                    {{ item.title | translate:item.translateParams | appTitleCaseTransform }}
                 </ng-container>
             </a>
             <ng-template #regularText>
                 <ng-container *ngIf="item.title !== HOME_SYMBOL else homeIcon">
-                    {{ item.title | translate:item.translateParams | titlecase }}
+                    {{ item.title | translate:item.translateParams | appTitleCaseTransform }}
                 </ng-container>
             </ng-template>
 
diff --git a/dmp-frontend/src/common/formatting/pipes/app-title-case-format.pipe.ts b/dmp-frontend/src/common/formatting/pipes/app-title-case-format.pipe.ts
new file mode 100644
index 000000000..d6abe5583
--- /dev/null
+++ b/dmp-frontend/src/common/formatting/pipes/app-title-case-format.pipe.ts
@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+
+@Pipe({
+  name: 'appTitleCaseTransform'
+})
+export class AppTitleCaseFormatPipe implements PipeTransform {
+
+  transform(value: any, ...args: any[]) {
+    let foo1 =  value.split('-');
+    let foo2 = foo1.map(element => element.charAt(0).toUpperCase() + element.slice(1))
+    let foo3 = foo2.join(' ');
+    return value.split('-').map(element => element.charAt(0).toUpperCase() + element.slice(1)).join(' ');
+  }
+} 
\ No newline at end of file
diff --git a/dmp-frontend/src/common/ui/common-ui.module.ts b/dmp-frontend/src/common/ui/common-ui.module.ts
index 282feb3d0..4d6b21c16 100644
--- a/dmp-frontend/src/common/ui/common-ui.module.ts
+++ b/dmp-frontend/src/common/ui/common-ui.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormattingModule } from '@app/core/formatting.module';
 import { NavigationBreadcrumbComponent } from '@app/ui/misc/breadcrumb/navigation-breadcrumb.component';
 import { SecureImagePipe } from '@common/http/image/secure-image.pipe';
 import { MaterialModule } from '@common/material/material.module';
@@ -10,6 +11,7 @@ import { TranslateModule } from '@ngx-translate/core';
 		CommonModule,
 		MaterialModule,
 		TranslateModule,
+		FormattingModule
 	],
 	declarations: [
 		SecureImagePipe,