Improved spinner logic and table design #130

kdb-web/src/app/app.component.html

@@ -1,4 +1,5 @@
 <main [class]="themeName">
+
   <ng-container *ngIf="isLoggedIn; else login">
     <app-header></app-header>
 

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>

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 {
   }

kdb-web/src/app/models/graphql/queries.model.ts

@@ -75,6 +75,9 @@ export class Queries {
           id
           gameServer
         }
+
+        createdAt
+        modifiedAt
       }
     }
   `;

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"

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;
     }

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);
   }
 }

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 {