WEB-581 Remove the hyphens (#2998)

src/app/clients/clients-view/clients-view.component.html

@@ -435,7 +435,7 @@
           [active]="datatable.isActive"
           *mifosxHasPermission="'READ_' + clientDatatable.registeredTableName"
         >
-          {{ clientDatatable.registeredTableName }}
+          {{ formatTabLabel(clientDatatable.registeredTableName) }}
         </a>
       }
     </nav>

src/app/clients/clients-view/clients-view.component.ts

@@ -45,6 +45,7 @@ import { MatTabNav, MatTabLink, MatTabNavPanel } from '@angular/material/tabs';
 import { StatusLookupPipe } from '../../pipes/status-lookup.pipe';
 import { DateFormatPipe } from '../../pipes/date-format.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { formatTabLabel } from 'app/shared/utils/format-tab-label.util';
 
 @Component({
   selector: 'mifosx-clients-view',
@@ -78,6 +79,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ClientsViewComponent implements OnInit {
+  formatTabLabel(label: string): string {
+    return formatTabLabel(label);
+  }
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private clientsService = inject(ClientsService);

src/app/core/shell/breadcrumb/breadcrumb.component.ts

@@ -22,6 +22,7 @@ import { PopoverService } from '../../../configuration-wizard/popover/popover.se
 import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
 import { TranslateService } from '@ngx-translate/core';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { formatTabLabel } from 'app/shared/utils/format-tab-label.util';
 
 /**
  * Route data property to generate breadcrumb using a static string.
@@ -139,6 +140,9 @@ export class BreadcrumbComponent implements AfterViewInit, OnDestroy {
                 route.snapshot.paramMap.get(route.snapshot.data[routeParamBreadcrumb])
               ) {
                 breadcrumbLabel = route.snapshot.paramMap.get(route.snapshot.data[routeParamBreadcrumb]);
+                if (route.snapshot.data[routeParamBreadcrumb] === 'datatableName' && breadcrumbLabel) {
+                  breadcrumbLabel = formatTabLabel(breadcrumbLabel);
+                }
                 const routeData: Data = route.snapshot.data;
                 if (routeData.breadcrumb === 'Clients') {
                   breadcrumbLabel = this.printableValue(routeData.clientViewData.displayName);

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.ts

@@ -11,6 +11,7 @@ import { DecimalPipe, NgClass } from '@angular/common';
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, inject } from '@angular/core';
 import { MatCheckboxChange as MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
+import { formatTabLabel } from 'app/shared/utils/format-tab-label.util';
 import {
   MatTable,
   MatColumnDef,
@@ -62,6 +63,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges {
+  formatTabLabel(label: string): string {
+    return formatTabLabel(label);
+  }
   private route = inject(ActivatedRoute);
   private dateUtils = inject(Dates);
   private systemService = inject(SystemService);
@@ -163,7 +167,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
       dataTableEntryObject
     );
     const data = {
-      title: 'Add ' + this.datatableName + ' for ' + this.entityType,
+      title: 'Add ' + formatTabLabel(this.datatableName) + ' for ' + this.entityType,
       formfields: formfields
     };
     const addDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
@@ -190,7 +194,7 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
    */
   delete() {
     const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the contents of ${this.datatableName}` }
+      data: { deleteContext: `the contents of ${formatTabLabel(this.datatableName)}` }
     });
     deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
@@ -206,7 +210,9 @@ export class DatatableMultiRowComponent implements OnInit, OnDestroy, OnChanges
    */
   deleteSelected() {
     const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `the ${this.selection.selected.length} items selected of ${this.datatableName}` }
+      data: {
+        deleteContext: `the ${this.selection.selected.length} items selected of ${formatTabLabel(this.datatableName)}`
+      }
     });
     deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -7,7 +7,7 @@
 -->
 
 <div class="tab-container mat-typography">
-  <h3>{{ datatableName }}</h3>
+  <h3>{{ formatTabLabel(datatableName) }}</h3>
   <div class="layout-row align-end m-b-20">
     @if (!dataObject.data[0]) {
       <button mat-raised-button color="primary" (click)="add()">

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.ts

@@ -28,6 +28,7 @@ import { DatetimeFormatPipe } from '../../../../pipes/datetime-format.pipe';
 import { FormatNumberPipe } from '../../../../pipes/format-number.pipe';
 import { PrettyPrintPipe } from '../../../../pipes/pretty-print.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { formatTabLabel } from 'app/shared/utils/format-tab-label.util';
 
 @Component({
   selector: 'mifosx-datatable-single-row',
@@ -62,6 +63,10 @@ export class DatatableSingleRowComponent implements OnInit {
   @Input() entityType: string;
   datatableName: string;
 
+  formatTabLabel(label: string): string {
+    return formatTabLabel(label);
+  }
+
   ngOnInit() {
     this.route.params.subscribe((routeParams: any) => {
       this.datatableName = routeParams.datatableName;
@@ -80,7 +85,7 @@ export class DatatableSingleRowComponent implements OnInit {
       dataTableEntryObject
     );
     const data = {
-      title: 'Add ' + this.datatableName + ' for ' + this.entityType,
+      title: 'Add ' + formatTabLabel(this.datatableName) + ' for ' + this.entityType,
       formfields: formfields
     };
     const addDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
@@ -132,7 +137,7 @@ export class DatatableSingleRowComponent implements OnInit {
       return formfield;
     });
     const data = {
-      title: 'Edit ' + this.datatableName + ' for ' + this.entityType,
+      title: 'Edit ' + formatTabLabel(this.datatableName) + ' for ' + this.entityType,
       formfields: formfields,
       layout: { addButtonText: 'Submit' },
       pristine: false
@@ -160,7 +165,7 @@ export class DatatableSingleRowComponent implements OnInit {
 
   delete() {
     const deleteDataTableDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: ` the contents of ${this.datatableName}` }
+      data: { deleteContext: ` the contents of ${formatTabLabel(this.datatableName)}` }
     });
     deleteDataTableDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {

src/app/shared/utils/format-tab-label.util.ts

@@ -0,0 +1,8 @@
+export function formatTabLabel(label: string): string {
+  if (!label) return '';
+  return label
+    .replace(/[-_]+/g, ' ')
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+}