#2490 Refactor how the theme picker works, turn it into a pinia store

NationalSecurityAgency · Jun 21, 2024 · ea1ce97 · ea1ce97
1 parent 1c2fa20
commit ea1ce97
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/dashboard-prime/src/App.vue b/dashboard-prime/src/App.vue
@@ -40,6 +40,7 @@ import { invoke, until } from '@vueuse/core'
 import DashboardFooter from '@/components/header/DashboardFooter.vue'
 import { useUserAgreementInterceptor } from '@/interceptors/UseUserAgreementInterceptor.js'
 import PkiAppBootstrap from '@/components/access/PkiAppBootstrap.vue'
+import {usePrimeVue} from "primevue/config";
 
 const authState = useAuthState()
 const appInfoState = useAppInfoState()
@@ -49,6 +50,7 @@ const accessState = useAccessState()
 const errorHandling = useErrorHandling()
 const userAgreementInterceptor = useUserAgreementInterceptor()
 const route = useRoute()
+const PrimeVue = usePrimeVue()
 
 const customGlobalValidators = useCustomGlobalValidators()
 const globalNavGuards = useGlobalNavGuards()
@@ -76,6 +78,10 @@ watch(() => authState.userInfo, async (newUserInfo) => {
   }
 })
 
+watch(() => themeHelper.currentTheme, (newTheme, oldTheme) => {
+  PrimeVue.changeTheme(oldTheme.value, newTheme.value, 'theme-link')
+})
+
 const iframeInit = useIframeInit()
 onBeforeMount(() => {
   iframeInit.handleHandshake()

diff --git a/dashboard-prime/src/components/header/UseThemesHelper.js b/dashboard-prime/src/components/header/UseThemesHelper.js
@@ -13,16 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useStorage } from '@vueuse/core'
+import { ref } from 'vue';
+import { defineStore } from 'pinia'
 import SettingsService from "@/components/settings/SettingsService.js";
 
-export const useThemesHelper = () => {
+export const useThemesHelper = defineStore('useThemesHelper', () => {
 
   const themeOptions =[
-    { icon: 'fas fa-sun', name: 'Light', value: 'skills-light-green' },
-    { icon: 'fas fa-moon', name: 'Dark', value: 'skills-dark-green' },
+    { name: 'Light', value: 'skills-light-green' },
+    { name: 'Dark', value: 'skills-dark-green' },
   ];
-  const currentTheme = useStorage('currentTheme', themeOptions[0])
+  const currentTheme = ref(themeOptions[0]);
+
+  const setCurrentTheme = (newTheme) => {
+    currentTheme.value = newTheme;
+  }
+
+  const setDarkMode = () => {
+    setCurrentTheme(themeOptions[1]);
+  }
+
+  const setLightMode = () => {
+    setCurrentTheme(themeOptions[0]);
+  }
 
   const loadTheme = () => {
     SettingsService.getUserSettings().then((response) => {
@@ -46,8 +59,11 @@ export const useThemesHelper = () => {
 
   return {
     currentTheme,
+    setCurrentTheme,
+    setDarkMode,
+    setLightMode,
     themeOptions,
     configureDefaultThemeFileInHeadTag,
     loadTheme
   }
-}
+});
diff --git a/dashboard-prime/src/components/settings/Preferences.vue b/dashboard-prime/src/components/settings/Preferences.vue
@@ -19,10 +19,8 @@ import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue'
 import SettingsService from '@/components/settings/SettingsService.js'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
 import { useColors } from '@/skills-display/components/utilities/UseColors.js'
-import {usePrimeVue} from "primevue/config";
 import {useThemesHelper} from "@/components/header/UseThemesHelper.js";
 
-const PrimeVue = usePrimeVue()
 const themeHelper = useThemesHelper()
 const appConfig = useAppConfig();
 const colors = useColors()
@@ -121,8 +119,11 @@ function saveUserSettings(dirtyChanges) {
             // $store.commit('storeUser', userInfo);
           }
           if (key === 'enableDarkMode') {
-            const selectedThemes = value.value ? [themeHelper.themeOptions[0].value, themeHelper.themeOptions[1].value] : [themeHelper.themeOptions[1].value, themeHelper.themeOptions[0].value];
-            PrimeVue.changeTheme(selectedThemes[0], selectedThemes[1], 'theme-link')
+            if(value.value) {
+              themeHelper.setDarkMode();
+            } else {
+              themeHelper.setLightMode();
+            }
           }
         });
       })