feat(help-page): finished help-page

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

@@ -7,7 +7,7 @@ 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<ModuleAccessName, string> = {
+const default_images: Record<UserModuleAccess, string> = {
     dashboard: '',
     personal_profile: default_personal_profile,
     timesheets: default_timesheet,
@@ -17,11 +17,11 @@ const default_images: Record<ModuleAccessName, string> = {
 };
 
 import type { HelpModuleOptions } from 'src/modules/help/models/help-module.model';
+import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
 import { ref } from 'vue';
-import { ModuleAccessName } from 'src/modules/employee-list/models/employee-profile.models';
 
 const props = defineProps<{
-    help_module: ModuleAccessName;
+    help_module: UserModuleAccess;
     options: HelpModuleOptions[];
     moduleIndex: number;
 }>();
@@ -39,7 +39,10 @@ const switchSide = (index: number) => {
 </script>
 
 <template>
-    <div class="column q-my-xs bg-secondary q-py-xl">
+    <div
+        v-if="help_module !== 'dashboard'"
+        class="column q-my-xs bg-secondary q-py-xl"
+    >
         <!-- Card Header -->
         <div
             class="row col-auto text-h5 q-pa-md text-primary bg-secondary"
@@ -91,7 +94,8 @@ const switchSide = (index: number) => {
                                 class="col-auto q-pr-sm"
                                 size="sm"
                             />
-                            <span class="text-accent col-auto text-weight-bolder">{{ $t(option.label).toUpperCase() }}</span>
+                            <span class="text-accent col-auto text-weight-bolder">{{ $t(option.label).toUpperCase()
+                            }}</span>
                             <q-icon
                                 v-if="!switchSide(moduleIndex)"
                                 :name="option.icon"

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

@@ -1,10 +1,4 @@
-// export type HelpModuleKey =
+import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
-//     // | 'dashboard'
-//     | 'personal_profile'
-//     | 'timesheets'
-//     | 'employee_list'
-//     | 'employee_management'
-//     | 'timesheets_approval';
 
 export type HelpModuleOptions = {
     label: string;
@@ -13,8 +7,8 @@ export type HelpModuleOptions = {
     icon: string;
 };
 
-export type Options = Record<ModuleAccessName, HelpModuleOptions[]>;
+export type Options = Record<UserModuleAccess, HelpModuleOptions[]>;
-export type PartialOptions = Partial<Record<ModuleAccessName, HelpModuleOptions[]>>;
+export type PartialOptions = Partial<Record<UserModuleAccess, HelpModuleOptions[]>>;
 
 
 
@@ -126,7 +120,7 @@ import comment_expense from 'src/assets/help-ss/timesheet-details.png';
 import timesheet_approval_inspect from 'src/assets/help-ss/timesheet-approvals.png';
 import timesheet_details from 'src/assets/help-ss/timesheet-details.png';
 import timesheet_approval_list from 'src/assets/help-ss/timesheet-appovals-list.png';
-import { ModuleAccessName } from 'src/modules/employee-list/models/employee-profile.models';
+
 
 const comment_expense_desc = "descriptions.timesheets_approval.comment_expense";
 const timesheets_approval_desc = "descriptions.timesheets_approval.approval";

src/modules/help/services/help.service.ts

@@ -1,10 +1,10 @@
 import { api } from "src/boot/axios";
-import { ModuleAccessName } from "src/modules/employee-list/models/employee-profile.models";
 import type { BackendResponse } from "src/modules/shared/models/backend-response.models";
+import type { UserModuleAccess } from "src/modules/shared/models/user.models";
 
 export const HelpService = {
-    getHelpModules: async (): Promise<BackendResponse<ModuleAccessName[]>> => {
+    getHelpModules: async (): Promise<BackendResponse<UserModuleAccess[]>> => {
-        const response = await api.get<BackendResponse<ModuleAccessName[]>>(`/help`);
+        const response = await api.get<BackendResponse<UserModuleAccess[]>>(`/help`);
         return response.data;
     }
 }

src/modules/shared/models/user.models.ts

@@ -3,7 +3,7 @@ export interface User {
     last_name: string;
     email: string;
     role: UserRole;
-    user_module_access: UserModuleAccess;
+    user_module_access: UserModuleAccess[];
 }
 
 export type UserRole = 'ADMIN' | 'SUPERVISOR' | 'HR' | 'ACCOUNTING' | 'EMPLOYEE' | 'DEALER' | 'CUSTOMER' | 'GUEST';

src/pages/help-page.vue

@@ -5,8 +5,8 @@ import { onMounted } from 'vue';
 import { useHelpStore } from 'src/stores/help-store';
 
 const help_store = useHelpStore();
-onMounted(async () => {
+onMounted(() => {
-    await help_store.getHelpModules();
+    help_store.getFilteredModule();
 });
 </script>
 
@@ -21,7 +21,7 @@ onMounted(async () => {
                 class="text-accent"
             />
             <help-module
-                v-for="(options, help_module, index) in help_store.help_module_filters"
+                v-for="(options, help_module, index) in help_store.user_modules"
                 :key="help_module"
                 :help_module="help_module"
                 :module-index="index"

src/stores/help-store.ts

@@ -1,56 +1,37 @@
 import { defineStore } from "pinia";
-import { computed, ref } from "vue";
+import { ref } from "vue";
-import { HelpService } from "src/modules/help/services/help.service";
 import { help_module_details } from "src/modules/help/models/help-module.model";
-import type { HelpModuleOptions } from "src/modules/help/models/help-module.model";
-import { ModuleAccessName } from "src/modules/employee-list/models/employee-profile.models";
 import { useAuthStore } from "src/stores/auth-store";
+import type { HelpModuleOptions } from "src/modules/help/models/help-module.model";
+import type { UserModuleAccess } from "src/modules/shared/models/user.models";
 
 
 
 export const useHelpStore = defineStore('help', () => {
     const is_loading = ref(false);
+    const user_modules = ref<Record<UserModuleAccess, HelpModuleOptions[]>>();
     const auth_store = useAuthStore();
 
     const getFilteredModule = () => {
+        if(!auth_store.user) return;
 
-    }
+        const entries = auth_store.user.user_module_access
-    
-    
-    <Record<ModuleAccessName, HelpModuleOptions[]>>(() => {
-        const entries = help_modules.value
             .map((key) => {
                 const options = help_module_details[key];
                 return options ? ([key, options] as const) : null;
             })
             .filter(
-                (entry): entry is readonly [ModuleAccessName, HelpModuleOptions[]] =>
+                (entry): entry is readonly [UserModuleAccess, HelpModuleOptions[]] =>
                     entry !== null
             );
 
-        return Object.fromEntries(entries) as Record<ModuleAccessName, HelpModuleOptions[]>;
+        user_modules.value = Object.fromEntries(entries) as Record<UserModuleAccess, 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;
-
-    //         return response.success;
-    //     } catch (error) {
-    //         console.error('An error occured while fetching Help modules', error);
-    //         return false;
-    //     } finally {
-    //         is_loading.value = false;
-    //     }
-    // };
 
     return {
         is_loading,
-        help_modules,
+        user_modules,
         help_module_details,
-        help_module_filters,
+        getFilteredModule,
-        // getHelpModules,
     };
 });