Merge pull request #185 from theImmortalCoders/dev

Post 1.9 Release changes

src/app/dashboard/components/sections/admin-settings/admin-settings.component.ts

@@ -117,6 +117,7 @@ import { ICourseResponse } from 'app/shared/models/course.models';
       </form>
       <app-user-table
         [filteredUsers]="filteredUsers"
+        [isLoading]="isLoading"
         (sortByEmitter)="sortBy = $event; applyFilters()"
         (sortDirectionEmitter)="sortDirection = $event; applyFilters()"
         (refreshUserTableEmitter)="$event ? applyFilters() : null" />
@@ -142,6 +143,7 @@ export class AdminSettingsComponent
 
   public filterForm!: FormGroup;
   public filteredUsers: IUserResponse[] | null = null;
+  public isLoading = false;
   public avalaibleCourses: ICourseResponse[] = [];
   public errorMessage: string | null = null;
 
@@ -214,6 +216,7 @@ export class AdminSettingsComponent
   }
 
   public applyFilters(): void {
+    this.isLoading = true;
     const filters = this.filterForm.value;
     this._getUsersSubscription = this._adminEndpointsService
       .getUsers(
@@ -233,10 +236,13 @@ export class AdminSettingsComponent
       .subscribe({
         next: (response: IUserResponse[]) => {
           this.filteredUsers = response;
+          this.errorMessage = null;
+          this.isLoading = false;
         },
         error: error => {
           this.filteredUsers = null;
           this.errorMessage = error;
+          this.isLoading = false;
         },
       });
   }

src/app/dashboard/components/sections/recorded-games/recorded-games.component.ts

@@ -87,15 +87,15 @@ import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
         </button>
       </div>
     </form>
-    @if (recordedGamesData && recordedGamesData.length > 0) {
-      <app-recorded-game-table
-        [recordedGamesData]="recordedGamesData"
-        (downloadEmitter)="downloadGameRecord($event)"
-        (deleteEmitter)="deleteGameRecord($event)"
-        (sortByEmitter)="sortBy = $event; applyFilters()"
-        (sortDirectionEmitter)="sortDirection = $event; applyFilters()"
-        class="w-full overflow-auto max-h-96 border-mainOrange border-2" />
-    } @else {
+    <app-recorded-game-table
+      [recordedGamesData]="recordedGamesData"
+      [isLoading]="isLoading"
+      (downloadEmitter)="downloadGameRecord($event)"
+      (deleteEmitter)="deleteGameRecord($event)"
+      (sortByEmitter)="sortBy = $event; applyFilters()"
+      (sortDirectionEmitter)="sortDirection = $event; applyFilters()"
+      class="w-full overflow-auto max-h-96 border-mainOrange border-2" />
+    @if (!isLoading && recordedGamesData && recordedGamesData.length === 0) {
       <span class="w-full text-mainOrange">No records found.</span>
     }
     @if (errorMessage !== null) {
@@ -120,6 +120,7 @@ export class RecordedGamesComponent
 
   public avalaibleGamesList: IGameResponse[] = [];
   public recordedGamesData: IRecordedGameResponse[] | null = null;
+  public isLoading = false;
   public errorMessage: string | null = null;
 
   public filterForm!: FormGroup;
@@ -155,10 +156,11 @@ export class RecordedGamesComponent
   }
 
   public ngOnChanges(): void {
-    this.applyFilters();
+    if (this.userId !== -1) this.applyFilters();
   }
 
   public applyFilters(): void {
+    this.isLoading = true;
     const filters = this.filterForm.value;
     this._getRecordedGamesSubscription = this._gameRecordEndpointsService
       .getAllRecordedGames(
@@ -174,9 +176,12 @@ export class RecordedGamesComponent
         next: response => {
           this.recordedGamesData = response;
           this.errorMessage = null;
+          this.isLoading = false;
         },
         error: (error: string) => {
+          this.recordedGamesData = null;
           this.errorMessage = error;
+          this.isLoading = false;
         },
       });
   }

src/app/dashboard/components/sections/user-account-settings/user-account-settings.component.ts

@@ -24,6 +24,7 @@ import { AuthEndpointsService } from '@endpoints/auth-endpoints.service';
 import { ICourseResponse } from 'app/shared/models/course.models';
 import { CourseEndpointsService } from '@endpoints/course-endpoints.service';
 import { TRole } from 'app/shared/models/role.enum';
+import { AppStatusService } from 'app/shared/services/app-status.service';
 
 @Component({
   selector: 'app-user-account-settings',
@@ -267,6 +268,7 @@ export class UserAccountSettingsComponent implements OnDestroy {
   private _authEndpointsService = inject(AuthEndpointsService);
   private _courseEndpointsService = inject(CourseEndpointsService);
   private _notificationService = inject(NotificationService);
+  private _appStatusService = inject(AppStatusService);
   private _router = inject(Router);
 
   private _getMeSubscription = new Subscription();
@@ -471,7 +473,7 @@ export class UserAccountSettingsComponent implements OnDestroy {
       .deleteAccount()
       .subscribe({
         next: () => {
-          localStorage.removeItem('jwtToken');
+          this._appStatusService.setAuthStatus(false);
           this._router.navigate(['']);
           this._notificationService.addNotification(
             'Your account has been permamently deleted!'

src/app/dashboard/components/shared/recorded-game-table.component.ts

@@ -15,7 +15,7 @@ import { LoadingSpinnerComponent } from '../../../shared/components/common/loadi
   standalone: true,
   imports: [CommonModule, LoadingSpinnerComponent],
   template: `
-    @if (isLoadingNeeded) {
+    @if (isLoading) {
       <app-loading-spinner />
     } @else {
       @if (recordedGamesData && recordedGamesData.length > 0) {
@@ -106,17 +106,16 @@ import { LoadingSpinnerComponent } from '../../../shared/components/common/loadi
     }
   `,
 })
-export class RecordedGameTableComponent implements OnChanges {
+export class RecordedGameTableComponent {
   @Input({ required: true }) public recordedGamesData:
     | IRecordedGameResponse[]
     | null = null;
+  @Input({ required: true }) public isLoading = false;
   @Output() public downloadEmitter = new EventEmitter<number>();
   @Output() public deleteEmitter = new EventEmitter<number>();
   @Output() public sortByEmitter = new EventEmitter<'Ended' | 'SizeMb'>();
   @Output() public sortDirectionEmitter = new EventEmitter<'Asc' | 'Desc'>();
 
-  public isLoadingNeeded = true;
-
   public sortBy: 'Ended' | 'SizeMb' = 'Ended';
   public sortDirection: 'Asc' | 'Desc' = 'Asc';
 
@@ -130,12 +129,4 @@ export class RecordedGameTableComponent implements OnChanges {
     this.sortByEmitter.emit(this.sortBy);
     this.sortDirectionEmitter.emit(this.sortDirection);
   }
-
-  public ngOnChanges(): void {
-    if (this.recordedGamesData === null) {
-      this.isLoadingNeeded = true;
-    } else {
-      this.isLoadingNeeded = false;
-    }
-  }
 }