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

Added base logic to hide columns & added hide columns to levels #79

Browse Source
This commit is contained in:
Sven Heidemann 2023-08-14 23:33:02 +02:00
parent 1fc5ef76a6
commit 4add293186
15 changed files with 347 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
kdb-web/package.json
View File

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

7
kdb-web/src/app/base/component-with-table.spec.ts Normal file
View File

@ -0,0 +1,7 @@
import { ComponentWithTable } from './component-with-table';
describe('ComponentWithTable', () => {
it('should create an instance', () => {
expect(new ComponentWithTable()).toBeTruthy();
});
});

39
kdb-web/src/app/base/component-with-table.ts Normal file
View File

@ -0,0 +1,39 @@
interface Column {
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;
}
private 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 };
});
this._hiddenColumns = JSON.parse(localStorage.getItem("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));
}
}

16
kdb-web/src/app/modules/shared/shared.module.ts
View File

@ -23,9 +23,10 @@ import { PanelModule } from "primeng/panel";
import { InputNumberModule } from "primeng/inputnumber";
import { ImageModule } from "primeng/image";
import { SidebarModule } from "primeng/sidebar";
import { HistoryBtnComponent } from './components/history-btn/history-btn.component';
import { DataViewModule, DataViewLayoutOptions } from 'primeng/dataview';
import { ConfigListComponent } from './components/config-list/config-list.component';
import { HistoryBtnComponent } from "./components/history-btn/history-btn.component";
import { DataViewModule, DataViewLayoutOptions } from "primeng/dataview";
import { ConfigListComponent } from "./components/config-list/config-list.component";
import { MultiSelectModule } from "primeng/multiselect";
@NgModule({
@ -34,7 +35,7 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
IpAddressPipe,
BoolPipe,
HistoryBtnComponent,
ConfigListComponent,
ConfigListComponent
],
imports: [
CommonModule,
@ -60,6 +61,7 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
ImageModule,
SidebarModule,
DataViewModule,
MultiSelectModule
],
exports: [
ButtonModule,
@ -89,7 +91,9 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
HistoryBtnComponent,
DataViewModule,
DataViewLayoutOptions,
ConfigListComponent
ConfigListComponent,
MultiSelectModule
]
})
export class SharedModule { }
export class SharedModule {
}

2
kdb-web/src/app/modules/view/server/config/components/config/config.component.ts
View File

@ -110,7 +110,7 @@ export class ConfigComponent implements OnInit {
return throwError(err);
})).subscribe(result => {
this.spinner.hideSpinner();
this.toastService.success(this.translate.instant("view.server.config.message.server_config_create"), this.translate.instant("view.server.config.message.server_config_create_d"));
this.toastService.success(this.translate.instant("view.server.config.message.server#_config_create"), this.translate.instant("view.server.config.message.server_config_create_d"));
});
}
}

34
kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
View File

@ -9,6 +9,7 @@
<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}}
@ -16,6 +17,15 @@
{{'view.server.levels.levels' | translate}}
</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>{{'view.server.levels.headers.' + item.name | translate}}</div>
</ng-template>
</p-multiSelect>
</div>
</div>
<div class="table-caption-btn-wrapper btn-wrapper">
<button pButton label="{{'common.add' | translate}}" class="icon-btn btn"
icon="pi pi-user-plus" (click)="addLevel(dt)" [disabled]="isEditingNew || user?.isModerator && !user?.isAdmin">
@ -36,28 +46,28 @@
</div>
</th>
<th pSortableColumn="name">
<th *ngIf="isColumnVisible('name')" pSortableColumn="name">
<div class="table-header-label">
<div class="table-header-text">{{'view.server.levels.headers.name' | translate}}</div>
<p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th pSortableColumn="color">
<th *ngIf="isColumnVisible('color')" pSortableColumn="color">
<div class="table-header-label">
<div class="table-header-text">{{'view.server.levels.headers.color' | translate}}</div>
<p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th pSortableColumn="minXp">
<th *ngIf="isColumnVisible('min_xp')" pSortableColumn="minXp">
<div class="table-header-label">
<div class="table-header-text">{{'view.server.levels.headers.min_xp' | translate}}</div>
<p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th pSortableColumn="permissions">
<th *ngIf="isColumnVisible('permissions')" pSortableColumn="permissions">
<div class="table-header-label">
<div class="table-header-text">{{'view.server.levels.headers.permissions' | translate}}</div>
<p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
@ -90,15 +100,15 @@
placeholder="{{'common.id' | translate}}">
</form>
</th>
<th>
<th *ngIf="isColumnVisible('name')">
<form [formGroup]="filterForm">
<input type="text" pInputText formControlName="name"
placeholder="{{'view.server.levels.headers.name' | translate}}">
</form>
</th>
<th></th>
<th></th>
<th></th>
<th *ngIf="isColumnVisible('color')"></th>
<th *ngIf="isColumnVisible('min_xp')"></th>
<th *ngIf="isColumnVisible('permissions')"></th>
<th class="table-header-small-dropdown"></th>
<th class="table-header-small-dropdown"></th>
<th class="table-header-actions"></th>
@ -118,7 +128,7 @@
</p-cellEditor>
</td>
<td>
<td *ngIf="isColumnVisible('name')">
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
@ -129,7 +139,7 @@
</p-cellEditor>
</td>
<td>
<td *ngIf="isColumnVisible('color')">
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
@ -140,7 +150,7 @@
</p-cellEditor>
</td>
<td>
<td *ngIf="isColumnVisible('min_xp')">
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp">
@ -151,7 +161,7 @@
</p-cellEditor>
</td>
<td>
<td *ngIf="isColumnVisible('permissions')">
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions">

8
kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts
View File

@ -22,14 +22,14 @@ import { Mutations } from "../../../../../../models/graphql/mutations.model";
import { Subject, throwError } from "rxjs";
import { Server } from "../../../../../../models/data/server.model";
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"]
})
export class LevelsComponent implements OnInit, OnDestroy {
export class LevelsComponent extends ComponentWithTable implements OnInit, OnDestroy {
public levels: Level[] = [];
public loading = true;
@ -72,7 +72,9 @@ export class LevelsComponent implements OnInit, OnDestroy {
private translate: TranslateService,
private data: DataService,
private sidebar: SidebarService,
private route: ActivatedRoute) {
private route: ActivatedRoute
) {
super("level", ["name", "color", "min_xp", "permissions"]);
}
public ngOnInit(): void {

1
kdb-web/src/assets/i18n/de.json
View File

@ -142,6 +142,7 @@
"discord_id": "Discord Id",
"email": "E-Mail",
"error": "Fehler",
"hidden_columns": "Ausgeblendete Spalten",
"history": {
"attribute": "Attribut",
"autoRole": "Auto Rolle",

1
kdb-web/src/assets/i18n/en.json
View File

@ -142,6 +142,7 @@
"discord_id": "Discord Id",
"email": "E-Mail",
"error": "Error",
"hidden_columns": "Hidden columns",
"history": {
"attribute": "Attribute",
"autoRole": "Auto role",

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

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

15
kdb-web/src/styles.scss
View File

@ -241,11 +241,24 @@ header {
.table-caption {
display: flex;
.table-caption-text {
.table-caption-table-info {
display: flex;
flex: 1;
flex-direction: row;
gap: 25px;
.table-caption-text {
display: flex;
align-items: center;
font-weight: 400;
}
.table-caption-column-select {
flex: 1;
}
}
.table-caption-search {
}
}

51
kdb-web/src/styles/themes/default-dark-theme.scss
View File

@ -386,9 +386,14 @@
color: $primaryTextColor !important;
.table-caption {
.table-caption-table-info {
.table-caption-text {
}
.table-caption-column-select {
}
}
.table-caption-search-wrapper {
.table-caption-search {
height: 30px !important;
@ -611,4 +616,50 @@
}
}
}
.p-multiselect {
background-color: $primaryBackgroundColor !important;
color: $primaryTextColor !important;
&:focus,
&.p-focus,
&:not(.p-disabled):hover {
border-color: $primaryHeaderColor !important;
box-shadow: none !important;
}
.p-multiselect-panel {
.p-multiselect-header {
background-color: $primaryBackgroundColor !important;
}
.p-multiselect-items,
.p-multiselect-item {
background-color: $secondaryBackgroundColor !important;
}
.p-multiselect-item {
color: $primaryTextColor !important;
border: 1px solid transparent !important;
&:hover {
border: 1px solid $primaryHeaderColor !important;
color: $primaryHeaderColor !important;
}
&:focus {
box-shadow: none !important;
}
}
.p-checkbox .p-checkbox-box.p-highlight {
border-color: $primaryHeaderColor !important;
background: $primaryHeaderColor !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
border-color: $primaryHeaderColor !important;
}
}
}
}

51
kdb-web/src/styles/themes/default-light-theme.scss
View File

@ -386,9 +386,14 @@
color: $primaryTextColor !important;
.table-caption {
.table-caption-table-info {
.table-caption-text {
}
.table-caption-column-select {
}
}
.table-caption-search-wrapper {
.table-caption-search {
height: 30px !important;
@ -611,4 +616,50 @@
}
}
}
.p-multiselect {
background-color: $primaryBackgroundColor !important;
color: $primaryTextColor !important;
&:focus,
&.p-focus,
&:not(.p-disabled):hover {
border-color: $primaryHeaderColor !important;
box-shadow: none !important;
}
.p-multiselect-panel {
.p-multiselect-header {
background-color: $secondaryBackgroundColor !important;
}
.p-multiselect-items,
.p-multiselect-item {
background-color: $primaryBackgroundColor !important;
}
.p-multiselect-item {
color: $primaryTextColor !important;
border: 1px solid transparent !important;
&:hover {
border: 1px solid $primaryHeaderColor !important;
color: $primaryHeaderColor !important;
}
&:focus {
box-shadow: none !important;
}
}
.p-checkbox .p-checkbox-box.p-highlight {
border-color: $primaryHeaderColor !important;
background: $primaryHeaderColor !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
border-color: $primaryHeaderColor !important;
}
}
}
}

51
kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
View File

@ -390,9 +390,14 @@
color: $primaryTextColor !important;
.table-caption {
.table-caption-table-info {
.table-caption-text {
}
.table-caption-column-select {
}
}
.table-caption-search-wrapper {
.table-caption-search {
height: 30px !important;
@ -619,4 +624,50 @@
}
}
}
.p-multiselect {
background-color: $primaryBackgroundColor !important;
color: $primaryTextColor !important;
&:focus,
&.p-focus,
&:not(.p-disabled):hover {
border-color: $primaryHeaderColor !important;
box-shadow: none !important;
}
.p-multiselect-panel {
.p-multiselect-header {
background-color: $primaryBackgroundColor !important;
}
.p-multiselect-items,
.p-multiselect-item {
background-color: $secondaryBackgroundColor !important;
}
.p-multiselect-item {
color: $primaryTextColor !important;
border: 1px solid transparent !important;
&:hover {
border: 1px solid $primaryHeaderColor !important;
color: $primaryHeaderColor !important;
}
&:focus {
box-shadow: none !important;
}
}
.p-checkbox .p-checkbox-box.p-highlight {
border-color: $primaryHeaderColor !important;
background: $primaryHeaderColor !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
border-color: $primaryHeaderColor !important;
}
}
}
}

51
kdb-web/src/styles/themes/sh-edraft-light-theme.scss
View File

@ -386,9 +386,14 @@
color: $primaryTextColor !important;
.table-caption {
.table-caption-table-info {
.table-caption-text {
}
.table-caption-column-select {
}
}
.table-caption-search-wrapper {
.table-caption-search {
height: 30px !important;
@ -611,4 +616,50 @@
}
}
}
.p-multiselect {
background-color: $primaryBackgroundColor !important;
color: $primaryTextColor !important;
&:focus,
&.p-focus,
&:not(.p-disabled):hover {
border-color: $primaryHeaderColor !important;
box-shadow: none !important;
}
.p-multiselect-panel {
.p-multiselect-header {
background-color: $secondaryBackgroundColor !important;
}
.p-multiselect-items,
.p-multiselect-item {
background-color: $primaryBackgroundColor !important;
}
.p-multiselect-item {
color: $primaryTextColor !important;
border: 1px solid transparent !important;
&:hover {
border: 1px solid $primaryHeaderColor !important;
color: $primaryHeaderColor !important;
}
&:focus {
box-shadow: none !important;
}
}
.p-checkbox .p-checkbox-box.p-highlight {
border-color: $primaryHeaderColor !important;
background: $primaryHeaderColor !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
border-color: $primaryHeaderColor !important;
}
}
}
}