issue-15 #21

Merged
sebastian merged 60 commits from issue-15 into main 2024-03-22 08:46:49 +01:00
4 changed files with 97 additions and 5 deletions
Showing only changes of commit 2e6bddc099 - Show all commits

View File

@ -4,7 +4,7 @@
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
</mat-form-field>
<table mat-table [dataSource]="datasource" class="mat-elevation-z8">
<table mat-table [dataSource]="datasource" class="mat-elevation-z8" multiTemplateDataRows>
<ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
<th mat-header-cell *matHeaderCellDef>{{col}}</th>
<td mat-cell *matCellDef="let state">
@ -15,8 +15,36 @@
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
@if (expandedElement === 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]="expandedColumns.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<p>Expanded Row</p>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="expandedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: expandedColumns;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
</mat-card-content>
</mat-card>

View File

@ -2,10 +2,59 @@ table {
width: 100%;
}
.mat-column-Initial {
.mat-column-Initial, .mat-column-expand {
width: 32px;
}
.long-form {
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: #545456;
}
.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;
}

View File

@ -9,10 +9,18 @@ import {State} from "../../../../game-model/gamesystems/states/State";
import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
import {ProductTransition} from "../../../../game-model/gamesystems/transitions/ProductTransition";
import {ProductState} from "../../../../game-model/gamesystems/states/ProductState";
import {animate, state, style, transition, trigger} from "@angular/animations";
@Component({
selector: 'app-product-state-editor',
templateUrl: './product-state-editor.component.html',
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)')),
]),
],
styleUrl: './product-state-editor.component.scss'
})
export class ProductStateEditorComponent implements OnInit{
@ -20,13 +28,16 @@ export class ProductStateEditorComponent implements OnInit{
@Input() gamesystem: ProductGamesystem | undefined
@Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>();
displayedColumns: string[] = [];
expandedColumns: string[] = []
datasource = new MatTableDataSource<ProductState>();
expandedElement: ProductState | null = null;
ngOnInit() {
this.gamesystem!.generateFromChildsystems();
this.generateColumnNamesRecursively(this.gamesystem!, "");
this.displayedColumns.push('Initial');
this.expandedColumns = [...this.displayedColumns, 'expand'];
this.datasource.data = this.gamesystem!.states;
this.datasource.filterPredicate = (data: ProductState, filter: string) => {
const leaf_states = LeafGamesystemCalculator.calcLeafStates(data);

View File

@ -12,6 +12,7 @@ import {ScriptAccount} from "../../../../game-model/scriptAccounts/ScriptAccount
export class ScriptaccountActionEditorComponent implements OnInit{
@Input() transition: Transition<any> | undefined
@Input() scriptAccounts: ScriptAccount[] = []
@Input() enableEditing: boolean = false;
dataSource: MatTableDataSource<ScriptAccountAction> = new MatTableDataSource();
displayedColumns: string[] = ['scriptAccount', "valueChange", 'edit', 'delete'];
@ -21,7 +22,10 @@ export class ScriptaccountActionEditorComponent implements OnInit{
ngOnInit() {
this.dataSource.data = this.transition!.scriptAccountActions.map(action => action);
console.log("# ScriptAccounts", this.scriptAccounts.length)
if(!this.enableEditing) {
this.displayedColumns = this.displayedColumns.slice(0, -2);
}
}
editAction(scriptAccountAction: ScriptAccountAction) {