Basic SimpleState Editing
All checks were successful
E2E Testing / test (push) Successful in 1m25s

This commit is contained in:
Sebastian Böckelmann 2024-02-10 11:22:07 +01:00
parent 8df38376d0
commit 5d517c3e97
4 changed files with 40 additions and 7 deletions

View File

@ -46,6 +46,7 @@ import {
MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
MatTable
} from "@angular/material/table";
import {MatCheckbox} from "@angular/material/checkbox";
// AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@ -111,7 +112,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
MatHeaderRow,
MatRow,
MatHeaderRowDef,
MatRowDef
MatRowDef,
MatCheckbox
],
providers: [],
bootstrap: [AppComponent]

View File

@ -1,14 +1,23 @@
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Label</th>
<td mat-cell *matCellDef="let state">{{state.stateLabel}}</td>
<td mat-cell *matCellDef="let state">
<span *ngIf="editedElement !== state"> {{state.stateLabel}}</span>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedElement === state">
<input matInput [(ngModel)]="state.stateLabel">
</mat-form-field>
</td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<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.stateDescription}}</p>
<p *ngIf="editedElement !== element">{{element.stateDescription}}</p>
<mat-form-field appearance="fill" class="long-form" *ngIf="element === editedElement">
<mat-label>Description</mat-label>
<textarea matInput [(ngModel)]="element.stateDescription" rows="3"></textarea>
</mat-form-field>
</div>
</td>
</ng-container>
@ -18,15 +27,22 @@
<ng-container matColumnDef="initial">
<th mat-header-cell *matHeaderCellDef>Initial</th>
<td mat-cell *matCellDef="let state">
<mat-icon *ngIf="state.initial">done</mat-icon>
<mat-icon *ngIf="!state.initial">close</mat-icon>
<div *ngIf="editedElement !== state">
<mat-icon *ngIf="state.initial">done</mat-icon>
<mat-icon *ngIf="!state.initial">close</mat-icon>
</div>
<mat-checkbox *ngIf="editedElement === state" [(ngModel)]="state.initial"></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state">
<button mat-icon-button color="primary"><mat-icon>edit</mat-icon></button>
<button mat-icon-button color="primary" (click)="editState(state)">
<mat-icon *ngIf="editedElement !== state">edit</mat-icon>
<mat-icon *ngIf="editedElement === state">done</mat-icon>
</button>
</td>
</ng-container>
@ -38,7 +54,9 @@
</ng-container>
<ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
<th mat-header-cell *matHeaderCellDef aria-label="row actions">
<button mat-icon-button><mat-icon>add</mat-icon></button>
</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) {

View File

@ -49,3 +49,7 @@ tr.example-element-row:not(.example-expanded-row):active {
.mat-column-edit, .mat-column-delete, .mat-column-expand {
width: 32px;
}
.long-form {
width: 100%;
}

View File

@ -22,8 +22,17 @@ export class SimpleStateEditorComponent implements OnInit{
displayedColumns = ["name", "initial", "edit", "delete"];
columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
expandedElement: SimpleState | null = null;
editedElement: SimpleState | null = null;
ngOnInit() {
this.dataSource.data = this.states;
}
editState(state: SimpleState) {
if(this.editedElement === state) {
this.editedElement = null;
} else {
this.editedElement = state;
}
}
}