From e5e12bfb61321ff817ee28c43d34c054f229e3d6 Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Thu, 22 Aug 2024 20:15:03 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20L=C3=B6schen-Schaltfl=C3=A4che=20zur=20?= =?UTF-8?q?ReceiverInputComponent=20hinzuf=C3=BCgen=20und=20Verwaltung=20d?= =?UTF-8?q?er=20Empf=C3=A4ngerdaten=20aktualisieren?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Löschen-Schaltfläche zur `ReceiverInputComponent` hinzugefügt, um den Texteingang zu leeren - Logik in `receiver_filter` implementiert, um eine leere Zeile hinzuzufügen, wenn ein neuer Empfänger hinzugefügt wird, und Zeilen zu entfernen, wenn Eingaben gelöscht werden - Verwaltung der `receiverData` aktualisiert, um dynamische Hinzufügung und Entfernung von Zeilen basierend auf Eingaben zu berücksichtigen --- .../receiver-input.component.html | 8 +++-- .../receiver-input.component.ts | 34 ++++++++++++++---- .../receiver-table.component.html | 2 +- .../receiver-table.component.ts | 36 ++++++++++++++----- 4 files changed, 62 insertions(+), 18 deletions(-) diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.html index 995bd807..3bcb4015 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.html +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.html @@ -1,8 +1,12 @@
Email - + + @if (text) { + + } @for (option of filteredOptions | async; track option) { {{option}} diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.ts index cd6cb36c..e01eb995 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.ts +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-input/receiver-input.component.ts @@ -5,6 +5,11 @@ import { Observable, map, startWith } from 'rxjs'; import { AsyncPipe } from '@angular/common'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { FormsModule } from '@angular/forms'; +import { MatFormFieldModule } from '@angular/material/form-field'; + @Component({ selector: 'receiver-input', standalone: true, @@ -12,7 +17,8 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete'; MatInputModule, MatAutocompleteModule, ReactiveFormsModule, - AsyncPipe + AsyncPipe, + MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule ], templateUrl: './receiver-input.component.html', styleUrl: './receiver-input.component.scss' @@ -28,19 +34,33 @@ export class ReceiverInputComponent implements OnInit, OnChanges { } } + private setupFiltering(): void { + this.filteredOptions = this.control.valueChanges.pipe( + startWith(''), + map(value => this.filter(value || '', this.options)), + ); + } + control = new FormControl(''); filteredOptions!: Observable; + @Input() options: string[] = []; - @Input() filter: (value: string) => string[] = value => { + @Input() filter: (value: string, options: string[]) => string[] = value => { const filterValue = value.toLowerCase(); return this.options.filter(option => option.toLowerCase().includes(filterValue)); } - private setupFiltering(): void { - this.filteredOptions = this.control.valueChanges.pipe( - startWith(''), - map(value => this.filter(value || '')), - ); + public get text(): string { + return this.control.value || ''; + } + + public set text(value: string) { + this.control.setValue(value) + } + + public get lenght(): number { + return this.text.length; } + } \ No newline at end of file diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html index 72b9f258..638ed612 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.html @@ -2,7 +2,7 @@ Email - + diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts index 13387b71..b7d5b520 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/receiver-table/receiver-table.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core'; import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms'; import { MatInputModule } from '@angular/material/input'; import { MatTableModule } from '@angular/material/table'; @@ -34,20 +34,40 @@ export class ReceiverTableComponent implements OnInit { this.receiver_mails = await this.receiverService.getReceiverAsync().then((receivers: any[]) => receivers.map(r => r.emailAddress)); } - control = new FormControl(''); - receiver_mails: string[] = []; - filteredOptions!: Observable; - - receiver_filter(value: string): string[] { + receiver_filter: (value: string, options: string[]) => string[] = (value, options) => { const filterValue = value.toLowerCase(); - return this.receiver_mails.filter(option => option.toLowerCase().includes(filterValue)); + // if added into last row + if (value.length > 0 && (this.receiverInputs.at(-1)?.lenght ?? 0) > 0) { + this.receiverData.push({ email: "", name: "", accessCode: "" }); + this.update(); + } + else if (value.length == 0) { + for (var i = 0; i < this.receiverInputs.length - 1; i++) { + if (this.receiverInputs[i].lenght === 0) { + this.receiverData.splice(i, 1); + this.update(); + } + } + } + + return options.filter(option => option.toLowerCase().includes(filterValue)); + } + + receiver_mails: string[] = []; + + @ViewChildren(ReceiverInputComponent) receiverInputsQueryList!: QueryList; + get receiverInputs(): ReceiverInputComponent[] { + return this.receiverInputsQueryList?.toArray() ?? []; } - //table receiverData: { email: string; name: string; accessCode: string }[] = [ { email: "", name: "", accessCode: "" } ]; displayedColumns: string[] = ['email', 'name', 'accessCode']; + + public update() { + this.receiverData = [...this.receiverData]; + } }