zitadel/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts

import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
import { from, Subject } from 'rxjs';
import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
import { Role, RoleDisplayNameQuery, RoleQuery } from 'src/app/proto/generated/zitadel/project_pb';
import { ManagementService } from 'src/app/services/mgmt.service';


@Component({
  selector: 'cnsl-search-roles-autocomplete',
  templateUrl: './search-roles-autocomplete.component.html',
  styleUrls: ['./search-roles-autocomplete.component.scss'],
})
export class SearchRolesAutocompleteComponent implements OnDestroy {
  public selectable: boolean = true;
  public removable: boolean = true;
  public addOnBlur: boolean = true;
  public separatorKeysCodes: number[] = [ENTER, COMMA];
  public myControl: UntypedFormControl = new UntypedFormControl();
  public names: string[] = [];
  public roles: Array<Role.AsObject> = [];
  public filteredRoles: Array<Role.AsObject> = [];
  public isLoading: boolean = false;
  @ViewChild('nameInput') public nameInput!: ElementRef<HTMLInputElement>;
  @ViewChild('auto') public matAutocomplete!: MatAutocomplete;
  @Input() public projectId: string = '';
  @Input() public singleOutput: boolean = false;
  @Output() public selectionChanged: EventEmitter<Role.AsObject[] | Role.AsObject> = new EventEmitter();

  private unsubscribed$: Subject<void> = new Subject();
  constructor(private mgmtService: ManagementService) {
    this.myControl.valueChanges
      .pipe(
        takeUntil(this.unsubscribed$),
        debounceTime(200),
        tap(() => this.isLoading = true),
        switchMap(value => {
          const query = new RoleQuery();

          // const key = new RoleKeyQuery();
          // key.setKey(key)
          // query.setKey(key)

          const dQuery = new RoleDisplayNameQuery();
          dQuery.setDisplayName(value);
          query.setDisplayNameQuery(dQuery);

          return from(this.mgmtService.listProjectRoles(this.projectId, 10, 0, [query]));
        }),
      ).subscribe((resp) => {
        this.isLoading = false;
        this.filteredRoles = resp.resultList;
      }, error => {
        this.isLoading = false;
      });
  }

  public ngOnDestroy(): void {
    this.unsubscribed$.next();
  }

  public displayFn(project?: Role.AsObject): string {
    return project ? `${project.displayName}` : '';
  }

  public add(event: MatChipInputEvent): void {
    if (!this.matAutocomplete.isOpen) {
      const input = event.chipInput?.inputElement;
      const value = event.value;

      if ((value || '').trim()) {
        const index = this.filteredRoles.findIndex((role) => {
          if (role.key) {
            return role.key === value;
          } else {
            return false;
          }
        });
        if (index > -1) {
          if (this.roles && this.roles.length > 0) {
            this.roles.push(this.filteredRoles[index]);
          } else {
            this.roles = [this.filteredRoles[index]];
          }
        }
      }

      if (input) {
        input.value = '';
      }
    }
  }

  public remove(role: Role.AsObject): void {
    const index = this.roles.indexOf(role);

    if (index >= 0) {
      this.roles.splice(index, 1);
    }
  }

  public selected(event: MatAutocompleteSelectedEvent): void {
    const index = this.filteredRoles.findIndex((role) => role.key === event.option.value);
    if (index !== -1) {
      if (this.singleOutput) {
        this.selectionChanged.emit(this.filteredRoles[index]);
      } else {
        if (this.roles && this.roles.length > 0) {
          this.roles.push(this.filteredRoles[index]);
        } else {
          this.roles = [this.filteredRoles[index]];
        }
        this.selectionChanged.emit(this.roles);

        this.nameInput.nativeElement.value = '';
        this.myControl.setValue(null);
      }

    }
  }
}