holder contact updates

src/app/holder/contacts/contacts.component.html

@@ -25,6 +25,12 @@
                 <td mat-cell *matCellDef="let contact">{{ contact.firstName }}</td>
             </ng-container>
 
+            <!-- Middle Initial Column -->
+            <ng-container matColumnDef="middleInitial">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Middle Initial</th>
+                <td mat-cell *matCellDef="let contact">{{ contact.middleInitial }}</td>
+            </ng-container>
+
             <!-- Last Name Column -->
             <ng-container matColumnDef="lastName">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>
@@ -34,7 +40,7 @@
             <!-- Title Column -->
             <ng-container matColumnDef="title">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
-                <td mat-cell *matCellDef="let contact">{{ contact.title }}</td>
+                <td mat-cell *matCellDef="let contact">{{ getContactTitleLabel(contact.title) }}</td>
             </ng-container>
 
             <!-- Phone Column -->
@@ -49,6 +55,12 @@
                 <td mat-cell *matCellDef="let contact">{{ contact.mobile | phone }}</td>
             </ng-container>
 
+            <!-- Fax Column -->
+            <ng-container matColumnDef="fax">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Fax</th>
+                <td mat-cell *matCellDef="let contact">{{ contact.fax }}</td>
+            </ng-container>
+
             <!-- Email Column -->
             <ng-container matColumnDef="email">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
@@ -147,20 +159,18 @@
             </div>
 
             <div class="form-row">
-
                 <mat-form-field appearance="outline">
                     <mat-label>Title</mat-label>
-                    <input matInput formControlName="title" required>
+                    <mat-select formControlName="title" required>
-                    <mat-icon matSuffix>work</mat-icon>
+                        <mat-option *ngFor="let contactTitle of contactTitles" [value]="contactTitle.value">
+                            {{ contactTitle.name }}
+                        </mat-option>
+                    </mat-select>
                     <mat-error *ngIf="contactForm.get('title')?.errors?.['required']">
                         Title is required
                     </mat-error>
-                    <mat-error *ngIf="contactForm.get('title')?.errors?.['maxlength']">
-                        Maximum 100 characters allowed
-                    </mat-error>
                 </mat-form-field>
             </div>
-
             <div class="form-row">
                 <mat-form-field appearance="outline">
                     <mat-label>Phone</mat-label>

src/app/holder/contacts/contacts.component.ts

@@ -16,8 +16,10 @@ import { MatDialog } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { NavigationService } from '../../core/services/common/navigation.service';
 import { StorageService } from '../../core/services/common/storage.service';
-import { finalize } from 'rxjs';
+import { finalize, Subject, takeUntil } from 'rxjs';
 import { environment } from '../../../environments/environment';
+import { ContactTitle } from '../../core/models/contact-title';
+import { CommonService } from '../../core/services/common/common.service';
 
 @Component({
   selector: 'app-contacts',
@@ -40,7 +42,7 @@ export class ContactsComponent {
 
   @ViewChild(MatSort) sort!: MatSort;
 
-  displayedColumns: string[] = ['firstName', 'lastName', 'title', 'phone', 'mobile', 'email', 'actions'];
+  displayedColumns: string[] = ['firstName', 'middleInitial', 'lastName', 'title', 'phone', 'mobile', 'fax', 'email', 'actions'];
   dataSource = new MatTableDataSource<any>();
   contactForm: FormGroup;
 
@@ -51,6 +53,8 @@ export class ContactsComponent {
   showForm = false;
   showInactiveContacts = false;
   contacts: Contact[] = [];
+  contactTitles: ContactTitle[] = [];
+
   currentApplicationDetails: { headerid: number, applicationName: string } | null = null;
   returnTo: string = environment.appType === 'client' ? 'edit-carnet' : 'process-carnet';
 
@@ -60,9 +64,12 @@ export class ContactsComponent {
     isInactive: null,
     inactivatedDate: null
   };
+  
+  private destroy$ = new Subject<void>();
 
   private fb = inject(FormBuilder);
   private dialog = inject(MatDialog);
+  private commonService = inject(CommonService);
   private contactService = inject(ContactService);
   private notificationService = inject(NotificationService);
   private errorHandler = inject(ApiErrorHandlerService);
@@ -74,7 +81,7 @@ export class ContactsComponent {
       firstName: ['', [Validators.required, Validators.maxLength(50)]],
       lastName: ['', [Validators.required, Validators.maxLength(50)]],
       middleInitial: ['', [Validators.maxLength(1)]],
-      title: ['', [Validators.required, Validators.maxLength(100)]],
+      title: ['', [Validators.required]],
       phone: ['', [Validators.required, Validators.pattern(/^[0-9\-\(\)]{10,15}$/)]],
       mobile: ['', [Validators.required, Validators.pattern(/^[0-9\-\(\)]{10,15}$/)]],
       fax: ['', [Validators.pattern(/^[0-9\-\(\)]{10,15}$/)]],
@@ -85,11 +92,17 @@ export class ContactsComponent {
   }
 
   ngOnInit(): void {
+    this.loadContactTitles();
     if (this.holderid > 0) {
       this.loadContacts();
     }
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
@@ -113,6 +126,19 @@ export class ContactsComponent {
     });
   }
 
+  loadContactTitles(): void {
+    this.commonService.getContactTitles()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (contactTitles) => {
+          this.contactTitles = contactTitles;
+        },
+        error: (error) => {
+          console.error('Failed to load contact titles', error);
+        }
+      });
+  }
+
   addNewContact(): void {
     this.showForm = true;
     this.isEditing = false;
@@ -260,4 +286,9 @@ export class ContactsComponent {
         }
       })
   }
+  
+  getContactTitleLabel(value: string): string {
+    const type = this.contactTitles.find(t => t.value === value);
+    return type ? type.name : value;
+  }
 }