Added frontend impl #378

kdb-bot/src/bot_data/migration/short_role_name_migration.py

@@ -22,7 +22,7 @@ class ShortRoleNameMigration(MigrationABC):
                         `Id` BIGINT NOT NULL AUTO_INCREMENT,
                         `ShortName` VARCHAR(255) NOT NULL,
                         `DiscordRoleId` BIGINT NOT NULL,
-                        `Position` ENUM('Before', 'After') NOT NULL,
+                        `Position` ENUM('before', 'after') NOT NULL,
                         `ServerId` BIGINT,
                         `CreatedAt` DATETIME(6) NULL DEFAULT CURRENT_TIMESTAMP(6),
                         `LastModifiedAt` DATETIME(6) NULL DEFAULT CURRENT_TIMESTAMP(6) ON UPDATE CURRENT_TIMESTAMP(6),

kdb-bot/src/bot_data/model/short_role_name_position_enum.py

@@ -2,5 +2,5 @@ from enum import Enum
 
 
 class ShortRoleNamePositionEnum(Enum):
-    before = "Before"
-    after = "After"
+    before = "before"
+    after = "after"

kdb-bot/src/bot_graphql/filter/short_role_name_filter.py

@@ -61,7 +61,7 @@ class ShortRoleNameFilter(FilterABC):
             query = query.where(get_role_name)
 
         if self._position is not None:
-            query = query.where(lambda x: x.position == self._position or self._position in x.position)
+            query = query.where(lambda x: x.position.value == self._position.value)
 
         if self._server is not None:
             servers = self._server.filter(query.select(lambda x: x.server)).select(lambda x: x.id)

kdb-bot/src/bot_graphql/queries/short_role_name_history_query.py

@@ -8,4 +8,4 @@ class ShortRoleNameHistoryQuery(HistoryQueryABC):
         self.set_field("id", lambda x, *_: x.id)
         self.set_field("shortName", lambda x, *_: x.shortName)
         self.set_field("roleId", lambda x, *_: x.roleId)
-        self.set_field("position", lambda x, *_: x.position)
+        self.set_field("position", lambda x, *_: x.position.value)

kdb-bot/src/bot_graphql/queries/short_role_name_query.py

@@ -15,4 +15,4 @@ class ShortRoleNameQuery(DataQueryWithHistoryABC):
         self.set_field("shortName", lambda x, *_: x.short_name)
         self.set_field("roleId", lambda x, *_: x.role_id)
         self.set_field("roleName", lambda x, *_: x.role_name)
-        self.set_field("position", lambda x, *_: x.position)
+        self.set_field("position", lambda x, *_: x.position.value)

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

@@ -0,0 +1,20 @@
+import { Data } from "./data.model";
+import { Server, ServerFilter } from "./server.model";
+
+export interface ShortRoleName extends Data {
+  id?: number;
+  shortName?: string;
+  roleId?: string;
+  roleName?: string;
+  position?: string;
+  server?: Server;
+}
+
+export interface ShortRoleNameFilter {
+  id?: number;
+  shortName?: string;
+  roleId?: string;
+  roleName?: string;
+  position?: string;
+  server?: ServerFilter;
+}

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

@@ -166,6 +166,48 @@ export class Mutations {
     }
   `;
 
+  static createShortRoleName = `
+    mutation createShortRoleName($shortName: String, $roleId: String, $position: String, $serverId: ID) {
+      shortRoleName {
+        createShortRoleName(input: { shortName: $shortName, roleId: $roleId, position: $position, serverId: $serverId}) {
+          id
+          shortName
+          roleId
+          roleName
+          position
+          server {
+            id
+          }
+        }
+      }
+    }
+  `;
+
+  static updateShortRoleName = `
+    mutation updateShortRoleName($id: ID, $shortName: String, $roleId: String, $position: String, $serverId: ID) {
+      shortRoleName {
+        updateShortRoleName(input: { id: $id, shortName: $shortName, roleId: $roleId, position: $position, serverId: $serverId }) {
+          id
+          shortName
+          roleId
+          roleName
+          position
+        }
+      }
+    }
+  `;
+
+  static deleteShortRoleName = `
+    mutation deleteShortRoleName($id: ID) {
+      shortRoleName {
+        deleteShortRoleName(id: $id) {
+          id
+          shortName
+        }
+      }
+    }
+  `;
+
   static updateTechnicianConfig = `
     mutation updateTechnicianConfig($id: ID, $helpCommandReferenceUrl: String, $waitForRestart: Int, $waitForShutdown: Int, $cacheMaxMessages: Int, $featureFlags: [FeatureFlagInput], $pingURLs: [String], $technicianIds: [String]) {
       technicianConfig {

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

@@ -200,6 +200,57 @@ export class Queries {
     }
   `;
 
+
+  static shortRoleNamePositionsQuery = `
+    query {
+      shortRoleNamePositions
+    }
+  `
+
+  static shortRoleNameQuery = `
+    query ShortRoleNameList($serverId: ID, $filter: ShortRoleNameFilter, $page: Page, $sort: Sort) {
+      servers(filter: {id: $serverId}) {
+        shortRoleNameCount
+        shortRoleNames(filter: $filter, page: $page, sort: $sort) {
+          id
+          shortName
+          roleId
+          roleName
+          position
+          server {
+            id
+            name
+          }
+          createdAt
+          modifiedAt
+        }
+      }
+    }
+  `;
+
+  static shortRoleNameWithHistoryQuery = `
+    query ShortRoleNameListHistory($serverId: ID, $id: ID) {
+      servers(filter: {id: $serverId}) {
+        shortRoleNameCount
+        shortRoleNames(filter: {id: $id}) {
+          id
+
+          history {
+            id
+            shortName
+            roleId
+            roleName
+            position
+            server
+            deleted
+            dateFrom
+            dateTo
+          }
+        }
+      }
+    }
+  `;
+
   static usersQuery = `
     query UsersList($serverId: ID, $filter: UserFilter, $page: Page, $sort: Sort) {
       servers(filter: {id: $serverId}) {

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

@@ -6,6 +6,7 @@ import { Level } from "../data/level.model";
 import { Achievement, AchievementAttribute } from "../data/achievement.model";
 import { TechnicianConfig } from "../config/technician-config.model";
 import { ServerConfig } from "../config/server-config.model";
+import { ShortRoleName } from "../data/short_role_name.model";
 
 export interface Query {
   serverCount: number;
@@ -68,3 +69,12 @@ export interface HasServerFeatureFlagQuery {
   hasFeatureFlag: boolean;
 }
 
+export interface ShortRoleNameListQuery {
+  shortRoleNameCount: number;
+  shortRoleNames: ShortRoleName[];
+}
+
+export interface ShortRoleNamePositionsQuery {
+  shortRoleNamePositions: string[];
+}
+

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

@@ -5,6 +5,7 @@ import { Server } from "../data/server.model";
 import { Achievement } from "../data/achievement.model";
 import { TechnicianConfig } from "../config/technician-config.model";
 import { ServerConfig } from "../config/server-config.model";
+import { ShortRoleName } from "../data/short_role_name.model";
 
 export interface GraphQLResult {
   data: {
@@ -68,3 +69,11 @@ export interface AchievementMutationResult {
     deleteAchievement?: Achievement
   };
 }
+
+export interface ShortRoleNameMutationResult {
+  shortRoleName: {
+    createShortRoleName?: ShortRoleName
+    updateShortRoleName?: ShortRoleName
+    deleteShortRoleName?: ShortRoleName
+  };
+}

kdb-web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.html

@@ -1 +1,216 @@
-<p>short-role-names works!</p>
+<h1>
+  {{'view.server.short_role_names.header' | translate}}
+</h1>
+<div class="content-wrapper">
+  <div class="content">
+    <p-table #dt [value]="shortRoleNames" [responsive]="true" responsiveLayout="stack" [breakpoint]="'720px'" 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-table-info">
+            <div class="table-caption-text">
+              <ng-container *ngIf="!loading">{{shortRoleNames.length}} {{'common.of' | translate}}
+                {{dt.totalRecords}}
+              </ng-container>
+              {{'view.server.short_role_names.short_role_names' | translate}}
+            </div>
+
+            <app-multi-select-columns [table]="name" [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
+          </div>
+
+          <div class="table-caption-btn-wrapper btn-wrapper">
+            <button pButton label="{{'common.add' | translate}}" class="icon-btn btn"
+                    icon="pi pi-plus" (click)="addShortRoleName(dt)" [disabled]="isEditingNew || user?.isModerator && !user?.isAdmin">
+            </button>
+            <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
+                    class="icon-btn btn" (click)="resetFilters()">
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template pTemplate="header">
+        <tr>
+          <th hideable-th="id" [parent]="this" [sortable]="true">
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.id' | translate}}</div>
+              <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
+            </div>
+          </th>
+
+          <th hideable-th="name" [parent]="this" [sortable]="true">
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.name' | translate}}</div>
+              <p-sortIcon field="shortName" class="table-header-icon"></p-sortIcon>
+            </div>
+          </th>
+
+          <th hideable-th="role" [parent]="this" [sortable]="true">
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.role' | translate}}</div>
+              <p-sortIcon field="role" class="table-header-icon"></p-sortIcon>
+            </div>
+          </th>
+
+          <th hideable-th="position" [parent]="this" [sortable]="true">
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.position' | translate}}</div>
+              <p-sortIcon field="position" class="table-header-icon"></p-sortIcon>
+            </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">{{'common.actions' | translate}}</div>
+            </div>
+          </th>
+        </tr>
+
+        <tr>
+          <th hideable-th="id" [parent]="this" class="table-header-small">
+            <form [formGroup]="filterForm">
+              <input type="text" pInputText formControlName="id"
+                     placeholder="{{'common.id' | translate}}">
+            </form>
+          </th>
+          <th hideable-th="name" [parent]="this">
+            <form [formGroup]="filterForm">
+              <input type="text" pInputText formControlName="shortName"
+                     placeholder="{{'common.name' | translate}}">
+            </form>
+          </th>
+          <th hideable-th="role" [parent]="this">
+            <form [formGroup]="filterForm">
+              <input type="text" pInputText formControlName="roleId" placeholder="{{'common.role' | translate}}">
+            </form>
+          </th>
+          <th hideable-th="position" [parent]="this">
+            <form [formGroup]="filterForm">
+              <p-dropdown formControlName="position" [options]="positions" placeholder="{{'common.position' | translate}}"></p-dropdown>
+            </form>
+          </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-shortRoleName let-editing="editing" let-ri="rowIndex">
+        <tr [pEditableRow]="shortRoleName">
+          <td hideable-th="id" [parent]="this">
+            <span class="p-column-title">{{'common.id' | translate}}:</span>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                {{shortRoleName.id}}
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{shortRoleName.id}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td hideable-th="name" [parent]="this">
+            <span class="p-column-title">{{'common.name' | translate}}:</span>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                <input class="table-edit-input" pInputText type="text" [(ngModel)]="shortRoleName.shortName">
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{shortRoleName.shortName}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td hideable-td="role" [parent]="this">
+            <span class="p-column-title">{{'common.role' | translate}}:</span>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                <p-dropdown [options]="roles" optionValue="value.id" [(ngModel)]="shortRoleName.roleId"
+                            placeholder="{{'common.role' | translate}}"></p-dropdown>
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{shortRoleName.roleName}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td hideable-th="position" [parent]="this">
+            <span class="p-column-title">{{'common.position' | translate}}:</span>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                <p-dropdown [options]="positions" optionValue="value" [(ngModel)]="shortRoleName.position"
+                            placeholder="{{'common.position' | translate}}"></p-dropdown>
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{shortRoleName.position}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+          <td>
+            <span class="p-column-title">{{'common.created_at' | translate}}:</span>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                {{shortRoleName.createdAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{shortRoleName.createdAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+          <td>
+            <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                {{shortRoleName.modifiedAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{shortRoleName.modifiedAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+          <td>
+            <div class="btn-wrapper">
+              <app-history-btn *ngIf="!isEditingNew" [id]="shortRoleName.id" [query]="query" translationKey="view.server.short_role_names.header"></app-history-btn>
+              <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
+                      (click)="onRowEditInit(dt, shortRoleName, ri)"></button>
+              <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
+                      (click)="deleteShortRoleName(shortRoleName)"></button>
+
+              <button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
+                      icon="pi pi-check-circle" (click)="onRowEditSave(dt, shortRoleName, 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">{{'common.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/short-role-name/components/short-role-names/short-role-names.component.ts

@@ -1,22 +1,68 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } 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 } from "@angular/forms";
+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 { Server } from "../../../../../../models/data/server.model";
+import { ComponentWithTable } from "../../../../../../base/component-with-table";
+import { ShortRoleName, ShortRoleNameFilter } from "../../../../../../models/data/short_role_name.model";
+import { Page } from "../../../../../../models/graphql/filter/page.model";
+import { Sort, SortDirection } from "../../../../../../models/graphql/filter/sort.model";
+import { Subject, throwError } from "rxjs";
+import { UserDTO } from "../../../../../../models/auth/auth-user.dto";
+import { Queries } from "../../../../../../models/graphql/queries.model";
+import { ShortRoleNameListQuery, Query, SingleDiscordQuery, ShortRoleNamePositionsQuery } from "../../../../../../models/graphql/query.model";
+import { catchError, debounceTime, takeUntil } from "rxjs/operators";
+import { LazyLoadEvent, MenuItem } from "primeng/api";
+import { Table } from "primeng/table";
+import { User } from "../../../../../../models/data/user.model";
+import { ShortRoleNameMutationResult, UpdateUserMutationResult } from "../../../../../../models/graphql/result.model";
+import { Mutations } from "../../../../../../models/graphql/mutations.model";
 
 @Component({
-  selector: 'app-short-role-names',
-  templateUrl: './short-role-names.component.html',
-  styleUrls: ['./short-role-names.component.scss']
+  selector: "app-short-role-names",
+  templateUrl: "./short-role-names.component.html",
+  styleUrls: ["./short-role-names.component.scss"]
 })
-export class ShortRoleNamesComponent implements OnInit {
+export class ShortRoleNamesComponent extends ComponentWithTable implements OnInit, OnDestroy {
+  public shortRoleNames: ShortRoleName[] = [];
+  public loading = true;
+
+  public isEditingNew: boolean = false;
+
+  public filterForm!: FormGroup<{
+    id: FormControl<number | null>,
+    shortName: FormControl<string | null>,
+    roleId: FormControl<string | null>,
+    position: FormControl<string | null>,
+  }>;
+
+  public filter: ShortRoleNameFilter = {};
+  public page: Page = {
+    pageSize: undefined,
+    pageIndex: undefined
+  };
+  public sort: Sort = {
+    sortColumn: undefined,
+    sortDirection: undefined
+  };
+
+  public totalRecords: number = 0;
+
+  public clonedShortRoleNames: { [s: string]: ShortRoleName; } = {};
+
+  private unsubscriber = new Subject<void>();
   private server: Server = {};
+  public user: UserDTO | null = null;
+
+  query: string = Queries.shortRoleNameWithHistoryQuery;
+  roles: MenuItem[] = [];
+  positions: MenuItem[] = [];
 
   public constructor(
     private authService: AuthService,
@@ -29,11 +75,222 @@ export class ShortRoleNamesComponent implements OnInit {
     private sidebar: SidebarService,
     private route: ActivatedRoute
   ) {
+    super("short-role-names", ["id", "name", "role", "position"]);
   }
 
   public ngOnInit(): void {
+    this.setFilterForm();
     this.data.getServerFromRoute(this.route).then(async server => {
       this.server = server;
+      this.loadNextPage();
+
+      this.spinner.showSpinner();
+      this.data.query<SingleDiscordQuery>(Queries.guildsQuery, {
+          id: server?.discordId
+        }
+      ).subscribe(data => {
+        if (data.discord.guilds) {
+          this.roles = data.discord.guilds[0].roles
+            .map(x => {
+              return { label: x.name, value: x };
+            });
+        }
+        this.spinner.hideSpinner();
+      });
+      this.data.query<ShortRoleNamePositionsQuery>(Queries.shortRoleNamePositionsQuery).subscribe(data => {
+        if (data.shortRoleNamePositions) {
+          this.positions = data.shortRoleNamePositions
+            .map(x => {
+              return { label: x, value: x };
+            });
+        }
+        this.spinner.hideSpinner();
+      });
     });
   }
+
+  public ngOnDestroy(): void {
+    this.unsubscriber.next();
+    this.unsubscriber.complete();
+  }
+
+  public loadNextPage(): void {
+    this.loading = true;
+    this.data.query<ShortRoleNameListQuery>(Queries.shortRoleNameQuery, {
+        serverId: this.server.id, filter: this.filter, page: this.page, sort: this.sort
+      },
+      (data: Query) => {
+        return data.servers[0];
+      }
+    ).subscribe(data => {
+      this.totalRecords = data.shortRoleNameCount;
+      this.shortRoleNames = data.shortRoleNames;
+      this.spinner.hideSpinner();
+      this.loading = false;
+    });
+  }
+
+  public setFilterForm(): void {
+    this.filterForm = this.fb.group({
+      id: new FormControl<number | null>(null),
+      shortName: new FormControl<string | null>(null),
+      roleId: new FormControl<string | null>(null),
+      position: new FormControl<string | null>(null)
+    });
+
+    this.filterForm.valueChanges.pipe(
+      takeUntil(this.unsubscriber),
+      debounceTime(600)
+    ).subscribe(changes => {
+      if (changes.id) {
+        this.filter.id = changes.id;
+      } else {
+        this.filter.id = undefined;
+      }
+
+      if (changes.shortName) {
+        this.filter.shortName = changes.shortName;
+      } else {
+        this.filter.shortName = undefined;
+      }
+
+      if (changes.roleId) {
+        this.filter.roleId = changes.roleId;
+      } else {
+        this.filter.roleId = undefined;
+      }
+
+      if (changes.position) {
+        this.filter.position = changes.position;
+      } else {
+        this.filter.position = undefined;
+      }
+
+      if (this.page.pageSize)
+        this.page.pageSize = 10;
+
+      if (this.page.pageIndex)
+        this.page.pageIndex = 0;
+
+      this.loadNextPage();
+    });
+  }
+
+  public newShortRoleNameTemplate: ShortRoleName = {
+    createdAt: "",
+    modifiedAt: ""
+  };
+
+  public nextPage(event: LazyLoadEvent): void {
+    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();
+  }
+
+  public resetFilters(): void {
+    this.filterForm.reset();
+  }
+
+  public onRowEditInit(table: Table, user: User, index: number): void {
+    this.clonedShortRoleNames[index] = { ...user };
+  }
+
+  public onRowEditSave(table: Table, newShortRoleName: ShortRoleName, index: number): void {
+    if (this.isEditingNew && JSON.stringify(newShortRoleName) === JSON.stringify(this.newShortRoleNameTemplate)) {
+      this.isEditingNew = false;
+      this.shortRoleNames.splice(index, 1);
+      return;
+    }
+
+    if (!newShortRoleName.id && !this.isEditingNew || !newShortRoleName.shortName && !newShortRoleName.roleId && !newShortRoleName?.position) {
+      return;
+    }
+
+    if (this.isEditingNew) {
+      this.spinner.showSpinner();
+      this.data.mutation<ShortRoleNameMutationResult>(Mutations.createShortRoleName, {
+          shortName: newShortRoleName.shortName,
+          roleId: newShortRoleName.roleId,
+          position: newShortRoleName.position,
+          serverId: this.server.id
+        }
+      ).pipe(catchError(err => {
+        this.isEditingNew = false;
+        this.spinner.hideSpinner();
+        return throwError(err);
+      })).subscribe(result => {
+        this.isEditingNew = false;
+        this.spinner.hideSpinner();
+        this.toastService.success(this.translate.instant("view.server.short_role_names.message.short_role_names_create"), this.translate.instant("view.server.short_role_names.message.short_role_names_create_d", { name: result.shortRoleName.createShortRoleName?.shortName }));
+        this.loadNextPage();
+      });
+      return;
+    }
+
+    this.spinner.showSpinner();
+    this.data.mutation<UpdateUserMutationResult>(Mutations.updateShortRoleName, {
+        id: newShortRoleName.id,
+        shortName: newShortRoleName.shortName,
+        roleId: newShortRoleName.roleId,
+        position: newShortRoleName.position
+      }
+    ).pipe(catchError(err => {
+      this.spinner.hideSpinner();
+      return throwError(err);
+    })).subscribe(_ => {
+      this.spinner.hideSpinner();
+      this.toastService.success(this.translate.instant("view.server.short_role_names.message.short_role_names_update"), this.translate.instant("view.server.short_role_names.message.short_role_names_update_d", { name: newShortRoleName.shortName }));
+      this.loadNextPage();
+    });
+
+  }
+
+  public onRowEditCancel(index: number): void {
+    if (this.isEditingNew) {
+      this.shortRoleNames.splice(index, 1);
+      delete this.clonedShortRoleNames[index];
+      this.isEditingNew = false;
+      return;
+    }
+
+    this.shortRoleNames[index] = this.clonedShortRoleNames[index];
+    delete this.clonedShortRoleNames[index];
+  }
+
+  public deleteShortRoleName(shortRoleName: ShortRoleName): void {
+    this.confirmDialog.confirmDialog(
+      this.translate.instant("view.server.short_role_names.message.short_role_names_delete"), this.translate.instant("view.server.short_role_names.message.short_role_names_delete_q", { name: shortRoleName.shortName }),
+      () => {
+        this.spinner.showSpinner();
+        this.data.mutation<ShortRoleNameMutationResult>(Mutations.deleteShortRoleName, {
+            id: shortRoleName.id
+          }
+        ).pipe(catchError(err => {
+          this.spinner.hideSpinner();
+          return throwError(err);
+        })).subscribe(l => {
+          this.spinner.hideSpinner();
+          this.toastService.success(this.translate.instant("view.server.short_role_names.message.short_role_names_deleted"), this.translate.instant("view.server.short_role_names.message.short_role_names_deleted_d", { name: shortRoleName.shortName }));
+          this.loadNextPage();
+        });
+      });
+  }
+
+  public addShortRoleName(table: Table): void {
+    const newShortRoleName = JSON.parse(JSON.stringify(this.newShortRoleNameTemplate));
+
+    this.shortRoleNames = [newShortRoleName, ...this.shortRoleNames];
+
+    table.initRowEdit(newShortRoleName);
+
+    const index = this.shortRoleNames.findIndex(l => l.id == newShortRoleName.id);
+    this.onRowEditInit(table, newShortRoleName, index);
+
+    this.isEditingNew = true;
+  }
+
 }

kdb-web/src/app/modules/view/server/short-role-name/short-role-name.module.ts

@@ -2,6 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ShortRoleNamesComponent } from './components/short-role-names/short-role-names.component';
 import { ShortRoleNameRoutingModule } from "./short-role-name-routing.module";
+import { ButtonModule } from "primeng/button";
+import { InputTextModule } from "primeng/inputtext";
+import { ReactiveFormsModule } from "@angular/forms";
+import { SharedModule } from "../../../shared/shared.module";
+import { TableModule } from "primeng/table";
+import { TranslateModule } from "@ngx-translate/core";
 
 
 
@@ -11,7 +17,14 @@ import { ShortRoleNameRoutingModule } from "./short-role-name-routing.module";
   ],
   imports: [
     CommonModule,
-    ShortRoleNameRoutingModule
+    ShortRoleNameRoutingModule,
+    ButtonModule,
+    InputTextModule,
+    ReactiveFormsModule,
+    SharedModule,
+    SharedModule,
+    TableModule,
+    TranslateModule
   ]
 })
 export class ShortRoleNameModule { }

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

@@ -183,6 +183,11 @@
     "operator": "Operator",
     "password": "Passwort",
     "permissions": "Rechte",
+    "position": "Position",
+    "positions": {
+      "after": "Hinten",
+      "before": "Vorne"
+    },
     "reset_filters": "Filter zurücksetzen",
     "role": "Rolle",
     "rule_count": "Regeln",
@@ -310,14 +315,14 @@
     "dashboard": "Dashboard",
     "members": "Mitglieder",
     "server": {
-      "short_role_names": "Rollen Kürzel",
       "achievements": "Errungenschaften",
       "auto_roles": "Auto Rollen",
       "configuration": "Konfiguration",
       "dashboard": "Dashboard",
       "levels": "Level",
       "members": "Mitglieder",
-      "profile": "Dein Profil"
+      "profile": "Dein Profil",
+      "short_role_names": "Rollen Kürzel"
     },
     "server_empty": "Kein Server ausgewählt",
     "settings": "Einstellungen",
@@ -503,6 +508,26 @@
         "permission_denied": "Zugriff verweigert!",
         "permission_denied_d": "Du musst Moderator sein, um andere Profile sehen zu können!",
         "xp": "XP"
+      },
+      "short_role_names": {
+        "header": "Rollen Kürzel",
+        "message": {
+          "short_role_names_create": "Rollen Kürzel erstellt",
+          "short_role_names_create_d": "Rollen Kürzel {{name}} erfolgreich erstellt",
+          "short_role_names_create_failed": "Rollen Kürzel Erstellung fehlgeschlagen",
+          "short_role_names_create_failed_d": "Die Erstellung des Rollen Kürzels ist fehlgeschlagen!",
+          "short_role_names_delete": "Rollen Kürzel löschen",
+          "short_role_names_delete_failed": "Rollen Kürzel Löschung fehlgeschlagen",
+          "short_role_names_delete_failed_d": "Die Löschung des Rollen Kürzels {{name}} ist fehlgeschlagen!",
+          "short_role_names_delete_q": "Sind Sie sich sicher, dass Sie das Rollen Kürzel {{name}} löschen möchten?",
+          "short_role_names_deleted": "Rollen Kürzel gelöscht",
+          "short_role_names_deleted_d": "Rollen Kürzel {{name}} erfolgreich gelöscht",
+          "short_role_names_update": "Rollen Kürzel bearbeitet",
+          "short_role_names_update_d": "Rollen Kürzel {{name}} erfolgreich bearbeitet",
+          "short_role_names_update_failed": "Rollen Kürzel Bearbeitung fehlgeschlagen",
+          "short_role_names_update_failed_d": "Die Bearbeitung des Levels ist fehlgeschlagen!"
+        },
+        "short_role_names": "Rollen Kürzel"
       }
     },
     "user_settings": {

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

@@ -183,6 +183,11 @@
     "operator": "Operator",
     "password": "Password",
     "permissions": "Permissions",
+    "position": "Position",
+    "positions": {
+      "after": "After",
+      "before": "Before"
+    },
     "reset_filters": "Reset filters",
     "role": "Role",
     "rule_count": "Rules",
@@ -316,7 +321,8 @@
       "dashboard": "Dashboard",
       "levels": "Level",
       "members": "Members",
-      "profile": "Your profile"
+      "profile": "Your profile",
+      "short_role_names": "Short role names"
     },
     "server_empty": "No server selected",
     "settings": "Settings",
@@ -502,6 +508,26 @@
         "permission_denied": "Access denied!",
         "permission_denied_d": "You have to be moderator to see other profiles!",
         "xp": "XP"
+      },
+      "short_role_names": {
+        "header": "Level",
+        "message": {
+          "short_role_names_create": "Short role name created",
+          "short_role_names_create_d": "Short role name {{name}} successfully created",
+          "short_role_names_create_failed": "Short role name creation failed",
+          "short_role_names_create_failed_d": "Creation of short role name failed!",
+          "short_role_names_delete": "Delete short role name",
+          "short_role_names_delete_failed": "Short role name deletion failed",
+          "short_role_names_delete_failed_d": "Deletion of short role name {{name}} failed!",
+          "short_role_names_delete_q": "Are you sure you want to delete the {{name}} short role name?",
+          "short_role_names_deleted": "Short role name deleted",
+          "short_role_names_deleted_d": "Short role name {{name}} successfully deleted\t",
+          "short_role_names_update": "Short role name edited",
+          "short_role_names_update_d": "Short role name {{name}} edited successfully",
+          "short_role_names_update_failed": "Short role name editing failed",
+          "short_role_names_update_failed_d": "Short role name editing failed!"
+        },
+        "short_role_names": "Level"
       }
     },
     "user_settings": {