abilities details implemented

src/app/journal/journal-home/details-panel/details-panel.component.scss

@@ -7,6 +7,7 @@
     visibility: hidden;
     background: rgba(0,0,0,0.4);
     z-index: 998;
+    cursor: pointer;
 }
 
 .backdrop--open{
@@ -20,7 +21,6 @@
     right: 0;
     bottom: 0;
     width: 25vw;
-    // background: #fff;
     background-color: var(--background-color);
     z-index: 999;
     transform: translateX(100%);

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.html

@@ -0,0 +1,30 @@
+<div class="details-name">{{ abilities?.name }}</div>
+
+<div class="details-long-description">{{ abilities?.longDescription }}</div>
+
+<div class="details-cost-charge">
+  <div class="details-cost">{{ costTranslator[abilities!.cost] }}</div>
+
+  <div class="details-charges">Aufladungen: {{ abilities?.charges }}</div>
+</div>
+
+<div class="vertical-button-wrapper">
+  <ui-button
+    [type]="'update'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('update')"
+  ></ui-button>
+  <ui-button
+    [type]="'delete'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('delete')"
+  ></ui-button>
+  <ui-button
+    [type]="'dismiss'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('dismiss')"
+  ></ui-button>
+</div>

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.scss

@@ -0,0 +1,8 @@
+.details-cost-charge{
+    display: flex;
+    background-color: var(--secondary-color);
+    justify-content: space-between;
+    margin: 1rem;
+    padding:0.5rem 2rem;
+    border-radius: 10px;
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AbilityDetailsComponent } from './ability-details.component';
+
+describe('AbilityDetailsComponent', () => {
+  let component: AbilityDetailsComponent;
+  let fixture: ComponentFixture<AbilityDetailsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AbilityDetailsComponent]
+    });
+    fixture = TestBed.createComponent(AbilityDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { DetailsService } from 'src/services/details/details.service';
+import { Ability } from 'src/interfaces/ability';
+
+@Component({
+  selector: 'app-ability-details',
+  templateUrl: './ability-details.component.html',
+  styleUrls: ['./ability-details.component.scss'],
+})
+export class AbilityDetailsComponent {
+  public constructor(public detailsAccessor: DetailsService) {}
+
+  public costTranslator: any = {
+    action: 'Aktion',
+    bonus: 'Bonusaktion',
+    reaction: 'Reaktion',
+    none: 'Keine Kosten',
+  };
+
+  @Input() abilities: Ability | undefined;
+
+  public close(result: string): void {
+    this.detailsAccessor.closePanel(result);
+  }
+}

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.html

@@ -3,7 +3,7 @@
     class="example-box"
     [class]="ability.currentlyUsedCharges === ability.charges ? 'used' : ''"
     *ngFor="let ability of abilities; let abilityIndex = index"
-    (click)="openAbilityModal(abilityIndex)"
+    (click)="openDetailsPanel(abilityIndex)"
     cdkDrag
   >
     <div *ngIf="ability.cost != 'none'" class="cost-box">

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

@@ -8,6 +8,8 @@ import {
 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',
@@ -31,7 +33,8 @@ export class AbilityTableComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    public ngxSmartModalService: NgxSmartModalService
+    public ngxSmartModalService: NgxSmartModalService,
+    private detailsAccesssor: DetailsService
   ) {}
 
   public ngOnInit(): void {
@@ -132,4 +135,28 @@ export class AbilityTableComponent {
     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.detailsAccesssor.openPanel(AbilityDetailsComponent, {
+      abilities: this.abilities[index],
+    });
+    const resultSubscription = this.detailsAccesssor.result$.subscribe(
+      (result) => {
+        console.log(result);
+        if (result === 'delete') {
+          this.deleteAbility(index);
+        } else if (result === 'update') {
+          this.openAbilityModal(index);
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
+  }
 }

src/app/journal/journal.module.ts

@@ -47,6 +47,7 @@ import { ProficienciesTableComponent } from './journal-stats/ability-panel/profi
 import { ToolsModalComponent } from './journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component';
 import { TraitDetailsComponent } from './journal-stats/ability-panel/trait-table/trait-details/trait-details.component';
 import { DetailsPanelComponent } from './journal-home/details-panel/details-panel.component';
+import { AbilityDetailsComponent } from './journal-stats/ability-panel/ability-table/ability-details/ability-details.component';
 
 @NgModule({
   declarations: [
@@ -88,6 +89,7 @@ import { DetailsPanelComponent } from './journal-home/details-panel/details-pane
     ToolsModalComponent,
     TraitDetailsComponent,
     DetailsPanelComponent,
+    AbilityDetailsComponent,
   ],
   imports: [
     CommonModule,