69 lines
2.3 KiB
TypeScript
69 lines
2.3 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 { HermesClientService } from '../../hermes-client.service';
|
||
|
|
import { Group } from '../../shared/models/group';
|
||
|
|
import { TwitchUserItemAddComponent } from '../twitch-user-item-add/twitch-user-item-add.component';
|
||
|
|
import EventService from '../../shared/services/EventService';
|
||
|
|
|
||
|
|
@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 client = inject(HermesClientService);
|
||
|
|
readonly events = inject(EventService);
|
||
|
|
readonly searchControl: FormControl = new FormControl('');
|
||
|
|
|
||
|
|
opened = false;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
this.events.listen('delete_group_chatter', (chatter: GroupChatter) => {
|
||
|
|
this.twitchUsers.splice(this.twitchUsers.findIndex(c => c.group_id == chatter.group_id && c.chatter_id == chatter.chatter_id), 1);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
if (!chatter)
|
||
|
|
return;
|
||
|
|
|
||
|
|
this.twitchUsers.push(chatter);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|