🎨 #133 improve the loading of preference entry on each component

.github/workflows/ci_cd.yaml

@@ -19,7 +19,7 @@ jobs:
             -   run: git checkout HEAD^2
                 if: ${{ github.event_name == 'pull_request' }}
             -   name: Configure environment
-                run: make dev-env
+                run: make env
             -   name: Use Node.js ${{ matrix.node-version }}
                 uses: actions/setup-node@v3
                 with:

src/jagfx/user-preference/hook/usePreferencesEntry.ts → src/jagfx/preference-entry/hook/usePreferencesEntry.ts

@@ -1,10 +1,12 @@
 import {
   PreferenceEntry,
+  PreferenceEntryCollection,
   PreferenceEntryFilterEdit,
   PreferenceEntryFilters,
   PreferenceEntryId,
   findPreferenceEntryById
 } from 'ets2-dashboard-skin-lib';
+import preferenceEntriesList from 'ets2-dashboard-skin-lib/src/configuration/preference-entry/list.json';
 import { computed, inject, provide, reactive, readonly } from 'vue';
 
 import { preferenceEntryMatchWithFilter } from '@/jagfx/shared/filter';
@@ -14,7 +16,8 @@ const PROVIDE_PREFERENCE_ENTRY = 'provider-preference-entry-id';
 
 const state = reactive<PreferenceEntryFilters>({
   search: '',
-  categories: []
+  categories: [],
+  preferences: PreferenceEntryCollection
 });
 
 const { currentLocale } = useTranslator();
@@ -33,9 +36,22 @@ const getters = {
 };
 
 const actions = {
+  load: (): Promise<void> => {
+    return new Promise<void>((resolve) => {
+      state.preferences = PreferenceEntryCollection.fromArray(
+        preferenceEntriesList
+      );
+
+      resolve();
+    });
+  },
   initProvider: (preferenceEntryId: PreferenceEntryId): PreferenceEntry => {
-    const preferenceEntry: PreferenceEntry =
-      findPreferenceEntryById(preferenceEntryId);
+    const preferenceEntry: PreferenceEntry = findPreferenceEntryById(
+      preferenceEntryId,
+      state.preferences
+    );
+
+    // TODO: Maybe find a better way
     provide(PROVIDE_PREFERENCE_ENTRY, readonly(preferenceEntry));
 
     return preferenceEntry;

src/jagfx/shared/components/ApplicationNext.vue

@@ -1,10 +1,12 @@
 <template>
-  <Navbar>
-    <Menu />
-  </Navbar>
-
   <ToastWrapper />
 
+  <SplashScreen v-if="!hasUserPreferenceLoaded()"> </SplashScreen>
+  <div v-else>
+    <Navbar>
+      <Menu />
+    </Navbar>
+  </div>
   <!--  <h1 class="bg-gradient-accent">New dashboard</h1>-->
   <!--  <p>{{ $t('Skins') }}</p>-->
   <!--  <code>Current locale: {{ currentLocale }}</code-->
@@ -26,8 +28,12 @@
 <script setup lang="ts">
 import Menu from '@/jagfx/menu/components/Menu.vue';
 import Navbar from '@/jagfx/navbar/components/Navbar.vue';
-import { loadUserPreferences } from '@/jagfx/splash-screen/spalsh-screen';
+import SplashScreen from '@/jagfx/splash-screen/components/SplashScreen.vue';
+import { initSplashScreen } from '@/jagfx/splash-screen/splash-screen';
 import ToastWrapper from '@/jagfx/ui/toast/components/ToastWrapper.vue';
+import { useUserPreference } from '@/jagfx/user-preference/hook/useUserPreference';
+
+const { hasUserPreferenceLoaded } = useUserPreference();
 
 //import { useApplicationState } from '@/application/useApplicationState.ts';
 //import { useLogger }           from "@/application/useLogger.ts";
@@ -36,7 +42,7 @@ import ToastWrapper from '@/jagfx/ui/toast/components/ToastWrapper.vue';
 //const { version, isOnDevEnvironment, useFakeData } = useApplicationState();
 //const { currentLocale, changeLocale } = useTranslator();
 //const { logs, pushLog } = useLogger();
-loadUserPreferences();
+initSplashScreen();
 </script>
 
 <style lang="scss">

src/jagfx/splash-screen/splash-screen.ts

@@ -0,0 +1,9 @@
+import { usePreferencesEntry } from '@/jagfx/preference-entry/hook/usePreferencesEntry';
+import { useUserPreference } from '@/jagfx/user-preference/hook/useUserPreference';
+
+const { load: loadPreferenceEntries } = usePreferencesEntry();
+const { load: loadUserPreferences } = useUserPreference();
+
+export const initSplashScreen = () => {
+  loadPreferenceEntries().then(loadUserPreferences);
+};

src/jagfx/user-preference/components/UserPreferenceListItem.vue

@@ -28,8 +28,8 @@
 <script setup lang="ts">
 import { PreferenceEntry } from 'ets2-dashboard-skin-lib';
 
+import { usePreferencesEntry } from '@/jagfx/preference-entry/hook/usePreferencesEntry';
 import Tag from '@/jagfx/ui/atomic/components/Tag.vue';
-import { usePreferencesEntry } from '@/jagfx/user-preference/hook/usePreferencesEntry';
 
 const { isMatchWithFilter, initConsumer } = usePreferencesEntry();
 

src/jagfx/user-preference/components/UserPreferenceSearchBar.vue

@@ -61,8 +61,8 @@
 <script setup lang="ts">
 import { PreferenceEntryCategories } from 'ets2-dashboard-skin-lib';
 
+import { usePreferencesEntry } from '@/jagfx/preference-entry/hook/usePreferencesEntry';
 import Tag from '@/jagfx/ui/atomic/components/Tag.vue';
-import { usePreferencesEntry } from '@/jagfx/user-preference/hook/usePreferencesEntry';
 
 const { current, update, reset } = usePreferencesEntry();
 const preferenceEntryCategories = Object.values(PreferenceEntryCategories);

src/jagfx/user-preference/components/items/UserPreferenceListItemInput.vue

@@ -12,8 +12,8 @@
 <script setup lang="ts">
 import { PreferenceEntryId } from 'ets2-dashboard-skin-lib';
 
+import { usePreferencesEntry } from '@/jagfx/preference-entry/hook/usePreferencesEntry';
 import UserPreferenceListItem from '@/jagfx/user-preference/components/UserPreferenceListItem.vue';
-import { usePreferencesEntry } from '@/jagfx/user-preference/hook/usePreferencesEntry';
 import { useUserPreference } from '@/jagfx/user-preference/hook/useUserPreference';
 
 type UserPreferenceListItemInputProps = {

src/jagfx/user-preference/components/items/UserPreferenceListItemSelect.vue

@@ -32,11 +32,12 @@ import {
   PreferenceEntry,
   PreferenceEntryId,
   PreferenceEntryValue,
+  UserPreference,
   loadPreferenceEntryValues
 } from 'ets2-dashboard-skin-lib';
 
+import { usePreferencesEntry } from '@/jagfx/preference-entry/hook/usePreferencesEntry';
 import UserPreferenceListItem from '@/jagfx/user-preference/components/UserPreferenceListItem.vue';
-import { usePreferencesEntry } from '@/jagfx/user-preference/hook/usePreferencesEntry';
 import { useUserPreference } from '@/jagfx/user-preference/hook/useUserPreference';
 
 const { find, update } = useUserPreference();
@@ -52,7 +53,8 @@ const props = withDefaults(defineProps<UserPreferenceListItemSelectProps>(), {
 });
 
 const preferenceEntry: PreferenceEntry = initProvider(props.preferenceEntryId);
-const currentUserPreference = () => find(props.preferenceEntryId);
+const currentUserPreference = (): UserPreference =>
+  find(props.preferenceEntryId);
 
 const loadValues = (
   preferenceEntry: PreferenceEntry | null

src/jagfx/user-preference/components/items/UserPreferenceListItemSwitch.vue

@@ -10,9 +10,9 @@
 <script setup lang="ts">
 import { PreferenceEntryId } from 'ets2-dashboard-skin-lib';
 
+import { usePreferencesEntry } from '@/jagfx/preference-entry/hook/usePreferencesEntry';
 import Switch from '@/jagfx/ui/atomic/components/Switch.vue';
 import UserPreferenceListItem from '@/jagfx/user-preference/components/UserPreferenceListItem.vue';
-import { usePreferencesEntry } from '@/jagfx/user-preference/hook/usePreferencesEntry';
 import { useUserPreference } from '@/jagfx/user-preference/hook/useUserPreference';
 
 type UserPreferenceListItemSwitchProps = {

src/jagfx/user-preference/hook/useUserPreference.ts

@@ -15,7 +15,7 @@ import {
   getUserPreferences,
   updateUserPreference,
   uploadUserPreferenceFile
-} from '@/jagfx/user-preference/user-preference.api';
+} from '@/jagfx/user-preference/user-preference.manager';
 
 type UseUserPreferenceState = {
   preferences: UserPreferenceCollection;
@@ -30,7 +30,9 @@ const state = reactive<UseUserPreferenceState>({
 
 const getters = {
   find: (id: UserPreferenceId): UserPreference =>
-    findUserPreference(id, state.preferences)
+    findUserPreference(id, state.preferences),
+  hasUserPreferenceLoaded: () => state.preferences.size > 0,
+  preferences: state.preferences
 };
 
 const actions = {
@@ -46,15 +48,15 @@ const actions = {
       }
     );
   },
-  load: () => {
-    getUserPreferences(useFakeData).then(
+  load: (): Promise<UserPreferenceCollection> => {
+    return getUserPreferences(useFakeData).then(
       (userPreferences: UserPreferenceCollection) => {
         const toast: ToastMessage = createToastMessage(
           'User preferences successfully loaded'
         );
         pushToast(toast);
         state.preferences = new UserPreferenceCollection(userPreferences);
-        return userPreferences;
+        return state.preferences;
       }
     );
   },

src/jagfx/user-preference/user-preference.api.ts → src/jagfx/user-preference/user-preference.manager.ts

@@ -37,7 +37,10 @@ export const updateUserPreference = (
 export const getUserPreferences = (useFakeData = false) => {
   if (useFakeData) {
     return new Promise<UserPreferenceCollection>((resolve) => {
-      resolve(UserPreferenceCollection.fromArray(userPreferenceDev));
+      setTimeout(
+        () => resolve(UserPreferenceCollection.fromArray(userPreferenceDev)),
+        1000
+      );
     });
   }