From 00ebf456051c8ecb3ccc61c8ab3bfb8b35435afc Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Mon, 19 Aug 2024 09:41:01 +0200 Subject: [PATCH] refactor: Aktualisierung von EnvelopeTableComponent zur Verwendung der Angular Material Tabelle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ersetzte `@generic-ui/ngx-grid` durch Angular Material Tabellenkomponenten. - Aktualisierte `EnvelopeTableComponent`, um `mat-table` für die Tabellenanzeige zu verwenden. - Umorganisierte Daten- und Schema-Definitionen zur Kompatibilität mit Angular Material Tabelle. - Füge `MatTableModule` und `CommonModule` zu den Komponenten-Imports hinzu. - Implementierte dynamische Spaltenanzeige basierend auf dem Schema. - Hinzugefügt `updateTable` Methode zur erneuten Darstellung der Tabelle. --- .../envelope-table.component.html | 23 ++- .../envelope-table.component.ts | 143 ++++-------------- 2 files changed, 42 insertions(+), 124 deletions(-) diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html index e27000d4..0560d544 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html @@ -1,13 +1,10 @@ - - \ No newline at end of file + + + + + + + + + +
{{schema[colId].header}} {{schema[colId].field(element)}}
\ No newline at end of file diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts index 691c9c8c..dc323e40 100644 --- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts +++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts @@ -1,132 +1,53 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { EnvelopeReceiverService } from '../../services/envelope-receiver.service'; -import { GuiColumn, GuiColumnMenu, GuiGridModule, GuiInfoPanel, GuiLocalization, GuiPaging, GuiPagingDisplay, GuiSearching, GuiSorting, GuiSummaries, GuiTheme } from '@generic-ui/ngx-grid'; +import { MatTable, MatTableModule } from '@angular/material/table'; +import { CommonModule } from '@angular/common' @Component({ selector: 'app-envelope-table', standalone: true, - imports: [GuiGridModule], + imports: [MatTableModule, CommonModule], templateUrl: './envelope-table.component.html', styleUrl: './envelope-table.component.scss' }) export class EnvelopeTableComponent { - columnMenu: GuiColumnMenu = { - enabled: true, - sort: true, - columnsManager: true - }; + data: Array = [] - sorting: GuiSorting = { - enabled: true, - multiSorting: true - }; + public displayedColumns: string[] = ['title', 'status', 'type', 'privateMessage', 'addedWhen']; - paging: GuiPaging = { - enabled: true, - page: 1, - pageSize: 10, - pageSizes: [10, 25, 50], - pagerTop: true, - pagerBottom: true, - display: GuiPagingDisplay.ADVANCED - }; - - searching: GuiSearching = { - enabled: true - }; - - summaries: GuiSummaries = { - enabled: true - }; - - infoPanel: GuiInfoPanel = { - enabled: true, - infoDialog: false, - columnsManager: true, - schemaManager: true - }; - - localization: GuiLocalization = { - translationResolver: (key: string, value: string) => EnvelopeTableComponent.Translation[key] ?? value - }; - - theme: GuiTheme = GuiTheme.FABRIC; - - source: Array = [] - - constructor(private erService: EnvelopeReceiverService) { } - - async ngOnInit() { - this.source = await this.erService.getEnvelopeReceiver(); - } - - columns: Array = [ - { + schema: any = { + 'title': { header: 'Title', - field: er => er.envelope.title + field: (element: any) => element.envelope.title }, - { - header: "Status", - field: er => er.envelope.statusName + 'status': { + header: 'Status', + field: (element: any) => element.envelope.statusName }, - { + 'type': { header: 'Type', - field: er => er.envelope.contractType + field: (element: any) => element.envelope.contractType + }, + 'privateMessage': { + header: 'Private Message', + field: (element: any) => element.privateMessage }, - { - header: 'PrivateMessage', - field: 'privateMessage' + 'addedWhen': { + header: 'Added When', + field: (element: any) => element.addedWhen }, - { - header: 'AddedWhen', - field: 'addedWhen' - }]; + } + + @ViewChild(MatTable) table!: MatTable; + + constructor(private erService: EnvelopeReceiverService) { } + + async ngOnInit() { + this.data = await this.erService.getEnvelopeReceiver(); + } - static readonly Translation: { [key: string]: string } = { - "sourceEmpty": "There are no items to show.", - "pagingItemsPerPage": "Items per page:", - "pagingOf": "of", - "pagingNextPage": "Next", - "pagingPrevPage": "Prev", - "pagingNoItems": "There is no items.", - "infoPanelShowing": "Showing", - "infoPanelItems": "items", - "infoPanelOutOf": "out of", - "infoPanelThemeMangerTooltipText": "Theme manager", - "infoPanelColumnManagerTooltipText": "Column manager", - "infoPanelInfoTooltipText": "info", - "themeManagerModalTitle": "Theme manager", - "themeManagerModalTheme": "Theme:", - "themeManagerModalRowColoring": "Row coloring:", - "themeManagerModalVerticalGrid": "Vertical grid", - "themeManagerModalHorizontalGrid": "HorizontalGrid", - "columnManagerModalTitle": "Manage columns", - "headerMenuMainTab": "Menu", - "headerMenuMainTabColumnSort": "Column sort", - "headerMenuMainTabHideColumn": "Hide column", - "headerMenuMainTabHighlightColumn": "Highlight", - "headerMenuMainTabMoveLeft": "Move left", - "headerMenuMainTabMoveRight": "Move right", - "headerMenuMainTabColumnSortAscending": "Ascending", - "headerMenuMainTabColumnSortDescending": "Descending", - "headerMenuMainTabColumnSortNone": "None", - "headerMenuFilterTab": "Filter", - "headerMenuColumnsTab": "Columns", - "summariesCount": "Count", - "summariesDist": "Dist", - "summariesSum": "Sum", - "summariesAvg": "Avg", - "summariesMin": "Min", - "summariesMax": "Max", - "summariesMed": "Med", - "summariesTruthy": "Truthy", - "summariesFalsy": "Falsy", - "summariesDistinctValuesTooltip": "Distinct values", - "summariesAverageTooltip": "Average", - "summariesMinTooltip": "Min", - "summariesMaxTooltip": "Max", - "summariesMedTooltip": "Median", - "summariesCountTooltip": "Number of items in the grid" + public updateTable() { + this.table.renderRows(); } } \ No newline at end of file