Added logic to get servers to dashboard #72

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();
+  }
 
 }