Fixed dashboard server filter #130

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

@@ -2,17 +2,16 @@ import { Component, OnInit } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
 import { Router } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
-import { LazyLoadEvent } from "primeng/api";
 import { debounceTime, throwError } from "rxjs";
 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";
-import { Server } from "../../../../../models/data/server.model";
+import { Server, ServerFilter } from "../../../../../models/data/server.model";
 import { catchError } from "rxjs/operators";
 import { Queries } from "../../../../../models/graphql/queries.model";
 import { Page } from "../../../../../models/graphql/filter/page.model";
-import { Sort, SortDirection } from "../../../../../models/graphql/filter/sort.model";
+import { Sort } from "../../../../../models/graphql/filter/sort.model";
 import { Query } from "../../../../../models/graphql/query.model";
 import { SidebarService } from "../../../../../services/sidebar/sidebar.service";
 
@@ -27,9 +26,7 @@ export class DashboardComponent implements OnInit {
 
   totalRecords!: number;
 
-  filter = {
+  filter: ServerFilter = {};
-    name: ""
-  };
 
   page: Page = {
     pageIndex: 0,
@@ -50,7 +47,7 @@ export class DashboardComponent implements OnInit {
     private fb: FormBuilder,
     private translate: TranslateService,
     private router: Router,
-    private sidebar: SidebarService,
+    private sidebar: SidebarService
   ) {
   }
 
@@ -63,13 +60,15 @@ export class DashboardComponent implements OnInit {
 
   setFilterForm() {
     this.filterForm = this.fb.group({
-      name: [""]
+      name: new FormControl<string | null>(null)
     });
 
     this.filterForm.valueChanges.pipe(
       debounceTime(600)
     ).subscribe(async changes => {
-      if (changes.name) {
+      if (changes.name == "") {
+        this.filter.name = undefined;
+      } else if (changes.name) {
         this.filter.name = changes.name;
       }
 
@@ -85,10 +84,10 @@ export class DashboardComponent implements OnInit {
 
   loadNextPage() {
     this.spinnerService.showSpinner();
-    this.data.query<Query>(Queries.serversListQuery,{
+    this.data.query<Query>(Queries.serversListQuery, {
       filter: this.filter,
       page: this.page,
-      sort: this.sort,
+      sort: this.sort
     }).pipe(catchError(err => {
       this.spinnerService.hideSpinner();
       return throwError(() => err);
@@ -99,28 +98,6 @@ export class DashboardComponent implements OnInit {
     });
   }
 
-  nextPage(event: LazyLoadEvent) {
-    this.page.pageSize = event.rows ?? 0;
-    if (event.first != null && event.rows != null)
-      this.page.pageIndex = event.first / event.rows;
-
-    this.sort = {
-      sortColumn: event.sortField ?? "",
-      sortDirection: event.sortOrder === 1 ? SortDirection.ASC : event.sortOrder === -1 ? SortDirection.DESC: SortDirection.ASC
-    };
-
-    if (event.filters) {
-      // + "" => convert to string
-      this.filter.name = event.filters["name"] ? event.filters["name"] + "" : "";
-    }
-
-    this.loadNextPage();
-  }
-
-  resetFilters() {
-    this.filterForm.reset();
-  }
-
   selectServer(server: Server) {
     this.sidebar.setServer(server);
     this.router.navigate(["/server", server.id]);