Merge pull request #16933 from primefaces/issue-16803

Fixed #16803 - Showcase | save appState
primefaces · Dec 4, 2024 · 8704a2b · 8704a2b
2 parents f658850 + 742b14c
commit 8704a2b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 20 deletions.
diff --git a/apps/showcase/assets/styles/global.scss b/apps/showcase/assets/styles/global.scss
@@ -4,3 +4,7 @@
 @import 'quill/dist/quill.snow.css';
 @import './flags.css';
 @import '@docsearch/css/dist/style.css';
+
+body {
+    visibility: hidden;
+}
diff --git a/apps/showcase/components/layout/app.component.ts b/apps/showcase/components/layout/app.component.ts
@@ -46,6 +46,9 @@ export class AppComponent {
             if (process.env.NODE_ENV === 'production') {
                 this.injectScripts();
             }
+            setTimeout(() => {
+                document.body.style.visibility = 'visible';
+            });
 
             this.bindRouteEvents();
         });

diff --git a/apps/showcase/components/layout/configurator/app.configurator.component.ts b/apps/showcase/components/layout/configurator/app.configurator.component.ts
@@ -1,6 +1,6 @@
 import { AppConfigService } from '@/service/appconfigservice';
-import { CommonModule } from '@angular/common';
-import { Component, computed, inject } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, computed, inject, PLATFORM_ID } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { $t, updatePreset, updateSurfacePalette } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
@@ -102,6 +102,8 @@ export class AppConfiguratorComponent {
 
     configService: AppConfigService = inject(AppConfigService);
 
+    platformId = inject(PLATFORM_ID);
+
     presets = Object.keys(presets);
 
     onRTLChange(value: boolean) {
@@ -120,6 +122,13 @@ export class AppConfiguratorComponent {
         }
     }
 
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.onPresetChange(this.configService.appState().preset);
+            this.toggleRTL(this.configService.appState().RTL);
+        }
+    }
+
     surfaces = [
         {
             name: 'slate',

diff --git a/apps/showcase/service/appconfigservice.ts b/apps/showcase/service/appconfigservice.ts
@@ -6,35 +6,29 @@ import { computed, effect, inject, Injectable, PLATFORM_ID, signal } from '@angu
     providedIn: 'root'
 })
 export class AppConfigService {
-    appState = signal<any>({
-        preset: 'Aura',
-        primary: 'noir',
-        surface: 'slate',
-        darkTheme: false,
-        menuActive: false,
-        designerKey: 'primeng-designer-theme',
-        RTL: false
-    });
+    private readonly STORAGE_KEY = 'appConfigState';
 
+    appState = signal<any>(null);
     designerActive = signal(false);
-
     newsActive = signal(false);
-
     document = inject(DOCUMENT);
-
     platformId = inject(PLATFORM_ID);
 
-    theme = computed(() => (this.appState().darkTheme ? 'dark' : 'light'));
+    theme = computed(() => (this.appState()?.darkTheme ? 'dark' : 'light'));
 
     constructor() {
+        this.appState.set(this.loadAppState());
         effect(() => {
             const state = this.appState();
+            if (state) {
+                this.saveAppState(state);
 
-            if (isPlatformBrowser(this.platformId)) {
-                if (state.darkTheme) {
-                    this.document.documentElement.classList.add('p-dark');
-                } else {
-                    this.document.documentElement.classList.remove('p-dark');
+                if (isPlatformBrowser(this.platformId)) {
+                    if (state.darkTheme) {
+                        this.document.documentElement.classList.add('p-dark');
+                    } else {
+                        this.document.documentElement.classList.remove('p-dark');
+                    }
                 }
             }
         });
@@ -69,4 +63,28 @@ export class AppConfigService {
     hideDesigner() {
         this.designerActive.set(false);
     }
+
+    private loadAppState(): any {
+        if (isPlatformBrowser(this.platformId)) {
+            const storedState = localStorage.getItem(this.STORAGE_KEY);
+            if (storedState) {
+                return JSON.parse(storedState);
+            }
+        }
+        return {
+            preset: 'Aura',
+            primary: 'noir',
+            surface: 'slate',
+            darkTheme: false,
+            menuActive: false,
+            designerKey: 'primeng-designer-theme',
+            RTL: false
+        };
+    }
+
+    private saveAppState(state: any): void {
+        if (isPlatformBrowser(this.platformId)) {
+            localStorage.setItem(this.STORAGE_KEY, JSON.stringify(state));
+        }
+    }
 }