inventory-items #42

Merged
sebastian merged 9 commits from inventory-items into main 2024-04-20 11:39:35 +02:00
2 changed files with 38 additions and 8 deletions
Showing only changes of commit 704150d999 - Show all commits

View File

@ -3,6 +3,10 @@
<th mat-header-cell *matHeaderCellDef>Name</th> <th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let itemProperty"> <td mat-cell *matCellDef="let itemProperty">
<span *ngIf="editedItemProperty !== itemProperty"> {{itemProperty.propertyName}}</span> <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> </td>
</ng-container> </ng-container>
@ -10,7 +14,11 @@
<ng-container matColumnDef="expandedDetail"> <ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length"> <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"> <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> </div>
</td> </td>
</ng-container> </ng-container>
@ -20,17 +28,22 @@
<ng-container matColumnDef="property"> <ng-container matColumnDef="property">
<th mat-header-cell *matHeaderCellDef>Value</th> <th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let itemProperty"> <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> </td>
</ng-container> </ng-container>
<!--<ng-container matColumnDef="edit"> <ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state"> <td mat-cell *matCellDef="let itemProperty">
<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" *ngIf="editedItemProperty !== itemProperty"
<button mat-icon-button class="icon-btn-primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button> (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> </td>
</ng-container>--> </ng-container>
<ng-container matColumnDef="delete"> <ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>

View File

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