cleaned up the code and restyled the details page of items

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

@@ -1,6 +1,8 @@
 import { Component, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
+import { DetailsService } from 'src/services/details/details.service';
+import { ModalService } from 'src/services/modal/modal.service';
 
 @Component({
   selector: 'navigation-panel',
@@ -14,7 +16,9 @@ export class NavigationPanelComponent {
 
   constructor(
     private navigation: NavigationPanelService,
-    private router: Router
+    private router: Router,
+    private detailsAccessor: DetailsService,
+    private modalAccessor: ModalService
   ) {}
 
   public ngOnInit(): void {
@@ -38,6 +42,11 @@ export class NavigationPanelComponent {
     this.panel?.nativeElement.classList.remove('panel--open');
   }
 
+  public closeAll() {
+    this.detailsAccessor.closePanel('cancel');
+    this.modalAccessor.handleModalClosing('cancel');
+  }
+
   private checkForActiveTab(): void {
     const tab = this.router.url.split('/')[2];
     switch (tab) {

src/app/journal/journal-inventory/food-details/food-details.component.html

@@ -1,41 +0,0 @@
-<div class="details-title">{{ item.name }}</div>
-
-<div class="details-flex-row top-2">
-  <div>
-    <div class="details-value">{{ item.isReady }}</div>
-    <div class="details-label">Verzehrfertig</div>
-  </div>
-
-  <div>
-    <div class="details-value">{{ item.weight }}</div>
-    <div class="details-label">Gewicht</div>
-  </div>
-
-  <div>
-    <div class="details-value">{{ item.quantity }}</div>
-    <div class="details-label">Anzahl</div>
-  </div>
-</div>
-
-<div class="details-content">{{ item.description }}</div>
-
-<div class="vertical-button-wrapper-3">
-  <ui-button
-    [type]="'edit'"
-    [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]="'cancel'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('cancel')"
-  ></ui-button>
-</div>

src/app/journal/journal-inventory/food-details/food-details.component.spec.ts

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

src/app/journal/journal-inventory/food-details/food-details.component.ts

@@ -1,23 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Food } from 'src/interfaces/food';
-import { DetailsService } from 'src/services/details/details.service';
-
-@Component({
-  selector: 'app-food-details',
-  templateUrl: './food-details.component.html',
-  styleUrl: './food-details.component.scss',
-})
-export class FoodDetailsComponent {
-  public constructor(public detailsAccessor: DetailsService) {}
-
-  @Input() item: Food = {
-    name: '',
-    weight: 0,
-    quantity: 0,
-    isReady: false,
-  };
-
-  public close(result: string): void {
-    this.detailsAccessor.closePanel(result);
-  }
-}

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

@@ -203,7 +203,8 @@
       (cdkDropListDropped)="drop($event, food, 'food')"
     >
       @for (item of food; let index = $index; track item) {
-      <div class="item" cdkDrag (click)="openFoodDetails(index)">
+      <!-- <div class="item" cdkDrag (click)="openFoodDetails(index)"> -->
+      <div class="item" cdkDrag (click)="openItemsDetails(food, index, 'food')">
         <div class="item-property">{{ item.name }}</div>
         <div class="item-property">@if(item.isReady){Ja} @else {Nein}</div>
         <div class="item-property">{{ item.weight }} lb.</div>

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

@@ -12,7 +12,6 @@ import { Food } from 'src/interfaces/food';
 import { SimpleItemDetailsComponent } from './simple-item-details/simple-item-details.component';
 import { ModalService } from 'src/services/modal/modal.service';
 import { SimpleItemModalComponent } from './simple-item-modal/simple-item-modal.component';
-import { FoodDetailsComponent } from './food-details/food-details.component';
 
 @Component({
   selector: 'app-journal-inventory',
@@ -100,25 +99,6 @@ export class JournalInventoryComponent {
     );
   }
 
-  public openFoodDetails(index: number): void {
-    this.detailsAccessor.openPanel(FoodDetailsComponent, {
-      item: this.food[index],
-    });
-    const resultSubscription = this.detailsAccessor.result$.subscribe(
-      (result) => {
-        if (result.state === 'delete') {
-          this.food.splice(index, 1);
-          this.dataAccessor.food = this.food;
-        } else if (result.state === 'update') {
-          this.openFoodModal(true, index);
-        } else if (result.state === 'cancel') {
-          // Do nothing
-        }
-        resultSubscription.unsubscribe();
-      }
-    );
-  }
-
   public openFoodModal(isUpdate: boolean, index?: number): void {
     this.modalAccessor.openModal(SimpleItemModalComponent, {
       item:
@@ -198,6 +178,8 @@ export class JournalInventoryComponent {
       this.dataAccessor.consumables = this.consumables;
     } else if (listname === 'miscellaneous') {
       this.dataAccessor.miscellaneous = this.miscellaneous;
+    } else if (listname === 'food') {
+      this.dataAccessor.food = this.food;
     }
     this.updateWeight();
   }

src/app/journal/journal-inventory/simple-item-details/simple-item-details.component.html

@@ -1,9 +1,18 @@
 <div class="title">{{ item.name }}</div>
 
 <div class="value-row t-2">
-  <value-box [value]="item.value" [label]="'Wert'"></value-box>
+  <value-box
+    [value]="isSimpleItem(item) ? item.value : item.isReady ? 'Ja' : 'Nein'"
+    [label]="isSimpleItem(item) ? 'Wert' : 'Verzehrbereit'"
+  ></value-box>
   <value-box [value]="item.weight" [label]="'Gewicht'"></value-box>
+</div>
+<div class="value-row t-2">
   <value-box [value]="item.quantity" [label]="'Anzahl'"></value-box>
+  <value-box
+    [value]="item.quantity * item.weight"
+    [label]="'Gesamtgewicht'"
+  ></value-box>
 </div>
 
 <div class="input-label t-2">Beschreibung</div>

src/app/journal/journal-inventory/simple-item-details/simple-item-details.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { Food } from 'src/interfaces/food';
 import { SimpleItem } from 'src/interfaces/simple-item';
 import { DetailsService } from 'src/services/details/details.service';
 
@@ -9,15 +10,12 @@ import { DetailsService } from 'src/services/details/details.service';
 })
 export class SimpleItemDetailsComponent {
   public constructor(public detailsAccessor: DetailsService) {}
-  @Input() item: SimpleItem = {
-    name: '',
-    weight: 0,
-    value: 0,
-    quantity: 0,
-    description: '',
-  };
+  @Input() item!: any;
 
   public close(result: string): void {
     this.detailsAccessor.closePanel(result);
   }
+  isSimpleItem(item: any): item is SimpleItem {
+    return item && (item as SimpleItem).value !== undefined;
+  }
 }

src/app/journal/journal.module.ts

@@ -84,7 +84,6 @@ import { JournalMapsComponent } from './journal-maps/journal-maps.component';
 import { JournalRulesetComponent } from './journal-ruleset/journal-ruleset.component';
 import { JournalSettingsComponent } from './journal-settings/journal-settings.component';
 import { SimpleItemModalComponent } from './journal-inventory/simple-item-modal/simple-item-modal.component';
-import { FoodDetailsComponent } from './journal-inventory/food-details/food-details.component';
 import { SpellcardComponent } from './journal-spellcards/spellcard/spellcard.component';
 import { AddCardComponent } from './journal-spellcards/add-card/add-card.component';
 import { GeneralComponent } from './journal-character/general/general.component';
@@ -162,7 +161,6 @@ import { MatRippleModule } from '@angular/material/core';
     SimpleItemDetailsComponent,
     ModalComponent,
     SimpleItemModalComponent,
-    FoodDetailsComponent,
     WeaponModalComponent,
     SpellcardComponent,
     AddCardComponent,