Added data import & export #407

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

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",

View File

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

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>

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

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>

View File

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

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

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

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 {

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>

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

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>

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

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>

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

View File

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

View File

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

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>

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

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>

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

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": {

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": {

View File

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