sebastian/ConceptCreator
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

Use Table Visualization for InventorySlots
All checks were successful
E2E Testing / test (push) Successful in 1m33s
Details

Browse Source
This commit is contained in:
Sebastian Böckelmann 2024-05-11 09:55:34 +02:00
parent 19057fee93
commit 4eb428277d
8 changed files with 153 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.module.ts
View File

@ -94,9 +94,6 @@ import {
import {
InventorySlotEditorComponent
} from "./editor/character-editor/inventory-slot-editor/inventory-slot-editor.component";
import {
InventorySlotCreatorComponent
} from "./editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component";
// AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@ -127,8 +124,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
ItemEditorComponent,
ItemgroupInheritorComponent,
InheritedItemCharacteristicEditorComponent,
InventorySlotEditorComponent,
InventorySlotCreatorComponent
InventorySlotEditorComponent
],
imports: [
BrowserModule,

11
src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html
View File

@ -1,11 +0,0 @@
<h1 mat-dialog-title>{{data == undefined ? 'Create New Inventory Slot':'Rename Inventory Slot'}}</h1>
<mat-dialog-content>
<mat-form-field appearance="outline" class="long-form">
<mat-label>Slot-Name</mat-label>
<input matInput [formControl]="slotNameCtrl">
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-raised-button (click)="cancel()">Cancel</button>
<button mat-raised-button [disabled]="slotNameCtrl.invalid" (click)="submit()">Submit</button>
</mat-dialog-actions>

3
src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss
View File

@ -1,3 +0,0 @@
.long-form {
width: 100%;
}

23
src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.spec.ts
View File

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

39
src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts
View File

@ -1,39 +0,0 @@
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
import {FormControl, Validators} from "@angular/forms";
@Component({
selector: 'app-inventory-slot-creator',
templateUrl: './inventory-slot-creator.component.html',
styleUrl: './inventory-slot-creator.component.scss'
})
export class InventorySlotCreatorComponent implements OnInit{
slotNameCtrl = new FormControl('', [Validators.required]);
constructor(private dialogRef: MatDialogRef<InventorySlotCreatorComponent>,
@Inject(MAT_DIALOG_DATA) public data: InventorySlot | undefined) {
}
ngOnInit() {
if(this.data != undefined) {
this.slotNameCtrl.setValue(this.data.slotName);
}
}
submit() {
if(this.data != undefined) {
this.data.slotName = this.slotNameCtrl.value!;
this.dialogRef.close(this.data);
} else {
this.dialogRef.close(new InventorySlot(this.slotNameCtrl.value!))
}
}
cancel() {
this.dialogRef.close()
}
}

77
src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html
View File

@ -1,12 +1,65 @@
<mat-accordion>
<mat-expansion-panel *ngFor="let slot of character!.inventorySlots">
<mat-expansion-panel-header>
<mat-panel-title>{{slot.slotName}}</mat-panel-title>
</mat-expansion-panel-header>
<div class="panel-actions">
<button mat-raised-button color="primary" (click)="renameInventorySlot(slot)">Rename</button>
<button mat-raised-button color="warn" (click)="deleteInventorySlot(slot)">Delete</button>
</div>
</mat-expansion-panel>
<button mat-stroked-button class="add-btn" (click)="addInventorySlot()">Add Inventory-Slot</button>
</mat-accordion>
<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Slot Name</th>
<td mat-cell *matCellDef="let slot">
<span *ngIf="slot !== editedSlot">
{{slot.slotName}}
</span>
<mat-form-field appearance="fill" class="long-form" *ngIf="slot === editedSlot">
<mat-label>Slot Name</mat-label>
<input matInput [(ngModel)]="slot.slotName">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let slot">
<button mat-icon-button (click)="editInventorySlot(slot)" *ngIf="editedSlot !== slot" [disabled]="editedSlot != null"><mat-icon>edit</mat-icon></button>
<button mat-icon-button (click)="finishEditing()" *ngIf="editedSlot === slot"><mat-icon>done</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let slot">
<button mat-icon-button (click)="deleteInventorySlot(slot)" color="warn"><mat-icon>delete</mat-icon></button>
</td>
</ng-container>
<ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions">
<button mat-icon-button (click)="addInventorySlot()"><mat-icon>add</mat-icon></button>
</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button aria-label="expand row" (click)="(expandedSlot = expandedSlot === element ? null : element); $event.stopPropagation()">
@if (expandedSlot === element) {
<mat-icon>keyboard_arrow_up</mat-icon>
} @else {
<mat-icon>keyboard_arrow_down</mat-icon>
}
</button>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedSlot ? 'expanded' : 'collapsed'">
<div class="example-element-description">
Something
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
class="example-element-row"
[class.example-expanded-row]="expandedSlot === element"
(click)="expandedSlot = expandedSlot === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

53
src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.scss
View File

@ -4,3 +4,56 @@
.add-btn {
width: 100%;
}
table {
width: 100%;
}
tr.example-detail-row {
height: 0;
}
tr.example-element-row:not(.example-expanded-row):hover {
background: #545456;
}
tr.example-element-row:not(.example-expanded-row):active {
background: #4e5157;
}
.example-element-row td {
border-bottom-width: 0;
}
.example-element-detail {
overflow: hidden;
display: flex;
}
.example-element-diagram {
min-width: 80px;
border: 2px solid black;
padding: 8px;
font-weight: lighter;
margin: 8px 0;
height: 104px;
}
.example-element-symbol {
font-weight: bold;
font-size: 40px;
line-height: normal;
}
.example-element-description {
padding: 16px;
}
.example-element-description-attribution {
opacity: 0.5;
}
.mat-column-edit, .mat-column-delete, .mat-column-expand {
width: 32px;
align-content: center;
}

54
src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts
View File

@ -1,43 +1,57 @@
import {Component, Input} from '@angular/core';
import {Component, Input, OnInit} from '@angular/core';
import {Character} from "../../../project/game-model/characters/Character";
import {ItemGroup} from "../../../project/game-model/inventory/ItemGroup";
import {InventorySlot} from "../../../project/game-model/inventory/intentory-slots/InventorySlot";
import {MatDialog} from "@angular/material/dialog";
import {InventorySlotCreatorComponent} from "./inventory-slot-creator/inventory-slot-creator.component";
import {animate, state, style, transition, trigger} from "@angular/animations";
import {MatTableDataSource} from "@angular/material/table";
@Component({
selector: 'app-inventory-slot-editor',
templateUrl: './inventory-slot-editor.component.html',
styleUrl: './inventory-slot-editor.component.scss'
styleUrl: './inventory-slot-editor.component.scss',
animations: [
trigger('detailExpand', [
state('collapsed,void', style({height: '0px', minHeight: '0'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class InventorySlotEditorComponent {
export class InventorySlotEditorComponent implements OnInit{
@Input() character: Character | undefined
@Input() itemgroups: ItemGroup[] = []
displayedColumns: string[] = ['name', 'edit', 'delete']
columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
dataSource: MatTableDataSource<InventorySlot> = new MatTableDataSource<InventorySlot>();
expandedSlot: InventorySlot | null = null
editedSlot: InventorySlot | null = null
constructor(private dialog: MatDialog) {
}
addInventorySlot() {
const dialogRef = this.dialog.open(InventorySlotCreatorComponent, {
minWidth: "400px"
})
dialogRef.afterClosed().subscribe(res => {
if(res != undefined) {
this.character!.inventorySlots.push(res)
}
})
ngOnInit() {
this.dataSource.data = this.character!.inventorySlots;
}
renameInventorySlot(inventorySlot: InventorySlot) {
this.dialog.open(InventorySlotCreatorComponent, {
minWidth: "400px",
data: inventorySlot
})
addInventorySlot() {
this.editedSlot = new InventorySlot("New Inventory Slot");
this.character!.addInventorySlot(this.editedSlot);
this.dataSource.data = this.character!.inventorySlots;
}
editInventorySlot(inventorySlot: InventorySlot) {
this.editedSlot = inventorySlot
}
deleteInventorySlot(inventorySlot: InventorySlot) {
this.character!.removeInventorySlot(inventorySlot)
this.character!.removeInventorySlot(inventorySlot);
this.dataSource.data = this.character!.inventorySlots;
}
finishEditing() {
this.editedSlot = null;
}
}