add-card.component.ts 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import { Component, Input, Output, EventEmitter } from '@angular/core';
  2. import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
  3. import { Observable, OperatorFunction } from 'rxjs';
  4. import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
  5. import { FormsModule } from '@angular/forms';
  6. import { JsonPipe } from '@angular/common';
  7. import { SpellsService } from 'src/services/spells/spells.service';
  8. import { FormControl, ReactiveFormsModule } from '@angular/forms';
  9. @Component({
  10. selector: 'add-card',
  11. templateUrl: './add-card.component.html',
  12. styleUrl: './add-card.component.scss',
  13. })
  14. export class AddCardComponent {
  15. @Input() level!: number;
  16. @Output() createNewSpell = new EventEmitter<any>();
  17. @Output() onSpellSelected = new EventEmitter<any>();
  18. public newSpellName: string = '';
  19. private availableSpells: string[] = [];
  20. public isModification: boolean | undefined;
  21. public constructor(private spellsAccessor: SpellsService) {}
  22. public ngOnInit(): void {
  23. this.availableSpells = this.spellsAccessor.getListOfSpells(this.level);
  24. this.spellsAccessor.closeSubject$.subscribe((level) => {
  25. if (level !== this.level) {
  26. this.resetThis();
  27. }
  28. });
  29. }
  30. // Enlarged view
  31. public emitNewSpell(): void {
  32. this.createNewSpell.emit(this.level);
  33. this.resetThis();
  34. }
  35. public continueToSpellSelection(modify: boolean): void {
  36. this.isModification = modify;
  37. this.spellsAccessor.closeAllOthers(this.level);
  38. }
  39. public spellSelected(spellname: any): void {
  40. const response = {
  41. spell: this.spellsAccessor.getSpell(spellname),
  42. isToModify: this.isModification,
  43. };
  44. this.onSpellSelected.emit(response);
  45. this.resetThis();
  46. }
  47. public resetThis(): void {
  48. this.newSpellName = '';
  49. this.isModification = undefined;
  50. }
  51. public search: OperatorFunction<string, readonly string[]> = (
  52. text$: Observable<string>
  53. ) =>
  54. text$.pipe(
  55. debounceTime(200),
  56. distinctUntilChanged(),
  57. map((term) =>
  58. term.length < 2
  59. ? []
  60. : this.availableSpells
  61. .filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
  62. .slice(0, 5)
  63. )
  64. );
  65. }