reworked journal-spellcards because many aspects were outsourced to spellbook and not needed anymore

src/app/journal/journal-spellbook/journal-spellbook.component.html

@@ -15,7 +15,8 @@
       </div>
     </div>
 
-    <hr />
+    <!-- <hr /> -->
+    <div class="divider"></div>
     <div class="class-picker">
       @for (className of translator.magicClasses; track className) {
         <div class="class">

src/app/journal/journal-spellbook/journal-spellbook.component.scss

@@ -15,6 +15,14 @@ h1 {
   font-size: 3.5rem;
   font-weight: 500;
   margin-bottom: 0;
+  // padding-left: 2rem;
+}
+
+.divider {
+  border-top: 2px solid #9b8559;
+  height: 1px;
+  width: 100%;
+  margin-bottom: 0.75rem;
 }
 
 .header-row {

src/app/journal/journal-spellbook/journal-spellbook.component.ts

@@ -432,6 +432,7 @@ export class JournalSpellbookComponent {
       (result) => {
         if (result.state === 'update') {
           this.dataAccessor.updateCustomSpell(result.data);
+          // TODO: Update the spell in the prepared spells and favorite spells
         }
         resultSubscription.unsubscribe();
         this.refreshFilteredSpells();

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

@@ -64,11 +64,7 @@
             <add-card
               [level]="index"
               [alreadyUsedSpells]="getUsedIDs(index)"
-              (createNewSpell)="openSpellCreationModal(index, false)"
-              (createNewSpellFromOfficial)="
-                openSpellCreationModal(index, true, $event)
-              "
-              (onSpellSelected)="addSpellToSpelllist($event, index)"
+              (onSpellSelected)="addSpell($event, index)"
             ></add-card>
           }
         </div>

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

@@ -55,6 +55,11 @@ export class JournalSpellcardsComponent {
 
   ///////// FUNCTIONS //////////
 
+  /**
+   * Collects all ids of the spells in the spell list of a given level.
+   * They are passed to the add-card to exclude them from the list of available spells.
+   * @param level The level of the spell.
+   */
   public getUsedIDs(level: number): number[] {
     const usedIDs: number[] = [];
     this.getSpellList(level).forEach((spell) => {
@@ -102,127 +107,10 @@ export class JournalSpellcardsComponent {
           this.getSpellList(level).splice(spellIndex, 1);
           this.updateSpellsInDatabase(level);
         }
-        // else if (result.state === 'update') {
-        //   setTimeout(() => {
-        //     this.openSpellModificationModal(level, spellIndex);
-        //   }, 100);
-        // }
-      },
-    );
-  }
-
-  /**
-   * Opens a modal to modify an existing spell. The spell is then updated in the dataAccessor, local level and favorites.
-   * @param level The current level of the spell.
-   * @param index The index where the spell is located in the spell list.
-   */
-  public openSpellModificationModal(level: number, index: number): void {
-    this.modalAccessor.openModal(SpellModalComponent, {
-      spell:
-        index !== undefined
-          ? JSON.parse(JSON.stringify(this.getSpellList(level)![index]))
-          : undefined,
-      isModification: true,
-    });
-    const resultSubscription = this.modalAccessor.result$.subscribe(
-      (result) => {
-        if (result.state === 'update') {
-          // level was not modified
-          if (level === result.data.level) {
-            this.updateSpell(result.data, level, index);
-            this.dataAccessor.updateFavoriteSpell(result.data);
-            this.dataAccessor.updateCustomSpell(result.data);
-          } else {
-            // level was modified
-            this.getSpellList(level).splice(index, 1);
-            this.addSpell(result.data, result.data.level);
-          }
-        }
-        resultSubscription.unsubscribe();
-      },
-    );
-  }
-
-  /**
-   * In this modal new spells can be created. This can be completely new spells or
-   * modified official spells. If successful, the spell is added to the spell list,
-   * sent to the daService and sent to the spellsService which in return sends it to the dataBase
-   * @param level
-   * @param isBasedOnOfficialSpell
-   * @param spell
-   */
-  public openSpellCreationModal(
-    level: number,
-    isBasedOnOfficialSpell: boolean,
-    spell?: Spell,
-  ): void {
-    this.modalAccessor.openModal(SpellModalComponent, {
-      spell: isBasedOnOfficialSpell ? spell : undefined,
-      level: level,
-      id: this.dataAccessor.customSpellId,
-      isBasedOnOfficialSpell: isBasedOnOfficialSpell,
-      classes: [this.dataAccessor.characterData.class],
-    });
-    const resultSubscription = this.modalAccessor.result$.subscribe(
-      (result) => {
-        if (result.state === 'add') {
-          this.addSpell(result.data, level);
-          // this.spellsService.addCustomSpell(result.data);
-          this.dataAccessor.addCustomSpell(result.data);
-        } else {
-        }
-        resultSubscription.unsubscribe();
       },
     );
   }
 
-  /**
-   * Opens the modal to manage custom spells. Here, custom spells can be deleted.
-   */
-  // TODO: DELETE
-  // public openManageCustomSpellsModal(): void {
-  //   this.modalAccessor.openModal(CustomSpellsModalComponent, {
-  //     spells: this.dataAccessor.customSpells,
-  //   });
-  //   const resultSubscription = this.modalAccessor.result$.subscribe(
-  //     (result) => {
-  //       if (result.state === 'delete') {
-  //         result.data.forEach((spell: Spell) => {
-  //           this.deleteCustomSpell(spell);
-  //         });
-  //       }
-  //       resultSubscription.unsubscribe();
-  //     },
-  //   );
-  // }
-
-  /**
-   * Deletes a custom spell from the custom spells list.
-   * It is deleted in the spells and data service.
-   * It is also removed from the prepared and favorite spells list if present.
-   * @param spell
-   */
-  public deleteCustomSpell(spell: Spell): void {
-    this.dataAccessor.deleteCustomSpell(spell);
-    this.spellsService.deleteCustomSpell(spell);
-    let list = this.getSpellList(spell.level);
-    const index = list.findIndex((spellList) => spellList.id === spell.id);
-    if (index > -1) {
-      list.splice(index, 1);
-      this.dataAccessor.removeFavoriteSpell(spell);
-      this.updateSpellsInDatabase(spell.level);
-    }
-  }
-
-  /**
-   * Adds a given spell to the spelllist of a specific level.
-   * @param spell The spell to add.
-   * @param level The level the spell needs to be added to.
-   */
-  public addSpellToSpelllist(spell: Spell, level: number): void {
-    this.addSpell(spell, level);
-  }
-
   /**
    * Adds a given spell to the spell list specified by level.
    * Also updates the spell list in the database.
@@ -234,17 +122,6 @@ export class JournalSpellcardsComponent {
     this.updateSpellsInDatabase(level);
   }
 
-  /**
-   * Overrides a spell in a given spell list, specified by the index.
-   * @param spell The new spell.
-   * @param level The level to add the spell to.
-   * @param index The index at which the spell should be overridden.
-   */
-  public updateSpell(spell: Spell, level: number, index: number): void {
-    this.getSpellList(level)![index] = spell;
-    this.updateSpellsInDatabase(level);
-  }
-
   /**
    * Returns the reference to the spell list specified by the level.
    * @param level Specifies the level of the spell list.
@@ -405,12 +282,26 @@ export class JournalSpellcardsComponent {
     }
   }
 
+  /**
+   * When a spell is dragged, the index, representing the level of the spell is stored in the draggingIndex variable.
+   * @param index The spell's level.
+   */
   public dragStart(index: number) {
     this.draggingIndex = index;
   }
 
+  /**
+   * Checks if the dragged element was dropped over the removal card,
+   * the spell is removed from the prepared list and the favorites list.
+   * @param event The event that contains the dragged element.
+   */
   public dragEnd(event: any) {
     if (event.event.target.classList.contains('removal-card')) {
+      this.dataAccessor.removeFavoriteSpell(
+        this.getSpellList(this.draggingIndex!)[
+          event.source.element.nativeElement.id
+        ],
+      );
       this.getSpellList(this.draggingIndex!).splice(
         event.source.element.nativeElement.id,
         1,