Implemented custom tabbar and made its content scrollable

.nx/cache/d/daemon.log

@@ -460192,3 +460192,78 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-28T06:10:58.120Z - Time taken for 'hash changed files from watcher' 69.08570003509521ms
 [NX Daemon Server] - 2023-11-28T06:10:58.120Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-28T06:10:58.121Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-28T17:47:48.159Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-28T17:47:48.162Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-28T17:47:48.164Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-28T17:47:48.166Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-28T17:47:48.166Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-28T17:47:48.167Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-28T17:47:48.646Z - 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-28T17:47:48.646Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-28T17:47:48.648Z - Time taken for 'hash changed files from watcher' 27.919399976730347ms
+[NX Daemon Server] - 2023-11-28T17:47:48.648Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-28T17:47:48.649Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-28T19:01:36.768Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-28T19:01:36.777Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-28T19:01:36.780Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-28T19:01:36.782Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-28T19:01:36.783Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-28T19:01:36.785Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-28T19:01:37.404Z - 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-28T19:01:37.404Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-28T19:01:37.405Z - Time taken for 'hash changed files from watcher' 198.80190014839172ms
+[NX Daemon Server] - 2023-11-28T19:01:37.406Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-28T19:01:37.407Z - [WATCHER]: .nx/cache/d/daemon.log was modified
+[NX Daemon Server] - 2023-11-28T19:01:37.407Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":19756}
+{"processId":17748}

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

@@ -1,4 +1,4 @@
-<div class="ability-panel-container">
+<!-- <div class="ability-panel-container">
   <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
     <li [ngbNavItem]="1">
       <button ngbNavLink>Fähigkeiten</button>
@@ -26,7 +26,67 @@
     </li>
   </ul>
 
-  <div [ngbNavOutlet]="nav" class="mt-2"></div>
-
-  <pre>Active: {{ active }}</pre>
+  <div [ngbNavOutlet]="nav"></div>
+</div> -->
+<div class="ability-panel-container">
+  <div class="tab-row">
+    <button
+      class="tab-button"
+      (click)="active = 1"
+      [class]="active === 1 ? 'active' : ''"
+    >
+      Fähigkeiten
+    </button>
+    <button
+      class="tab-button"
+      (click)="active = 2"
+      [class]="active === 2 ? 'active' : ''"
+    >
+      Eigenschaften
+    </button>
+    <button
+      class="tab-button"
+      (click)="active = 3"
+      [class]="active === 3 ? 'active' : ''"
+    >
+      Zauberplätze
+    </button>
+    <button
+      class="tab-button"
+      (click)="active = 4"
+      [class]="active === 4 ? 'active' : ''"
+    >
+      Übungen
+    </button>
+  </div>
+  <!-- <div class="tab-content"> -->
+  @switch(active){ @case(1){
+  <ability-table #abilityTable></ability-table>
+  } @case(2){
+  <trait-table #traitTable></trait-table>
+  } @case(3){
+  <spellslots #spellslots></spellslots>
+  } @case(4){
+  <proficiencies-table #proficienciesTable></proficiencies-table>
+  } }
+  <!-- <button (click)="openModal()">+</button> -->
+  @if(active === 1 || active === 2){
+  <ui-button
+    [type]="'add'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    class="button-margin"
+    (click)="openModal()"
+  ></ui-button>
+  } @else{
+  <ui-button
+    [type]="'edit'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    class="button-margin"
+    (click)="openModal()"
+  >
+  </ui-button>
+  }
+  <!-- </div> -->
 </div>

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

@@ -3,30 +3,86 @@
     background-color: var(--field-background-color);
     box-shadow: var(--shadow-small);
     border-radius: 10px;
+    height: 48rem;
+    display:flex;
+    flex-direction: column;
+}
+
+.tab-row{
+    display: flex;
+    flex: 0 0 3rem;
+    > *{
+        flex: 1 1 0;
+    }
+}
+
+ability-table{
+    flex: 0 0 calc(100% - 8rem);
+    overflow: auto;
+}
+
+trait-table{
+    flex: 0 0 calc(100% - 8rem);
+    overflow: auto;
+}
 
-    max-height: 85vh;
+spellslots{
+    flex: 0 0 calc(100% - 8rem);
+    overflow: auto;
 }
 
-button{
+proficiencies-table{
+    flex: 0 0 calc(100% - 8rem);
+    overflow: auto;
+}
+
+.tab-button{
+    height: 2rem;
     font-size: 1.25rem;
     font-weight: 600;
     color: black;
     border: 1px solid black !important;
     transition: all 0.25s ease-in-out;
     background-color: var(--primary-color-light);
+
+    &.active{
+        height: 2.5rem;
+        background-color: var(--primary-color);
+    }
 }
 
-button:hover{
+.button-margin{
+    margin: 1rem 0rem;
 
-    color: black;
-    background-color: var(--primary-color);
 }
 
-button.active{
-    // height: 4.5rem;
-    // font-size: 1.625rem;
-    background-color: var(--primary-color) !important;
-}
+
+
+
+
+
+// .ability-table-container{
+//     display: flex;
+//     flex-direction: column;
+//     flex: 0 0 calc(100% - 3rem);
+//     overflow: auto;
+// }
+
+
+
+
+
+// button:hover{
+
+//     color: black;
+//     background-color: var(--primary-color);
+// }
+
+// button.active{
+//     // height: 4.5rem;
+//     // font-size: 1.625rem;
+//     background-color: var(--primary-color) !important;
+// }
 
 
 // li{

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'ability-panel',
@@ -6,5 +6,27 @@ import { Component } from '@angular/core';
   styleUrls: ['./ability-panel.component.scss'],
 })
 export class AbilityPanelComponent {
-  active = 2;
+  @ViewChild('abilityTable') abilityTable: any;
+  @ViewChild('traitTable') traitTable: any;
+  @ViewChild('spellslots') spellslots: any;
+  @ViewChild('proficienciesTable') proficienciesTable: any;
+
+  active = 1;
+
+  public openModal() {
+    switch (this.active) {
+      case 1:
+        this.abilityTable.openAbilityModal();
+        break;
+      case 2:
+        this.traitTable.openTraitModal();
+        break;
+      case 3:
+        this.spellslots.openSpellslotModal();
+        break;
+      case 4:
+        this.proficienciesTable.modifyToolsAndLanguages();
+        break;
+    }
+  }
 }

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

@@ -31,17 +31,7 @@
       </span>
     </div>
   </div>
-
-  <!-- <button (click)="openAbilityModal()">+</button> -->
 </div>
-<ui-button
-  style="margin: 1rem"
-  [type]="'add'"
-  [size]="'xlarge'"
-  [color]="'primary'"
-  (click)="openAbilityModal()"
->
-</ui-button>
 
 <ability-modal
   (abilityCreated)="addNewlyCreatedAbility($event)"

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

@@ -80,17 +80,14 @@
       {{ language }}
     </div>
   </div>
-  <!-- <button (click)="modifyToolsAndLanguages()">
-    <icon [size]="'xs'" [type]="'UI'" [icon]="'edit'"></icon>Anpassen
-  </button> -->
-  <ui-button
+  <!-- <ui-button
     style="margin: 1rem"
     [type]="'edit'"
     [size]="'xlarge'"
     [color]="'primary'"
     (click)="modifyToolsAndLanguages()"
   >
-  </ui-button>
+  </ui-button> -->
 </div>
 
 <tools-modal (proficienciesUpdated)="updateProficiencies($event)"></tools-modal>

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

@@ -30,15 +30,6 @@
       </ng-container>
     </div>
   </div>
-
-  <icon
-    style="position: absolute; right: 0; top: 0"
-    [icon]="'edit'"
-    [size]="'s'"
-    [type]="'UI'"
-    [class]="'pointer'"
-    (click)="initiateModification()"
-  ></icon>
 </div>
 
 <spellslots-modal

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

@@ -140,7 +140,7 @@ export class SpellslotsComponent {
     this.dataAccessor.setKiPoints(this.kiPoints);
   }
 
-  public initiateModification(): void {
+  public openSpellslotModal(): void {
     this.ngxSmartModalService.getModal('spellslotsModal').open();
   }
 

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

@@ -12,14 +12,14 @@
     <p>{{ trait.shortDescription }}</p>
   </div>
 </div>
-<ui-button
+<!-- <ui-button
   style="margin: 1rem"
   [type]="'add'"
   [size]="'xlarge'"
   [color]="'primary'"
   (click)="openTraitModal()"
 >
-</ui-button>
+</ui-button> -->
 
 <trait-modal
   (traitCreated)="addNewlyCreatedTrait($event)"