Merge pull request '#407' (#408) from #407 into dev

Reviewed-on: #408

web/src/app/base/component-with-table.ts

@@ -1,10 +1,11 @@
+import { Level } from "../models/data/level.model";
+
 export interface Column {
     key: string;
     name: string;
 }
 
 export class ComponentWithTable {
-
     private _hiddenColumns: Column[] = [];
     set hiddenColumns(value: Column[]) {
         this._hiddenColumns = value;
@@ -41,4 +42,17 @@ export class ComponentWithTable {
     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);
+        }
+    }
 }

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

@@ -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>

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

@@ -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();
 

web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.html

@@ -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>

web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.scss

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

web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.spec.ts

@@ -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();
+  });
+});

web/src/app/modules/shared/components/data-import-and-export/data-import-and-export.component.ts

@@ -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");
+    }
+}

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

@@ -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 {

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

@@ -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>

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

@@ -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);

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

@@ -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>

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

@@ -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);

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

@@ -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>

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

@@ -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);

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

@@ -3,7 +3,8 @@
 </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"
+        <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)">
 
@@ -17,16 +18,20 @@
                             {{'view.server.levels.levels' | translate}}
                         </div>
 
-            <app-multi-select-columns [table]="name" [columns]="columns" [(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
+                        <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">
+                                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>
@@ -151,7 +156,8 @@
                         <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">
+                                <input class="table-edit-input" pInputText min="0" type="number"
+                                       [(ngModel)]="level.minXp">
                             </ng-template>
                             <ng-template pTemplate="output">
                                 {{level.minXp}}
@@ -163,7 +169,8 @@
                         <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">
+                                <input class="table-edit-input" pInputText min="0" type="text"
+                                       [(ngModel)]="level.permissions">
                             </ng-template>
                             <ng-template pTemplate="output">
                                 {{level.permissions}}
@@ -195,16 +202,21 @@
                     </td>
                     <td>
                         <div class="btn-wrapper">
-              <app-history-btn *ngIf="!isEditingNew" [id]="level.id" [query]="query" translationKey="view.server.levels.header"></app-history-btn>
+                            <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>
+                                    (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>
+                                    (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>
+                                    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>
+                                    icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"
+                                    [disabled]="!user || user.isModerator && !user.isAdmin"></button>
                         </div>
                     </td>
                 </tr>

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

@@ -166,15 +166,7 @@ export class LevelsComponent extends ComponentWithTable implements OnInit, OnDes
         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;
-    // }
-
+    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);

web/src/app/modules/view/server/members/members.component.html

@@ -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>

web/src/app/modules/view/server/members/members.component.ts

@@ -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);

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

@@ -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>

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

@@ -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);

web/src/assets/i18n/de.json

@@ -143,7 +143,11 @@
     "email": "E-Mail",
     "emoji": "Emoji",
     "error": "Fehler",
+    "export": "Exportieren",
     "feature_flags": "Funktionen",
+    "file": {
+      "uploaded": "Daten wurden erfolgreich importiert."
+    },
     "first_name": "Vorname",
     "hidden_columns": "Ausgeblendete Spalten",
     "history": {
@@ -170,6 +174,7 @@
       "xp": "XP"
     },
     "id": "Id",
+    "import": "Importieren",
     "joined_at": "Beigetreten am",
     "last_name": "Nachname",
     "leaved_at": "Verlassen am",

web/src/assets/i18n/en.json

@@ -143,7 +143,11 @@
     "email": "E-Mail",
     "emoji": "Emoji",
     "error": "Error",
+    "export": "Export",
     "feature_flags": "Features",
+    "file": {
+      "uploaded": "Data was imported successfully."
+    },
     "first_name": "First name",
     "hidden_columns": "Hidden columns",
     "history": {
@@ -170,6 +174,7 @@
       "xp": "XP"
     },
     "id": "Id",
+    "import": "Import",
     "joined_at": "Joined at",
     "last_name": "Last name",
     "leaved_at": "Leaved at",