kdb-web/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

kdb-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "0.3.dev162-2",
+    "version": "0.3.dev162",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",
@@ -16,29 +16,29 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^15.1.4",
-        "@angular/common": "^15.1.4",
-        "@angular/compiler": "^15.1.4",
-        "@angular/core": "^15.1.4",
-        "@angular/forms": "^15.1.4",
-        "@angular/platform-browser": "^15.1.4",
-        "@angular/platform-browser-dynamic": "^15.1.4",
-        "@angular/router": "^15.1.4",
+        "@angular/animations": "^14.0.0",
+        "@angular/common": "^14.0.0",
+        "@angular/compiler": "^14.0.0",
+        "@angular/core": "^14.0.0",
+        "@angular/forms": "^14.0.0",
+        "@angular/platform-browser": "^14.0.0",
+        "@angular/platform-browser-dynamic": "^14.0.0",
+        "@angular/router": "^14.0.0",
         "@auth0/angular-jwt": "^5.1.0",
         "@microsoft/signalr": "^6.0.9",
         "@ngx-translate/core": "^14.0.0",
         "@ngx-translate/http-loader": "^7.0.0",
         "@types/socket.io-client": "^3.0.0",
         "primeicons": "^6.0.1",
-        "primeng": "^15.2.0",
+        "primeng": "^14.1.2",
         "rxjs": "~7.5.0",
         "socket.io-client": "^4.5.3",
         "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^15.1.5",
-        "@angular/cli": "~15.1.5",
-        "@angular/compiler-cli": "^15.1.4",
+        "@angular-devkit/build-angular": "^14.0.0",
+        "@angular/cli": "~14.0.0",
+        "@angular/compiler-cli": "^14.0.0",
         "@types/jasmine": "~4.0.0",
         "@types/node": "^18.11.9",
         "jasmine-core": "~4.1.0",
@@ -48,6 +48,6 @@
         "karma-jasmine": "~5.0.0",
         "karma-jasmine-html-reporter": "~1.7.0",
         "tslib": "^2.4.1",
-        "typescript": "~4.9.5"
+        "typescript": "~4.7.2"
     }
 }

kdb-web/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClient } 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';
@@ -47,8 +47,7 @@ import { SettingsService } from './services/settings/settings.service';
         useFactory: HttpLoaderFactory,
         deps: [HttpClient]
       }
-    }),
-    HttpClientModule
+    })
   ],
   providers: [
     {

kdb-web/src/app/components/sidebar/sidebar.component.ts

@@ -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.id;
+      this.serverId = server.serverId;
       this.setMenu();
     });
   }

kdb-web/src/app/models/data/data.model.ts

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

kdb-web/src/app/models/data/server.model.ts

@@ -1,16 +0,0 @@
-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?: [];
-}

kdb-web/src/app/models/discord/server.dto.ts

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

kdb-web/src/app/models/selection/server/get-filtered-servers-result.dto.ts

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

kdb-web/src/app/models/selection/server/server-select-criterion.dto.ts

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

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

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

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

@@ -1,15 +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 { 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";
+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';
 
 @Component({
   selector: 'app-dashboard',
@@ -18,8 +19,15 @@ import { Server } from "../../../../../models/data/server.model";
 })
 export class DashboardComponent implements OnInit {
 
-  servers: Server[] = [];
+  servers: ServerDTO[] = [];
 
+  searchCriterions: ServerSelectCriterion = {
+    name: null,
+    pageIndex: 0,
+    pageSize: 10,
+    sortColumn: null,
+    sortDirection: null
+  };
   totalRecords!: number;
 
 
@@ -38,11 +46,10 @@ export class DashboardComponent implements OnInit {
     private serverService: ServerService
   ) { }
 
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
     this.spinnerService.showSpinner();
-
     this.setFilterForm();
-    await this.loadNextPage();
+    this.loadNextPage();
   }
 
   setFilterForm() {
@@ -52,46 +59,46 @@ export class DashboardComponent implements OnInit {
 
     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;
+    ).subscribe(changes => {
+      if (changes.name) {
+        this.searchCriterions.name = changes.name;
+      } else {
+        this.searchCriterions.name = null;
+      }
 
-      await this.loadNextPage();
+      if (this.searchCriterions.pageSize)
+        this.searchCriterions.pageSize = 10;
+
+      if (this.searchCriterions.pageSize)
+        this.searchCriterions.pageIndex = 0;
+
+      this.loadNextPage();
     });
   }
 
-  async loadNextPage() {
+  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();
   }
@@ -100,7 +107,7 @@ export class DashboardComponent implements OnInit {
     this.filterForm.reset();
   }
 
-  selectServer(server: Server) {
+  selectServer(server: ServerDTO) {
     this.serverService.server$.next(server);
     this.router.navigate(['/server']);
   }

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html

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

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

@@ -1,9 +1,9 @@
-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";
+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';
 
 @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!: Server;
+  server!: ServerDTO;
 
   constructor(
     private route: ActivatedRoute,

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

@@ -217,7 +217,7 @@ export class AuthService {
     };
   }
 
-  getDecodedToken(): { [key: string]: any } | null{
+  getDecodedToken(): { [key: string]: any } {
     return this.jwtHelper.decodeToken(this.getToken().token);
   }
 
@@ -288,11 +288,10 @@ export class AuthService {
       return false;
     }
     const token = this.getDecodedToken();
-    if (!token) return false;
     return AuthRoles[token['role']] === AuthRoles[role];
   }
 
-  getEMailFromDecodedToken(token: { [key: string]: any } | null): string | null {
+  getEMailFromDecodedToken(token: { [key: string]: any }): string | null {
     if (!token) {
       return null;
     }

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

@@ -1,28 +1,53 @@
-import { HttpClient } from "@angular/common/http";
-import { Injectable } from "@angular/core";
-import { SettingsService } from "../settings/settings.service";
+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';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DataService {
 
-  // serverQuery = this.apollo.watchQuery({
-  //     query: gql`
-  //       {
-  //         serverCount
-  //         servers {
-  //           id
-  //           name
-  //         }
-  //       }
-  //     `
-  //   });
-
-
   constructor(
     private appsettings: SettingsService,
-    private http: HttpClient
-  ) {}
+    private http: HttpClient,
+  ) { }
 
+
+
+  /* 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'
+      })
+    });
+  }
 }

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

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

kdb-web/src/assets/config.json

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

kdb-web/src/test.ts

@@ -7,8 +7,20 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(),
 );
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

kdb-web/tsconfig.json

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "ts-node": {
     "compilerOptions": {
@@ -20,15 +21,12 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "ES2022",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2020",
-      "dom",
-      "esnext.asynciterable"
-    ],
-    "allowSyntheticDefaultImports": true,
-    "useDefineForClassFields": false
+      "dom"
+    ]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,