Hide members columns #79

This commit is contained in:
Sven Heidemann 2023-08-15 08:14:45 +02:00
parent 4add293186
commit 8d76f79732
7 changed files with 80 additions and 74 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "kdb-web", "name": "kdb-web",
"version": "1.1.dev79_hide_table_attributes", "version": "1.1.dev79_hide_table_columns",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"update-version": "ts-node-esm update-version.ts", "update-version": "ts-node-esm update-version.ts",

View File

@ -20,7 +20,7 @@
<div class="table-caption-column-select"> <div class="table-caption-column-select">
<p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false> <p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
<ng-template let-item pTemplate="item"> <ng-template let-item pTemplate="item">
<div>{{'view.server.levels.headers.' + item.name | translate}}</div> <div>{{'common.' + item.name | translate}}</div>
</ng-template> </ng-template>
</p-multiSelect> </p-multiSelect>
</div> </div>
@ -39,7 +39,7 @@
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th pSortableColumn="id"> <th *ngIf="isColumnVisible('id')" pSortableColumn="id">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'common.id' | translate}}</div> <div class="table-header-text">{{'common.id' | translate}}</div>
<p-sortIcon field="id" class="table-header-icon"></p-sortIcon> <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
@ -48,28 +48,28 @@
<th *ngIf="isColumnVisible('name')" pSortableColumn="name"> <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.levels.headers.name' | translate}}</div> <div class="table-header-text">{{'common.name' | translate}}</div>
<p-sortIcon field="name" class="table-header-icon"></p-sortIcon> <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th *ngIf="isColumnVisible('color')" pSortableColumn="color"> <th *ngIf="isColumnVisible('color')" pSortableColumn="color">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.levels.headers.color' | translate}}</div> <div class="table-header-text">{{'common.color' | translate}}</div>
<p-sortIcon field="color" class="table-header-icon"></p-sortIcon> <p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th *ngIf="isColumnVisible('min_xp')" pSortableColumn="minXp"> <th *ngIf="isColumnVisible('min_xp')" pSortableColumn="minXp">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.levels.headers.min_xp' | translate}}</div> <div class="table-header-text">{{'common.min_xp' | translate}}</div>
<p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon> <p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th *ngIf="isColumnVisible('permissions')" pSortableColumn="permissions"> <th *ngIf="isColumnVisible('permissions')" pSortableColumn="permissions">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.levels.headers.permissions' | translate}}</div> <div class="table-header-text">{{'common.permissions' | translate}}</div>
<p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon> <p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
@ -94,7 +94,7 @@
</tr> </tr>
<tr> <tr>
<th class="table-header-small"> <th *ngIf="isColumnVisible('id')" class="table-header-small">
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<input type="text" pInputText formControlName="id" <input type="text" pInputText formControlName="id"
placeholder="{{'common.id' | translate}}"> placeholder="{{'common.id' | translate}}">
@ -103,7 +103,7 @@
<th *ngIf="isColumnVisible('name')"> <th *ngIf="isColumnVisible('name')">
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<input type="text" pInputText formControlName="name" <input type="text" pInputText formControlName="name"
placeholder="{{'view.server.levels.headers.name' | translate}}"> placeholder="{{'common.name' | translate}}">
</form> </form>
</th> </th>
<th *ngIf="isColumnVisible('color')"></th> <th *ngIf="isColumnVisible('color')"></th>
@ -117,7 +117,7 @@
<ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex"> <ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="level"> <tr [pEditableRow]="level">
<td> <td *ngIf="isColumnVisible('id')">
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{level.id}} {{level.id}}

View File

@ -74,7 +74,7 @@ export class LevelsComponent extends ComponentWithTable implements OnInit, OnDes
private sidebar: SidebarService, private sidebar: SidebarService,
private route: ActivatedRoute private route: ActivatedRoute
) { ) {
super("level", ["name", "color", "min_xp", "permissions"]); super("level", ["id", "name", "color", "min_xp", "permissions"]);
} }
public ngOnInit(): void { public ngOnInit(): void {

View File

@ -9,6 +9,7 @@
<ng-template pTemplate="caption"> <ng-template pTemplate="caption">
<div class="table-caption"> <div class="table-caption">
<div class="table-caption-table-info">
<div class="table-caption-text"> <div class="table-caption-text">
<ng-container *ngIf="!loading">{{members.length}} {{'common.of' | translate}} <ng-container *ngIf="!loading">{{members.length}} {{'common.of' | translate}}
{{dt.totalRecords}} {{dt.totalRecords}}
@ -16,6 +17,15 @@
{{'view.server.members.members' | translate}} {{'view.server.members.members' | translate}}
</div> </div>
<div class="table-caption-column-select">
<p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
<ng-template let-item pTemplate="item">
<div>{{'common.' + item.name | translate}}</div>
</ng-template>
</p-multiSelect>
</div>
</div>
<div class="table-caption-btn-wrapper btn-wrapper"> <div class="table-caption-btn-wrapper btn-wrapper">
<button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo" <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
class="icon-btn btn" (click)="resetFilters()"> class="icon-btn btn" (click)="resetFilters()">
@ -26,51 +36,51 @@
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th pSortableColumn="id"> <th *ngIf="isColumnVisible('id')" pSortableColumn="id">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'common.id' | translate}}</div> <div class="table-header-text">{{'common.id' | translate}}</div>
<p-sortIcon field="id" class="table-header-icon"></p-sortIcon> <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th pSortableColumn="discordId"> <th *ngIf="isColumnVisible('discord_id')" pSortableColumn="discordId">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'common.discord_id' | translate}}</div> <div class="table-header-text">{{'common.discord_id' | translate}}</div>
<p-sortIcon field="discordId" class="table-header-icon"></p-sortIcon> <p-sortIcon field="discordId" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th pSortableColumn="name"> <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.members.headers.name' | translate}}</div> <div class="table-header-text">{{'common.name' | translate}}</div>
<p-sortIcon field="name" class="table-header-icon"></p-sortIcon> <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th pSortableColumn="xp"> <th *ngIf="isColumnVisible('xp')" pSortableColumn="xp">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.members.headers.xp' | translate}}</div> <div class="table-header-text">{{'common.xp' | translate}}</div>
<p-sortIcon field="xp" class="table-header-icon"></p-sortIcon> <p-sortIcon field="xp" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th pSortableColumn="ontime"> <th *ngIf="isColumnVisible('ontime')" pSortableColumn="ontime">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.members.headers.ontime' | translate}}</div> <div class="table-header-text">{{'common.ontime' | translate}}</div>
<p-sortIcon field="ontime" class="table-header-icon"></p-sortIcon> <p-sortIcon field="ontime" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th pSortableColumn="leftServer"> <th *ngIf="isColumnVisible('left_server')" pSortableColumn="leftServer">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.members.headers.left_server' | translate}}</div> <div class="table-header-text">{{'common.left_server' | translate}}</div>
<p-sortIcon field="leftServer" class="table-header-icon"></p-sortIcon> <p-sortIcon field="leftServer" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
<th pSortableColumn="level.name"> <th *ngIf="isColumnVisible('level')" pSortableColumn="level.name">
<div class="table-header-label"> <div class="table-header-label">
<div class="table-header-text">{{'view.server.members.headers.level' | translate}}</div> <div class="table-header-text">{{'common.level' | translate}}</div>
<p-sortIcon field="level.name" class="table-header-icon"></p-sortIcon> <p-sortIcon field="level.name" class="table-header-icon"></p-sortIcon>
</div> </div>
</th> </th>
@ -95,31 +105,31 @@
</tr> </tr>
<tr> <tr>
<th class="table-header-small"> <th *ngIf="isColumnVisible('id')" class="table-header-small">
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<input type="text" pInputText formControlName="id" placeholder="{{'common.id' | translate}}"> <input type="text" pInputText formControlName="id" placeholder="{{'common.id' | translate}}">
</form> </form>
</th> </th>
<th class="table-header-medium"> <th *ngIf="isColumnVisible('discord_id')" class="table-header-medium">
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<input type="text" pInputText formControlName="discordId" placeholder="{{'common.discord_id' | translate}}"> <input type="text" pInputText formControlName="discordId" placeholder="{{'common.discord_id' | translate}}">
</form> </form>
</th> </th>
<th> <th *ngIf="isColumnVisible('name')" >
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<input type="text" pInputText formControlName="name" placeholder="{{'view.server.members.headers.name' | translate}}"> <input type="text" pInputText formControlName="name" placeholder="{{'common.name' | translate}}">
</form> </form>
</th> </th>
<th></th> <th *ngIf="isColumnVisible('xp')" ></th>
<th></th> <th *ngIf="isColumnVisible('ontime')" ></th>
<th class="table-header-small-dropdown"> <th *ngIf="isColumnVisible('left_server')" class="table-header-small-dropdown">
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'view.server.members.headers.left_server' | translate}}"></p-dropdown> <p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'common.left_server' | translate}}"></p-dropdown>
</form> </form>
</th> </th>
<th class="table-header-small-dropdown"> <th *ngIf="isColumnVisible('level')" class="table-header-small-dropdown">
<form [formGroup]="filterForm"> <form [formGroup]="filterForm">
<p-dropdown formControlName="level" [options]="levels" placeholder="{{'view.server.members.headers.level' | translate}}"></p-dropdown> <p-dropdown formControlName="level" [options]="levels" placeholder="{{'common.level' | translate}}"></p-dropdown>
</form> </form>
</th> </th>
<th></th> <th></th>
@ -130,7 +140,7 @@
<ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex"> <ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="member"> <tr [pEditableRow]="member">
<td> <td *ngIf="isColumnVisible('id')">
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.id}} {{member.id}}
@ -140,7 +150,7 @@
</ng-template> </ng-template>
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td *ngIf="isColumnVisible('discord_id')">
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.discordId}} {{member.discordId}}
@ -150,7 +160,7 @@
</ng-template> </ng-template>
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td *ngIf="isColumnVisible('name')">
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.name}} {{member.name}}
@ -160,7 +170,7 @@
</ng-template> </ng-template>
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td *ngIf="isColumnVisible('xp')">
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-inputNumber class="table-edit-input" styleClass="input-number" [(ngModel)]="member.xp" mode="decimal" [min]="0" [useGrouping]="false" [showButtons]="true" <p-inputNumber class="table-edit-input" styleClass="input-number" [(ngModel)]="member.xp" mode="decimal" [min]="0" [useGrouping]="false" [showButtons]="true"
@ -172,7 +182,7 @@
</ng-template> </ng-template>
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td *ngIf="isColumnVisible('ontime')">
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.ontime}} {{member.ontime}}
@ -182,7 +192,7 @@
</ng-template> </ng-template>
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td *ngIf="isColumnVisible('left_server')">
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{!member.leftServer | bool}} {{!member.leftServer | bool}}
@ -192,10 +202,10 @@
</ng-template> </ng-template>
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td *ngIf="isColumnVisible('level')">
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'view.server.members.headers.level' | translate}}"></p-dropdown> <p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'common.level' | translate}}"></p-dropdown>
</ng-template> </ng-template>
<ng-template pTemplate="output"> <ng-template pTemplate="output">
{{member.level.name}} {{member.level.name}}

View File

@ -20,19 +20,17 @@ import { UpdateUserMutationResult } from "../../../../models/graphql/result.mode
import { ActivatedRoute } from "@angular/router"; import { ActivatedRoute } from "@angular/router";
import { Level } from "../../../../models/data/level.model"; import { Level } from "../../../../models/data/level.model";
import { Server } from "../../../../models/data/server.model"; import { Server } from "../../../../models/data/server.model";
import { ComponentWithTable } from "../../../../base/component-with-table";
@Component({ @Component({
selector: "app-members", selector: "app-members",
templateUrl: "./members.component.html", templateUrl: "./members.component.html",
styleUrls: ["./members.component.scss"] styleUrls: ["./members.component.scss"]
}) })
export class MembersComponent implements OnInit, OnDestroy { export class MembersComponent extends ComponentWithTable implements OnInit, OnDestroy {
members!: User[]; members!: User[];
levels!: MenuItem[]; levels!: MenuItem[];
leftServerOptions = [ leftServerOptions: { label: string; value: boolean; }[] = [];
{ label: this.translate.instant("common.bool_as_string.true"), value: false },
{ label: this.translate.instant("common.bool_as_string.false"), value: true }
];
loading = true; loading = true;
clonedUsers: { [s: string]: User; } = {}; clonedUsers: { [s: string]: User; } = {};
@ -93,6 +91,7 @@ export class MembersComponent implements OnInit, OnDestroy {
private data: DataService, private data: DataService,
private route: ActivatedRoute private route: ActivatedRoute
) { ) {
super("member", ["id", "discord_id", "name", "xp", "ontime", "left_server", "level"]);
} }
ngOnInit(): void { ngOnInit(): void {
@ -112,9 +111,14 @@ export class MembersComponent implements OnInit, OnDestroy {
return { label: level.name, value: level }; return { label: level.name, value: level };
}); });
}); });
this.leftServerOptions = [
{ label: this.translate.instant("common.bool_as_string.true"), value: false },
{ label: this.translate.instant("common.bool_as_string.false"), value: true }
];
this.loadNextPage(); this.loadNextPage();
}); });
} }
public ngOnDestroy(): void { public ngOnDestroy(): void {
this.unsubscriber.next(); this.unsubscriber.next();
this.unsubscriber.complete(); this.unsubscriber.complete();

View File

@ -2,15 +2,6 @@
"admin": { "admin": {
"auth_users": { "auth_users": {
"header": "Benutzer", "header": "Benutzer",
"headers": {
"active": "Aktiv",
"auth_role": "Rolle",
"first_name": "Vorname",
"last_name": "Nachname",
"password": "Passwort",
"role": "Rolle",
"users": "Benutzer"
},
"message": { "message": {
"cannot_delete_user": "Benutzer kann nicht gelöscht werden", "cannot_delete_user": "Benutzer kann nicht gelöscht werden",
"invalid_email": "Ungültige E-Mail", "invalid_email": "Ungültige E-Mail",
@ -131,6 +122,20 @@
} }
}, },
"common": { "common": {
"active": "Aktiv",
"auth_role": "Rolle",
"first_name": "Vorname",
"last_name": "Nachname",
"password": "Passwort",
"role": "Rolle",
"users": "Benutzer",
"color": "Farbe",
"min_xp": "Min. XP",
"permissions": "Rechte",
"left_server": "Aktiv",
"level": "Level",
"ontime": "Ontime",
"xp": "XP",
"404": "404 - Der Eintrag konnte nicht gefunden werden", "404": "404 - Der Eintrag konnte nicht gefunden werden",
"actions": "Aktionen", "actions": "Aktionen",
"add": "Hinzufügen", "add": "Hinzufügen",
@ -447,12 +452,6 @@
"header": "Server", "header": "Server",
"levels": { "levels": {
"header": "Level", "header": "Level",
"headers": {
"color": "Farbe",
"min_xp": "Min. XP",
"name": "Name",
"permissions": "Rechte"
},
"levels": "Level", "levels": "Level",
"message": { "message": {
"level_create": "Level erstellt", "level_create": "Level erstellt",
@ -473,13 +472,6 @@
}, },
"members": { "members": {
"header": "Mitglieder", "header": "Mitglieder",
"headers": {
"left_server": "Aktiv",
"level": "Level",
"name": "Name",
"ontime": "Ontime",
"xp": "XP"
},
"members": "Mitgliedern", "members": "Mitgliedern",
"message": { "message": {
"user_change_failed": "Benutzeränderung fehlgeschlagen", "user_change_failed": "Benutzeränderung fehlgeschlagen",

View File

@ -2,6 +2,6 @@
"WebVersion": { "WebVersion": {
"Major": "1", "Major": "1",
"Minor": "1", "Minor": "1",
"Micro": "dev79_hide_table_attributes" "Micro": "dev79_hide_table_columns"
} }
} }