sh-edraft.de/sh_discord_bot
4
1
Fork 1
Code Issues 21 Pull Requests Actions Packages Projects 3 Releases 27 Wiki Activity

Added graphql support #162-2

Browse Source
This commit is contained in:
Sven Heidemann 2023-02-09 16:36:50 +01:00
parent 6aca981fd1
commit f7c27b77ee
6 changed files with 91 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
kdb-web/src/app/models/graphql/filter/page.model.ts Normal file
View File

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

4
kdb-web/src/app/models/graphql/filter/sort.model.ts Normal file
View File

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

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

@ -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

8
kdb-web/src/app/models/graphql/variables.model.ts Normal file
View File

@ -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;
}

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

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

33
kdb-web/src/app/services/data/data.service.ts
View File

@ -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));
}
}