From 4add293186e4abc34d79020568ee75f7dd560110 Mon Sep 17 00:00:00 2001 From: Sven Heidemann Date: Mon, 14 Aug 2023 23:33:02 +0200 Subject: [PATCH] Added base logic to hide columns & added hide columns to levels #79 --- kdb-web/package.json | 2 +- .../src/app/base/component-with-table.spec.ts | 7 ++ kdb-web/src/app/base/component-with-table.ts | 39 ++++++++++ .../src/app/modules/shared/shared.module.ts | 74 ++++++++++--------- .../components/config/config.component.ts | 2 +- .../components/levels/levels.component.html | 44 ++++++----- .../components/levels/levels.component.ts | 12 +-- kdb-web/src/assets/i18n/de.json | 1 + kdb-web/src/assets/i18n/en.json | 1 + kdb-web/src/assets/version.json | 2 +- kdb-web/src/styles.scss | 17 ++++- .../src/styles/themes/default-dark-theme.scss | 53 ++++++++++++- .../styles/themes/default-light-theme.scss | 53 ++++++++++++- .../styles/themes/sh-edraft-dark-theme.scss | 53 ++++++++++++- .../styles/themes/sh-edraft-light-theme.scss | 53 ++++++++++++- 15 files changed, 347 insertions(+), 66 deletions(-) create mode 100644 kdb-web/src/app/base/component-with-table.spec.ts create mode 100644 kdb-web/src/app/base/component-with-table.ts diff --git a/kdb-web/package.json b/kdb-web/package.json index fc35367e..bfe9eed3 100644 --- a/kdb-web/package.json +++ b/kdb-web/package.json @@ -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", diff --git a/kdb-web/src/app/base/component-with-table.spec.ts b/kdb-web/src/app/base/component-with-table.spec.ts new file mode 100644 index 00000000..5b08b905 --- /dev/null +++ b/kdb-web/src/app/base/component-with-table.spec.ts @@ -0,0 +1,7 @@ +import { ComponentWithTable } from './component-with-table'; + +describe('ComponentWithTable', () => { + it('should create an instance', () => { + expect(new ComponentWithTable()).toBeTruthy(); + }); +}); diff --git a/kdb-web/src/app/base/component-with-table.ts b/kdb-web/src/app/base/component-with-table.ts new file mode 100644 index 00000000..97828341 --- /dev/null +++ b/kdb-web/src/app/base/component-with-table.ts @@ -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)); + } +} diff --git a/kdb-web/src/app/modules/shared/shared.module.ts b/kdb-web/src/app/modules/shared/shared.module.ts index b92aa75b..68eb5b71 100644 --- a/kdb-web/src/app/modules/shared/shared.module.ts +++ b/kdb-web/src/app/modules/shared/shared.module.ts @@ -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 { +} diff --git a/kdb-web/src/app/modules/view/server/config/components/config/config.component.ts b/kdb-web/src/app/modules/view/server/config/components/config/config.component.ts index 0769ea57..7e2a0f1d 100644 --- a/kdb-web/src/app/modules/view/server/config/components/config/config.component.ts +++ b/kdb-web/src/app/modules/view/server/config/components/config/config.component.ts @@ -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")); }); } } diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html index 0c8b1945..114143e0 100644 --- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html +++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html @@ -9,11 +9,21 @@
-
- {{levels.length}} {{'common.of' | translate}} - {{dt.totalRecords}} - - {{'view.server.levels.levels' | translate}} +
+
+ {{levels.length}} {{'common.of' | translate}} + {{dt.totalRecords}} + + {{'view.server.levels.levels' | translate}} +
+ +
+ + +
{{'view.server.levels.headers.' + item.name | translate}}
+ + +
@@ -36,28 +46,28 @@
- +
{{'view.server.levels.headers.name' | translate}}
- +
{{'view.server.levels.headers.color' | translate}}
- +
{{'view.server.levels.headers.min_xp' | translate}}
- +
{{'view.server.levels.headers.permissions' | translate}}
@@ -90,15 +100,15 @@ placeholder="{{'common.id' | translate}}"> - +
- - - + + + @@ -118,7 +128,7 @@ - + @@ -129,7 +139,7 @@ - + @@ -140,7 +150,7 @@ - + @@ -151,7 +161,7 @@ - + diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts index 63e1e446..1a5461a6 100644 --- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts +++ b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts @@ -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; diff --git a/kdb-web/src/assets/i18n/de.json b/kdb-web/src/assets/i18n/de.json index b67922a8..ec3aa22a 100644 --- a/kdb-web/src/assets/i18n/de.json +++ b/kdb-web/src/assets/i18n/de.json @@ -142,6 +142,7 @@ "discord_id": "Discord Id", "email": "E-Mail", "error": "Fehler", + "hidden_columns": "Ausgeblendete Spalten", "history": { "attribute": "Attribut", "autoRole": "Auto Rolle", diff --git a/kdb-web/src/assets/i18n/en.json b/kdb-web/src/assets/i18n/en.json index 821996db..cfc8e077 100644 --- a/kdb-web/src/assets/i18n/en.json +++ b/kdb-web/src/assets/i18n/en.json @@ -142,6 +142,7 @@ "discord_id": "Discord Id", "email": "E-Mail", "error": "Error", + "hidden_columns": "Hidden columns", "history": { "attribute": "Attribute", "autoRole": "Auto role", diff --git a/kdb-web/src/assets/version.json b/kdb-web/src/assets/version.json index 71ae202d..4a930e41 100644 --- a/kdb-web/src/assets/version.json +++ b/kdb-web/src/assets/version.json @@ -2,6 +2,6 @@ "WebVersion": { "Major": "1", "Minor": "1", - "Micro": "0" + "Micro": "dev79_hide_table_attributes" } } \ No newline at end of file diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss index 71be66ee..af15846a 100644 --- a/kdb-web/src/styles.scss +++ b/kdb-web/src/styles.scss @@ -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 { diff --git a/kdb-web/src/styles/themes/default-dark-theme.scss b/kdb-web/src/styles/themes/default-dark-theme.scss index 5222645f..45fa4f2f 100644 --- a/kdb-web/src/styles/themes/default-dark-theme.scss +++ b/kdb-web/src/styles/themes/default-dark-theme.scss @@ -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; + } + } + } } diff --git a/kdb-web/src/styles/themes/default-light-theme.scss b/kdb-web/src/styles/themes/default-light-theme.scss index 1e7078e2..82341a81 100644 --- a/kdb-web/src/styles/themes/default-light-theme.scss +++ b/kdb-web/src/styles/themes/default-light-theme.scss @@ -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; + } + } + } } diff --git a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss index 42e926ff..60974511 100644 --- a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss +++ b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss @@ -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; + } + } + } } diff --git a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss index 8fa8f2fb..ebf9360d 100644 --- a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss +++ b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss @@ -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; + } + } + } }