WEB-581 Remove the hyphens (#2998)

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(' ');
+}