From f7c27b77ee7b51d80272d26a2602b09fe8834571 Mon Sep 17 00:00:00 2001 From: Sven Heidemann Date: Thu, 9 Feb 2023 16:36:50 +0100 Subject: [PATCH] Added graphql support #162-2 --- .../app/models/graphql/filter/page.model.ts | 4 + .../app/models/graphql/filter/sort.model.ts | 4 + .../src/app/models/graphql/queries.model.ts | 4 +- .../src/app/models/graphql/variables.model.ts | 8 ++ .../dashboard/dashboard.component.ts | 83 ++++++++++++------- kdb-web/src/app/services/data/data.service.ts | 35 +++++--- 6 files changed, 91 insertions(+), 47 deletions(-) create mode 100644 kdb-web/src/app/models/graphql/filter/page.model.ts create mode 100644 kdb-web/src/app/models/graphql/filter/sort.model.ts create mode 100644 kdb-web/src/app/models/graphql/variables.model.ts diff --git a/kdb-web/src/app/models/graphql/filter/page.model.ts b/kdb-web/src/app/models/graphql/filter/page.model.ts new file mode 100644 index 00000000..49adbf15 --- /dev/null +++ b/kdb-web/src/app/models/graphql/filter/page.model.ts @@ -0,0 +1,4 @@ +export interface Page { + pageIndex?: number; + pageSize?: number; +} diff --git a/kdb-web/src/app/models/graphql/filter/sort.model.ts b/kdb-web/src/app/models/graphql/filter/sort.model.ts new file mode 100644 index 00000000..61ee7627 --- /dev/null +++ b/kdb-web/src/app/models/graphql/filter/sort.model.ts @@ -0,0 +1,4 @@ +export interface Sort { + sortColumn?: string; + sortDirection?: string; +} diff --git a/kdb-web/src/app/models/graphql/queries.model.ts b/kdb-web/src/app/models/graphql/queries.model.ts index 8cd9204a..cd31d91d 100644 --- a/kdb-web/src/app/models/graphql/queries.model.ts +++ b/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 diff --git a/kdb-web/src/app/models/graphql/variables.model.ts b/kdb-web/src/app/models/graphql/variables.model.ts new file mode 100644 index 00000000..fdc5d93f --- /dev/null +++ b/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; +} diff --git a/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts b/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts index e4c0070a..360db528 100644 --- a/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts +++ b/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, @@ -38,62 +51,68 @@ export class DashboardComponent implements OnInit { private translate: TranslateService, private router: Router, private serverService: ServerService - ) { } + ) { + } async ngOnInit(): Promise { 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(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"]); } } diff --git a/kdb-web/src/app/services/data/data.service.ts b/kdb-web/src/app/services/data/data.service.ts index 9141a83a..ffac1206 100644 --- a/kdb-web/src/app/services/data/data.service.ts +++ b/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 { - return this.http.post(`${this.appsettings.getApiURL()}/api/graphql`, - JSON.stringify({ - query, variables - }), { - headers: new HttpHeaders({ - "Content-Type": "application/json" - }) - } - ); + // query(query: string, variables: object = {}): Observable { + // return this.http.post(`${this.appsettings.getApiURL()}/api/graphql`, + // JSON.stringify({ + // query, variables + // }), { + // headers: new HttpHeaders({ + // "Content-Type": "application/json" + // }) + // } + // ); + // } + + public query(query: string, variables?: Variables): Observable { + return this.http + .post<{ data: T }>(`${this.appsettings.getApiURL()}/api/graphql`, { + query: query, + variables: variables + }) + .pipe(map((d) => d.data)); } }