Added graphql support #162-2

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

@@ -12,11 +12,14 @@ import { ToastService } from "src/app/services/toast/toast.service";
 import { Server } 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 } from "../../../../../models/graphql/filter/sort.model";
+import { Query } from "../../../../../models/graphql/query.model";
 
 @Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss']
+  selector: "app-dashboard",
+  templateUrl: "./dashboard.component.html",
+  styleUrls: ["./dashboard.component.scss"]
 })
 export class DashboardComponent implements OnInit {
 
@@ -24,6 +27,16 @@ export class DashboardComponent implements OnInit {
 
   totalRecords!: number;
 
+  filter = {
+    name: ""
+  };
+
+  page: Page = {
+    pageIndex: 0,
+    pageSize: 10
+  };
+
+  sort!: Sort;
 
   filterForm!: FormGroup<{
     name: FormControl<string | null>,
@@ -38,62 +51,68 @@ export class DashboardComponent implements OnInit {
     private translate: TranslateService,
     private router: Router,
     private serverService: ServerService
-  ) { }
+  ) {
+  }
 
   async ngOnInit(): Promise<void> {
     this.spinnerService.showSpinner();
 
     this.setFilterForm();
-    await this.loadNextPage();
+    this.loadNextPage();
   }
 
   setFilterForm() {
     this.filterForm = this.fb.group({
-      name: [''],
+      name: [""]
     });
 
     this.filterForm.valueChanges.pipe(
       debounceTime(600)
     ).subscribe(async 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;
+      if (changes.name) {
+        this.filter.name = changes.name;
+      }
+
+      if (this.page.pageSize)
+        this.page.pageSize = 10;
+
+      if (this.page.pageSize)
+        this.page.pageIndex = 0;
 
       await this.loadNextPage();
     });
   }
 
-  async loadNextPage() {
+  loadNextPage() {
     this.spinnerService.showSpinner();
-    this.data.query(Queries.serverInfoQuery).pipe(catchError(err => {
+    this.data.query<Query>(Queries.serverInfoQuery,{
+      filter: this.filter,
+      page: this.page,
+      sort: this.sort,
+    }).pipe(catchError(err => {
       this.spinnerService.hideSpinner();
       return throwError(() => err);
     })).subscribe(data => {
-      this.totalRecords = data.data.serverCount;
-      this.servers = data.data.servers;
+      this.totalRecords = data.serverCount;
+      this.servers = data.servers;
       this.spinnerService.hideSpinner();
     });
   }
 
   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.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 ? "asc" : event.sortOrder === -1 ? "desc" : "asc"
+    };
+
+    if (event.filters) {
+      // + "" => convert to string
+      this.filter.name = event.filters["name"] ? event.filters["name"] + "" : "";
+    }
 
     this.loadNextPage();
   }
@@ -104,7 +123,7 @@ export class DashboardComponent implements OnInit {
 
   selectServer(server: Server) {
     this.serverService.server$.next(server);
-    this.router.navigate(['/server']);
+    this.router.navigate(["/server"]);
   }
 
 }