1.1.0 #352
@ -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
7
kdb-web/src/app/base/component-with-table.spec.ts
Normal 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
39
kdb-web/src/app/base/component-with-table.ts
Normal 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));
|
||||
}
|
||||
}
|
@ -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,36 +61,39 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
|
||||
ImageModule,
|
||||
SidebarModule,
|
||||
DataViewModule,
|
||||
MultiSelectModule
|
||||
],
|
||||
exports: [
|
||||
ButtonModule,
|
||||
PasswordModule,
|
||||
MenuModule,
|
||||
DialogModule,
|
||||
ProgressSpinnerModule,
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
ToastModule,
|
||||
ConfirmDialogModule,
|
||||
TableModule,
|
||||
InputTextModule,
|
||||
CheckboxModule,
|
||||
DropdownModule,
|
||||
TranslateModule,
|
||||
DynamicDialogModule,
|
||||
PanelMenuModule,
|
||||
PanelModule,
|
||||
AuthRolePipe,
|
||||
IpAddressPipe,
|
||||
BoolPipe,
|
||||
InputNumberModule,
|
||||
ImageModule,
|
||||
SidebarModule,
|
||||
HistoryBtnComponent,
|
||||
DataViewModule,
|
||||
DataViewLayoutOptions,
|
||||
ConfigListComponent
|
||||
]
|
||||
exports: [
|
||||
ButtonModule,
|
||||
PasswordModule,
|
||||
MenuModule,
|
||||
DialogModule,
|
||||
ProgressSpinnerModule,
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
ToastModule,
|
||||
ConfirmDialogModule,
|
||||
TableModule,
|
||||
InputTextModule,
|
||||
CheckboxModule,
|
||||
DropdownModule,
|
||||
TranslateModule,
|
||||
DynamicDialogModule,
|
||||
PanelMenuModule,
|
||||
PanelModule,
|
||||
AuthRolePipe,
|
||||
IpAddressPipe,
|
||||
BoolPipe,
|
||||
InputNumberModule,
|
||||
ImageModule,
|
||||
SidebarModule,
|
||||
HistoryBtnComponent,
|
||||
DataViewModule,
|
||||
DataViewLayoutOptions,
|
||||
ConfigListComponent,
|
||||
MultiSelectModule
|
||||
]
|
||||
})
|
||||
export class SharedModule { }
|
||||
export class SharedModule {
|
||||
}
|
||||
|
@ -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"));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -9,11 +9,21 @@
|
||||
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="table-caption">
|
||||
<div class="table-caption-text">
|
||||
<ng-container *ngIf="!loading">{{levels.length}} {{'common.of' | translate}}
|
||||
{{dt.totalRecords}}
|
||||
</ng-container>
|
||||
{{'view.server.levels.levels' | translate}}
|
||||
<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>
|
||||
|
||||
<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">
|
||||
@ -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">
|
||||
|
@ -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 {
|
||||
@ -96,8 +98,8 @@ export class LevelsComponent implements OnInit, OnDestroy {
|
||||
serverId: this.server.id, filter: this.filter, page: this.page, sort: this.sort
|
||||
},
|
||||
(data: Query) => {
|
||||
return data.servers[0];
|
||||
}
|
||||
return data.servers[0];
|
||||
}
|
||||
).subscribe(data => {
|
||||
this.totalRecords = data.levelCount;
|
||||
this.levels = data.levels;
|
||||
|
@ -142,6 +142,7 @@
|
||||
"discord_id": "Discord Id",
|
||||
"email": "E-Mail",
|
||||
"error": "Fehler",
|
||||
"hidden_columns": "Ausgeblendete Spalten",
|
||||
"history": {
|
||||
"attribute": "Attribut",
|
||||
"autoRole": "Auto Rolle",
|
||||
|
@ -142,6 +142,7 @@
|
||||
"discord_id": "Discord Id",
|
||||
"email": "E-Mail",
|
||||
"error": "Error",
|
||||
"hidden_columns": "Hidden columns",
|
||||
"history": {
|
||||
"attribute": "Attribute",
|
||||
"autoRole": "Auto role",
|
||||
|
@ -2,6 +2,6 @@
|
||||
"WebVersion": {
|
||||
"Major": "1",
|
||||
"Minor": "1",
|
||||
"Micro": "0"
|
||||
"Micro": "dev79_hide_table_attributes"
|
||||
}
|
||||
}
|
@ -241,9 +241,22 @@ header {
|
||||
.table-caption {
|
||||
display: flex;
|
||||
|
||||
.table-caption-text {
|
||||
.table-caption-table-info {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
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 {
|
||||
|
@ -386,7 +386,12 @@
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.table-caption {
|
||||
.table-caption-text {
|
||||
.table-caption-table-info {
|
||||
.table-caption-text {
|
||||
}
|
||||
|
||||
.table-caption-column-select {
|
||||
}
|
||||
}
|
||||
|
||||
.table-caption-search-wrapper {
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -386,7 +386,12 @@
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.table-caption {
|
||||
.table-caption-text {
|
||||
.table-caption-table-info {
|
||||
.table-caption-text {
|
||||
}
|
||||
|
||||
.table-caption-column-select {
|
||||
}
|
||||
}
|
||||
|
||||
.table-caption-search-wrapper {
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -390,7 +390,12 @@
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.table-caption {
|
||||
.table-caption-text {
|
||||
.table-caption-table-info {
|
||||
.table-caption-text {
|
||||
}
|
||||
|
||||
.table-caption-column-select {
|
||||
}
|
||||
}
|
||||
|
||||
.table-caption-search-wrapper {
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -386,7 +386,12 @@
|
||||
color: $primaryTextColor !important;
|
||||
|
||||
.table-caption {
|
||||
.table-caption-text {
|
||||
.table-caption-table-info {
|
||||
.table-caption-text {
|
||||
}
|
||||
|
||||
.table-caption-column-select {
|
||||
}
|
||||
}
|
||||
|
||||
.table-caption-search-wrapper {
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user