Improved spinner logic and table design #130

2023-02-18 12:42:51 +01:00 · 2023-02-18 12:42:51 +01:00 · 43b6df2ba3
commit 43b6df2ba3
parent 7d67b08ce6
8 changed files with 438 additions and 387 deletions
--- a/kdb-web/src/app/app.component.html
+++ b/kdb-web/src/app/app.component.html
@ -1,4 +1,5 @@
 <main [class]="themeName">
+
  <ng-container *ngIf="isLoggedIn; else login">
    <app-header></app-header>

--- a/kdb-web/src/app/components/spinner/spinner.component.html
+++ b/kdb-web/src/app/components/spinner/spinner.component.html
@ -1,4 +1,4 @@
-<ng-container *ngIf="spinnerService.showSpinnerState">
+<ng-container *ngIf="showSpinnerState">
    <div class="spinner-component-wrapper">
        <div class="spinner-wrapper">
            <p-progressSpinner styleClass="custom-spinner" animationDuration=".8s"></p-progressSpinner>
--- a/kdb-web/src/app/components/spinner/spinner.component.ts
+++ b/kdb-web/src/app/components/spinner/spinner.component.ts
@ -8,9 +8,15 @@ import { SpinnerService } from 'src/app/services/spinner/spinner.service';
 })
 export class SpinnerComponent implements OnInit {

+  showSpinnerState: boolean = false;
+
  constructor(
    public spinnerService: SpinnerService
-  ) { }
+  ) {
+    this.spinnerService.showSpinnerState$.subscribe(value => {
+      this.showSpinnerState = value;
+    });
+  }

  ngOnInit(): void {
  }
--- a/kdb-web/src/app/models/graphql/queries.model.ts
+++ b/kdb-web/src/app/models/graphql/queries.model.ts
@ -22,7 +22,7 @@ export class Queries {
    }
  `;

-  static levelQuery= `
+  static levelQuery = `
    query LevelsList($filter: LevelFilter, $page: Page, $sort: Sort) {
      levelCount
      levels(filter: $filter, page: $page, sort: $sort) {
@ -39,7 +39,7 @@ export class Queries {
    }
  `;

-  static usersQuery= `
+  static usersQuery = `
    query UsersList($filter: UserFilter, $page: Page, $sort: Sort) {
      userCount
      users(filter: $filter, page: $page, sort: $sort) {
@ -75,6 +75,9 @@ export class Queries {
          id
          gameServer
        }
+
+        createdAt
+        modifiedAt
      }
    }
  `;
--- a/kdb-web/src/app/modules/view/server/members/members.component.html
+++ b/kdb-web/src/app/modules/view/server/members/members.component.html
@ -26,7 +26,7 @@

      <ng-template pTemplate="header">
        <tr>
-          <th class="table-header-small" pSortableColumn="id">
+          <th pSortableColumn="id">
            <div class="table-header-label">
              <div class="table-header-text">{{'view.server.members.headers.id' | translate}}</div>
              <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
@ -61,33 +61,46 @@
            </div>
          </th>

-          <th class="table-header-actions" pSortableColumn="leftServer">
+          <th pSortableColumn="leftServer">
            <div class="table-header-label">
              <div class="table-header-text">{{'view.server.members.headers.left_server' | translate}}</div>
              <p-sortIcon field="leftServer" class="table-header-icon"></p-sortIcon>
            </div>
          </th>

-          <th class="table-header-small-dropdown" pSortableColumn="level.name">
+          <th pSortableColumn="level.name">
            <div class="table-header-label">
              <div class="table-header-text">{{'view.server.members.headers.level' | translate}}</div>
              <p-sortIcon field="level.name" class="table-header-icon"></p-sortIcon>
            </div>
          </th>

-          <th class="table-header-actions">
+          <th>
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.created_at' | translate}}</div>
+            </div>
+          </th>
+
+          <th>
+            <div class="table-header-label">
+              <div class="table-header-text">{{'common.modified_at' | translate}}</div>
+            </div>
+          </th>
+
+          <th>
            <div class="table-header-label">
              <div class="table-header-text">{{'view.server.members.headers.actions' | translate}}</div>
            </div>
          </th>
        </tr>
+
        <tr>
-          <th>
+          <th class="table-header-small">
            <form [formGroup]="filterForm">
              <input type="text" pInputText formControlName="id" placeholder="{{'view.server.members.headers.id' | translate}}">
            </form>
          </th>
-          <th>
+          <th class="table-header-medium">
            <form [formGroup]="filterForm">
              <input type="text" pInputText formControlName="discordId" placeholder="{{'view.server.members.headers.discord_id' | translate}}">
            </form>
@ -99,17 +112,19 @@
          </th>
          <th></th>
          <th></th>
-          <th>
+          <th class="table-header-small-dropdown">
            <form [formGroup]="filterForm">
              <p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'view.server.members.headers.left_server' | translate}}"></p-dropdown>
            </form>
          </th>
-          <th>
+          <th class="table-header-small-dropdown">
            <form [formGroup]="filterForm">
              <p-dropdown formControlName="level" [options]="levels" placeholder="{{'view.server.members.headers.level' | translate}}"></p-dropdown>
            </form>
          </th>
          <th></th>
+          <th></th>
+          <th class="table-header-actions"></th>
        </tr>
      </ng-template>

@ -185,6 +200,26 @@
              </ng-template>
            </p-cellEditor>
          </td>
+          <td>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                {{member.createdAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{member.createdAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
+          <td>
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                {{member.modifiedAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+              <ng-template pTemplate="output">
+                {{member.modifiedAt | date:'dd.MM.yy HH:mm'}}
+              </ng-template>
+            </p-cellEditor>
+          </td>
          <td>
            <div class="btn-wrapper">
              <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
--- a/kdb-web/src/app/modules/view/server/profile/profile.component.ts
+++ b/kdb-web/src/app/modules/view/server/profile/profile.component.ts
@ -35,18 +35,17 @@ export class ProfileComponent implements OnInit {
  async ngOnInit() {
    this.data.getServerFromRoute(this.route);

-    this.spinner.showSpinner();
    if (!this.route.snapshot.params["memberId"]) {
-      this.spinner.hideSpinner();
      this.router.navigate(["/dashboard"]);
      return;
    }

-
    let authUser = await this.auth.getLoggedInUser();
+    this.spinner.showSpinner();
    let user: UserDTO | null = authUser?.users?.find(u => u.server == this.sidebar.server$.value?.id) ?? null;
    if (!user || user?.id != this.route.snapshot.params["memberId"] && !user?.isModerator) {
      this.toast.error(this.translate.instant("view.server.profile.permission_denied"), this.translate.instant("view.server.profile.permission_denied_d"));
+      this.spinner.hideSpinner();
      this.router.navigate(["/server", this.sidebar.server$.value?.id]);
      return;
    }
--- a/kdb-web/src/app/services/spinner/spinner.service.ts
+++ b/kdb-web/src/app/services/spinner/spinner.service.ts
@ -1,22 +1,23 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject } from "rxjs";

@Injectable({
  providedIn: 'root'
 })
 export class SpinnerService {

-  showSpinnerState = false;
+  showSpinnerState$ = new BehaviorSubject<boolean>(false);
  constructor() { }

  showSpinner() {
-    this.showSpinnerState = true;
+    this.showSpinnerState$.next(true);
  }

  hideSpinner() {
-    this.showSpinnerState = false;
+    this.showSpinnerState$.next(false);
  }

  toggleSpinner() {
-    this.showSpinnerState = !this.showSpinnerState;
+    this.showSpinnerState$.next(!this.showSpinnerState$.value);
  }
 }
--- a/kdb-web/src/styles.scss
+++ b/kdb-web/src/styles.scss
@ -115,8 +115,10 @@ header {
          padding: 15px;

          form {
+            input {
              width: 100%;
            }
+          }

          .content-row {
            display: flex;
@ -213,7 +215,11 @@ header {
          }

          .table-header-small {
-                        width: 25px;
+            width: 75px;
+          }
+
+          .table-header-medium {
+            width: 150px;
          }

          .table-header-actions {