feat: Enhance receiver input and table components

- Updated `ReceiverInputComponent` to support optional index parameter in the `filter` function to manage email input logic more effectively.
- Added `last_used_name` functionality in `ReceiverTableComponent` to auto-fill names based on the last used email name.
- Implemented email duplication prevention logic in `ReceiverTableComponent` to ensure unique email inputs.
- Refactored component lifecycle methods and data handling for improved performance and user experience.

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.ts

@@ -37,19 +37,19 @@ export class ReceiverInputComponent implements OnInit, OnChanges {
   private setupFiltering(): void {
     this.filteredOptions = this.control.valueChanges.pipe(
       startWith(''),
-      map(value => this.filter(value || '', this.options)),
+      map(value => this.filter(value || '', this.options, this.index)),
     );
   }
 
   control = new FormControl('');
   filteredOptions!: Observable<string[]>;
 
-
   @Input() options: string[] = [];
-  @Input() filter: (value: string, options: string[]) => string[] = value => {
+  @Input() filter: (value: string, options: string[], index?: number) => string[] = value => {
     const filterValue = value.toLowerCase();
     return this.options.filter(option => option.toLowerCase().includes(filterValue));
   }
+  @Input() index?: number;
 
   public get text(): string {
     return this.control.value || '';

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html

@@ -1,8 +1,8 @@
 <table mat-table [dataSource]="receiverData" class="mat-elevation-z8">
     <ng-container matColumnDef="email">
         <th mat-header-cell *matHeaderCellDef> Email </th>
-        <td mat-cell *matCellDef="let element">
+        <td mat-cell *matCellDef="let element; let i = index">
-            <receiver-input [options]="receiver_mails" [filter]="receiver_filter"></receiver-input>
+            <receiver-input [options]="receiver_mails" [filter]="receiver_filter" [index]="i"></receiver-input>
         </td>
     </ng-container>
 

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts

@@ -34,31 +34,47 @@ export class ReceiverTableComponent implements OnInit {
   constructor(private receiverService: ReceiverService) { }
 
   async ngOnInit() {
-    this.receiver_mails = await this.receiverService.getReceiverAsync().then((receivers: any[]) => receivers.map(r => r.emailAddress));
+    const receivers = await this.receiverService.getReceiverAsync();
+    this.receiver_mails = receivers.map((r: any) => r.emailAddress);
+    this.last_used_name = receivers.reduce((acc: any, r: any) => {
+      acc[r.emailAddress] = r.lastUsedName;
+      return acc;
+    }, {} as { [key: string]: string | null });
   }
 
-  receiver_filter: (value: string, options: string[]) => string[] = (value, options) => {
+  receiver_filter: (value: string, options: string[], index?: number) => string[] = (value, options, index) => {
     const filterValue = value.toLowerCase();
 
+    // set the name if it is used befor
+    const name = this.last_used_name[value];
+    if (name && index)
+      this.receiverData.at(index)!.name = name
+
+    // !!! do not allow email duplication !!!
+    var similarMails = this.receiver_mails.filter(m => m.toLocaleLowerCase() === value.toLocaleLowerCase() && m !== value)
+    if (similarMails.length > 0 && index != undefined) {
+      this.receiverInputs[index].text = similarMails[0];
+    }
+    console.log(this.receiverInputs.length + " - " + index)
     // if added into last row
     if (value.length > 0 && (this.receiverInputs.at(-1)?.lenght ?? 0) > 0) {
       this.receiverData.at(-1)!.accessCode = generateAccessCode();
       this.receiverData.push({ email: "", name: "", accessCode: "" });
       this.update();
     }
-    else if (value.length == 0) {
+    // delete the row with out mail
-      for (var i = 0; i < this.receiverInputs.length - 1; i++) {
+    else if (value.length === 0 && this.receiverInputs.length - 1 !== index) {
-        if (this.receiverInputs[i].lenght === 0) {
+      if ( this.receiverInputs.length > 1 && this.receiverInputs[index!]?.lenght === 0) {
-          this.receiverData.splice(i, 1);
+        this.receiverData.splice(index!, 1);
         this.update();
       }
     }
-    }
 
     return options.filter(option => option.toLowerCase().includes(filterValue));
   }
 
   receiver_mails: string[] = [];
+  last_used_name: { [key: string]: string | null } = {};
 
   @ViewChildren(ReceiverInputComponent) receiverInputsQueryList!: QueryList<ReceiverInputComponent>;
   get receiverInputs(): ReceiverInputComponent[] {