first details panel implemented

.nx/cache/d/daemon.log

@@ -459107,3 +459107,40 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-12T18:46:55.920Z - Time taken for 'hash changed files from watcher' 89.20329999923706ms
 [NX Daemon Server] - 2023-11-12T18:46:55.920Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-12T18:46:55.921Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-13T15:27:01.145Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-11-13T15:27:01.157Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-11-13T15:27:01.159Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-13T15:27:01.160Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-13T15:27:01.161Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-13T15:27:01.162Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-13T15:27:01.807Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-11-13T15:27:01.807Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-13T15:27:01.808Z - Time taken for 'hash changed files from watcher' 111.19519996643066ms
+[NX Daemon Server] - 2023-11-13T15:27:01.809Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-13T15:27:01.809Z - Done responding to the client null

.nx/cache/d/server-process.json

@@ -1 +1 @@
-{"processId":18256}
+{"processId":196}

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

@@ -0,0 +1,6 @@
+<div #backdrop class="backdrop" (click)="closeOffcanvas()"></div>
+<div #offcanvas class="panel">
+  <ng-template
+    *ngComponentOutlet="offcanvasComponent; inputs: inputData"
+  ></ng-template>
+</div>

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

@@ -0,0 +1,31 @@
+.backdrop{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right:0;
+    bottom: 0;
+    visibility: hidden;
+    background: rgba(0,0,0,0.4);
+    z-index: 998;
+}
+
+.backdrop--open{
+    visibility: visible;
+}
+
+
+.panel{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 25vw;
+    background: #fff;
+    z-index: 999;
+    transform: translateX(100%);
+    transition: transform 0.3s ease-in-out;
+}
+
+.panel--open{
+    transform: translate(0)
+}

src/app/journal/journal-home/details-panel/details-panel.component.spec.ts

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

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

@@ -0,0 +1,38 @@
+import { Component, ViewChild } from '@angular/core';
+import { DetailsService } from 'src/services/details/details.service';
+
+@Component({
+  selector: 'details-panel',
+  templateUrl: './details-panel.component.html',
+  styleUrls: ['./details-panel.component.scss'],
+})
+export class DetailsPanelComponent {
+  public constructor(private details: DetailsService) {}
+  @ViewChild('backdrop') backdrop: any;
+  @ViewChild('offcanvas') offcanvas: any;
+
+  public offcanvasComponent: any;
+  public inputData: any;
+
+  ngOnInit() {
+    this.details.offcanvas$.subscribe((data) => {
+      // console.log('offcanvasComponent', data);
+      this.offcanvasComponent = data.component;
+      this.inputData = data.data;
+      this.backdrop.nativeElement.classList.add('backdrop--open');
+      this.offcanvas.nativeElement.classList.add('panel--open');
+    });
+    this.details.closeOffcanvas$.subscribe(() => {
+      this.closeOffcanvas();
+    });
+  }
+
+  public closeOffcanvas(): void {
+    this.backdrop.nativeElement.classList.remove('backdrop--open');
+    this.offcanvas.nativeElement.classList.remove('panel--open');
+    this.offcanvasComponent = undefined;
+    this.inputData = undefined;
+
+    // event mit dem ergebnis emitten
+  }
+}

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

@@ -3,6 +3,6 @@
 
   <app-offcanvas #offcanvas></app-offcanvas>
   <button class="navigation-button" (click)="openNavigation()">open</button>
-  <!-- <app-infopanel></app-infopanel> -->
   <app-tabbar></app-tabbar>
+  <details-panel></details-panel>
 </div>

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

@@ -1 +1,9 @@
-<p>trait-details works!</p>
+<div class="name">{{ trait?.name }}</div>
+<div class="short-description">{{ trait?.shortDescription }}</div>
+<div class="long-description">{{ trait?.longDescription }}</div>
+
+<button (click)="close('update')">Update</button>
+<br />
+<button (click)="close('delete')">Delete</button>
+<br />
+<button (click)="close('dismiss')">Dismiss</button>

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

@@ -1,8 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { DetailsService } from 'src/services/details/details.service';
+import { Trait } from 'src/interfaces/traits';
 
 @Component({
   selector: 'trait-details',
   templateUrl: './trait-details.component.html',
   styleUrls: ['./trait-details.component.scss'],
 })
-export class TraitDetailsComponent {}
+export class TraitDetailsComponent {
+  public constructor(public detailsAccessor: DetailsService) {}
+
+  @Input() trait: Trait | undefined;
+
+  public close(result: string): void {
+    this.detailsAccessor.closePanel(result);
+  }
+}

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

@@ -2,7 +2,7 @@
   <div
     class="example-box"
     *ngFor="let trait of traits; let abilityIndex = index"
-    (click)="openTraitModal(abilityIndex)"
+    (click)="openDetailsPanel(abilityIndex)"
     cdkDrag
   >
     <!-- Eventuell Symbol für den Ursprung des Traits -->
@@ -13,6 +13,7 @@
   </div>
 
   <button (click)="openTraitModal()">+</button>
+  <!-- <button (click)="openDetails()">+</button> -->
 </div>
 
 <trait-modal
@@ -21,3 +22,5 @@
   [isToUpdate]="isToUpdate"
   [traitToUpdate]="traitToUpdate"
 ></trait-modal>
+
+<!-- (click)="openTraitModal(abilityIndex)" -->

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

@@ -6,8 +6,10 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
 import { DataService } from 'src/services/data/data.service';
+import { DetailsService } from 'src/services/details/details.service';
 import { NgxSmartModalService } from 'ngx-smart-modal';
 import { Trait } from 'src/interfaces/traits';
+import { TraitDetailsComponent } from './trait-details/trait-details.component';
 
 @Component({
   selector: 'trait-table',
@@ -23,7 +25,8 @@ export class TraitTableComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    public ngxSmartModalService: NgxSmartModalService
+    public ngxSmartModalService: NgxSmartModalService,
+    private detailsAccesssor: DetailsService
   ) {}
 
   public ngOnInit(): void {
@@ -66,4 +69,28 @@ export class TraitTableComponent {
     this.traitToUpdate = undefined;
     this.updateTraitIndex = undefined;
   }
+
+  private deleteTrait(index: number): void {
+    this.traits.splice(index, 1);
+    this.updateDatabase();
+  }
+
+  // offcanvas
+
+  public openDetailsPanel(index: number): void {
+    this.detailsAccesssor.openOffcanvas(TraitDetailsComponent, {
+      trait: this.traits[index],
+    });
+    const resultSubscription = this.detailsAccesssor.result$.subscribe(
+      (result) => {
+        console.log(result);
+        if (result === 'delete') {
+          this.deleteTrait(index);
+        } else if (result === 'update') {
+          this.openTraitModal(index);
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
+  }
 }

src/app/journal/journal-stats/life-container/life/life.component.ts

@@ -45,7 +45,6 @@ export class LifeComponent {
   }
 
   public addHitPoints(): void {
-    console.log('addCurrentHitPoints');
     if (this.currentHitPoints < this.maxHitPoints) {
       this.dataAccessor.updateCharacterData({
         name: 'currentHitPoints',
@@ -61,7 +60,6 @@ export class LifeComponent {
         value: this.temporaryHitPoints - 1,
       });
     } else if (this.currentHitPoints > 0) {
-      console.log('removeCurrentHitPoints');
       this.dataAccessor.updateCharacterData({
         name: 'currentHitPoints',
         value: this.currentHitPoints - 1,

src/app/journal/journal-stats/weapons-container/weapons-container.component.ts

@@ -48,7 +48,6 @@ export class WeaponsContainerComponent {
   // spells
   public openSpellCreationModal(): void {
     this.ngxSmartModalService.getModal('spellModal').open();
-    console.log('openSpellModal()');
   }
 
   public addNewlyCreatedSpell(spell: Spell): void {
@@ -61,12 +60,10 @@ export class WeaponsContainerComponent {
   }
 
   public updateSpellInTable(data: any): void {
-    console.log('updateSpellInTable()', data);
     this.spellTable.updateSpell(data.spell, data.index);
   }
 
   public deleteSpellInTable(index: number): void {
-    console.log('deleteSpellInTable()', index);
     this.spellTable.deleteSpell(index);
   }
 
@@ -83,7 +80,6 @@ export class WeaponsContainerComponent {
 
   // weapons
   public openWeaponCreationModal(): void {
-    console.log('openWeaponModal()');
     this.ngxSmartModalService.getModal('weaponModal').open();
   }
 

src/app/journal/journal.module.ts

@@ -46,6 +46,7 @@ import { SharedComponentsModule } from '../shared-components/shared-components.m
 import { ProficienciesTableComponent } from './journal-stats/ability-panel/proficiencies-table/proficiencies-table.component';
 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';
 
 @NgModule({
   declarations: [
@@ -86,6 +87,7 @@ import { TraitDetailsComponent } from './journal-stats/ability-panel/trait-table
     ProficienciesTableComponent,
     ToolsModalComponent,
     TraitDetailsComponent,
+    DetailsPanelComponent,
   ],
   imports: [
     CommonModule,

src/services/details/details.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DetailsService } from './details.service';
+
+describe('DetailsService', () => {
+  let service: DetailsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DetailsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/services/details/details.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DetailsService {
+  private offcanvasSubject = new Subject<any>();
+  offcanvas$ = this.offcanvasSubject.asObservable();
+
+  private closeOffcanvasSubject = new Subject<any>();
+  closeOffcanvas$ = this.closeOffcanvasSubject.asObservable();
+
+  private resultSubject = new Subject<any>();
+  result$ = this.resultSubject.asObservable();
+
+  public openOffcanvas(component: any, data: any) {
+    // console.log('openOffcanvas', component, data);
+    this.offcanvasSubject.next({ component, data });
+  }
+
+  // Is called from the dynamic component to close the offcanvas
+  public closePanel(result: any) {
+    // console.log('closePanel', result);
+    // Is listened to in the host component where the panel was opened, to initiate further steps
+    this.resultSubject.next(result);
+    this.closeOffcanvas();
+  }
+
+  public closeOffcanvas() {
+    this.closeOffcanvasSubject.next('close');
+  }
+}