AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Enhance receiver input and table components

Browse Source 
- 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.
This commit is contained in:
Developer 02 2024-08-30 22:25:13 +02:00
parent d347ec420c
commit 6e3bb6c3a0
3 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 || '';

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

@ -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">
<receiver-input [options]="receiver_mails" [filter]="receiver_filter"></receiver-input>
<td mat-cell *matCellDef="let element; let i = index">
<receiver-input [options]="receiver_mails" [filter]="receiver_filter" [index]="i"></receiver-input>
</td>
</ng-container>

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

@ -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) {
for (var i = 0; i < this.receiverInputs.length - 1; i++) {
if (this.receiverInputs[i].lenght === 0) {
this.receiverData.splice(i, 1);
// delete the row with out mail
else if (value.length === 0 && this.receiverInputs.length - 1 !== index) {
if ( this.receiverInputs.length > 1 && this.receiverInputs[index!]?.lenght === 0) {
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[] {