feat: Erweiterbare Zeilen in EnvelopeTableComponent aktiviert und mat-tab-Komponente integriert

- Aktiviert die Unterstützung für erweiterbare Zeilen in der `EnvelopeTableComponent` durch Setzen der `isExpandable`-Option auf `true`.
- Integriert die `mat-tab-group`-Komponente innerhalb der erweiterten Zeilen für eine bessere Darstellung von Tab-Inhalten.
- Hinzugefügt: Zwei Tabs ("Emfänger" und "History") für die Anzeige von zusätzlichen Informationen in den erweiterten Zeilen.
This commit is contained in:
Developer 02 2024-09-04 15:14:10 +02:00
parent 363358aaa1
commit f88b5d2733
2 changed files with 9 additions and 2 deletions

View File

@ -1,4 +1,10 @@
<dd-table [data]="data" [columnsToDisplay]="displayedColumns" [schema]="schema" <dd-table [data]="data" [columnsToDisplay]="displayedColumns" [schema]="schema"
[paginatorSizeOptions]="[5, 10, 25, 100]" [filter]="{label: 'Filter', placeholder: ''}" [paginatorSizeOptions]="[5, 10, 25, 100]" [filter]="{label: 'Filter', placeholder: ''}"
[onToggleExpandedRow]="onToggleExpandedRow" [isSortable]="true" [isExpandable]="false" [isFilterable]="true"> [onToggleExpandedRow]="onToggleExpandedRow" [isSortable]="true" [isExpandable]="true" [isFilterable]="true">
<mat-tab-group expanded>
<mat-tab label="Emfänger">
</mat-tab>
<mat-tab label="History">
</mat-tab>
</mat-tab-group>
</dd-table> </dd-table>

View File

@ -4,11 +4,12 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
import { ConfigurationService } from '../../services/configuration.service'; import { ConfigurationService } from '../../services/configuration.service';
import { DDTable } from "../dd-table/dd-table.component"; import { DDTable } from "../dd-table/dd-table.component";
import { ClearableInputComponent } from '../clearable-input/clearable-input.component' import { ClearableInputComponent } from '../clearable-input/clearable-input.component'
import { MatTabsModule } from '@angular/material/tabs';
@Component({ @Component({
selector: 'app-envelope-table', selector: 'app-envelope-table',
standalone: true, standalone: true,
imports: [DDTable, ClearableInputComponent], imports: [DDTable, ClearableInputComponent, MatTabsModule],
templateUrl: './envelope-table.component.html', templateUrl: './envelope-table.component.html',
animations: [ animations: [
trigger('detailExpand', [ trigger('detailExpand', [