sh-edraft.de/sh_discord_bot
4
1
Fork 1
Code Issues 20 Pull Requests Actions Packages Projects 3 Releases 27 Wiki Activity

Added data import & export #407

Browse Source
This commit is contained in:
Sven Heidemann 2023-10-24 19:13:47 +02:00
parent 90ae55c0d4
commit 33006e3d01
24 changed files with 617 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/package.json
View File

@ -1,6 +1,6 @@
{
"name": "web",
"version": "1.2.0",
"version": "1.2.dev407",
"scripts": {
"ng": "ng",
"update-version": "ts-node update-version.ts",

86
web/src/app/base/component-with-table.ts
View File

@ -1,44 +1,58 @@
import { Level } from "../models/data/level.model";
export interface Column {
key: string;
name: string;
key: string;
name: string;
}
export class ComponentWithTable {
private _hiddenColumns: Column[] = [];
set hiddenColumns(value: Column[]) {
this._hiddenColumns = value;
localStorage.setItem("hiddenColumns", JSON.stringify(value));
}
get hiddenColumns(): Column[] {
return this._hiddenColumns;
}
public name: string = "";
public columns: Column[] = [];
constructor(
name: string,
columns: string[]
) {
this.name = name;
this.columns = columns.map(column => {
return { key: this.getKey(column), name: column };
});
let hiddenColumns = localStorage.getItem("hiddenColumns");
if (!hiddenColumns) {
localStorage.setItem("hiddenColumns", JSON.stringify([{}]));
hiddenColumns = localStorage.getItem("hiddenColumns") ?? JSON.stringify([{}]);
private _hiddenColumns: Column[] = [];
set hiddenColumns(value: Column[]) {
this._hiddenColumns = value;
localStorage.setItem("hiddenColumns", JSON.stringify(value));
}
this._hiddenColumns = JSON.parse(hiddenColumns);
}
private getKey(column: string): string {
return `${this.name}_${column}`;
}
get hiddenColumns(): Column[] {
return this._hiddenColumns;
}
public isColumnVisible(column: string): boolean {
return !this._hiddenColumns.map(column => column.key).includes(this.getKey(column));
}
public name: string = "";
public columns: Column[] = [];
constructor(
name: string,
columns: string[]
) {
this.name = name;
this.columns = columns.map(column => {
return { key: this.getKey(column), name: column };
});
let hiddenColumns = localStorage.getItem("hiddenColumns");
if (!hiddenColumns) {
localStorage.setItem("hiddenColumns", JSON.stringify([{}]));
hiddenColumns = localStorage.getItem("hiddenColumns") ?? JSON.stringify([{}]);
}
this._hiddenColumns = JSON.parse(hiddenColumns);
}
private getKey(column: string): string {
return `${this.name}_${column}`;
}
public isColumnVisible(column: string): boolean {
return !this._hiddenColumns.map(column => column.key).includes(this.getKey(column));
}
public callback = (data: any[]) => {
this.save(data);
};
public onRowEditSave(newLevel: any, index: number) {
}
public save(data: any[]) {
for (let i = 0; i < data.length; i++) {
this.onRowEditSave(data[i], i);
}
}
}

2
web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
View File

@ -225,7 +225,7 @@
(click)="deleteUser(user)"></button>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(dt, user, ri)"></button>
icon="pi pi-check-circle" (click)="onRowEditSave(user, ri)"></button>
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
icon="pi pi-times-circle" (click)="onRowEditCancel(user, ri)"></button>
</div>

4
web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.ts
View File

@ -193,7 +193,7 @@ export class AuthUserComponent extends ComponentWithTable implements OnInit, OnD
this.clonedUsers[index] = { ...user };
}
onRowEditSave(table: Table, newUser: AuthUserDTO, index: number) {
public override onRowEditSave(newUser: AuthUserDTO, index: number) {
const oldUser = this.clonedUsers[index];
delete this.clonedUsers[index];
@ -219,7 +219,6 @@ export class AuthUserComponent extends ComponentWithTable implements OnInit, OnD
newUser.email == ""
)
) {
table.initRowEdit(newUser);
return;
}
@ -239,7 +238,6 @@ export class AuthUserComponent extends ComponentWithTable implements OnInit, OnD
this.toastService.error(this.translate.instant("admin.auth_users.message.user_already_exists"), this.translate.instant("admin.auth_users.message.user_already_exists_d", { email: newUser.email }));
}
error.error = null;
table.initRowEdit(newUser);
}
this.spinnerService.hideSpinner();

10
web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.html Normal file
View File

@ -0,0 +1,10 @@
<button pButton pTooltip="{{'common.export' | translate}}" tooltipPosition="left" icon="pi pi-download"
class="icon-btn btn" (click)="export()">
</button>
<p-fileUpload #upload pTooltip="{{'common.import' | translate}}" tooltipPosition="left" chooseIcon="pi pi-upload"
styleClass="icon-btn btn" mode="basic"
[auto]="true"
[customUpload]="true" accept="application/json"
(uploadHandler)="import($event)">
</p-fileUpload>

5
web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.scss Normal file
View File

@ -0,0 +1,5 @@
:host {
display: flex;
flex-direction: row;
}

23
web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DataImportAndExportComponent } from './data-import-and-export.component';
describe('DataImportAndExportComponent', () => {
let component: DataImportAndExportComponent;
let fixture: ComponentFixture<DataImportAndExportComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DataImportAndExportComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(DataImportAndExportComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

66
web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.ts Normal file
View File

@ -0,0 +1,66 @@
import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
import { ToastService } from "../../../../services/toast/toast.service";
import { TranslateService } from "@ngx-translate/core";
interface UploadEvent {
originalEvent: Event;
files: File[];
}
@Component({
selector: "app-data-import-and-export",
templateUrl: "./data-import-and-export.component.html",
styleUrls: ["./data-import-and-export.component.scss"]
})
export class DataImportAndExportComponent {
@ViewChild("upload") upload: any;
private _data: any[] = [];
@Input() name: string = "";
@Input()
set data(data: any[]) {
this._data = data;
this.dataChange.emit(data);
}
get data(): any[] {
return this._data;
}
@Output() dataChange: EventEmitter<any[]> = new EventEmitter<any[]>();
@Input() callback!: (data: any[]) => void;
public constructor(
private toastService: ToastService,
private translate: TranslateService
) {
}
public export() {
const json = JSON.stringify(this.data);
const element = document.createElement("a");
element.setAttribute("href", "data:application/json;charset=UTF-8," + encodeURIComponent(json));
element.setAttribute("download", `${this.name}.json`);
element.style.display = "none";
document.body.appendChild(element);
element.click(); // simulate click
document.body.removeChild(element);
}
public import(event: { files: File[] }) {
const file = event.files[0];
const fileReader = new FileReader();
fileReader.onload = () => {
if (!fileReader.result) return;
this.data = JSON.parse(fileReader.result.toString());
this.upload.clear();
this.callback(this.data);
this.toastService.success(this.translate.instant("common.file.uploaded"), this.translate.instant("common.file.uploaded"));
};
fileReader.readAsText(file, "UTF-8");
}
}

5
web/src/app/modules/shared/shared.module.ts
View File

@ -33,6 +33,8 @@ import { MultiSelectColumnsComponent } from './base/multi-select-columns/multi-s
import { FeatureFlagListComponent } from './components/feature-flag-list/feature-flag-list.component';
import { InputSwitchModule } from "primeng/inputswitch";
import { CalendarModule } from "primeng/calendar";
import { DataImportAndExportComponent } from './components/data-import-and-export/data-import-and-export.component';
import { FileUploadModule } from "primeng/fileupload";
const PrimeNGModules = [
@ -61,6 +63,7 @@ const PrimeNGModules = [
MultiSelectModule,
InputSwitchModule,
CalendarModule,
FileUploadModule,
]
@NgModule({
@ -74,6 +77,7 @@ const PrimeNGModules = [
HideableHeaderComponent,
MultiSelectColumnsComponent,
FeatureFlagListComponent,
DataImportAndExportComponent,
],
imports: [
CommonModule,
@ -91,6 +95,7 @@ const PrimeNGModules = [
HideableHeaderComponent,
MultiSelectColumnsComponent,
FeatureFlagListComponent,
DataImportAndExportComponent
]
})
export class SharedModule {

4
web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
View File

@ -27,6 +27,8 @@
<button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
class="icon-btn btn" (click)="resetFilters()">
</button>
<app-data-import-and-export name="achievements" [(data)]="achievements"
[callback]="callback"></app-data-import-and-export>
</div>
</div>
</ng-template>
@ -246,7 +248,7 @@
(click)="deleteAchievement(achievement)" [disabled]="!user || !user.isModerator && !user.isAdmin"></button>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(dt, achievement, ri)" [disabled]="!user || !user.isModerator && !user.isAdmin"></button>
icon="pi pi-check-circle" (click)="onRowEditSave(achievement, ri)" [disabled]="!user || !user.isModerator && !user.isAdmin"></button>
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
icon="pi pi-times-circle" (click)="onRowEditCancel(ri)" [disabled]="!user || !user.isModerator && !user.isAdmin"></button>
</div>

2
web/src/app/modules/view/server/achievements/components/achievement/achievement.component.ts
View File

@ -215,7 +215,7 @@ export class AchievementComponent extends ComponentWithTable implements OnInit,
this.clonedAchievements[index] = { ...user };
}
public onRowEditSave(table: Table, newAchievement: Achievement, index: number): void {
public override onRowEditSave(newAchievement: Achievement, index: number): void {
if (this.isEditingNew && JSON.stringify(newAchievement) === JSON.stringify(this.newAchievementTemplate)) {
this.isEditingNew = false;
this.achievements.splice(index, 1);

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

@ -26,6 +26,8 @@
<button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
class="icon-btn btn" (click)="resetFilters()">
</button>
<app-data-import-and-export name="achievements" [(data)]="rules"
[callback]="callback"></app-data-import-and-export>
</div>
</div>
</ng-template>
@ -174,7 +176,7 @@
(click)="deleteAutoRoleRule(autoRoleRule)"></button>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(dt, autoRoleRule, ri)"></button>
icon="pi pi-check-circle" (click)="onRowEditSave(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>

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

@ -203,7 +203,7 @@ export class AutoRolesRulesComponent extends ComponentWithTable implements OnIni
this.clonedUsers[index] = { ...autoRoleRule };
}
public onRowEditSave(table: Table, newAutoRoleRule: AutoRoleRule, index: number): void {
public override onRowEditSave(newAutoRoleRule: AutoRoleRule, index: number): void {
if (this.isEditingNew && JSON.stringify(newAutoRoleRule) === JSON.stringify(this.newAutoRoleTemplate)) {
this.isEditingNew = false;
this.rules.splice(index, 1);

4
web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
View File

@ -27,6 +27,8 @@
<button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
class="icon-btn btn" (click)="resetFilters()">
</button>
<app-data-import-and-export name="achievements" [(data)]="auto_roles"
[callback]="callback"></app-data-import-and-export>
</div>
</div>
</ng-template>
@ -209,7 +211,7 @@
(click)="deleteAutoRole(autoRole)"></button>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(dt, autoRole, ri)"></button>
icon="pi pi-check-circle" (click)="onRowEditSave(autoRole, ri)"></button>
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"></button>
</div>

2
web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.ts
View File

@ -192,7 +192,7 @@ export class AutoRolesComponent extends ComponentWithTable implements OnInit, On
this.clonedUsers[index] = { ...autoRole };
}
public onRowEditSave(table: Table, newAutoRole: AutoRole, index: number): void {
public override onRowEditSave(newAutoRole: AutoRole, index: number): void {
if (this.isEditingNew && JSON.stringify(newAutoRole) === JSON.stringify(this.newAutoRoleTemplate)) {
this.isEditingNew = false;
this.auto_roles.splice(index, 1);

412
web/src/app/modules/view/server/levels/components/levels/levels.component.html
View File

@ -1,226 +1,238 @@
<h1>
{{'view.server.levels.header' | translate}}
{{'view.server.levels.header' | translate}}
</h1>
<div class="content-wrapper">
<div class="content">
<p-table #dt [value]="levels" [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)">
<div class="content">
<p-table #dt [value]="levels" [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">{{levels.length}} {{'common.of' | translate}}
{{dt.totalRecords}}
</ng-container>
{{'view.server.levels.levels' | translate}}
</div>
<ng-template pTemplate="caption">
<div class="table-caption">
<div class="table-caption-table-info">
<div class="table-caption-text">
<ng-container *ngIf="!loading">{{levels.length}} {{'common.of' | translate}}
{{dt.totalRecords}}
</ng-container>
{{'view.server.levels.levels' | translate}}
</div>
<app-multi-select-columns [table]="name" [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
</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)="addLevel(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>
<div class="table-caption-btn-wrapper btn-wrapper">
<button pButton label="{{'common.add' | translate}}" class="icon-btn btn"
icon="pi pi-plus" (click)="addLevel(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>
<app-data-import-and-export name="levels" [(data)]="levels"
[callback]="callback"></app-data-import-and-export>
</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>
<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="name" 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="name" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="color" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.color' | translate}}</div>
<p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="color" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.color' | translate}}</div>
<p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="min_xp" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.min_xp' | translate}}</div>
<p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="min_xp" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.min_xp' | translate}}</div>
<p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="permissions" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.permissions' | translate}}</div>
<p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="permissions" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.permissions' | translate}}</div>
<p-sortIcon field="permissions" 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.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.modified_at' | translate}}</div>
</div>
</th>
<th>
<div class="table-header-label">
<div class="table-header-text">{{'common.actions' | translate}}</div>
</div>
</th>
</tr>
<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="name"
placeholder="{{'common.name' | translate}}">
</form>
</th>
<th hideable-th="color" [parent]="this"></th>
<th hideable-th="min_xp" [parent]="this"></th>
<th hideable-th="permissions" [parent]="this"></th>
<th class="table-header-small-dropdown"></th>
<th class="table-header-small-dropdown"></th>
<th class="table-header-actions"></th>
</tr>
</ng-template>
<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="name"
placeholder="{{'common.name' | translate}}">
</form>
</th>
<th hideable-th="color" [parent]="this"></th>
<th hideable-th="min_xp" [parent]="this"></th>
<th hideable-th="permissions" [parent]="this"></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-level let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="level">
<td hideable-th="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.id}}
</ng-template>
<ng-template pTemplate="output">
{{level.id}}
</ng-template>
</p-cellEditor>
</td>
<ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="level">
<td hideable-th="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.id}}
</ng-template>
<ng-template pTemplate="output">
{{level.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)]="level.name">
</ng-template>
<ng-template pTemplate="output">
{{level.name}}
</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)]="level.name">
</ng-template>
<ng-template pTemplate="output">
{{level.name}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="color" [parent]="this">
<span class="p-column-title">{{'common.color' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
</ng-template>
<ng-template pTemplate="output">
{{level.color}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="color" [parent]="this">
<span class="p-column-title">{{'common.color' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
</ng-template>
<ng-template pTemplate="output">
{{level.color}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="min_xp" [parent]="this">
<span class="p-column-title">{{'common.min_xp' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp">
</ng-template>
<ng-template pTemplate="output">
{{level.minXp}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="min_xp" [parent]="this">
<span class="p-column-title">{{'common.min_xp' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="number"
[(ngModel)]="level.minXp">
</ng-template>
<ng-template pTemplate="output">
{{level.minXp}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="permissions" [parent]="this">
<span class="p-column-title">{{'common.permissions' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions">
</ng-template>
<ng-template pTemplate="output">
{{level.permissions}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="permissions" [parent]="this">
<span class="p-column-title">{{'common.permissions' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="text"
[(ngModel)]="level.permissions">
</ng-template>
<ng-template pTemplate="output">
{{level.permissions}}
</ng-template>
</p-cellEditor>
</td>
<td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.createdAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
<ng-template pTemplate="output">
{{level.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">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
<ng-template pTemplate="output">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
</p-cellEditor>
</td>
<td>
<div class="btn-wrapper">
<app-history-btn *ngIf="!isEditingNew" [id]="level.id" [query]="query" translationKey="view.server.levels.header"></app-history-btn>
<button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
(click)="onRowEditInit(dt, level, ri)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
(click)="deleteLevel(level)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
<td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.createdAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
<ng-template pTemplate="output">
{{level.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">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
<ng-template pTemplate="output">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
</p-cellEditor>
</td>
<td>
<div class="btn-wrapper">
<app-history-btn *ngIf="!isEditingNew" [id]="level.id" [query]="query"
translationKey="view.server.levels.header"></app-history-btn>
<button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
(click)="onRowEditInit(dt, level, ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
(click)="deleteLevel(level)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(dt, level, ri)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
icon="pi pi-times-circle" (click)="onRowEditCancel(ri)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
</div>
</td>
</tr>
</ng-template>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(level, ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></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="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>
<ng-template pTemplate="paginatorleft">
</ng-template>
</p-table>
</div>
</div>

444
web/src/app/modules/view/server/levels/components/levels/levels.component.ts
View File

@ -25,249 +25,241 @@ import { UserDTO } from "../../../../../../models/auth/auth-user.dto";
import { ComponentWithTable } from "../../../../../../base/component-with-table";
@Component({
selector: "app-levels",
templateUrl: "./levels.component.html",
styleUrls: ["./levels.component.scss"]
selector: "app-levels",
templateUrl: "./levels.component.html",
styleUrls: ["./levels.component.scss"]
})
export class LevelsComponent extends ComponentWithTable implements OnInit, OnDestroy {
public levels: Level[] = [];
public loading = true;
public levels: Level[] = [];
public loading = true;
public isEditingNew: boolean = false;
public isEditingNew: boolean = false;
public filterForm!: FormGroup<{
id: FormControl<number | null>,
name: FormControl<string | null>,
color: FormControl<string | null>,
min_xp: FormControl<number | null>,
permissions: FormControl<string | null>,
}>;
public filterForm!: FormGroup<{
id: FormControl<number | null>,
name: FormControl<string | null>,
color: FormControl<string | null>,
min_xp: FormControl<number | null>,
permissions: FormControl<string | null>,
}>;
public filter: LevelFilter = {};
public page: Page = {
pageSize: undefined,
pageIndex: undefined
};
public sort: Sort = {
sortColumn: undefined,
sortDirection: undefined
};
public filter: LevelFilter = {};
public page: Page = {
pageSize: undefined,
pageIndex: undefined
};
public sort: Sort = {
sortColumn: undefined,
sortDirection: undefined
};
public totalRecords: number = 0;
public totalRecords: number = 0;
public clonedLevels: { [s: string]: Level; } = {};
public clonedLevels: { [s: string]: Level; } = {};
private unsubscriber = new Subject<void>();
private server: Server = {};
public user: UserDTO | null = null;
private unsubscriber = new Subject<void>();
private server: Server = {};
public user: UserDTO | null = null;
query: string = Queries.levelWithHistoryQuery;
query: string = Queries.levelWithHistoryQuery;
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
) {
super("level", ["id", "name", "color", "min_xp", "permissions"]);
}
public ngOnInit(): void {
this.setFilterForm();
this.data.getServerFromRoute(this.route).then(async server => {
this.server = server;
this.loadNextPage();
let authUser = await this.authService.getLoggedInUser();
this.user = authUser?.users?.find(u => u.server == this.server.id) ?? null;
});
}
public ngOnDestroy(): void {
this.unsubscriber.next();
this.unsubscriber.complete();
}
public loadNextPage(): void {
this.loading = true;
this.data.query<LevelListQuery>(Queries.levelQuery, {
serverId: this.server.id, filter: this.filter, page: this.page, sort: this.sort
},
(data: Query) => {
return data.servers[0];
}
).subscribe(data => {
this.totalRecords = data.levelCount;
this.levels = data.levels;
this.spinner.hideSpinner();
this.loading = false;
});
}
public setFilterForm(): void {
this.filterForm = this.fb.group({
id: new FormControl<number | null>(null),
name: new FormControl<string | null>(null),
color: new FormControl<string | null>(null),
min_xp: new FormControl<number | null>(null),
permissions: 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.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 newLevelTemplate: Level = {
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.clonedLevels[index] = { ...user };
}
public onRowEditSave(table: Table, newLevel: Level, index: number): void {
// const oldUser = this.clonedUsers[index];
// delete this.clonedUsers[index];
// if (JSON.stringify(oldUser) === JSON.stringify(newUser) && !this.isEditingNew) {
// console.log(1, oldUser, newUser, JSON.stringify(oldUser) === JSON.stringify(newUser), !this.isEditingNew);
// return;
// }
if (this.isEditingNew && JSON.stringify(newLevel) === JSON.stringify(this.newLevelTemplate)) {
this.isEditingNew = false;
this.levels.splice(index, 1);
return;
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
) {
super("level", ["id", "name", "color", "min_xp", "permissions"]);
}
if (!newLevel.id && !this.isEditingNew || !newLevel.minXp && !newLevel?.name && !newLevel?.permissions) {
return;
}
if (this.isEditingNew) {
this.spinner.showSpinner();
this.data.mutation<LevelMutationResult>(Mutations.createLevel, {
name: newLevel.name,
color: newLevel.color,
minXp: newLevel.minXp,
permissions: newLevel.permissions,
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.levels.message.level_create"), this.translate.instant("view.server.levels.message.level_create_d", { name: result.level.createLevel?.name }));
this.loadNextPage();
});
return;
}
this.spinner.showSpinner();
this.data.mutation<UpdateUserMutationResult>(Mutations.updateLevel, {
id: newLevel.id,
name: newLevel.name,
color: newLevel.color,
minXp: newLevel.minXp,
permissions: newLevel.permissions
}
).pipe(catchError(err => {
this.spinner.hideSpinner();
return throwError(err);
})).subscribe(_ => {
this.spinner.hideSpinner();
this.toastService.success(this.translate.instant("view.server.levels.message.level_update"), this.translate.instant("view.server.levels.message.level_update_d", { name: newLevel.name }));
this.loadNextPage();
});
}
public onRowEditCancel(index: number): void {
if (this.isEditingNew) {
this.levels.splice(index, 1);
delete this.clonedLevels[index];
this.isEditingNew = false;
return;
}
this.levels[index] = this.clonedLevels[index];
delete this.clonedLevels[index];
}
public deleteLevel(level: Level): void {
this.confirmDialog.confirmDialog(
this.translate.instant("view.server.levels.message.level_delete"), this.translate.instant("view.server.levels.message.level_delete_q", { name: level.name }),
() => {
this.spinner.showSpinner();
this.data.mutation<LevelMutationResult>(Mutations.deleteLevel, {
id: level.id
}
).pipe(catchError(err => {
this.spinner.hideSpinner();
return throwError(err);
})).subscribe(l => {
this.spinner.hideSpinner();
this.toastService.success(this.translate.instant("view.server.levels.message.level_deleted"), this.translate.instant("view.server.levels.message.level_deleted_d", { name: level.name }));
this.loadNextPage();
public ngOnInit(): void {
this.setFilterForm();
this.data.getServerFromRoute(this.route).then(async server => {
this.server = server;
this.loadNextPage();
let authUser = await this.authService.getLoggedInUser();
this.user = authUser?.users?.find(u => u.server == this.server.id) ?? null;
});
});
}
}
public addLevel(table: Table): void {
const newLevel = JSON.parse(JSON.stringify(this.newLevelTemplate));
public ngOnDestroy(): void {
this.unsubscriber.next();
this.unsubscriber.complete();
}
this.levels = [newLevel, ...this.levels];
public loadNextPage(): void {
this.loading = true;
this.data.query<LevelListQuery>(Queries.levelQuery, {
serverId: this.server.id, filter: this.filter, page: this.page, sort: this.sort
},
(data: Query) => {
return data.servers[0];
}
).subscribe(data => {
this.totalRecords = data.levelCount;
this.levels = data.levels;
this.spinner.hideSpinner();
this.loading = false;
});
}
table.initRowEdit(newLevel);
public setFilterForm(): void {
this.filterForm = this.fb.group({
id: new FormControl<number | null>(null),
name: new FormControl<string | null>(null),
color: new FormControl<string | null>(null),
min_xp: new FormControl<number | null>(null),
permissions: new FormControl<string | null>(null)
});
const index = this.levels.findIndex(l => l.id == newLevel.id);
this.onRowEditInit(table, newLevel, index);
this.filterForm.valueChanges.pipe(
takeUntil(this.unsubscriber),
debounceTime(600)
).subscribe(changes => {
if (changes.id) {
this.filter.id = changes.id;
} else {
this.filter.id = undefined;
}
this.isEditingNew = true;
}
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 newLevelTemplate: Level = {
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.clonedLevels[index] = { ...user };
}
public override onRowEditSave(newLevel: Level, index: number): void {
if (this.isEditingNew && JSON.stringify(newLevel) === JSON.stringify(this.newLevelTemplate)) {
this.isEditingNew = false;
this.levels.splice(index, 1);
return;
}
if (!newLevel.id && !this.isEditingNew || !newLevel.minXp && !newLevel?.name && !newLevel?.permissions) {
return;
}
if (this.isEditingNew) {
this.spinner.showSpinner();
this.data.mutation<LevelMutationResult>(Mutations.createLevel, {
name: newLevel.name,
color: newLevel.color,
minXp: newLevel.minXp,
permissions: newLevel.permissions,
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.levels.message.level_create"), this.translate.instant("view.server.levels.message.level_create_d", { name: result.level.createLevel?.name }));
this.loadNextPage();
});
return;
}
this.spinner.showSpinner();
this.data.mutation<UpdateUserMutationResult>(Mutations.updateLevel, {
id: newLevel.id,
name: newLevel.name,
color: newLevel.color,
minXp: newLevel.minXp,
permissions: newLevel.permissions
}
).pipe(catchError(err => {
this.spinner.hideSpinner();
return throwError(err);
})).subscribe(_ => {
this.spinner.hideSpinner();
this.toastService.success(this.translate.instant("view.server.levels.message.level_update"), this.translate.instant("view.server.levels.message.level_update_d", { name: newLevel.name }));
this.loadNextPage();
});
}
public onRowEditCancel(index: number): void {
if (this.isEditingNew) {
this.levels.splice(index, 1);
delete this.clonedLevels[index];
this.isEditingNew = false;
return;
}
this.levels[index] = this.clonedLevels[index];
delete this.clonedLevels[index];
}
public deleteLevel(level: Level): void {
this.confirmDialog.confirmDialog(
this.translate.instant("view.server.levels.message.level_delete"), this.translate.instant("view.server.levels.message.level_delete_q", { name: level.name }),
() => {
this.spinner.showSpinner();
this.data.mutation<LevelMutationResult>(Mutations.deleteLevel, {
id: level.id
}
).pipe(catchError(err => {
this.spinner.hideSpinner();
return throwError(err);
})).subscribe(l => {
this.spinner.hideSpinner();
this.toastService.success(this.translate.instant("view.server.levels.message.level_deleted"), this.translate.instant("view.server.levels.message.level_deleted_d", { name: level.name }));
this.loadNextPage();
});
});
}
public addLevel(table: Table): void {
const newLevel = JSON.parse(JSON.stringify(this.newLevelTemplate));
this.levels = [newLevel, ...this.levels];
table.initRowEdit(newLevel);
const index = this.levels.findIndex(l => l.id == newLevel.id);
this.onRowEditInit(table, newLevel, index);
this.isEditingNew = true;
}
}

2
web/src/app/modules/view/server/members/members.component.html
View File

@ -242,7 +242,7 @@
[routerLink]="member.id"></button>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(dt, member, ri)"></button>
icon="pi pi-check-circle" (click)="onRowEditSave(member, ri)"></button>
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"></button>
</div>

10
web/src/app/modules/view/server/members/members.component.ts
View File

@ -213,15 +213,7 @@ export class MembersComponent extends ComponentWithTable implements OnInit, OnDe
this.clonedUsers[index] = { ...user };
}
onRowEditSave(table: Table, newUser: User, index: number) {
// const oldUser = this.clonedUsers[index];
// delete this.clonedUsers[index];
// if (JSON.stringify(oldUser) === JSON.stringify(newUser) && !this.isEditingNew) {
// console.log(1, oldUser, newUser, JSON.stringify(oldUser) === JSON.stringify(newUser), !this.isEditingNew);
// return;
// }
public override onRowEditSave(newUser: User, index: number) {
if (this.isEditingNew && JSON.stringify(newUser) === JSON.stringify(this.newUserTemplate)) {
this.isEditingNew = false;
this.members.splice(index, 1);

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

@ -27,6 +27,8 @@
<button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
class="icon-btn btn" (click)="resetFilters()">
</button>
<app-data-import-and-export name="achievements" [(data)]="shortRoleNames"
[callback]="callback"></app-data-import-and-export>
</div>
</div>
</ng-template>
@ -192,7 +194,7 @@
(click)="deleteShortRoleName(shortRoleName)"></button>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(dt, shortRoleName, ri)"></button>
icon="pi pi-check-circle" (click)="onRowEditSave(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>

2
web/src/app/modules/view/server/short-role-name/components/short-role-names/short-role-names.component.ts
View File

@ -199,7 +199,7 @@ export class ShortRoleNamesComponent extends ComponentWithTable implements OnIni
this.clonedShortRoleNames[index] = { ...user };
}
public onRowEditSave(table: Table, newShortRoleName: ShortRoleName, index: number): void {
public override onRowEditSave(newShortRoleName: ShortRoleName, index: number): void {
if (this.isEditingNew && JSON.stringify(newShortRoleName) === JSON.stringify(this.newShortRoleNameTemplate)) {
this.isEditingNew = false;
this.shortRoleNames.splice(index, 1);

3
web/src/assets/i18n/de.json
View File

@ -144,6 +144,9 @@
"emoji": "Emoji",
"error": "Fehler",
"feature_flags": "Funktionen",
"file": {
"uploaded": "Daten wurden erfolgreich importiert."
},
"first_name": "Vorname",
"hidden_columns": "Ausgeblendete Spalten",
"history": {

3
web/src/assets/i18n/en.json
View File

@ -144,6 +144,9 @@
"emoji": "Emoji",
"error": "Error",
"feature_flags": "Features",
"file": {
"uploaded": "Data was imported successfully."
},
"first_name": "First name",
"hidden_columns": "Hidden columns",
"history": {

2
web/src/assets/version.json
View File

@ -2,6 +2,6 @@
"WebVersion": {
"Major": "1",
"Minor": "2",
"Micro": "0"
"Micro": "dev407"
}
}