kdb-web/src/app/models/graphql/filter/page.model.ts

@@ -0,0 +1,4 @@
+export interface Page {
+  pageIndex?: number;
+  pageSize?: number;
+}

kdb-web/src/app/models/graphql/filter/sort.model.ts

@@ -0,0 +1,4 @@
+export interface Sort {
+  sortColumn?: string;
+  sortDirection?: string;
+}

kdb-web/src/app/models/graphql/queries.model.ts

@@ -1,8 +1,8 @@
 export class Queries {
   static serverInfoQuery = `
-    query {
+    query ServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) {
       serverCount
-      servers {
+      servers(filter: $filter, page: $page, sort: $sort) {
         id
         name
         iconURL

kdb-web/src/app/models/graphql/variables.model.ts

@@ -0,0 +1,8 @@
+import { Page } from "./filter/page.model";
+import { Sort } from "./filter/sort.model";
+
+export interface Variables {
+  filter?: object;
+  page?: Page;
+  sort?: Sort;
+}

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"]);
   }
 
 }

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

@@ -1,8 +1,8 @@
-import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { SettingsService } from "../settings/settings.service";
-import { Observable } from "rxjs";
-import { QueryResult } from "../../models/graphql/result.model";
+import { map, Observable } from "rxjs";
+import { Variables } from "../../models/graphql/variables.model";
 
 @Injectable({
   providedIn: "root"
@@ -15,16 +15,25 @@ export class DataService {
   ) {
   }
 
-  query(query: string, variables: object = {}): Observable<QueryResult> {
-    return this.http.post<QueryResult>(`${this.appsettings.getApiURL()}/api/graphql`,
-      JSON.stringify({
-        query, variables
-      }), {
-        headers: new HttpHeaders({
-          "Content-Type": "application/json"
-        })
-      }
-    );
+  // query(query: string, variables: object = {}): Observable<QueryResult> {
+  //   return this.http.post<QueryResult>(`${this.appsettings.getApiURL()}/api/graphql`,
+  //     JSON.stringify({
+  //       query, variables
+  //     }), {
+  //       headers: new HttpHeaders({
+  //         "Content-Type": "application/json"
+  //       })
+  //     }
+  //   );
+  // }
+
+  public query<T>(query: string, variables?: Variables): Observable<T> {
+    return this.http
+      .post<{ data: T }>(`${this.appsettings.getApiURL()}/api/graphql`, {
+        query: query,
+        variables: variables
+      })
+      .pipe(map((d) => d.data));
   }
 
 }