Improve usability by eliminating page reloads

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -64,6 +64,7 @@ import {
 } from 'ionicons/icons';
 import ms, { StringValue } from 'ms';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { switchMap } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -105,6 +106,8 @@ export class GfAdminOverviewComponent implements OnInit {
   protected readonly info: InfoItem;
   protected isDataGatheringEnabled: boolean;
   protected isLoading = false;
+  protected isReadOnlyMode: boolean;
+  protected isUserSignupEnabled: boolean;
   protected readonly permissions = permissions;
   protected systemMessage: SystemMessage;
   protected userCount: number;
@@ -179,6 +182,8 @@ export class GfAdminOverviewComponent implements OnInit {
   }
 
   public ngOnInit() {
+    this.isLoading = true;
+
     this.fetchAdminData();
   }
 
@@ -270,9 +275,15 @@ export class GfAdminOverviewComponent implements OnInit {
           .flush()
           .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe(() => {
-            setTimeout(() => {
-              window.location.reload();
-            }, 300);
+            this.dataService.updateInfo();
+
+            this.snackBar.open(
+              '✅ ' + $localize`Cache has been flushed.`,
+              undefined,
+              {
+                duration: ms('3 seconds')
+              }
+            );
           });
       },
       confirmType: ConfirmationDialogType.Warn,
@@ -330,8 +341,6 @@ export class GfAdminOverviewComponent implements OnInit {
   }
 
   private fetchAdminData() {
-    this.isLoading = true;
-
     this.adminService
       .fetchAdminData()
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -344,6 +353,11 @@ export class GfAdminOverviewComponent implements OnInit {
         this.isDataGatheringEnabled =
           settings[PROPERTY_IS_DATA_GATHERING_ENABLED] === false ? false : true;
 
+        this.isReadOnlyMode = settings[PROPERTY_IS_READ_ONLY_MODE] === true;
+
+        this.isUserSignupEnabled =
+          settings[PROPERTY_IS_USER_SIGNUP_ENABLED] === false ? false : true;
+
         this.systemMessage = settings[PROPERTY_SYSTEM_MESSAGE] as SystemMessage;
         this.userCount = userCount;
         this.version = version;
@@ -372,11 +386,16 @@ export class GfAdminOverviewComponent implements OnInit {
       .putAdminSetting(key, {
         value: value || value === false ? JSON.stringify(value) : undefined
       })
-      .pipe(takeUntilDestroyed(this.destroyRef))
+      .pipe(
+        switchMap(() => {
+          return this.userService.get(true);
+        }),
+        takeUntilDestroyed(this.destroyRef)
+      )
       .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
+        this.dataService.updateInfo();
+
+        this.fetchAdminData();
       });
   }
 

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -52,9 +52,7 @@
               <mat-slide-toggle
                 color="primary"
                 hideIcon="true"
-                [checked]="
-                  info.globalPermissions.includes(permissions.createUserAccount)
-                "
+                [checked]="isUserSignupEnabled"
                 (change)="onEnableUserSignupModeChange($event)"
               />
             </div>
@@ -66,7 +64,7 @@
                 <mat-slide-toggle
                   color="primary"
                   hideIcon="true"
-                  [checked]="info?.isReadOnlyMode"
+                  [checked]="isReadOnlyMode"
                   (change)="onReadOnlyModeChange($event)"
                 />
               </div>
@@ -99,7 +97,7 @@
                     </button>
                   </div>
                 }
-                @if (!info?.systemMessage) {
+                @if (!systemMessage) {
                   <button
                     class="mt-2"
                     color="accent"