Added logic to get servers to dashboard #72

kdb-web/src/app/models/discord/server.dto.ts

@@ -0,0 +1,6 @@
+export interface ServerDTO {
+    serverId: number;
+    discordId: number;
+    name: string;
+    memberCount: number;
+}

kdb-web/src/app/models/selection/logins/login-select-criterion.dto.ts

@@ -1,8 +0,0 @@
-import { SelectCriterion } from "../select-criterion.model";
-
-export interface LoginSelectCriterion extends SelectCriterion {
-    timeFrom: string;
-    timeTo: string;
-    userName: string;
-    hostName: string;
-}

kdb-web/src/app/models/selection/server/get-filtered-servers-result.dto.ts

@@ -0,0 +1,7 @@
+import { AuthUserDTO } from "../../auth/auth-user.dto";
+import { ServerDTO } from "../../discord/server.dto";
+
+export interface GetFilteredServersResultDTO {
+    servers: ServerDTO[];
+    totalCount: number;
+}

kdb-web/src/app/models/selection/server/server-select-criterion.dto.ts

@@ -0,0 +1,5 @@
+import { SelectCriterion } from "../select-criterion.model";
+
+export interface ServerSelectCriterion extends SelectCriterion {
+    name: string | null;
+}

kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts

@@ -85,7 +85,7 @@ export class AuthUserComponent implements OnInit {
     };
 
     this.setFilterForm();
-    // this.loadNextPage();
+    this.loadNextPage();
   }
 
   setFilterForm() {

kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.html

@@ -1,3 +1,12 @@
-<p>dashboard works!</p>
-
-<div class="content"></div>
+<h1>
+    {{'view.dashboard.header' | translate}}
+</h1>
+<div class="content-wrapper">
+    <div class="content">
+        <ul>
+            <li *ngFor="let server of servers">
+                {{server.name}}
+            </li>
+        </ul>
+    </div>
+</div>

kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts

@@ -1,4 +1,14 @@
 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { LazyLoadEvent } from 'primeng/api';
+import { catchError, debounceTime, throwError } from 'rxjs';
+import { ServerDTO } from 'src/app/models/discord/server.dto';
+import { ServerSelectCriterion } from 'src/app/models/selection/server/server-select-criterion.dto';
+import { ConfirmationDialogService } from 'src/app/services/confirmation-dialog/confirmation-dialog.service';
+import { DataService } from 'src/app/services/data/data.service';
+import { SpinnerService } from 'src/app/services/spinner/spinner.service';
+import { ToastService } from 'src/app/services/toast/toast.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -7,8 +17,89 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardComponent implements OnInit {
 
-  constructor() { }
+  loading = true;
+  servers: ServerDTO[] = [];
 
-  ngOnInit(): void {}
+  searchCriterions: ServerSelectCriterion = {
+    name: null,
+    pageIndex: 0,
+    pageSize: 10,
+    sortColumn: null,
+    sortDirection: null
+  };
+  totalRecords!: number;
+
+
+  filterForm!: FormGroup<{
+    name: FormControl<string | null>,
+  }>;
+
+  constructor(
+    private data: DataService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private confirmDialog: ConfirmationDialogService,
+    private fb: FormBuilder,
+    private translate: TranslateService
+  ) { }
+
+  ngOnInit(): void {
+    this.setFilterForm();
+    this.loadNextPage();
+  }
+
+  setFilterForm() {
+    this.filterForm = this.fb.group({
+      name: [''],
+    });
+
+    this.filterForm.valueChanges.pipe(
+      debounceTime(600)
+    ).subscribe(changes => {
+      if (changes.name) {
+        this.searchCriterions.name = changes.name;
+      } else {
+        this.searchCriterions.name = null;
+      }
+
+      if (this.searchCriterions.pageSize)
+        this.searchCriterions.pageSize = 10;
+
+      if (this.searchCriterions.pageSize)
+        this.searchCriterions.pageIndex = 0;
+
+      this.loadNextPage();
+    });
+  }
+
+  loadNextPage() {
+    this.data.getFilteredServers(this.searchCriterions).pipe(catchError(err => {
+      this.loading = false;
+      return throwError(() => err);
+    })).subscribe(list => {
+      this.totalRecords = list.totalCount;
+      this.servers = list.servers;
+      this.loading = false;
+    });
+  }
+
+  nextPage(event: LazyLoadEvent) {
+    this.searchCriterions.pageSize = event.rows ?? 0;
+    if (event.first != null && event.rows != null)
+      this.searchCriterions.pageIndex = event.first / event.rows;
+    this.searchCriterions.sortColumn = event.sortField ?? null;
+    this.searchCriterions.sortDirection = event.sortOrder === 1 ? 'asc' : event.sortOrder === -1 ? 'desc' : 'asc';
+
+    if (event.filters) {
+      // + "" => convert to string
+      this.searchCriterions.name = event.filters['name'] ? event.filters['name'] + "" : null;
+    }
+
+    this.loadNextPage();
+  }
+
+  resetFilters() {
+    this.filterForm.reset();
+  }
 
 }

kdb-web/src/app/services/data/data.service.ts

@@ -1,5 +1,9 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ServerDTO } from 'src/app/models/discord/server.dto';
+import { GetFilteredServersResultDTO } from 'src/app/models/selection/server/get-filtered-servers-result.dto';
+import { ServerSelectCriterion } from 'src/app/models/selection/server/server-select-criterion.dto';
 import { SettingsService } from '../settings/settings.service';
 
 @Injectable({
@@ -11,4 +15,31 @@ export class DataService {
     private appsettings: SettingsService,
     private http: HttpClient,
   ) { }
+
+
+
+  /* data requests */
+  getAllServers(): Observable<Array<ServerDTO>> {
+    return this.http.get<Array<ServerDTO>>(`${this.appsettings.getApiURL()}/api/discord/server/servers`, {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+      })
+    });
+  }
+  
+  getAllServersByUser(): Observable<Array<ServerDTO>> {
+    return this.http.get<Array<ServerDTO>>(`${this.appsettings.getApiURL()}/api/discord/server/servers-by-user`, {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+      })
+    });
+  }
+
+  getFilteredServers(selectCriterions: ServerSelectCriterion): Observable<GetFilteredServersResultDTO> {
+    return this.http.post<GetFilteredServersResultDTO>(`${this.appsettings.getApiURL()}/api/discord/server/get/filtered`, selectCriterions, {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+      })
+    });
+  }
 }

kdb-web/src/assets/i18n/de.json

@@ -106,7 +106,9 @@
         }
     },
     "view": {
-        "dashboard": {},
+        "dashboard": {
+            "header": "Dashboard"
+        },
         "user-list": {},
         "change-password": {
             "header": "Passwort ändern",