From 113d77eb774258c7498d7d1e65671007e76e5043 Mon Sep 17 00:00:00 2001 From: Jonas Drescher Date: Mon, 20 Feb 2023 20:27:08 +0100 Subject: [PATCH 1/2] WIP: levels table --- .../src/app/models/graphql/queries.model.ts | 2 + .../components/levels/levels.component.html | 215 ++++++++++++++++++ .../components/levels/levels.component.scss | 0 .../levels/levels.component.spec.ts | 23 ++ .../components/levels/levels.component.ts | 127 +++++++++++ .../server/levels/levels-routing.module.ts | 16 ++ .../view/server/levels/levels.module.ts | 18 ++ .../view/server/server-routing.module.ts | 22 +- .../app/services/sidebar/sidebar.service.ts | 24 +- kdb-web/src/assets/i18n/de.json | 22 ++ 10 files changed, 455 insertions(+), 14 deletions(-) create mode 100644 kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html create mode 100644 kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.scss create mode 100644 kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.spec.ts create mode 100644 kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts create mode 100644 kdb-web/src/app/modules/view/server/levels/levels-routing.module.ts create mode 100644 kdb-web/src/app/modules/view/server/levels/levels.module.ts diff --git a/kdb-web/src/app/models/graphql/queries.model.ts b/kdb-web/src/app/models/graphql/queries.model.ts index 82bb40af..5911d5f3 100644 --- a/kdb-web/src/app/models/graphql/queries.model.ts +++ b/kdb-web/src/app/models/graphql/queries.model.ts @@ -58,6 +58,8 @@ export class Queries { id name } + createdAt + modifiedAt } } `; diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html new file mode 100644 index 00000000..94888113 --- /dev/null +++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html @@ -0,0 +1,215 @@ +

+ {{'view.server.levels.header' | translate}} +

+
+
+ + + +
+
+ {{levels.length}} {{'view.server.levels.of' | translate}} + {{dt.totalRecords}} + + {{'view.server.levels.levels' | translate}} +
+ +
+ + +
+
+ + + + + +
+
{{'view.server.levels.headers.id' | translate}}
+ +
+ + + +
+
{{'view.server.levels.headers.name' | translate}}
+ +
+ + + +
+
{{'view.server.levels.headers.color' | translate}}
+ +
+ + + +
+
{{'view.server.levels.headers.min_xp' | translate}}
+ +
+ + + +
+
{{'view.server.levels.headers.permissions' | translate}}
+ +
+ + + +
+
{{'common.created_at' | translate}}
+
+ + + +
+
{{'common.modified_at' | translate}}
+
+ + + +
+
{{'view.server.members.headers.actions' | translate}}
+
+ + + + + +
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + {{level.id}} + + + {{level.id}} + + + + + + + + {{level.name}} + + + {{level.name}} + + + + + + + + {{level.color}} + + + {{level.color}} + + + + + + + + {{level.minXp}} + + + {{level.minXp}} + + + + + + + + {{level.permissions}} + + + {{level.permissions}} + + + + + + + + {{level.createdAt | date:'dd.MM.yy HH:mm'}} + + + {{level.createdAt | date:'dd.MM.yy HH:mm'}} + + + + + + + {{level.modifiedAt | date:'dd.MM.yy HH:mm'}} + + + {{level.modifiedAt | date:'dd.MM.yy HH:mm'}} + + + + + +
+ + + + + +
+ + + + + + + + {{'view.server.auto_roles.no_entries_found' | translate}} + + + + + + + +
+
+ diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.scss b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.spec.ts b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.spec.ts new file mode 100644 index 00000000..30dc8eca --- /dev/null +++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LevelsComponent } from './levels.component'; + +describe('LevelsComponent', () => { + let component: LevelsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LevelsComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LevelsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts new file mode 100644 index 00000000..d2b8cdaa --- /dev/null +++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts @@ -0,0 +1,127 @@ +import {Component} from '@angular/core'; +import {AuthService} from "../../../../../../services/auth/auth.service"; +import {SpinnerService} from "../../../../../../services/spinner/spinner.service"; +import {ToastService} from "../../../../../../services/toast/toast.service"; +import {ConfirmationDialogService} from "../../../../../../services/confirmation-dialog/confirmation-dialog.service"; +import {FormBuilder, FormControl, FormGroup} from "@angular/forms"; +import {TranslateService} from "@ngx-translate/core"; +import {DataService} from "../../../../../../services/data/data.service"; +import {SidebarService} from "../../../../../../services/sidebar/sidebar.service"; +import {ActivatedRoute} from "@angular/router"; +import {Page} from "../../../../../../models/graphql/filter/page.model"; +import {Sort, SortDirection} from "../../../../../../models/graphql/filter/sort.model"; +import {Level, LevelFilter} from "../../../../../../models/data/level.model"; +import {LevelListQuery} from "../../../../../../models/graphql/query.model"; +import {Queries} from "../../../../../../models/graphql/queries.model"; +import {debounceTime} from "rxjs/operators"; +import {LazyLoadEvent} from "primeng/api"; + +@Component({ + selector: 'app-levels', + templateUrl: './levels.component.html', + styleUrls: ['./levels.component.scss'] +}) +export class LevelsComponent { + + levels!: Level[]; + loading = true; + + isEditingNew: boolean = false; + + filterForm!: FormGroup<{ + id: FormControl, + name: FormControl, + color: FormControl, + min_xp: FormControl, + permissions: FormControl, + }>; + + filter: LevelFilter = {}; + page: Page = { + pageSize: undefined, + pageIndex: undefined + }; + sort: Sort = { + sortColumn: undefined, + sortDirection: undefined + }; + + totalRecords!: number; + + public constructor( + private authService: AuthService, + private spinner: SpinnerService, + private toastService: ToastService, + private confirmDialog: ConfirmationDialogService, + private fb: FormBuilder, + private translate: TranslateService, + private data: DataService, + private sidebar: SidebarService, + private route: ActivatedRoute) { + } + + public ngOnInit(): void { + this.data.getServerFromRoute(this.route); + + this.setFilterForm(); + this.loadNextPage(); + } + + public loadNextPage() { + this.loading = true; + this.data.query(Queries.levelQuery, { + filter: this.filter, page: this.page, sort: this.sort + } + ).subscribe(data => { + this.totalRecords = data.levelCount; + this.levels = data.levels; + this.spinner.hideSpinner(); + this.loading = false; + }); + } + + public setFilterForm() { + this.filterForm = this.fb.group({ + id: new FormControl(null), + name: new FormControl(null), + color: new FormControl(null), + min_xp: new FormControl(null), + permissions: new FormControl(null), + }); + + this.filterForm.valueChanges.pipe( + debounceTime(600) + ).subscribe(changes => { + if (changes.id) { + this.filter.id = changes.id; + } else { + this.filter.id = undefined; + } + + if (changes.name) { + this.filter.name = changes.name; + } else { + this.filter.name = undefined; + } + + if (this.page.pageSize) + this.page.pageSize = 10; + + if (this.page.pageIndex) + this.page.pageIndex = 0; + + this.loadNextPage(); + }); + } + + public nextPage(event: LazyLoadEvent) { + 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 ?? undefined; + this.sort.sortDirection = event.sortOrder === 1 ? SortDirection.ASC : event.sortOrder === -1 ? SortDirection.DESC : SortDirection.ASC; + + this.loadNextPage(); + } + +} diff --git a/kdb-web/src/app/modules/view/server/levels/levels-routing.module.ts b/kdb-web/src/app/modules/view/server/levels/levels-routing.module.ts new file mode 100644 index 00000000..76c42715 --- /dev/null +++ b/kdb-web/src/app/modules/view/server/levels/levels-routing.module.ts @@ -0,0 +1,16 @@ +import {NgModule} from "@angular/core"; +import {RouterModule, Routes} from "@angular/router"; +import {LevelsComponent} from "./components/levels/levels.component"; + +const routes: Routes = [ + + {path: '', component: LevelsComponent}, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class LevelsRoutingModule { + +} diff --git a/kdb-web/src/app/modules/view/server/levels/levels.module.ts b/kdb-web/src/app/modules/view/server/levels/levels.module.ts new file mode 100644 index 00000000..a9d0ba8e --- /dev/null +++ b/kdb-web/src/app/modules/view/server/levels/levels.module.ts @@ -0,0 +1,18 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {LevelsComponent} from './components/levels/levels.component' +import {SharedModule} from "../../../shared/shared.module"; +import {LevelsRoutingModule} from "./levels-routing.module"; + +@NgModule({ + declarations: [ + LevelsComponent + ], + imports: [ + CommonModule, + LevelsRoutingModule, + SharedModule + ] +}) +export class LevelsModule { +} diff --git a/kdb-web/src/app/modules/view/server/server-routing.module.ts b/kdb-web/src/app/modules/view/server/server-routing.module.ts index b390b0b8..f51ea000 100644 --- a/kdb-web/src/app/modules/view/server/server-routing.module.ts +++ b/kdb-web/src/app/modules/view/server/server-routing.module.ts @@ -1,18 +1,20 @@ -import { NgModule } from "@angular/core"; -import { RouterModule, Routes } from "@angular/router"; -import { ServerDashboardComponent } from "./server-dashboard/server-dashboard.component"; -import { ProfileComponent } from "./profile/profile.component"; -import { MembersComponent } from "./members/members.component"; +import {NgModule} from "@angular/core"; +import {RouterModule, Routes} from "@angular/router"; +import {ServerDashboardComponent} from "./server-dashboard/server-dashboard.component"; +import {ProfileComponent} from "./profile/profile.component"; +import {MembersComponent} from "./members/members.component"; const routes: Routes = [ - { path: '', component: ServerDashboardComponent }, - { path: 'members', component: MembersComponent }, - { path: 'members/:memberId', component: ProfileComponent }, - { path: 'auto-roles', loadChildren: () => import('./auto-role/auto-role.module').then(m => m.AutoRoleModule)}, + {path: '', component: ServerDashboardComponent}, + {path: 'members', component: MembersComponent}, + {path: 'members/:memberId', component: ProfileComponent}, + {path: 'auto-roles', loadChildren: () => import('./auto-role/auto-role.module').then(m => m.AutoRoleModule)}, + {path: 'levels', loadChildren: () => import('./levels/levels.module').then(m => m.LevelsModule)}, ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) -export class ServerRoutingModule { } +export class ServerRoutingModule { +} diff --git a/kdb-web/src/app/services/sidebar/sidebar.service.ts b/kdb-web/src/app/services/sidebar/sidebar.service.ts index 021f434f..a790a2fb 100644 --- a/kdb-web/src/app/services/sidebar/sidebar.service.ts +++ b/kdb-web/src/app/services/sidebar/sidebar.service.ts @@ -24,6 +24,7 @@ export class SidebarService { serverMembers!: MenuItem; serverAutoRoles!: MenuItem; serverAutoRoleRules!: MenuItem; + serverLevels!: MenuItem; serverMenu!: MenuItem; adminConfig!: MenuItem; adminUsers!: MenuItem; @@ -66,7 +67,11 @@ export class SidebarService { } async buildMenu(user: UserDTO | null, hasPermission: boolean) { - this.dashboard = { label: this.isSidebarOpen ? this.translateService.instant("sidebar.dashboard") : "", icon: "pi pi-th-large", routerLink: "dashboard" }; + this.dashboard = { + label: this.isSidebarOpen ? this.translateService.instant("sidebar.dashboard") : "", + icon: "pi pi-th-large", + routerLink: "dashboard" + }; this.serverDashboard = { label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.dashboard") : "", icon: "pi pi-th-large", @@ -74,7 +79,7 @@ export class SidebarService { }; this.serverProfile = { label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.profile") : "", - icon: "pi pi-user", + icon: "pi pi-id-card", routerLink: `server/${this.server$.value?.id}/members/${user?.id}` }; this.serverMembers = { @@ -91,14 +96,25 @@ export class SidebarService { routerLink: `server/${this.server$.value?.id}/auto-roles` }; + this.serverLevels = { + label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.levels") : "", + icon: "pi pi-book", + visible: true, + routerLink: `server/${this.server$.value?.id}/levels` + }; + this.serverMenu = { label: this.isSidebarOpen ? this.server$.value?.name : "", icon: "pi pi-server", visible: false, expanded: true, - items: [this.serverDashboard, this.serverProfile, this.serverMembers, this.serverAutoRoles] + items: [this.serverDashboard, this.serverProfile, this.serverMembers, this.serverAutoRoles, this.serverLevels] + }; + this.adminConfig = { + label: this.isSidebarOpen ? this.translateService.instant("sidebar.config") : "", + icon: "pi pi-cog", + routerLink: "/admin/settings" }; - this.adminConfig = { label: this.isSidebarOpen ? this.translateService.instant("sidebar.config") : "", icon: "pi pi-cog", routerLink: "/admin/settings" }; this.adminUsers = { label: this.isSidebarOpen ? this.translateService.instant("sidebar.auth_user_list") : "", icon: "pi pi-user-edit", diff --git a/kdb-web/src/assets/i18n/de.json b/kdb-web/src/assets/i18n/de.json index 8a7b7eaf..259e0f58 100644 --- a/kdb-web/src/assets/i18n/de.json +++ b/kdb-web/src/assets/i18n/de.json @@ -11,6 +11,7 @@ "dashboard": "Dashboard", "profile": "Dein Profil", "members": "Mitglieder", + "levels": "Level", "auto_roles": "Auto Rollen" }, "server_empty": "Kein Server ausgewählt", @@ -277,6 +278,27 @@ "auto_role_rule_delete_failed_d": "Die Löschung der Auto Rollen Regel {{id}} ist fehlgeschlagen!" } } + }, + "levels": { + "header": "Level", + "reset_filters": "Filter zurücksetzen", + "of": "von", + "add": "Hinzufügen", + "levels": "Level", + "headers": { + "id": "Id", + "name": "Name", + "color": "Farbe", + "min_xp": "Min. XP", + "permissions": "Rechte" + }, + "no_entries_found": "Keine Einträge gefunden", + "message": { + "level_changed": "Level geändert", + "level_changed_d": "Level {{name}} erfolgreich geändert", + "level_change_failed": "Level Änderung fehlgeschlagen", + "level_change_failed_d": "Level {{name}} konnte nicht geändert werden!" + } } }, "user-list": {}, -- 2.45.2 From 2fd7358d26772815766ddab0e25d0bf1947bb35c Mon Sep 17 00:00:00 2001 From: Sven Heidemann Date: Mon, 20 Feb 2023 20:30:43 +0100 Subject: [PATCH 2/2] Fixed user filter #133 --- .../app/modules/view/server/members/members.component.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/kdb-web/src/app/modules/view/server/members/members.component.ts b/kdb-web/src/app/modules/view/server/members/members.component.ts index 51bf7cba..ba7794ac 100644 --- a/kdb-web/src/app/modules/view/server/members/members.component.ts +++ b/kdb-web/src/app/modules/view/server/members/members.component.ts @@ -19,6 +19,7 @@ import { Mutations } from "../../../../models/graphql/mutations.model"; import { throwError } from "rxjs"; import { UpdateUserMutationResult } from "../../../../models/graphql/result.model"; import { ActivatedRoute } from "@angular/router"; +import { Level } from "../../../../models/data/level.model"; @Component({ selector: "app-members", @@ -65,7 +66,7 @@ export class MembersComponent implements OnInit { discordId: FormControl, name: FormControl, leftServer: FormControl, - level: FormControl + level: FormControl }>; filter: UserFilter = {}; @@ -132,7 +133,7 @@ export class MembersComponent implements OnInit { discordId: new FormControl(null), name: [""], leftServer: new FormControl(null), - level: new FormControl(null) + level: new FormControl(null) }); this.filterForm.valueChanges.pipe( @@ -164,7 +165,7 @@ export class MembersComponent implements OnInit { if (changes.level) { this.filter.level = { - id: changes.level + id: changes.level.id }; } else { this.filter.level = undefined; -- 2.45.2