54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { Component, inject, Input } from '@angular/core';
|
|
import { GroupChatter } from '../../shared/models/group-chatter';
|
|
import { TwitchUserItemComponent } from "../twitch-user-item/twitch-user-item.component";
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
import { containsLettersInOrder } from '../../shared/utils/string-compare';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatDialog } from '@angular/material/dialog';
|
|
import { Group } from '../../shared/models/group';
|
|
import { TwitchUserItemAddComponent } from '../twitch-user-item-add/twitch-user-item-add.component';
|
|
|
|
@Component({
|
|
selector: 'twitch-user-list',
|
|
imports: [
|
|
MatButtonModule,
|
|
MatFormFieldModule,
|
|
MatIconModule,
|
|
MatInputModule,
|
|
ReactiveFormsModule,
|
|
TwitchUserItemComponent,
|
|
],
|
|
templateUrl: './twitch-user-list.component.html',
|
|
styleUrl: './twitch-user-list.component.scss'
|
|
})
|
|
export class TwitchUserListComponent {
|
|
@Input({ required: true }) twitchUsers: GroupChatter[] = [];
|
|
@Input() group: Group | undefined;
|
|
|
|
readonly dialog = inject(MatDialog);
|
|
readonly searchControl: FormControl = new FormControl('');
|
|
|
|
opened = false;
|
|
|
|
|
|
get users(): GroupChatter[] {
|
|
return this.twitchUsers.filter(u => containsLettersInOrder(u.chatter_label, this.searchControl.value));
|
|
}
|
|
|
|
add() {
|
|
if (this.opened)
|
|
return;
|
|
|
|
this.opened = true;
|
|
|
|
const dialogRef = this.dialog.open(TwitchUserItemAddComponent, {
|
|
data: { username: this.searchControl.value, group: this.group },
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe((chatter: GroupChatter) => this.opened = false);
|
|
}
|
|
}
|