100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
|
|
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { ActivatedRoute } from '@angular/router';
|
|
import { Group } from '../../shared/models/group';
|
|
|
|
@Component({
|
|
selector: 'group-dropdown',
|
|
imports: [
|
|
MatAutocompleteModule,
|
|
MatFormFieldModule,
|
|
MatInputModule,
|
|
ReactiveFormsModule,
|
|
],
|
|
templateUrl: './group-dropdown.component.html',
|
|
styleUrl: './group-dropdown.component.scss'
|
|
})
|
|
export class GroupDropdownComponent implements OnInit {
|
|
private readonly route = inject(ActivatedRoute);
|
|
|
|
@Input() formControl = new FormControl<Group | string | undefined>(undefined);
|
|
@Input() errorMessages: { [errorKey: string]: string } = {};
|
|
@Input({ required: true }) groups: Group[] = [];
|
|
@Input() group: string | undefined;
|
|
@Input() groupDisabled: boolean | undefined;
|
|
@Input() search: boolean = false;
|
|
@Output() readonly groupChange = new EventEmitter<string>();
|
|
|
|
errorMessageKeys: string[] = [];
|
|
|
|
|
|
constructor() {
|
|
this.route.data.subscribe(data => {
|
|
if (!data['groups'])
|
|
return;
|
|
|
|
this.groups = data['groups'];
|
|
});
|
|
|
|
if (this.groupDisabled)
|
|
this.formControl.disable();
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.errorMessageKeys = Object.keys(this.errorMessages);
|
|
|
|
if (!this.group)
|
|
return;
|
|
|
|
const group = this.groups.find(r => r.id == this.group);
|
|
this.formControl.setValue(group);
|
|
}
|
|
|
|
get filteredGroups() {
|
|
const value = this.formControl.value;
|
|
if (typeof value == 'string') {
|
|
return this.groups.filter(r => r.name.toLowerCase().includes(value.toLowerCase()));
|
|
}
|
|
return this.groups;
|
|
}
|
|
|
|
select(event: Group) {
|
|
this.groupChange.emit(event.id);
|
|
}
|
|
|
|
input() {
|
|
if (this.search && typeof this.formControl.value == 'string') {
|
|
this.groupChange.emit(this.formControl.value);
|
|
}
|
|
}
|
|
|
|
blur() {
|
|
if (!this.search && typeof this.formControl.value == 'string') {
|
|
const name = this.formControl.value;
|
|
const nameLower = name.toLowerCase();
|
|
let newValue: Group | undefined = undefined;
|
|
const insenstiveGroups = this.filteredGroups.filter(a => a.name.toLowerCase() == nameLower);
|
|
if (insenstiveGroups.length > 1) {
|
|
const sensitiveGroup = insenstiveGroups.find(a => a.name == name);
|
|
newValue = sensitiveGroup ?? undefined;
|
|
} else if (insenstiveGroups.length == 1) {
|
|
newValue = insenstiveGroups[0];
|
|
}
|
|
|
|
if (newValue) {
|
|
this.formControl.setValue(newValue);
|
|
//this.groupChange.emit(newValue.name);
|
|
} else if (!newValue)
|
|
this.formControl.setValue(undefined);
|
|
//this.groupChange.emit(undefined);
|
|
}
|
|
}
|
|
|
|
displayFn(value: Group) {
|
|
return value?.name;
|
|
}
|
|
}
|