graphql part2/3 #162-2 #193

Merged
edraft merged 9 commits from #162-2 into 1.0.0 2023-02-11 10:38:28 +01:00
18 changed files with 21903 additions and 21567 deletions
Showing only changes of commit 667b9fa87e - Show all commits

43174
kdb-web/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "kdb-web",
"version": "0.3.dev162",
"version": "0.3.dev162-2",
"scripts": {
"ng": "ng",
"update-version": "ts-node-esm update-version.ts",
@ -29,11 +29,14 @@
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@types/socket.io-client": "^3.0.0",
"apollo-angular": "^4.2.0",
"primeicons": "^6.0.1",
"primeng": "^14.1.2",
"rxjs": "~7.5.0",
"socket.io-client": "^4.5.3",
"zone.js": "~0.11.4"
"zone.js": "~0.11.4",
"@apollo/client": "^3.0.0",
"graphql": "^16"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.0",

View File

@ -1,4 +1,4 @@
import { HttpClient } from '@angular/common/http';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -17,6 +17,7 @@ import { SpinnerComponent } from './components/spinner/spinner.component';
import { SharedModule } from './modules/shared/shared.module';
import { ErrorHandlerService } from './services/error-handler/error-handler.service';
import { SettingsService } from './services/settings/settings.service';
import { GraphQLModule } from './graphql.module';
@ -47,7 +48,9 @@ import { SettingsService } from './services/settings/settings.service';
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
}),
GraphQLModule,
HttpClientModule
],
providers: [
{

View File

@ -17,7 +17,7 @@ export class SidebarComponent implements OnInit {
isSidebarOpen: boolean = true;
menuItems!: MenuItem[];
private serverId!: number;
private serverId?: number;
constructor(
private authService: AuthService,
@ -40,7 +40,7 @@ export class SidebarComponent implements OnInit {
return;
}
this.serverId = server.serverId;
this.serverId = server.id;
this.setMenu();
});
}

View File

@ -0,0 +1,26 @@
import {NgModule} from '@angular/core';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, InMemoryCache} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import { environment } from "../environments/environment";
const uri = `${environment.apiURL}/api/graphql/`; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
return {
link: httpLink.create({uri}),
cache: new InMemoryCache(),
};
}
@NgModule({
exports: [ApolloModule],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule {}

View File

@ -0,0 +1,4 @@
export interface Data {
createdAt: string;
modifiedAt: string;
}

View File

@ -0,0 +1,16 @@
import { Data } from "./data.model";
export interface Server extends Data {
id?: number;
discordId?: number;
name?: string;
iconURL?: string;
autoRoleCount?: number;
autoRoles?: [];
clientCount?: number;
clients?: [];
levelCount?: number;
levels?: [];
userCount?: number;
users?: [];
}

View File

@ -1,7 +0,0 @@
export interface ServerDTO {
serverId: number;
discordId: number;
name: string;
memberCount: number;
iconURL: string | null;
}

View File

@ -1,7 +0,0 @@
import { AuthUserDTO } from "../../auth/auth-user.dto";
import { ServerDTO } from "../../discord/server.dto";
export interface GetFilteredServersResultDTO {
servers: ServerDTO[];
totalCount: number;
}

View File

@ -1,5 +0,0 @@
import { SelectCriterion } from "../select-criterion.model";
export interface ServerSelectCriterion extends SelectCriterion {
name: string | null;
}

View File

@ -38,7 +38,7 @@
<div class="data">
<i class="pi pi-users"></i>
{{server.memberCount}}
{{server.userCount}}
{{'view.dashboard.server.member_count' | translate}}
</div>
</div>
@ -47,4 +47,4 @@
</div>
</div>
</div>
</div>
</div>

View File

@ -1,16 +1,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 { catchError, debounceTime, throwError } from 'rxjs';
import { ServerDTO } from 'src/app/models/discord/server.dto';
import { ServerSelectCriterion } from 'src/app/models/selection/server/server-select-criterion.dto';
import { ConfirmationDialogService } from 'src/app/services/confirmation-dialog/confirmation-dialog.service';
import { DataService } from 'src/app/services/data/data.service';
import { ServerService } from 'src/app/services/data/server.service';
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
import { ToastService } from 'src/app/services/toast/toast.service';
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 { Apollo } from "apollo-angular";
import { LazyLoadEvent } from "primeng/api";
import { debounceTime } from "rxjs";
import { ConfirmationDialogService } from "src/app/services/confirmation-dialog/confirmation-dialog.service";
import { DataService } from "src/app/services/data/data.service";
import { ServerService } from "src/app/services/data/server.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";
@Component({
selector: 'app-dashboard',
@ -19,15 +19,8 @@ import { ToastService } from 'src/app/services/toast/toast.service';
})
export class DashboardComponent implements OnInit {
servers: ServerDTO[] = [];
servers: Server[] = [];
searchCriterions: ServerSelectCriterion = {
name: null,
pageIndex: 0,
pageSize: 10,
sortColumn: null,
sortDirection: null
};
totalRecords!: number;
@ -43,13 +36,15 @@ export class DashboardComponent implements OnInit {
private fb: FormBuilder,
private translate: TranslateService,
private router: Router,
private serverService: ServerService
private serverService: ServerService,
private apollo: Apollo
) { }
ngOnInit(): void {
async ngOnInit(): Promise<void> {
this.spinnerService.showSpinner();
this.setFilterForm();
this.loadNextPage();
await this.loadNextPage();
}
setFilterForm() {
@ -59,46 +54,46 @@ export class DashboardComponent implements OnInit {
this.filterForm.valueChanges.pipe(
debounceTime(600)
).subscribe(changes => {
if (changes.name) {
this.searchCriterions.name = changes.name;
} else {
this.searchCriterions.name = null;
}
).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 (this.searchCriterions.pageSize)
this.searchCriterions.pageSize = 10;
if (this.searchCriterions.pageSize)
this.searchCriterions.pageIndex = 0;
this.loadNextPage();
await this.loadNextPage();
});
}
loadNextPage() {
async loadNextPage() {
this.spinnerService.showSpinner();
this.data.getFilteredServers(this.searchCriterions).pipe(catchError(err => {
this.spinnerService.hideSpinner();
return throwError(() => err);
})).subscribe(list => {
this.totalRecords = list.totalCount;
this.servers = list.servers;
this.spinnerService.hideSpinner();
});
// this.data.getFilteredServers(this.searchCriterions).pipe(catchError(err => {
// this.spinnerService.hideSpinner();
// return throwError(() => err);
// })).subscribe(list => {
// this.totalRecords = list.totalCount;
// this.servers = list.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.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.loadNextPage();
}
@ -107,7 +102,7 @@ export class DashboardComponent implements OnInit {
this.filterForm.reset();
}
selectServer(server: ServerDTO) {
selectServer(server: Server) {
this.serverService.server$.next(server);
this.router.navigate(['/server']);
}

View File

@ -24,7 +24,7 @@
<div class="data">
<i class="pi pi-users"></i>
{{server.memberCount}}
{{server.userCount}}
{{'view.dashboard.server.member_count' | translate}}
</div>
</div>
@ -33,4 +33,4 @@
</div>
</div>
</div>
</div>
</div>

View File

@ -1,9 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ServerDTO } from 'src/app/models/discord/server.dto';
import { DataService } from 'src/app/services/data/data.service';
import { ServerService } from 'src/app/services/data/server.service';
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Server } from "src/app/models/data/server.model";
import { DataService } from "src/app/services/data/data.service";
import { ServerService } from "src/app/services/data/server.service";
import { SpinnerService } from "src/app/services/spinner/spinner.service";
@Component({
selector: 'app-server-dashboard',
@ -13,7 +13,7 @@ import { SpinnerService } from 'src/app/services/spinner/spinner.service';
export class ServerDashboardComponent implements OnInit {
id!: number;
server!: ServerDTO;
server!: Server;
constructor(
private route: ActivatedRoute,

View File

@ -1,53 +1,30 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ServerDTO } from 'src/app/models/discord/server.dto';
import { GetFilteredServersResultDTO } from 'src/app/models/selection/server/get-filtered-servers-result.dto';
import { ServerSelectCriterion } from 'src/app/models/selection/server/server-select-criterion.dto';
import { SettingsService } from '../settings/settings.service';
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { SettingsService } from "../settings/settings.service";
import { Apollo, gql } from "apollo-angular";
@Injectable({
providedIn: 'root'
})
export class DataService {
serverQuery = this.apollo.watchQuery({
query: gql`
{
serverCount
servers {
id
name
}
}
`
});
constructor(
private appsettings: SettingsService,
private http: HttpClient,
) { }
private apollo: Apollo
) {}
/* data requests */
getAllServers(): Observable<Array<ServerDTO>> {
return this.http.get<Array<ServerDTO>>(`${this.appsettings.getApiURL()}/api/discord/server/servers`, {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
});
}
getAllServersByUser(): Observable<Array<ServerDTO>> {
return this.http.get<Array<ServerDTO>>(`${this.appsettings.getApiURL()}/api/discord/server/servers-by-user`, {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
});
}
getFilteredServers(selectCriterions: ServerSelectCriterion): Observable<GetFilteredServersResultDTO> {
return this.http.post<GetFilteredServersResultDTO>(`${this.appsettings.getApiURL()}/api/discord/server/get/filtered`, selectCriterions, {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
});
}
getServerByID(id: number): Observable<ServerDTO> {
return this.http.get<ServerDTO>(`${this.appsettings.getApiURL()}/api/discord/server/get/${id}`, {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
});
}
}

View File

@ -1,14 +1,14 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
import { ServerDTO } from 'src/app/models/discord/server.dto';
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { Server } from "src/app/models/data/server.model";
@Injectable({
providedIn: 'root'
})
export class ServerService {
private server!: ServerDTO;
server$ = new BehaviorSubject<ServerDTO | null>(null);
private server!: Server;
server$ = new BehaviorSubject<Server | null>(null);
constructor() {
this.server$.subscribe(server => {

View File

@ -3,7 +3,7 @@
"WebVersion": {
"Major": "0",
"Minor": "3",
"Micro": "dev162"
"Micro": "dev162-2"
},
"Themes": [
{

View File

@ -1,4 +1,3 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"ts-node": {
"compilerOptions": {
@ -25,8 +24,10 @@
"module": "es2020",
"lib": [
"es2020",
"dom"
]
"dom",
"esnext.asynciterable"
],
"allowSyntheticDefaultImports": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
@ -34,4 +35,4 @@
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
}