Added auto role rule list logic #134

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

@@ -13,8 +13,8 @@ import { SpinnerService } from "src/app/services/spinner/spinner.service";
 export class FooterComponent implements OnInit {
 
 
-  frontendVersion!: SoftwareVersion;
+  frontendVersion: SoftwareVersion = new SoftwareVersion("0", "0", "0");
-  backendVersion!: SoftwareVersion;
+  backendVersion: SoftwareVersion = new SoftwareVersion("0", "0", "0");
 
   constructor(
     private settings: SettingsService,

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

@@ -3,7 +3,7 @@ export interface Guild {
   name?: string;
 
   channels: [Channel]
-  role: [Role]
+  roles: [Role]
   emojis: [Emoji]
 }
 

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

@@ -2,6 +2,7 @@ import {Data} from "./data.model";
 import {User} from "./user.model";
 import {Level} from "./level.model";
 import {Client} from "./client.model";
+import { AutoRole } from "./auto_role.model";
 
 export interface Server extends Data {
   id?: number;
@@ -9,7 +10,7 @@ export interface Server extends Data {
   name?: string;
   iconURL?: string;
   autoRoleCount?: number;
-  autoRoles?: [];
+  autoRoles?: AutoRole[];
   clientCount?: number;
   clients?: Client[];
   levelCount?: number;

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

@@ -157,28 +157,30 @@ export class Queries {
   `;
 
   static autoRolesQuery = `
-    query AutoRoleQuery($filter: AutoRoleFilter, $page: Page, $sort: Sort) {
+    query AutoRoleQuery($serverId: ID, $filter: AutoRoleFilter, $page: Page, $sort: Sort) {
-      autoRoleCount
+      servers(filter: {id: $serverId}) {
-      autoRoles(filter: $filter, page: $page, sort: $sort) {
+        autoRoleCount
-        id
+        autoRoles(filter: $filter, page: $page, sort: $sort) {
-        channelId
-        channelName
-        messageId
-        autoRoleRuleCount
-
-        server {
           id
-        }
+          channelId
+          channelName
+          messageId
+          autoRoleRuleCount
 
-        createdAt
+          server {
-        modifiedAt
+            id
+          }
+
+          createdAt
+          modifiedAt
+        }
       }
     }
   `;
 
   static autoRoleRulesQuery = `
-    query AutoRoleRuleQuery($serverId: ID, $autoRoleId: ID, $filter: AutoRoleFilter, $page: Page, $sort: Sort) {
+    query AutoRoleRuleQuery($serverId: ID, $autoRoleId: ID, $filter: AutoRoleRuleFilter, $page: Page, $sort: Sort) {
-      servers(filter: {id: $serverId} {
+      servers(filter: {id: $serverId}) {
         autoRoles(filter: {id: $autoRoleId}) {
           autoRoleRuleCount
           autoRoleRules(filter: $filter, page: $page, sort: $sort) {

kdb-web/src/app/models/graphql/variables.model.ts

@@ -5,4 +5,5 @@ export interface Variables {
   filter?: object;
   page?: Page;
   sort?: Sort;
+  [x: string | number | symbol]: unknown;
 }

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

@@ -21,6 +21,7 @@ import { BoolPipe } from './pipes/bool.pipe';
 import { PanelMenuModule } from 'primeng/panelmenu';
 import { PanelModule } from "primeng/panel";
 import { InputNumberModule } from 'primeng/inputnumber';
+import { ImageModule } from "primeng/image";
 
 
 
@@ -51,6 +52,7 @@ import { InputNumberModule } from 'primeng/inputnumber';
     PanelMenuModule,
     PanelModule,
     InputNumberModule,
+    ImageModule
   ],
   exports: [
     ButtonModule,
@@ -75,6 +77,7 @@ import { InputNumberModule } from 'primeng/inputnumber';
     IpAddressPipe,
     BoolPipe,
     InputNumberModule,
+    ImageModule
   ]
 })
 export class SharedModule { }

kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html

@@ -1 +1,188 @@
-<p>auto-roles-rules works!</p>
+<h1>
+  {{'view.server.auto_roles.rules.header' | translate}}
+</h1>
+<div class="content-wrapper">
+  <div class="content">
+    <p-table #dt [value]="rules" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
+             [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
+             [lazy]="true" (onLazyLoad)="nextPage($event)">
+
+      <ng-template pTemplate="caption">
+        <div class="table-caption">
+          <div class="table-caption-text">
+            <ng-container *ngIf="!loading">{{rules.length}} {{'view.server.auto_roles.rules.of' | translate}}
+              {{dt.totalRecords}}
+            </ng-container>
+            {{'view.server.auto_roles.rules.auto_roles' | translate}}
+          </div>
+
+          <div class="table-caption-btn-wrapper btn-wrapper">
+            <button pButton label="{{'admin.auth_users.add' | translate}}" class="icon-btn btn"
+                    icon="pi pi-user-plus" (click)="addAutoRoleRule(dt)" [disabled]="isEditingNew">
+            </button>
+            <button pButton label="{{'view.server.auto_roles.rules.reset_filters' | translate}}" icon="pi pi-undo"
+                    class="icon-btn btn" (click)="resetFilters()">
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template pTemplate="header">
+        <tr>
+          <th pSortableColumn="id">
+            <div class="table-header-label">
+              <div class="table-header-text">{{'view.server.auto_roles.rules.headers.id' | translate}}</div>
+              <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
+            </div>
+          </th>
+
+          <th pSortableColumn="roleName">
+            <div class="table-header-label">
+              <div class="table-header-text">{{'view.server.auto_roles.rules.headers.role' | translate}}</div>
+              <p-sortIcon field="roleName" class="table-header-icon"></p-sortIcon>
+            </div>
+          </th>
+
+          <th>
+            <div class="table-header-label">
+              <div class="table-header-text">{{'view.server.auto_roles.rules.headers.emoji' | translate}}</div>
+            </div>
+          </th>
+
+          <th>
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.created_at' | translate}}</div>
+            </div>
+          </th>
+
+          <th>
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.modified_at' | translate}}</div>
+            </div>
+          </th>
+
+          <th>
+            <div class="table-header-label">
+              <div class="table-header-text">{{'view.server.auto_roles.rules.headers.actions' | translate}}</div>
+            </div>
+          </th>
+        </tr>
+
+        <tr>
+          <th class="table-header-small">
+            <form [formGroup]="filterForm">
+              <input type="text" pInputText formControlName="id" placeholder="{{'view.server.auto_roles.rules.headers.id' | translate}}">
+            </form>
+          </th>
+          <th>
+            <form [formGroup]="filterForm">
+              <input type="text" pInputText formControlName="roleId" placeholder="{{'view.server.auto_roles.rules.headers.role' | translate}}">
+            </form>
+          </th>
+          <th></th>
+          <th class="table-header-small-dropdown"></th>
+          <th class="table-header-small-dropdown"></th>
+          <th class="table-header-actions"></th>
+        </tr>
+      </ng-template>
+
+      <ng-template pTemplate="body" let-autoRoleRule let-editing="editing" let-ri="rowIndex">
+        <tr [pEditableRow]="autoRoleRule">
+          <td>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                {{autoRoleRule.id}}
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{autoRoleRule.id}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                <p-dropdown [options]="roles" optionValue="value.name" [(ngModel)]="autoRoleRule.roleName"
+                            placeholder="{{'view.server.auto_roles.rules.headers.role' | translate}}"></p-dropdown>
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{autoRoleRule.roleName}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                <p-dropdown [options]="emojis" optionValue="value.name" [(ngModel)]="autoRoleRule.emojiName"
+                            placeholder="{{'view.server.auto_roles.rules.headers.emoji' | translate}}">
+                  <ng-template pTemplate="selectedItem">
+                    <div class="dropdown-icon-label-wrapper" *ngIf="autoRoleRule.emojiName">
+                      <p-image [src]="getEmojiUrl(autoRoleRule.emojiName)" [alt]="autoRoleRule.emojiName" width="25"></p-image>
+                      <div>{{autoRoleRule.emojiName}}</div>
+                    </div>
+                  </ng-template>
+                  <ng-template let-emoji pTemplate="item">
+                    <div class="dropdown-icon-label-wrapper">
+                      <p-image [src]="emoji.value.url" [alt]="emoji.label" width="25"></p-image>
+                      <div>{{emoji.label}}</div>
+                    </div>
+                  </ng-template>
+                </p-dropdown>
+              </ng-template>
+              <ng-template pTemplate="output">
+                <p-image [src]="getEmojiUrl(autoRoleRule.emojiName)" [alt]="autoRoleRule.emojiName" width="50"></p-image>
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                {{autoRoleRule.createdAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{autoRoleRule.createdAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                {{autoRoleRule.modifiedAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{autoRoleRule.modifiedAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td>
+            <div class="btn-wrapper">
+              <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil" (click)="onRowEditInit(dt, autoRoleRule, ri)"></button>
+              <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
+                      (click)="deleteAutoRoleRule(autoRoleRule)"></button>
+
+              <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
+                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, autoRoleRule, ri)"></button>
+              <button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
+                      icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"></button>
+            </div>
+          </td>
+        </tr>
+      </ng-template>
+
+      <ng-template pTemplate="emptymessage">
+        <tr></tr>
+        <tr>
+          <td colspan="10">{{'view.server.auto_roles.rules.no_entries_found' | translate}}</td>
+        </tr>
+        <tr></tr>
+      </ng-template>
+
+      <ng-template pTemplate="paginatorleft">
+      </ng-template>
+    </p-table>
+  </div>
+</div>

kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.ts

@@ -1,6 +1,27 @@
 import { Component, OnInit } from "@angular/core";
 import { DataService } from "../../../../../../services/data/data.service";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
+import { AutoRoleRule, AutoRoleRuleFilter } from "../../../../../../models/data/auto_role.model";
+import { Guild } from "../../../../../../models/data/discord.model";
+import { LazyLoadEvent, MenuItem } from "primeng/api";
+import { User } from "../../../../../../models/data/user.model";
+import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
+import { Page } from "../../../../../../models/graphql/filter/page.model";
+import { Sort, SortDirection } from "../../../../../../models/graphql/filter/sort.model";
+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 { TranslateService } from "@ngx-translate/core";
+import { SidebarService } from "../../../../../../services/sidebar/sidebar.service";
+import { AutoRoleRuleQuery, SingleDiscordQuery } from "../../../../../../models/graphql/query.model";
+import { Queries } from "../../../../../../models/graphql/queries.model";
+import { Server } from "../../../../../../models/data/server.model";
+import { catchError, debounceTime } from "rxjs/operators";
+import { Table } from "primeng/table";
+import { AutoRoleMutationResult } from "../../../../../../models/graphql/result.model";
+import { Mutations } from "../../../../../../models/graphql/mutations.model";
+import { throwError } from "rxjs";
 
 @Component({
   selector: "app-auto-roles-rules",
@@ -9,14 +30,243 @@ import { ActivatedRoute } from "@angular/router";
 })
 export class AutoRolesRulesComponent implements OnInit {
 
+  rules!: AutoRoleRule[];
+  guild!: Guild;
+  emojis!: MenuItem[];
+  roles!: MenuItem[];
+  loading = true;
+
+  autoRoleId!: number;
+
+  clonedUsers: { [s: string]: User; } = {};
+  isEditingNew: boolean = false;
+
+  newAutoRoleTemplate: AutoRoleRule = {
+    id: 0,
+    createdAt: "",
+    modifiedAt: ""
+  };
+
+  filterForm!: FormGroup<{
+    id: FormControl<number | null>,
+    emojiName: FormControl<string | null>,
+    roleId: FormControl<string | null>,
+  }>;
+
+  filter: AutoRoleRuleFilter = {};
+  page: Page = {
+    pageSize: undefined,
+    pageIndex: undefined
+  };
+  sort: Sort = {
+    sortColumn: undefined,
+    sortDirection: undefined
+  };
+
+  totalRecords!: number;
+
   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,
+    private router: Router
   ) {
   }
 
+  getEmojiUrl(name: string): string {
+    return this.guild.emojis.filter(x => x.name == name)[0].url ?? "";
+  }
+
   ngOnInit(): void {
     this.data.getServerFromRoute(this.route);
+    this.spinner.showSpinner();
+    if (!this.route.snapshot.params["autoRoleId"]) {
+      this.spinner.hideSpinner();
+      this.router.navigate(["../"]);
+      return;
+    }
+    this.autoRoleId = +this.route.snapshot.params["autoRoleId"];
+
+    this.spinner.showSpinner();
+    this.data.query<SingleDiscordQuery>(Queries.guildsQuery, {
+        filter: {
+          id: this.sidebar.server$.value?.discordId
+        }
+      }
+    ).subscribe(data => {
+      this.guild = data.guilds[0];
+      this.emojis = this.guild.emojis
+        .map(x => {
+          return { label: x.name, value: x };
+        });
+      this.roles = this.guild.roles
+        .map(x => {
+          return { label: x.name, value: x };
+        });
+      this.spinner.hideSpinner();
+    });
+
+    this.setFilterForm();
+    this.loadNextPage();
+  }
+
+  loadNextPage() {
+    this.loading = true;
+    this.data.query<AutoRoleRuleQuery>(Queries.autoRoleRulesQuery, {
+        id: this.sidebar.server$.value?.id, filter: this.filter, page: this.page, sort: this.sort
+      },
+      (x: { servers: Server[] }) => {
+        if (!x.servers[0].autoRoles || x.servers[0].autoRoles?.length == 0) {
+          return undefined;
+        }
+        return x.servers[0].autoRoles[0];
+      }
+    ).subscribe(data => {
+      this.totalRecords = data.autoRoleRuleCount;
+      this.rules = data.autoRoleRules;
+      this.spinner.hideSpinner();
+      this.loading = false;
+    });
+  }
+
+  setFilterForm() {
+    this.filterForm = this.fb.group({
+      id: new FormControl<number | null>(null),
+      emojiName: new FormControl<string | null>(null),
+      roleId: new FormControl<string | null>(null)
+    });
+
+    this.filterForm.valueChanges.pipe(
+      debounceTime(600)
+    ).subscribe(changes => {
+      if (changes.id) {
+        this.filter.id = changes.id;
+      } else {
+        this.filter.id = undefined;
+      }
+
+      if (changes.emojiName) {
+        this.filter.emojiName = changes.emojiName;
+      } else {
+        this.filter.emojiName = undefined;
+      }
+
+      if (changes.roleId) {
+        this.filter.roleId = changes.roleId;
+      } else {
+        this.filter.roleId = undefined;
+      }
+
+      if (this.page.pageSize)
+        this.page.pageSize = 10;
+
+      if (this.page.pageIndex)
+        this.page.pageIndex = 0;
+
+      this.loadNextPage();
+    });
+  }
+
+  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();
+  }
+
+  resetFilters() {
+    this.filterForm.reset();
+  }
+
+  onRowEditInit(table: Table, autoRoleRule: AutoRoleRule, index: number) {
+    this.clonedUsers[index] = { ...autoRoleRule };
+  }
+
+  onRowEditSave(table: Table, newAutoRole: AutoRoleRule, index: number) {
+    if (this.isEditingNew && JSON.stringify(newAutoRole) === JSON.stringify(this.newAutoRoleTemplate)) {
+      this.isEditingNew = false;
+      this.rules.splice(index, 1);
+      return;
+    }
+
+    if (!newAutoRole.id || !newAutoRole.emojiName && !newAutoRole.roleId) {
+      return;
+    }
+
+    this.spinner.showSpinner();
+    this.data.mutation<AutoRoleMutationResult>(Mutations.createAutoRoleRule, {
+        serverId: this.sidebar.server$.value?.id,
+        emojiName: newAutoRole.emojiName,
+        roleId: newAutoRole.roleId
+      }
+    ).pipe(catchError(err => {
+      this.spinner.hideSpinner();
+      this.toastService.error(this.translate.instant("view.server.auto_roles.message.auto_role_create_failed"), this.translate.instant("view.server.auto_roles.message.auto_role_create_failed_d"));
+      return throwError(err);
+    })).subscribe(result => {
+      this.spinner.hideSpinner();
+      this.toastService.success(this.translate.instant("view.server.auto_roles.message.auto_role_created"), this.translate.instant("view.server.auto_roles.message.auto_role_create_d", { id: result.autoRole.createAutoRole?.id }));
+      this.loadNextPage();
+    });
+  }
+
+  onRowEditCancel(index: number) {
+    if (this.isEditingNew) {
+      this.rules.splice(index, 1);
+      delete this.clonedUsers[index];
+      this.isEditingNew = false;
+      return;
+    }
+
+    this.rules[index] = this.clonedUsers[index];
+    delete this.clonedUsers[index];
+  }
+
+  deleteAutoRoleRule(autoRoleRule: AutoRoleRule) {
+    this.confirmDialog.confirmDialog(
+      this.translate.instant("view.server.auto_roles.message.auto_role_delete"), this.translate.instant("view.server.auto_roles.message.auto_role_delete_q", { id: autoRoleRule.id }),
+      () => {
+        this.spinner.showSpinner();
+        this.data.mutation<AutoRoleMutationResult>(Mutations.deleteAutoRole, {
+            id: autoRoleRule.id
+          }
+        ).pipe(catchError(err => {
+          this.spinner.hideSpinner();
+          this.toastService.error(this.translate.instant("view.server.auto_roles.message.auto_role_delete_failed"), this.translate.instant("view.server.auto_roles.message.auto_role_delete_failed_d", { id: autoRoleRule.id }));
+          return throwError(err);
+        })).subscribe(_ => {
+          this.spinner.hideSpinner();
+          this.toastService.success(this.translate.instant("view.server.auto_roles.message.auto_role_deleted"), this.translate.instant("view.server.auto_roles.message.auto_role_deleted_d", { id: autoRoleRule.id }));
+          this.loadNextPage();
+        });
+      });
+
+
+  }
+
+  addAutoRoleRule(table: Table) {
+    const newAutoRole = JSON.parse(JSON.stringify(this.newAutoRoleTemplate));
+    newAutoRole.id = Math.max.apply(Math, this.rules.map(u => {
+      return u.id ?? 0;
+    })) + 1;
+
+    this.rules.push(newAutoRole);
+
+    table.initRowEdit(newAutoRole);
+
+    const index = this.rules.findIndex(u => u.id == newAutoRole.id);
+    this.onRowEditInit(table, newAutoRole, index);
+
+    this.isEditingNew = true;
   }
 
 }

kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts

@@ -21,6 +21,7 @@ import { Mutations } from "../../../../../../models/graphql/mutations.model";
 import { throwError } from "rxjs";
 import { AutoRole, AutoRoleFilter } from "../../../../../../models/data/auto_role.model";
 import { ChannelType, Guild } from "../../../../../../models/data/discord.model";
+import { Server } from "../../../../../../models/data/server.model";
 
 @Component({
   selector: "app-auto-roles",
@@ -100,7 +101,10 @@ export class AutoRolesComponent implements OnInit {
   loadNextPage() {
     this.loading = true;
     this.data.query<AutoRoleQuery>(Queries.autoRolesQuery, {
-        filter: this.filter, page: this.page, sort: this.sort
+        id: this.sidebar.server$.value?.id, filter: this.filter, page: this.page, sort: this.sort
+      },
+      (x: { servers: Server[] }) => {
+        return x.servers[0];
       }
     ).subscribe(data => {
       this.totalRecords = data.autoRoleCount;

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

@@ -53,7 +53,7 @@ export class DataService {
       })
       .pipe(map(d => {
         if (d.errors && d.errors.length > 0) {
-          throw new Error(d.errors.toString());
+          throw new Error(d.errors.map((x: {message: String}) => x.message).toString());
         }
         return d.data;
       }))

kdb-web/src/app/services/error-handler/error-handler.service.ts

@@ -1,16 +1,17 @@
-import { HttpErrorResponse } from '@angular/common/http';
+import { HttpErrorResponse } from "@angular/common/http";
-import { ErrorHandler, Injectable, Injector } from '@angular/core';
+import { ErrorHandler, Injectable } from "@angular/core";
-import { Observable, throwError } from 'rxjs';
+import { Observable, throwError } from "rxjs";
-import { ErrorDTO } from 'src/app/models/error/error-dto';
+import { ErrorDTO } from "src/app/models/error/error-dto";
-import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
+import { ServiceErrorCode } from "src/app/models/error/service-error-code.enum";
-import { AuthService } from '../auth/auth.service';
+import { AuthService } from "../auth/auth.service";
-import { ToastService } from '../toast/toast.service';
+import { ToastService } from "../toast/toast.service";
 
 @Injectable()
 export class ErrorHandlerService implements ErrorHandler {
 
   constructor(
-    private injector: Injector
+    private auth: AuthService,
+    private toast: ToastService,
   ) { }
 
   handleError(error: HttpErrorResponse): Observable<never> {
@@ -20,7 +21,7 @@ export class ErrorHandlerService implements ErrorHandler {
       const errorDto: ErrorDTO = error.error;
 
       if (errorDto.errorCode === ServiceErrorCode.Unauthorized) {
-        this.injector.get(AuthService).logout();
+        this.auth.logout();
         return throwError(() => error);
       }
 
@@ -34,11 +35,13 @@ export class ErrorHandlerService implements ErrorHandler {
         message = error.message;
       }
 
-      this.injector.get(ToastService).error(header, message);
+      this.toast.error(header, message);
+    } else {
+      console.error(error.message);
     }
 
     if (error.status === 401) {
-      this.injector.get(AuthService).logout();
+      this.auth.logout();
     }
     return throwError(() => error);
   }

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

@@ -8,7 +8,6 @@ import { NavigationEnd, Router } from "@angular/router";
 import { ThemeService } from "../theme/theme.service";
 import { Server } from "../../models/data/server.model";
 import { UserDTO } from "../../models/auth/auth-user.dto";
-import { AutoRole } from "../../models/data/auto_role.model";
 
 @Injectable({
   providedIn: "root"
@@ -18,7 +17,6 @@ export class SidebarService {
   isSidebarOpen: boolean = true;
   menuItems$ = new BehaviorSubject<MenuItem[]>(new Array<MenuItem>());
   server$ = new BehaviorSubject<Server | null>(null);
-  autoRole$ = new BehaviorSubject<AutoRole | null>(null);
 
   dashboard!: MenuItem;
   serverDashboard!: MenuItem;

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

@@ -1,8 +1,7 @@
-import { Injectable } from '@angular/core';
+import { Injectable } from "@angular/core";
-import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject } from "rxjs";
-import { Subject } from 'rxjs';
+import { Themes } from "src/app/models/view/themes.enum";
-import { Themes } from 'src/app/models/view/themes.enum';
+import { AuthService } from "../auth/auth.service";
-import { AuthService } from '../auth/auth.service';
 
 @Injectable({
   providedIn: 'root'
@@ -15,9 +14,9 @@ export class ThemeService {
   isSidebarOpen = false;
   hasLangChanged = false;
 
-  themeName$ = new Subject<string>();
+  themeName$ = new BehaviorSubject<string>(Themes.Default);
-  isSidebarOpen$ = new Subject<boolean>();
+  isSidebarOpen$ = new BehaviorSubject<boolean>(true);
-  sidebarWidth$ = new Subject<string>();
+  sidebarWidth$ = new BehaviorSubject<string>('175px');
 
   constructor(
     private authService: AuthService

kdb-web/src/assets/i18n/de.json

@@ -246,6 +246,32 @@
           "auto_role_deleted_d": "Auto Rolle {{id}} erfolgreich gelöscht",
           "auto_role_delete_failed": "Auto Rolle Löschung fehlgeschlagen",
           "auto_role_delete_failed_d": "Die Löschung der Auto Rolle {{id}} ist fehlgeschlagen!"
+        },
+        "rules": {
+          "header": "Auto Rollen Regeln",
+          "of": "von",
+          "add": "Hinzufügen",
+          "reset_filters": "Filter zurücksetzen",
+          "auto_roles": "Auto Rollen Regeln",
+          "headers": {
+            "id": "Id",
+            "emoji": "Emoji",
+            "role": "Rolle",
+            "actions": "Aktionen"
+          },
+          "no_entries_found": "Keine Einträge gefunden",
+          "message": {
+            "auto_role_create": "Auto Rolle erstellt",
+            "auto_role_create_d": "Auto Rolle {{id}} erfolgreich erstellt",
+            "auto_role_create_failed": "Auto Rolle Erstellung fehlgeschlagen",
+            "auto_role_create_failed_d": "Die Erstellung der Auto Rolle ist fehlgeschlagen!",
+            "auto_role_delete": "Auto Rolle löschen",
+            "auto_role_delete_q": "Sind Sie sich sicher, dass Sie die Auto Rolle {{id}} löschen möchten?",
+            "auto_role_deleted": "Auto Rolle gelöscht",
+            "auto_role_deleted_d": "Auto Rolle {{id}} erfolgreich gelöscht",
+            "auto_role_delete_failed": "Auto Rolle Löschung fehlgeschlagen",
+            "auto_role_delete_failed_d": "Die Löschung der Auto Rolle {{id}} ist fehlgeschlagen!"
+          }
         }
       }
     },

kdb-web/src/styles.scss

@@ -156,6 +156,12 @@ header {
             margin: 5px 0;
           }
 
+          .dropdown-icon-label-wrapper {
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+          }
+
           .content-input-field {
             width: 50% !important;
             margin: 0 !important;