reworked add-card component because some of its logic was moved to spellbook

src/app/journal/journal-spellcards/add-card/add-card.component.html

@@ -1,26 +1,9 @@
 <div class="add-card">
-  @if (state === 1) {
-    <div class="clickable-card" (click)="state = 2; closeOthers()">
+  @if (isIdle) {
+    <div class="clickable-card" (click)="isIdle = false; closeOthers()">
       <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
     </div>
-  } @else if (state === 2) {
-    <div class="button-card">
-      <button (click)="continueToSpellSelection(false); state = 3">
-        {{ "spellcards.add.official" | translate }}
-      </button>
-
-      <hr />
-      <button (click)="continueToSpellSelection(true); state = 3">
-        {{ "spellcards.add.edit" | translate }}
-      </button>
-
-      <hr />
-
-      <button (click)="emitNewSpell()">
-        {{ "spellcards.add.custom" | translate }}
-      </button>
-    </div>
-  } @else if (state === 3) {
+  } @else {
     <div class="spell-selection">
       <div class="controll-row">
         <div class="toggle-row">
@@ -42,24 +25,18 @@
         class="spell-name"
         [(ngModel)]="newSpellName"
         [placeholder]="'spellcards.add.official' | translate"
-        (keyup)="
-          isModification
-            ? filterSpellArrayForModification()
-            : filterSpellArray()
-        "
+        (keyup)="filterSpellArray()"
       />
       <div class="available-spells">
         <ul>
           @for (spell of availableSpells; track spell) {
             <li>
-              <button
-                (click)="
-                  isModification
-                    ? emitNewSpellFromOfficial(spell)
-                    : spellSelected(spell)
-                "
-              >
-                {{ spell.german }}
+              <button (click)="spellSelected(spell)">
+                @if (translate.getDefaultLang() == "de") {
+                  {{ spell.german }}
+                } @else {
+                  {{ spell.english }}
+                }
               </button>
             </li>
           } @empty {
@@ -67,8 +44,6 @@
           }
         </ul>
       </div>
-
-      <!-- <button class="cancel-button" (click)="resetThis()">Abbrechen</button> -->
     </div>
   }
 </div>

src/app/journal/journal-spellcards/add-card/add-card.component.ts

@@ -1,7 +1,8 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 import { Spell } from 'src/interfaces/spell';
 import { SpellsService } from 'src/services/spells/spells.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'add-card',
@@ -11,23 +12,18 @@ import { SpellsService } from 'src/services/spells/spells.service';
 export class AddCardComponent {
   @Input() level!: number;
   @Input() alreadyUsedSpells!: any[];
-
-  @Output() createNewSpell = new EventEmitter<any>();
-  @Output() createNewSpellFromOfficial = new EventEmitter<any>();
   @Output() onSpellSelected = new EventEmitter<any>();
 
   public newSpellName: string = '';
   private classAvailableSpells: any[] = [];
   private allAvailableSpells: any[] = [];
   public availableSpells: any[] = [];
-  public isModification: boolean | undefined;
-  public state: number = 1;
+  public isIdle: boolean = true;
   public showAll: boolean = false;
 
-  public constructor(
-    private spellsAccessor: SpellsService,
-    private dataAccessor: DataService,
-  ) {}
+  private spellsAccessor = inject(SpellsService);
+  private dataAccessor = inject(DataService);
+  public translate: any = inject(TranslateService);
 
   public ngOnInit(): void {
     this.classAvailableSpells = this.spellsAccessor.getAvailableSpells(
@@ -47,35 +43,7 @@ export class AddCardComponent {
 
   public toggleShowAll(): void {
     this.showAll = !this.showAll;
-    if (this.isModification) {
-      this.filterSpellArrayForModification();
-    } else {
-      this.filterSpellArray();
-    }
-  }
-
-  public emitNewSpell(): void {
-    this.createNewSpell.emit(this.level);
-    this.resetThis();
-  }
-
-  public emitNewSpellFromOfficial(spell: Spell): void {
-    this.createNewSpellFromOfficial.emit(spell);
-    this.resetThis();
-  }
-
-  public continueToSpellSelection(modify: boolean): void {
-    this.classAvailableSpells = this.spellsAccessor.getAvailableSpells(
-      this.level,
-      this.dataAccessor.characterData.class,
-    );
-    this.isModification = modify;
-    if (modify) {
-      this.filterSpellArrayForModification();
-    } else {
-      this.filterSpellArray();
-    }
-    this.closeOthers();
+    this.filterSpellArray();
   }
 
   public spellSelected(spell: any): void {
@@ -89,8 +57,7 @@ export class AddCardComponent {
 
   public resetThis(): void {
     this.newSpellName = '';
-    this.state = 1;
-    this.isModification = undefined;
+    this.isIdle = true;
     this.showAll = false;
   }
 
@@ -115,21 +82,4 @@ export class AddCardComponent {
       );
     }
   }
-
-  public filterSpellArrayForModification(): void {
-    let array = this.showAll
-      ? this.allAvailableSpells
-      : this.classAvailableSpells;
-    if (this.newSpellName.length > 0) {
-      this.availableSpells = array.filter(
-        (spell) =>
-          spell.german
-            .toLowerCase()
-            .includes(this.newSpellName.toLowerCase()) ||
-          spell.english.toLowerCase().includes(this.newSpellName.toLowerCase()),
-      );
-    } else {
-      this.availableSpells = array;
-    }
-  }
 }