Integrierte 'Core'-Nuget-Pakete. EnvelopeReceiver-Tabelle für Angular hinzugefügt.

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts

@@ -1,8 +1,10 @@
-import { RouterModule, Routes } from '@angular/router';
-import {EnvelopeTableComponent} from '../app/components/envelope-table/envelope-table.component'
-import {HomeComponent} from '../app/components/home/home.component'
+import { Routes } from '@angular/router';
+import { EnvelopeTableComponent } from '../app/components/envelope-table/envelope-table.component'
+import { HomeComponent } from '../app/components/home/home.component'
+import { authGuard } from './guards/auth.guard'
+
 export const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'login', component: HomeComponent },
-  { path: 'envelope', component: EnvelopeTableComponent }
+  { path: 'envelope', component: EnvelopeTableComponent, canActivate: [authGuard] }
 ];

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html

@@ -1 +1,12 @@
-<p>envelope-table works!</p>
+<gui-grid 
+[columns]="columns"
+[source]="source"
+[columnMenu]="columnMenu"
+[paging]="paging"
+[sorting]="sorting"
+[searching]="searching"
+[summaries]="summaries"
+[infoPanel]="infoPanel"
+[localization]="localization"
+>
+</gui-grid>

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts

@@ -1,24 +1,91 @@
 import { Component } from '@angular/core';
 import { EnvelopeReceiverService } from '../../services/envelope-receiver.service';
-import { error } from 'console';
+import { NgModule } from '@angular/core';
+import { GuiColumn, GuiColumnMenu, GuiGridModule, GuiInfoPanel, GuiLocalization, GuiPaging, GuiPagingDisplay, GuiSearching, GuiSorting, GuiSummaries } from '@generic-ui/ngx-grid';
 
 @Component({
   selector: 'app-envelope-table',
   standalone: true,
-  imports: [],
+  imports: [GuiGridModule],
   templateUrl: './envelope-table.component.html',
   styleUrl: './envelope-table.component.scss'
 })
 export class EnvelopeTableComponent {
-  
-  constructor(private erService : EnvelopeReceiverService){
-    erService.getEnvelopeReceiver().subscribe({
-      next: (res) => {
-        console.log(res)
-      },
-      error: (error) => {
-        console.log(error)
-      }
-    });    
+
+  columnMenu: GuiColumnMenu = {
+    enabled: true,
+    sort: true,
+    columnsManager: true
+  };
+
+  sorting: GuiSorting = {
+    enabled: true,
+    multiSorting: true
+  };
+
+	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:false,
+		schemaManager: true
+	 };
+
+   localization: GuiLocalization = {
+		translationResolver: (key: string, value: string) => {
+			return '[de-DE]';
+		}
+	};
+
+  source: Array<any> = []
+
+  constructor(private erService: EnvelopeReceiverService) {
+    
   }
-}
+
+  ngOnInit() {
+    this.erService.getEnvelopeReceiver().subscribe({
+      next: res => this.source = res,
+      error: console.error
+    });
+  }
+
+  columns: Array<GuiColumn> = [
+    {
+      header: 'Title',
+      field: er => er.envelope.title
+    },
+    {
+      header: "Status",
+      field: er => er.envelope.status
+    },
+    {
+      header: 'Type',
+      field: er => er.envelope.contractType
+    },
+    {
+      header: 'PrivateMessage',
+      field: 'privateMessage'
+    },
+    {
+      header: 'AddedWhen',
+      field: 'addedWhen'
+    }];
+}

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/models/envelope-receiver.model.ts

@@ -0,0 +1,6 @@
+export interface EnvelopeReceiver {
+    name: string | null
+    privateMessage: string | null
+    addedWhen: Date
+    changedWhen: Date | null
+}