61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
|
import { Component, Inject } from '@angular/core';
|
||
|
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||
|
|
import { AngularMaterialModule } from '../../shared/module/angular-material.module';
|
||
|
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { FormsModule } from '@angular/forms';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-contact-dialog',
|
||
|
|
imports: [AngularMaterialModule, CommonModule, FormsModule],
|
||
|
|
template: `
|
||
|
|
<h2 mat-dialog-title>Select Contact</h2>
|
||
|
|
<mat-dialog-content>
|
||
|
|
<mat-radio-group [(ngModel)]="selectedContact">
|
||
|
|
<mat-radio-button *ngFor="let contact of contacts" [value]="contact">
|
||
|
|
{{getContactLabel(contact)}}
|
||
|
|
</mat-radio-button>
|
||
|
|
</mat-radio-group>
|
||
|
|
</mat-dialog-content>
|
||
|
|
<mat-dialog-actions>
|
||
|
|
<button mat-button (click)="onCancel()">Cancel</button>
|
||
|
|
<button mat-raised-button color="primary" (click)="onSelect()" [disabled]="!selectedContact">
|
||
|
|
Select
|
||
|
|
</button>
|
||
|
|
</mat-dialog-actions>
|
||
|
|
`,
|
||
|
|
styles: [`
|
||
|
|
mat-radio-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
mat-radio-button {
|
||
|
|
margin: 4px 0;
|
||
|
|
}
|
||
|
|
`]
|
||
|
|
})
|
||
|
|
export class ContactDialogComponent {
|
||
|
|
selectedContact: any | null = null;
|
||
|
|
|
||
|
|
constructor(
|
||
|
|
public dialogRef: MatDialogRef<ContactDialogComponent>,
|
||
|
|
@Inject(MAT_DIALOG_DATA) public data: { contacts: any[] }
|
||
|
|
) { }
|
||
|
|
|
||
|
|
get contacts() {
|
||
|
|
return this.data.contacts;
|
||
|
|
}
|
||
|
|
|
||
|
|
onSelect(): void {
|
||
|
|
this.dialogRef.close(this.selectedContact);
|
||
|
|
}
|
||
|
|
|
||
|
|
onCancel(): void {
|
||
|
|
this.dialogRef.close();
|
||
|
|
}
|
||
|
|
|
||
|
|
getContactLabel(contact: any): string {
|
||
|
|
return `${contact.firstName} ${contact.middleInitial} ${contact.lastName},
|
||
|
|
${contact.email}, ${contact.phone}`;
|
||
|
|
}
|
||
|
|
}
|