Updated and redesigned proficiensies with form control

src/app/character/character-creator/character-creator.component.ts

@@ -255,16 +255,13 @@ export class CharacterCreatorComponent {
       this.dataAccessor.addData(
         this.characterName,
         {
-          armor: {
-            light: false,
-            medium: false,
-            heavy: false,
-          },
-          weapons: {
-            simple: false,
-            martial: false,
-            other: [],
-          },
+          light: false,
+          medium: false,
+          heavy: false,
+          shields: false,
+          simple: false,
+          martial: false,
+          other: [],
           tools: [],
           languages: ['Gemeinsprache'],
         },

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

@@ -1,97 +1,81 @@
 <div class="proficiency-container">
   <div class="proficiencies">
-    <!-- <div class="proficiency-name">Fähigkeiten</div> -->
-    <!-- <div class="proficiency-value">{{ proficiencies.skills }}</div> -->
-    <button class="accordion" (click)="toggleAcordion($event)">
-      Waffen und Rüstungen
-    </button>
-    <div class="panel">
-      <div>
-        Einfache Waffen:
-        <input
-          type="checkbox"
-          [(ngModel)]="proficiencies.weapons.simple"
-          (change)="updateDatabase()"
-        />
-      </div>
-      <div>
-        Schwere Waffen:
-        <input
-          type="checkbox"
-          [(ngModel)]="proficiencies.weapons.martial"
-          (change)="updateDatabase()"
-        />
-      </div>
-      <div>
-        Weitere Waffen:
-        <input
-          [(ngModel)]="proficiencies.weapons.other"
-          (change)="updateDatabase()"
-        />
-      </div>
-      <br />
-      <div>
-        Leichte Rüstungen:
-        <input
-          type="checkbox"
-          [(ngModel)]="proficiencies.armor.light"
-          (change)="updateDatabase()"
-        />
-      </div>
-      <div>
-        Mittlere Rüstungen:
-        <input
-          type="checkbox"
-          [(ngModel)]="proficiencies.armor.medium"
-          (change)="updateDatabase()"
-        />
-      </div>
-      <div>
-        Schwere Rüstungen:
-        <input
-          type="checkbox"
-          [(ngModel)]="proficiencies.armor.heavy"
-          (change)="updateDatabase()"
-        />
-      </div>
-    </div>
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Waffen und Rüstungen</mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="proficiencies" (change)="updateDatabase()">
+          <div class="centered-line">
+            <input type="checkbox" formControlName="light" />
+            <label>Leichte Rüstungen</label>
+          </div>
+          <div class="centered-line">
+            <input type="checkbox" formControlName="medium" />
+            <label>Mittlere Rüstungen</label>
+          </div>
+          <div class="centered-line">
+            <input type="checkbox" formControlName="heavy" />
+            <label>Schwere Rüstungen</label>
+          </div>
+          <div class="centered-line">
+            <input type="checkbox" formControlName="shields" />
+            <label>Schilde</label>
+          </div>
+          <div class="centered-line">
+            <input type="checkbox" formControlName="simple" />
+            <label>Einfache Waffen</label>
+          </div>
 
-    <button class="accordion" (click)="toggleAcordion($event)">
-      Werkzeuge und Sprachen
-    </button>
-    <div class="panel">
-      <h5>Werkzeuge</h5>
-      <div
-        cdkDropList
-        class="example-list"
-        (cdkDropListDropped)="dropTools($event)"
-      >
+          <div class="centered-line">
+            <input type="checkbox" formControlName="martial" />
+            <label>Schwere Waffen</label>
+          </div>
+          <div class="centered-line">
+            <label>Weitere Waffen</label>
+            <input formControlName="other" />
+          </div>
+        </form>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Sprachen und Werkzeuge </mat-panel-title>
+        </mat-expansion-panel-header>
+        <h5>Sprachen</h5>
         <div
-          class="example-box"
-          *ngFor="let tool of proficiencies.tools"
-          cdkDrag
+          cdkDropList
+          class="item-list"
+          (cdkDropListDropped)="dropLanguages($event)"
         >
-          {{ tool }}
+          <div
+            class="item"
+            *ngFor="let language of proficiencies.get('languages')!.value"
+            cdkDrag
+          >
+            {{ language }}
+          </div>
         </div>
-      </div>
-      <h5>Sprachen</h5>
-      <div
-        cdkDropList
-        class="example-list"
-        (cdkDropListDropped)="dropLanguages($event)"
-      >
+        <h5>Werkzeuge</h5>
         <div
-          class="example-box"
-          *ngFor="let language of proficiencies.languages"
-          cdkDrag
+          cdkDropList
+          class="item-list"
+          (cdkDropListDropped)="dropTools($event)"
         >
-          {{ language }}
+          <div
+            class="item"
+            *ngFor="let tool of proficiencies.get('tools')!.value"
+            cdkDrag
+          >
+            {{ tool }}
+          </div>
         </div>
-      </div>
-    </div>
+      </mat-expansion-panel>
+    </mat-accordion>
   </div>
+
   <!-- MODAL BUTTON -->
   <div class="footer">
-    <button (click)="openModal()">Hinzufügen</button>
+    <button (click)="openModal()">Anpassen</button>
   </div>
 </div>

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

@@ -4,96 +4,41 @@
 
 .proficiencies {
   height: calc(100% - 5rem);
+  width: 100%;
   overflow: auto;
   padding-top: 1rem;
 }
-/* Style the buttons that are used to open and close the accordion panel */
-.accordion {
-  background-color: #eee;
-  color: #444;
-  cursor: pointer;
-  padding: 18px;
-  width: 100%;
-  text-align: left;
-  border: none;
-  outline: none;
-  transition: 0.4s;
-}
-
-/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-.active,
-.accordion:hover {
-  background-color: #ccc;
-}
-
-/* Style the accordion panel. Note: hidden by default */
-.panel {
-  padding: 0 18px;
-  background-color: white;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.2s ease-out;
-}
-
-.accordion:after {
-  content: "\02795"; /* Unicode character for "plus" sign (+) */
-  font-size: 13px;
-  color: #777;
-  float: right;
-  margin-left: 5px;
-}
 
-.active:after {
-  content: "\2796"; /* Unicode character for "minus" sign (-) */
-}
+mat-expansion-panel {
+  margin-right: 10px;
+  margin-left: 10px;
+  margin-bottom: 1rem !important;
+  background-color: var(--items);
+  border: var(--border) !important;
+  border-radius: 10px !important;
+  box-shadow: var(--shadow) !important;
+  transition: background-color 0.2s ease-in-out;
+  transition: margin 0.2s ease-in-out;
 
-//
-.example-list {
-  width: 100%;
-  border: solid 1px #ccc;
-  min-height: 60px;
-  display: block;
-  background: white;
-  border-radius: 4px;
-  overflow: hidden;
+  mat-panel-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
 }
 
-.example-box {
-  padding: 20px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  // align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: white;
-  font-size: 14px;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+.item-list {
+  // TODO: Omly temporary fix
+  max-height: 15rem;
+  overflow: auto;
 }
 
-.example-box:last-child {
-  border: none;
+.item {
+  padding: 10px 10px;
+  margin-bottom: 10px;
+  box-shadow: none;
 }
 
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+.centered-line {
+  margin-bottom: 0.5rem;
+  gap: 0.5rem;
 }

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

@@ -3,6 +3,7 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { DataService } from 'src/services/data/data.service';
 import { ModalService } from 'src/services/modal/modal.service';
 import { ToolsModalComponent } from './tools-modal/tools-modal.component';
+import { FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'proficiencies-table',
@@ -10,21 +11,33 @@ import { ToolsModalComponent } from './tools-modal/tools-modal.component';
   styleUrls: ['./proficiencies-table.component.scss'],
 })
 export class ProficienciesTableComponent {
-  public proficiencies!: any;
+  // public proficiencies!: any;
+  public proficiencies = this.formBuilder.group({
+    simple: false,
+    martial: false,
+    other: '',
+    light: false,
+    medium: false,
+    heavy: false,
+    shields: false,
+    tools: this.formBuilder.array([]),
+    languages: this.formBuilder.array([]),
+  });
 
   public constructor(
     public dataAccessor: DataService,
-    public modalAccessor: ModalService
-  ) {
-    // this.proficiencies = this.dataAccessor.proficiencies;
-  }
+    public modalAccessor: ModalService,
+    private formBuilder: FormBuilder
+  ) {}
+
   public ngOnInit(): void {
-    this.proficiencies = this.dataAccessor.proficiencies;
+    // this.proficiencies.setValue(this.dataAccessor.proficiencies);
+    this.setProficiencies(this.dataAccessor.proficiencies);
   }
 
   public dropTools(event: CdkDragDrop<string[]>): void {
     moveItemInArray(
-      this.proficiencies.tools,
+      this.proficiencies.get('tools')!.value,
       event.previousIndex,
       event.currentIndex
     );
@@ -33,35 +46,26 @@ export class ProficienciesTableComponent {
 
   public dropLanguages(event: CdkDragDrop<string[]>): void {
     moveItemInArray(
-      this.proficiencies.languages,
+      this.proficiencies.get('languages')!.value,
       event.previousIndex,
       event.currentIndex
     );
     this.updateDatabase();
   }
 
-  public toggleAcordion(event: any): void {
-    if (event.target.classList.contains('accordion')) {
-      event.target.classList.toggle('active');
-      var panel = event.target.nextElementSibling;
-      if (panel.style.maxHeight) {
-        panel.style.maxHeight = null;
-      } else {
-        panel.style.maxHeight = '100svh'; //Hier ansetzen um es später scrollable zu machen
-      }
-    }
-  }
-
   public openModal(): void {
     this.modalAccessor.openModal(ToolsModalComponent, {
-      proficiencies: JSON.parse(JSON.stringify(this.proficiencies)),
+      proficiencies: JSON.parse(JSON.stringify(this.proficiencies.value)),
     });
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {
         if (result.state === 'update') {
-          this.updateProficiencies(result.data);
+          this.setProficiencies(result.data);
+          this.updateDatabase();
+        } else if (result.state === 'cancel') {
+          // Do nothing
         } else {
-          throw new Error('DND-Error: Invalid result state');
+          throw new Error('DND-Error: Invalid result state: ' + result.state);
         }
         resultSubscription.unsubscribe();
       }
@@ -69,11 +73,19 @@ export class ProficienciesTableComponent {
   }
 
   public updateDatabase(): void {
-    this.dataAccessor.proficiencies = this.proficiencies;
+    console.warn(this.proficiencies.value);
+    this.dataAccessor.proficiencies = this.proficiencies.value;
   }
 
-  public updateProficiencies(data: any): void {
-    this.proficiencies = data;
-    this.updateDatabase();
+  public setProficiencies(data: any): void {
+    const { tools, languages, ...dataWithoutToolsAndLanguages } = data;
+    Object.keys(dataWithoutToolsAndLanguages).forEach((key) => {
+      this.proficiencies.get(key)?.setValue(dataWithoutToolsAndLanguages[key]);
+    });
+    this.proficiencies.setControl('tools', this.formBuilder.array(tools));
+    this.proficiencies.setControl(
+      'languages',
+      this.formBuilder.array(languages)
+    );
   }
 }

src/app/journal/journal.module.ts

@@ -13,6 +13,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 import { JournalRoutingModule } from './journal-routing.module';
 import { JournalHomeComponent } from './journal-home/journal-home.component';
@@ -184,6 +185,7 @@ import { StoryComponent } from './journal-character/story/story.component';
     MatInputModule,
     MatFormFieldModule,
     MatTabsModule,
+    MatExpansionModule,
     MarkdownModule.forRoot(),
   ],
 })