DNDTools/src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.ts

import { Component } from '@angular/core';
import {
  CdkDragDrop,
  CdkDropList,
  CdkDrag,
  moveItemInArray,
} from '@angular/cdk/drag-drop';
import { DataService } from 'src/services/data/data.service';
import { Ability } from 'src/interfaces/ability';
import { NgxSmartModalService } from 'ngx-smart-modal';
import { AbilityDetailsComponent } from './ability-details/ability-details.component';
import { DetailsService } from 'src/services/details/details.service';

@Component({
  selector: 'ability-table',
  templateUrl: './ability-table.component.html',
  styleUrls: ['./ability-table.component.scss'],
})
export class AbilityTableComponent {
  public abilities!: Ability[];

  public costTranslator: any = {
    action: 'Aktion',
    bonus: 'Bonusaktion',
    reaction: 'Reaktion',
  };

  public isToUpdate: boolean = false;
  public abilityToUpdate: Ability | undefined;
  public updateAbilityIndex: number | undefined;

  ///////////

  public constructor(
    public dataAccessor: DataService,
    public ngxSmartModalService: NgxSmartModalService,
    private detailsAccessor: DetailsService
  ) {}

  public ngOnInit(): void {
    this.abilities = this.dataAccessor.getAbilities();
  }

  public ngAfterViewInit(): void {
    this.abilities.forEach((ability, abilityIndex) => {
      this.correctChargesView(abilityIndex);
    });
  }

  ///////////

  public getArray(length: number): any[] {
    return Array.from({ length: length });
  }

  public drop(event: CdkDragDrop<string[]>): void {
    moveItemInArray(this.abilities, event.previousIndex, event.currentIndex);
    this.updateDatabase();
  }

  public openAbilityModal(abilityIndex?: number): void {
    if (abilityIndex !== undefined) {
      this.isToUpdate = true;
      this.abilityToUpdate = this.abilities[abilityIndex];
      this.updateAbilityIndex = abilityIndex;
    }
    this.ngxSmartModalService.getModal('abilityModal').open();
  }

  public handleChangedCharges(abilityindex: number, CheckBoxRef: any): void {
    const newValue = CheckBoxRef.checked;
    // checked now, so a charge was used -> decrease
    if (newValue) {
      this.abilities[abilityindex].currentlyUsedCharges++;
      // else increase
    } else {
      this.abilities[abilityindex].currentlyUsedCharges--;
    }
    this.correctChargesView(abilityindex);
    this.updateDatabase();
  }

  public correctChargesView(abilityIndex: number): void {
    const charges = this.abilities[abilityIndex].charges;
    const currentlyUsedCharges =
      this.abilities[abilityIndex].currentlyUsedCharges;
    for (
      let chargeIndex = 0;
      chargeIndex < currentlyUsedCharges;
      chargeIndex++
    ) {
      setTimeout(() => {
        (
          document.getElementById(
            'checkbox' + abilityIndex + '-' + chargeIndex
          ) as HTMLInputElement
        ).checked = true;
      });
    }
    for (
      let chargeIndex = currentlyUsedCharges;
      chargeIndex < charges;
      chargeIndex++
    ) {
      setTimeout(() => {
        (
          document.getElementById(
            'checkbox' + abilityIndex + '-' + chargeIndex
          ) as HTMLInputElement
        ).checked = false;
      });
    }
  }

  public updateDatabase(): void {
    this.dataAccessor.setSAbilities(this.abilities);
  }

  // add
  public addNewlyCreatedAbility(ability: Ability): void {
    this.abilities.push(ability);
    this.updateDatabase();
  }

  //  update
  public updateAbility(ability: Ability): void {
    this.abilities[this.updateAbilityIndex!] = ability;
    this.updateDatabase();
    this.correctChargesView(this.updateAbilityIndex!);
    this.resetUpdateData();
  }

  private resetUpdateData(): void {
    this.isToUpdate = false;
    this.abilityToUpdate = undefined;
    this.updateAbilityIndex = undefined;
  }

  private deleteAbility(index: number): void {
    this.abilities.splice(index, 1);
    this.updateDatabase();
  }

  // details panel

  public openDetailsPanel(index: number): void {
    this.detailsAccessor.openPanel(AbilityDetailsComponent, {
      abilities: this.abilities[index],
    });
    const resultSubscription = this.detailsAccessor.result$.subscribe(
      (result) => {
        console.log(result);
        if (result.state === 'delete') {
          this.deleteAbility(index);
        } else if (result.state === 'update') {
          this.openAbilityModal(index);
        }
        resultSubscription.unsubscribe();
      }
    );
  }
}