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

Edit ItemProperties of Item
All checks were successful
E2E Testing / test (push) Successful in 1m38s
Details

Browse Source
This commit is contained in:
Sebastian Böckelmann 2024-04-20 08:12:34 +02:00
parent eb42ebb7e3
commit 704150d999
2 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.html
View File

@ -3,6 +3,10 @@
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let itemProperty">
<span *ngIf="editedItemProperty !== itemProperty"> {{itemProperty.propertyName}}</span>
<mat-form-field appearance="fill" *ngIf="editedItemProperty === itemProperty">
<mat-label>Name</mat-label>
<input matInput [(ngModel)]="itemProperty.propertyName">
</mat-form-field>
</td>
</ng-container>
@ -10,7 +14,11 @@
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<p>{{element.propertyDescription}}</p>
<p *ngIf="editedItemProperty !== element">{{element.propertyDescription}}</p>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedItemProperty === element">
<mat-label>Description</mat-label>
<textarea matInput [(ngModel)]="element.propertyDescription" rows="3"></textarea>
</mat-form-field>
</div>
</td>
</ng-container>
@ -20,17 +28,22 @@
<ng-container matColumnDef="property">
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let itemProperty">
<p>{{itemProperty.property}}</p>
<p *ngIf="itemProperty !== editedItemProperty">{{itemProperty.property}}</p>
<mat-form-field appearance="fill" *ngIf="itemProperty === editedItemProperty">
<mat-label>Value</mat-label>
<input matInput [(ngModel)]="itemProperty.property" type="number">
</mat-form-field>
</td>
</ng-container>
<!--<ng-container matColumnDef="edit">
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state">
<button mat-icon-button class="icon-btn-primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button>
<button mat-icon-button class="icon-btn-primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button>
<td mat-cell *matCellDef="let itemProperty">
<button mat-icon-button class="icon-btn-primary" *ngIf="editedItemProperty !== itemProperty"
(click)="editItemProperty(itemProperty)" [disabled]="editedItemProperty !== undefined"><mat-icon>edit</mat-icon></button>
<button mat-icon-button class="icon-btn-primary" (click)="finishEditing()" *ngIf="editedItemProperty === itemProperty"><mat-icon>done</mat-icon></button>
</td>
</ng-container>-->
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef></th>

19
src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.ts
View File

@ -3,6 +3,7 @@ import {Item} from "../../../project/game-model/inventory/Item";
import {MatTableDataSource} from "@angular/material/table";
import {ItemProperty} from "../../../project/game-model/inventory/ItemProperty";
import {animate, state, style, transition, trigger} from "@angular/animations";
import {MatSnackBar} from "@angular/material/snack-bar";
@Component({
selector: 'app-item-property-editor',
@ -22,11 +23,14 @@ export class ItemPropertyEditorComponent implements OnInit{
editedItemProperty: ItemProperty | undefined
expandedElement: ItemProperty | undefined
displayedColumns: string[] = ['name', 'property', 'delete']
displayedColumns: string[] = ['name', 'property', 'edit', 'delete']
columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
datasource: MatTableDataSource<ItemProperty> = new MatTableDataSource<ItemProperty>();
constructor(private snackbar: MatSnackBar) {
}
ngOnInit() {
this.datasource.data = this.item!.itemProperties
}
@ -35,4 +39,17 @@ export class ItemPropertyEditorComponent implements OnInit{
this.item!.itemProperties = this.item!.itemProperties.filter(property => property.propertyName !== itemProperty.propertyName)
this.datasource.data = this.item!.itemProperties
}
editItemProperty(itemProperty: ItemProperty) {
this.editedItemProperty = itemProperty
}
finishEditing() {
if(this.editedItemProperty!.propertyName.length < 1) {
this.snackbar.open("PropertyName cannout be empty", "", {duration: 2000});
} else {
this.editedItemProperty = undefined
}
}
}