feat(help): made help-modules matching module access to ensure a personnalized help-page experience.

src/modules/help/components/help-module.vue

@@ -3,25 +3,28 @@
 import default_dashboard from 'src/assets/help-ss/default-dashboard.png';
 import default_personal_profile from 'src/assets/help-ss/default-personnal_profile.png';
 import default_timesheet from 'src/assets/help-ss/default-timesheet.png';
+import default_employee_list from 'src/assets/help-ss/default-employee-list.png';
+import default_employee_management from 'src/assets/help-ss/default-employee-management.png';
+import default_validation_page from 'src/assets/help-ss/default-validation-page.png';
+
 const default_images: Record<HelpModuleKey, string> = {
     dashboard: default_dashboard,
     personal_profile: default_personal_profile,
     timesheets: default_timesheet,
-    employee_list: '',
+    employee_list: default_employee_list,
-    employee_management: '',
+    employee_management: default_employee_management,
-    timesheets_approval: '',
+    timesheets_approval: default_validation_page,
 };
 
-import type { HelpModuleKey } from 'src/modules/help/models/help-module.model';
+import type { HelpModuleKey, HelpModuleOptions } from 'src/modules/help/models/help-module.model';
-import { useHelpStore } from 'src/stores/help-store';
 import { ref } from 'vue';
 
 const props = defineProps<{
     help_module: HelpModuleKey;
+    options: HelpModuleOptions[];
     moduleIndex: number;
 }>();
 
-const help_store = useHelpStore();
 const help_module = props.help_module;
 const current_path = ref<string>(default_images[help_module]);
 
@@ -70,7 +73,7 @@ const switchSide = (index: number) => {
             <div class="col column">
 
                 <q-expansion-item
-                    v-for="option, index in help_store.help_module_options[help_module]"
+                    v-for="option, index in options"
                     :key="index"
                     hide-expand-icon
                     class="bg-gray-2 text-weight-bolder row"

src/modules/help/models/help-module.model.ts

@@ -1,3 +1,11 @@
+export type HelpModuleKey =
+| 'dashboard'
+| 'personal_profile'
+| 'timesheets'
+| 'employee_list'
+| 'employee_management'
+| 'timesheets_approval';
+
 export type HelpModuleOptions = {
     label: string;
     path: string;
@@ -5,15 +13,8 @@ export type HelpModuleOptions = {
     icon: string;
 };
 
-export type HelpModuleKey =
-    | 'dashboard'
-    | 'personal_profile'
-    | 'timesheets'
-    | 'employee_list'
-    | 'employee_management'
-    | 'timesheets_approval';
-
 export type Options = Record<HelpModuleKey, HelpModuleOptions[]>;
+export type PartialOptions = Partial<Record<HelpModuleKey, HelpModuleOptions[]>>;
 
 
 //Shared images and descriptions

src/pages/help-page.vue

@@ -21,10 +21,11 @@ onMounted(async () => {
                 class="text-accent"
             />
             <help-module
-                v-for="help_module, index in help_store.help_modules"
+                v-for="(options, help_module, index) in help_store.help_module_filters"
                 :key="help_module"
                 :help_module="help_module"
                 :module-index="index"
+                :options="options"
             />
         </div>
     </q-page>

src/stores/help-store.ts

@@ -1,12 +1,16 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { HelpService } from "src/modules/help/services/help.service";
-import { type Options, type HelpModuleKey, profile_options, timesheets_options, employee_list_options, employee_management_options, timesheets_approval_options, dashboard_options } from "src/modules/help/models/help-module.model";
+import { profile_options, timesheets_options, employee_list_options, employee_management_options, timesheets_approval_options, dashboard_options } from "src/modules/help/models/help-module.model";
+import type { Options, HelpModuleKey, HelpModuleOptions } from "src/modules/help/models/help-module.model";
+
+
 
 export const useHelpStore = defineStore('help', () => {
     const is_loading = ref(false);
     const help_modules = ref<HelpModuleKey[]>([]);
-    const help_module_options = ref<Options>({
+
+    const help_module_details = ref<Options>({
         dashboard: dashboard_options,
         personal_profile: profile_options,
         timesheets: timesheets_options,
@@ -15,29 +19,40 @@ export const useHelpStore = defineStore('help', () => {
         timesheets_approval: timesheets_approval_options,
     });
 
+    const help_module_filters = computed<Record<HelpModuleKey, HelpModuleOptions[]>>(() => {
+        const entries = help_modules.value
+            .map((key) => {
+                const options = help_module_details.value[key];
+                return options ? ([key, options] as const) : null;
+            })
+            .filter(
+                (entry): entry is readonly [HelpModuleKey, HelpModuleOptions[]] =>
+                    entry !== null
+            );
+
+        return Object.fromEntries(entries) as Record<HelpModuleKey, HelpModuleOptions[]>;
+    });
+
     const getHelpModules = async (): Promise<boolean> => {
         is_loading.value = true;
         try {
             const response = await HelpService.getHelpModules();
             if (response.success && response.data) help_modules.value = response.data;
-            is_loading.value = false;
+
             return response.success;
         } catch (error) {
             console.error('An error occured while fetching Help modules', error);
-
             return false;
+        } finally {
+            is_loading.value = false;
         }
     };
 
-    const buildHelpModuleOptions = () => {
-        //todo: build a custom versions of help_module_options with only the module the employee has access
-    }
-
     return {
         is_loading,
         help_modules,
-        help_module_options,
+        help_module_details,
+        help_module_filters,
         getHelpModules,
-        buildHelpModuleOptions,
+    };
-    }
 });